From 6bddb9107c56753cccd5c07a58dc912f6407ce8c Mon Sep 17 00:00:00 2001 From: GeorgeGkas Date: Fri, 24 Oct 2025 16:54:13 +0300 Subject: [PATCH 1/2] fix: inconsistent close button size on swaps --- .../BridgeDestNetworkSelector.test.tsx.snap | 665 ++++--- .../BridgeDestTokenSelector.test.tsx.snap | 12 +- .../components/BridgeNetworkSelectorBase.tsx | 80 +- .../BridgeSourceNetworkSelector.test.tsx.snap | 1553 ++++++++--------- .../BridgeSourceTokenSelector.test.tsx.snap | 12 +- .../components/BridgeTokenSelectorBase.tsx | 6 +- 6 files changed, 1113 insertions(+), 1215 deletions(-) diff --git a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap index 0efb066f6177..5a677943de6b 100644 --- a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap @@ -433,447 +433,414 @@ exports[`BridgeDestNetworkSelector renders with initial state and displays netwo + + + - + + + + - - - Select network - - - - - - - - + } + width={24} + /> + - + + + - + } + } + > - - + - - - - - - - Optimism - - + } + testID="network-avatar-image" + /> + + Optimism + - - + + + + + - - - - - - Solana - - + } + testID="network-avatar-image" + /> + + Solana + - - + + + + + - - - - - - Bitcoin - - + } + testID="network-avatar-image" + /> + + Bitcoin + - + - - + + - + diff --git a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap index 9c3381d3e746..c753731859a2 100644 --- a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap @@ -499,10 +499,10 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens { "alignItems": "center", "borderRadius": 8, - "height": 28, + "height": 32, "justifyContent": "center", "opacity": 1, - "width": 28, + "width": 32, } } testID="bridge-token-selector-close-button" @@ -510,15 +510,15 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens diff --git a/app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx b/app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx index 12be0d267779..04a4c02240ee 100644 --- a/app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx +++ b/app/components/UI/Bridge/components/BridgeNetworkSelectorBase.tsx @@ -1,41 +1,20 @@ import React from 'react'; -import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native'; -import { Box } from '../../Box/Box'; +import { ScrollView, StyleSheet } from 'react-native'; import Text, { TextVariant, } from '../../../../component-library/components/Texts/Text'; -import { useStyles } from '../../../../component-library/hooks'; -import { Theme } from '../../../../util/theme/models'; import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader'; import BottomSheet from '../../../../component-library/components/BottomSheets/BottomSheet'; -import Icon, { - IconName, -} from '../../../../component-library/components/Icons/Icon'; -import { IconSize } from '../../../../component-library/components/Icons/Icon/Icon.types'; import { strings } from '../../../../../locales/i18n'; -import { FlexDirection, AlignItems, JustifyContent } from '../../Box/box.types'; +import { ButtonIconSizes } from '../../../../component-library/components/Buttons/ButtonIcon'; import { useNavigation } from '@react-navigation/native'; -const createStyles = (params: { theme: Theme }) => { - const { theme } = params; - return StyleSheet.create({ - content: { - flex: 1, - backgroundColor: theme.colors.background.default, - }, - headerTitle: { - flex: 1, - textAlign: 'center', - }, - closeButton: { - position: 'absolute', - right: 0, - }, - closeIconBox: { - padding: 8, - }, - }); -}; +const styles = StyleSheet.create({ + headerTitle: { + flex: 1, + textAlign: 'center', + }, +}); interface BridgeNetworkSelectorBaseProps { children: React.ReactNode; @@ -44,42 +23,23 @@ interface BridgeNetworkSelectorBaseProps { export const BridgeNetworkSelectorBase: React.FC< BridgeNetworkSelectorBaseProps > = ({ children }) => { - const { styles, theme } = useStyles(createStyles, {}); const navigation = useNavigation(); return ( - - - - - - {strings('bridge.select_network')} - - - navigation.goBack()} - testID="bridge-network-selector-close-button" - > - - - - - - + navigation.goBack()} + closeButtonProps={{ + testID: 'bridge-network-selector-close-button', + size: ButtonIconSizes.Lg, + }} + > + + {strings('bridge.select_network')} + + - - {children} - - + {children} ); }; diff --git a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap index 4303aa4d0732..8ced2bf24e50 100644 --- a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap @@ -433,989 +433,956 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net + + + + + Select network + + + + + + + + + + + + - - - - Select network - - - - - - - - + Deselect all + + - - - + } + } + > - - - Deselect all - - - - - - - - - + + + + + + - - - - - + + - + Ethereum Mainnet + + + + - - - - - - Ethereum Mainnet - - - - - $22600 - - - + $22600 + - - + + + + + - - + + + + + + - - - - - + + - + Optimism + + + + - - - - - - Optimism - - - - - $12000 - - - + $12000 + - - + + + + + - - + + + + + + - - - - - + + - + Solana + + + + - - - - - - Solana - - - - - $30012.75599 - - - + $30012.75599 + - - + + + + + - - + + + + + + - - - - - + + - + Bitcoin + + + + - - - - - - Bitcoin - - - - - $1500 - - - + $1500 + - + - - - - - - Apply - + + + + Apply + + + - + diff --git a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap index bdf8457074ae..919880b1dc42 100644 --- a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap @@ -499,10 +499,10 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token { "alignItems": "center", "borderRadius": 8, - "height": 28, + "height": 32, "justifyContent": "center", "opacity": 1, - "width": 28, + "width": 32, } } testID="bridge-token-selector-close-button" @@ -510,15 +510,15 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token diff --git a/app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx b/app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx index 2ad77c0abf1b..29b604cd743a 100644 --- a/app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx +++ b/app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx @@ -20,6 +20,7 @@ import { FlatList } from 'react-native-gesture-handler'; import BottomSheet, { BottomSheetRef, } from '../../../../component-library/components/BottomSheets/BottomSheet'; +import { ButtonIconSizes } from '../../../../component-library/components/Buttons/ButtonIcon'; // FlashList on iOS had some issues so we use FlatList for both platforms now const ListComponent = FlatList; @@ -221,7 +222,10 @@ export const BridgeTokenSelectorBase: React.FC< > {title ?? strings('bridge.select_token')} From 1aa4a076ddc718f875c62f08b183fc2d277e5449 Mon Sep 17 00:00:00 2001 From: GeorgeGkas Date: Fri, 24 Oct 2025 18:27:35 +0300 Subject: [PATCH 2/2] test: update snapshots --- .../__snapshots__/BridgeDestNetworkSelector.test.tsx.snap | 2 ++ .../__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap | 2 ++ 2 files changed, 4 insertions(+) diff --git a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap index 5a677943de6b..62e8094525bb 100644 --- a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap @@ -468,10 +468,12 @@ exports[`BridgeDestNetworkSelector renders with initial state and displays netwo style={ { "color": "#121314", + "flex": 1, "fontFamily": "Geist Bold", "fontSize": 18, "letterSpacing": 0, "lineHeight": 24, + "textAlign": "center", } } > diff --git a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap index 8ced2bf24e50..336d415e9052 100644 --- a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap @@ -468,10 +468,12 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net style={ { "color": "#121314", + "flex": 1, "fontFamily": "Geist Bold", "fontSize": 18, "letterSpacing": 0, "lineHeight": 24, + "textAlign": "center", } } >