Skip to content

chore: remove Text component wrappers from BottomSheetHeader children #22173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 12, 2025
+88 −115
Merged

chore: remove Text component wrappers from BottomSheetHeader children #22173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57e9d55
chore: removing text component in favor of bottom sheet header wrapper
georgewrmarshall Nov 5, 2025
e54ab38
chore: updating snapshots
georgewrmarshall Nov 5, 2025
98f489f
chore: fixing tests and reverting text component in non text only header
georgewrmarshall Nov 7, 2025
ddcd7e7
chore: updating snapshot
georgewrmarshall Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ const BlockaidModal = () => {
return (
<BottomSheet ref={sheetRef}>
<BottomSheetHeader onClose={handleClose}>
<Text variant={TextVariant.HeadingMD}>
{strings(`blockaid_modal.${errorType}_title`)}
</Text>
{strings(`blockaid_modal.${errorType}_title`)}
</BottomSheetHeader>
<View style={styles.container}>
<Text variant={TextVariant.BodyMD} style={styles.errorMessage}>
Expand Down
4 changes: 2 additions & 2 deletions ...omponents/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,14 +468,14 @@ exports[`BridgeDestNetworkSelector renders with initial state and displays netwo
style={
{
"color": "#121314",
"flex": 1,
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Select network
</Text>
Expand Down
4 changes: 3 additions & 1 deletion ...ge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,11 +469,13 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Select token
</Text>
Expand Down
17 changes: 3 additions & 14 deletions app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import Text, {
TextVariant,
} from '../../../../component-library/components/Texts/Text';
import { ScrollView } from 'react-native';

import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader';
import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet';
import { strings } from '../../../../../locales/i18n';
import { ButtonIconSizes } from '../../../../component-library/components/Buttons/ButtonIcon';
import { useNavigation } from '@react-navigation/native';

const styles = StyleSheet.create({
headerTitle: {
flex: 1,
textAlign: 'center',
},
});

interface BridgeNetworkSelectorBaseProps {
children: React.ReactNode;
}
Expand All @@ -34,9 +25,7 @@ export const BridgeNetworkSelectorBase: React.FC<
size: ButtonIconSizes.Lg,
}}
>
<Text variant={TextVariant.HeadingMD} style={styles.headerTitle}>
{strings('bridge.select_network')}
</Text>
{strings('bridge.select_network')}
</BottomSheetHeader>

<ScrollView>{children}</ScrollView>
Expand Down
4 changes: 2 additions & 2 deletions ...nents/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,14 +468,14 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net
style={
{
"color": "#121314",
"flex": 1,
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Select network
</Text>
Expand Down
4 changes: 3 additions & 1 deletion ...omponents/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,11 +469,13 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Select token
</Text>
Expand Down
5 changes: 1 addition & 4 deletions app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Box } from '../../Box/Box';
import Text, {
TextVariant,
TextColor,
} from '../../../../component-library/components/Texts/Text';
import { useStyles } from '../../../../component-library/hooks';
Expand Down Expand Up @@ -227,9 +226,7 @@ export const BridgeTokenSelectorBase: React.FC<
size: ButtonIconSizes.Lg,
}}
>
<Text variant={TextVariant.HeadingMD}>
{title ?? strings('bridge.select_token')}
</Text>
{title ?? strings('bridge.select_token')}
</BottomSheetHeader>

<Box style={styles.buttonContainer} gap={20}>
Expand Down
4 changes: 1 addition & 3 deletions app/components/UI/Bridge/components/QuoteExpiredModal/QuoteExpiredModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,7 @@ const QuoteExpiredModal = () => {
return (
<BottomSheet ref={sheetRef}>
<BottomSheetHeader onClose={handleClose}>
<Text variant={TextVariant.HeadingMD}>
{strings('quote_expired_modal.title')}
</Text>
{strings('quote_expired_modal.title')}
</BottomSheetHeader>
<View style={styles.container}>
<Text variant={TextVariant.BodyMD}>
Expand Down
4 changes: 3 additions & 1 deletion ...ents/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,11 +168,13 @@ exports[`QuoteExpiredModal renders correctly 1`] = `
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
New quotes are available
</Text>
Expand Down
4 changes: 3 additions & 1 deletion app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,11 +168,13 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Slippage
</Text>
Expand Down
8 changes: 2 additions & 6 deletions app/components/UI/Bridge/components/SlippageModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useTheme } from '../../../../../util/theme';
import { strings } from '../../../../../../locales/i18n';
import Text, {
TextVariant,
} from '../../../../../component-library/components/Texts/Text';
import Text from '../../../../../component-library/components/Texts/Text';
import BottomSheet, {
BottomSheetRef,
} from '../../../../../component-library/components/BottomSheets/BottomSheet';
Expand Down Expand Up @@ -65,9 +63,7 @@ export const SlippageModal = () => {
return (
<BottomSheet ref={sheetRef}>
<BottomSheetHeader onClose={handleClose}>
<Text variant={TextVariant.HeadingMD}>
{strings('bridge.slippage')}
</Text>
{strings('bridge.slippage')}
</BottomSheetHeader>
<View style={styles.container}>
<Text style={styles.description}>
Expand Down
4 changes: 1 addition & 3 deletions app/components/UI/Bridge/components/TransactionDetails/BlockExplorersModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,7 @@ const BlockExplorersModal = (props: BlockExplorersModalProps) => {
return (
<BottomSheet>
<BottomSheetHeader>
<Text variant={TextVariant.HeadingMD}>
{strings('bridge_transaction_details.view_on_block_explorer')}
</Text>
{strings('bridge_transaction_details.view_on_block_explorer')}
</BottomSheetHeader>
<Box
style={styles.container}
Expand Down
24 changes: 12 additions & 12 deletions app/components/UI/NetworkManager/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,16 +467,6 @@ jest.mock('../../Views/AccountAction', () => {
);
});

jest.mock(
'../../../component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader',
() => {
const { View: RNView } = jest.requireActual('react-native');
return ({ children }: { children: React.ReactNode }) => (
<RNView testID="bottom-sheet-header">{children}</RNView>
);
},
);

Comment on lines -470 to -479
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why we are mocking this. This test file has a lot of unneeded mock anti patterns

jest.mock(
'../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter',
() => {
Expand Down Expand Up @@ -536,6 +526,16 @@ jest.mock('../../../component-library/components/Icons/Icon', () => ({
IconName: {
Edit: 'edit',
Trash: 'trash',
ArrowLeft: 'arrow-left',
Close: 'close',
},
IconSize: {
Sm: 'sm',
Md: 'md',
Lg: 'lg',
},
IconColor: {
Default: 'default',
},
}));

Expand Down Expand Up @@ -816,7 +816,7 @@ describe('NetworkManager Component', () => {

expect(mockOnCloseBottomSheet).toHaveBeenCalled();
await waitFor(() => {
expect(getByTestId('bottom-sheet-header')).toBeOnTheScreen();
expect(getByTestId('header')).toBeOnTheScreen();
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the root test id header from the HeaderBase component. The BottomSheetHeader wasn't build to accept unique data test ids which is a problem

expect(getByTestId('bottom-sheet-footer')).toBeOnTheScreen();
});
});
Expand All @@ -833,7 +833,7 @@ describe('NetworkManager Component', () => {
});

await waitFor(() => {
expect(getByTestId('bottom-sheet-header')).toBeOnTheScreen();
expect(getByTestId('header')).toBeOnTheScreen();
// The network name appears as part of a larger text string, use partial match
expect(getByText(/Ethereum Mainnet/)).toBeOnTheScreen();
expect(getByText(/app_settings\.network_delete/)).toBeOnTheScreen();
Expand Down
6 changes: 1 addition & 5 deletions app/components/UI/NetworkManager/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,11 +422,7 @@ const NetworkManager = () => {
shouldNavigateBack={false}
>
<BottomSheetHeader>
<Text variant={TextVariant.HeadingMD}>
{strings('app_settings.delete')}{' '}
{showConfirmDeleteModal.networkName}{' '}
{strings('asset_details.network')}
</Text>
{`${strings('app_settings.delete')} ${showConfirmDeleteModal.networkName} ${strings('asset_details.network')}`}
</BottomSheetHeader>
<View style={styles.containerDeleteText}>
<Text style={styles.textCentred}>
Expand Down
4 changes: 1 addition & 3 deletions ...ts/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,7 @@ function PaymentMethodSelectorModal() {
return (
<BottomSheet ref={sheetRef} shouldNavigateBack>
<BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
<Text variant={TextVariant.HeadingMD}>
{strings('deposit.payment_modal.select_a_payment_method')}
</Text>
{strings('deposit.payment_modal.select_a_payment_method')}
</BottomSheetHeader>

<FlatList
Expand Down
4 changes: 3 additions & 1 deletion .../Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,11 +468,13 @@ exports[`PaymentMethodSelectorModal Component renders correctly and matches snap
{
"color": "#121314",
"fontFamily": "Geist Bold",
"fontSize": 18,
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"textAlign": "center",
}
}
testID="header-title"
>
Select a Payment Method
</Text>
Expand Down
4 changes: 1 addition & 3 deletions app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,7 @@ function RegionSelectorModal() {
return (
<BottomSheet ref={sheetRef} shouldNavigateBack>
<BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
<Text variant={TextVariant.HeadingMD}>
{strings('deposit.region_modal.select_a_region')}
</Text>
{strings('deposit.region_modal.select_a_region')}
</BottomSheetHeader>
<View style={styles.searchContainer}>
<TextFieldSearch
Expand Down
Loading
Loading