From 033b8bf5f80becaf5643c0b445b1bfa87b5bf76c Mon Sep 17 00:00:00 2001 From: salimtb Date: Sun, 8 Dec 2024 01:48:01 +0100 Subject: [PATCH 1/5] fix: fix network selector bug --- .../NetworkSelector/NetworkSelector.styles.ts | 22 + .../NetworkSelector/NetworkSelector.test.tsx | 26 + .../Views/NetworkSelector/NetworkSelector.tsx | 302 ++-- .../NetworkSelector.test.tsx.snap | 1458 ++++++++--------- 4 files changed, 934 insertions(+), 874 deletions(-) diff --git a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts index f04457d2b89..9aece45fafb 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts +++ b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts @@ -154,6 +154,28 @@ const createStyles = (colors: Colors) => fontSize: 10, marginTop: 4, }, + screen: { justifyContent: 'flex-end' }, + scrollableDescription: { + maxHeight: Device.getDeviceHeight() * 0.7, + }, + sheet: { + backgroundColor: colors.background.default, + borderTopLeftRadius: 20, + borderTopRightRadius: 20, + }, + title: { + textAlign: 'center', + marginTop: 8, + marginBottom: 8, + }, + notch: { + width: 48, + height: 5, + borderRadius: 4, + backgroundColor: colors.border.default, + marginTop: 8, + alignSelf: 'center', + }, searchContainer: { marginLeft: 16, marginRight: 16, diff --git a/app/components/Views/NetworkSelector/NetworkSelector.test.tsx b/app/components/Views/NetworkSelector/NetworkSelector.test.tsx index 9e4c7ffefde..3866801562d 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.test.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import { fireEvent, waitFor } from '@testing-library/react-native'; + // External dependencies import renderWithProvider from '../../../util/test/renderWithProvider'; import Engine from '../../../core/Engine'; @@ -57,6 +58,15 @@ jest.mock('../../../core/Engine', () => ({ }, PreferencesController: { setShowTestNetworks: jest.fn(), + setTokenNetworkFilter: jest.fn(), + tokenNetworkFilter: { + '0x1': true, + '0xe708': true, + '0xa86a': true, + '0x89': true, + '0xa': true, + '0x64': true, + }, }, CurrencyRateController: { updateExchangeRate: jest.fn() }, AccountTrackerController: { refresh: jest.fn() }, @@ -205,6 +215,14 @@ const initialState = { }, PreferencesController: { showTestNetworks: false, + tokenNetworkFilter: { + '0x1': true, + '0xe708': true, + '0xa86a': true, + '0x89': true, + '0xa': true, + '0x64': true, + }, }, NftController: { allNfts: { '0x': { '0x1': [] } }, @@ -349,6 +367,14 @@ describe('Network Selector', () => { ...initialState.engine.backgroundState, PreferencesController: { showTestNetworks: true, + tokenNetworkFilter: { + '0x1': true, + '0xe708': true, + '0xa86a': true, + '0x89': true, + '0xa': true, + '0x64': true, + }, }, NetworkController: { selectedNetworkClientId: 'sepolia', diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx index 3567d9db256..76f11bd2224 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.tsx @@ -1,6 +1,7 @@ // Third party dependencies. import { ImageSourcePropType, + KeyboardAvoidingView, Linking, Switch, TouchableOpacity, @@ -12,7 +13,6 @@ import images from 'images/image-icons'; import { useNavigation, useRoute, RouteProp } from '@react-navigation/native'; // External dependencies. -import SheetHeader from '../../../component-library/components/Sheet/SheetHeader'; import Cell, { CellVariant, } from '../../../component-library/components/Cells/Cell'; @@ -26,7 +26,10 @@ import BottomSheet, { } from '../../../component-library/components/BottomSheets/BottomSheet'; import { IconName } from '../../../component-library/components/Icons/Icon'; import { useSelector } from 'react-redux'; -import { selectNetworkConfigurations } from '../../../selectors/networkController'; +import { + selectNetworkConfigurations, + selectIsAllNetworks, +} from '../../../selectors/networkController'; import { selectShowTestNetworks } from '../../../selectors/preferencesController'; import Networks, { getAllNetworks, @@ -90,6 +93,9 @@ import { } from '../../../util/trace'; import { getTraceTags } from '../../../util/sentry/tags'; import { store } from '../../../store'; +import ReusableModal, { ReusableModalRef } from '../../UI/ReusableModal'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Device from '../../../util/device'; interface infuraNetwork { name: string; @@ -121,8 +127,11 @@ const NetworkSelector = () => { const { trackEvent, createEventBuilder } = useMetrics(); const { colors } = theme; const styles = createStyles(colors); - const sheetRef = useRef(null); + // const sheetRef = useRef(null); + const sheetRef = useRef(null); const showTestNetworks = useSelector(selectShowTestNetworks); + const isAllNetworks = useSelector(selectIsAllNetworks); + const safeAreaInsets = useSafeAreaInsets(); const networkConfigurations = useSelector(selectNetworkConfigurations); @@ -143,6 +152,7 @@ const NetworkSelector = () => { networkName: selectedNetworkName, } = useNetworkInfo(origin); + const KEYBOARD_OFFSET = 120; const avatarSize = isNetworkUiRedesignEnabled() ? AvatarSize.Sm : undefined; const modalTitle = isNetworkUiRedesignEnabled() ? 'networks.additional_network_information_title' @@ -173,6 +183,18 @@ const NetworkSelector = () => { isReadOnly: false, }); + const setTokenNetworkFilter = useCallback( + (chainId: string) => { + const { PreferencesController } = Engine.context; + if (!isAllNetworks) { + PreferencesController.setTokenNetworkFilter({ + [chainId]: true, + }); + } + }, + [isAllNetworks], + ); + const onRpcSelect = useCallback( async (clientId: string, chainId: `0x${string}`) => { const { NetworkController } = Engine.context; @@ -262,7 +284,8 @@ const NetworkSelector = () => { await NetworkController.setActiveNetwork(networkClientId); } - sheetRef.current?.onCloseBottomSheet(); + setTokenNetworkFilter(chainId); + sheetRef.current?.dismissModal(); endTrace({ name: TraceName.SwitchCustomNetwork }); endTrace({ name: TraceName.NetworkSwitch }); trackEvent( @@ -376,6 +399,7 @@ const NetworkSelector = () => { networkConfiguration.defaultRpcEndpointIndex ].networkClientId ?? type; + setTokenNetworkFilter(networkConfiguration.chainId); NetworkController.setActiveNetwork(clientId); closeRpcModal(); AccountTrackerController.refresh(); @@ -385,7 +409,7 @@ const NetworkSelector = () => { }, 1000); } - sheetRef.current?.onCloseBottomSheet(); + sheetRef.current?.dismissModal(); endTrace({ name: TraceName.SwitchBuiltInNetwork }); endTrace({ name: TraceName.NetworkSwitch }); trackEvent( @@ -430,10 +454,10 @@ const NetworkSelector = () => { const renderMainnet = () => { const { name: mainnetName, chainId } = Networks.mainnet; const rpcEndpoints = networkConfigurations?.[chainId]?.rpcEndpoints; - const rpcUrl = - rpcEndpoints?.[networkConfigurations?.[chainId]?.defaultRpcEndpointIndex] - .url; + networkConfigurations?.[chainId]?.rpcEndpoints?.[ + networkConfigurations?.[chainId]?.defaultRpcEndpointIndex + ].url; const name = networkConfigurations?.[chainId]?.name ?? mainnetName; if (isNetworkUiRedesignEnabled() && isNoSearchResults(MAINNET)) return null; @@ -497,8 +521,9 @@ const NetworkSelector = () => { const name = networkConfigurations?.[chainId]?.name ?? lineaMainnetName; const rpcEndpoints = networkConfigurations?.[chainId]?.rpcEndpoints; const rpcUrl = - rpcEndpoints?.[networkConfigurations?.[chainId]?.defaultRpcEndpointIndex] - .url; + networkConfigurations?.[chainId]?.rpcEndpoints?.[ + networkConfigurations?.[chainId]?.defaultRpcEndpointIndex + ].url; if (isNetworkUiRedesignEnabled() && isNoSearchResults('linea-mainnet')) return null; @@ -721,7 +746,7 @@ const NetworkSelector = () => { }; const goToNetworkSettings = () => { - sheetRef.current?.onCloseBottomSheet(() => { + sheetRef.current?.dismissModal(() => { navigate(Routes.ADD_NETWORK, { shouldNetworkSwitchPopToWallet: false, shouldShowPopularNetworks: false, @@ -863,140 +888,145 @@ const NetworkSelector = () => { const renderBottomSheetContent = () => ( <> - - - {isNetworkUiRedesignEnabled() && ( - - - - )} - {isNetworkUiRedesignEnabled() && - searchString.length === 0 && - renderEnabledNetworksTitle()} - {renderMainnet()} - {renderLineaMainnet()} - {renderRpcNetworks()} - {isNetworkUiRedesignEnabled() && - searchString.length === 0 && - renderPopularNetworksTitle()} - {isNetworkUiRedesignEnabled() && renderAdditonalNetworks()} - {searchString.length === 0 && renderTestNetworksSwitch()} - {showTestNetworks && renderOtherNetworks()} - - -