From c19c471e32b98268c0934975c20b1af22ea164d7 Mon Sep 17 00:00:00 2001 From: salimtb Date: Thu, 10 Oct 2024 15:41:58 +0200 Subject: [PATCH] Merge branch 'salim/bump-network-controller-21.0.0-migration' into salim/default-rpc-feature --- .../ListItemMultiSelectButton.constants.ts | 1 + app/components/Nav/App/index.js | 5 - app/components/Nav/Main/index.js | 1 - .../UI/NetworkModal/NetworkAdded/index.tsx | 5 +- .../NetworkSwitcher.test.tsx.snap | 72 +-- .../Views/NetworkSelector/NetworkSelector.tsx | 20 +- .../NetworksSettings/NetworkSettings/index.js | 464 +++++++++++++++--- .../__snapshots__/index.test.tsx.snap | 5 +- app/util/hideKeyFromUrl.test.ts | 70 ++- app/util/hideKeyFromUrl.ts | 8 + .../networks/isNetworkUiRedesignEnabled.ts | 3 +- e2e/pages/Settings/NetworksView.js | 35 ++ e2e/pages/modals/NetworkListModal.js | 51 ++ .../Modals/NetworkListModal.selectors.js | 2 + .../Settings/NetworksView.selectors.js | 4 + e2e/specs/assets/nft-detection-modal.spec.js | 2 +- e2e/specs/networks/add-custom-rpc.spec.js | 92 ++-- .../networks/add-popular-networks.spec.js | 17 +- .../networks/connect-test-network.spec.js | 4 + e2e/specs/networks/networks-search.spec.js | 42 +- e2e/specs/wallet/send-ERC-token.spec.js | 2 + e2e/viewHelper.js | 12 +- 22 files changed, 708 insertions(+), 209 deletions(-) diff --git a/app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.constants.ts b/app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.constants.ts index fa1de756de16..06fa3a2118c9 100644 --- a/app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.constants.ts +++ b/app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.constants.ts @@ -8,6 +8,7 @@ import { ListItemMultiSelectButtonProps } from './ListItemMultiSelectButton.type // Defaults export const DEFAULT_LISTITEMMULTISELECT_GAP = 16; export const BUTTON_TEST_ID = 'button-menu-select-test-id'; +export const BUTTON_TEXT_TEST_ID = 'button-text-select-test-id'; // Sample consts export const SAMPLE_LISTITEMMULTISELECT_PROPS: ListItemMultiSelectButtonProps = diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js index 62c6ad6b7dc4..a587ef6c3ae6 100644 --- a/app/components/Nav/App/index.js +++ b/app/components/Nav/App/index.js @@ -711,11 +711,6 @@ const App = (props) => { component={MultiRpcModal} /> ) : null} - - { networkImageSource: networkImage, }); } - previousNetworkConfigurations.current = networkConfigurations; }, [networkConfigurations, networkName, networkImage, toastRef]); diff --git a/app/components/UI/NetworkModal/NetworkAdded/index.tsx b/app/components/UI/NetworkModal/NetworkAdded/index.tsx index 17a9e360336b..d4dc06b8dc68 100644 --- a/app/components/UI/NetworkModal/NetworkAdded/index.tsx +++ b/app/components/UI/NetworkModal/NetworkAdded/index.tsx @@ -14,6 +14,9 @@ const createStyles = (colors: any) => flexDirection: 'row', paddingVertical: 16, }, + base: { + padding: 16, + }, button: { flex: 1, }, @@ -41,7 +44,7 @@ const NetworkAdded = (props: NetworkAddedProps) => { const styles = createStyles(colors); return ( - + {strings('networks.new_network')} diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap index 7f21f4f59075..92cb998fc5d8 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap +++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap @@ -549,7 +549,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -703,7 +703,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -1444,7 +1444,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -1492,10 +1492,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -1598,7 +1595,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -1648,10 +1645,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -2297,7 +2291,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -2451,7 +2445,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -2605,7 +2599,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -2653,10 +2647,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -2759,7 +2750,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -2809,10 +2800,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -3458,7 +3446,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -3612,7 +3600,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -3766,7 +3754,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -3814,10 +3802,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -3920,7 +3905,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -3970,10 +3955,7 @@ exports[`NetworkSwitcher View renders correctly 1`] = ` }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -4619,7 +4601,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -4773,7 +4755,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -4927,7 +4909,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -4975,10 +4957,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, @@ -5081,7 +5060,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` { "borderRadius": 10, "height": 20, - "marginRight": 10, + "marginRight": 20, "width": 20, } } @@ -5131,10 +5110,7 @@ exports[`NetworkSwitcher View renders correctly 2`] = ` }, undefined, undefined, - { - "fontFamily": "EuclidCircularB-Bold", - "fontWeight": "600", - }, + false, undefined, undefined, undefined, diff --git a/app/components/Views/NetworkSelector/NetworkSelector.tsx b/app/components/Views/NetworkSelector/NetworkSelector.tsx index 112884966e7c..b585ec084e24 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.tsx +++ b/app/components/Views/NetworkSelector/NetworkSelector.tsx @@ -451,6 +451,9 @@ const NetworkSelector = () => { networkName: mainnetName, }) } + onLongPress={() => { + openModal(chainId, false, MAINNET, true); + }} /> ); } @@ -458,7 +461,7 @@ const NetworkSelector = () => { return ( { const renderLineaMainnet = () => { const { name: lineaMainnetName, chainId } = Networks['linea-mainnet']; + const name = networkConfigurations?.[chainId]?.name ?? lineaMainnetName; if (isNetworkUiRedesignEnabled() && isNoSearchResults('linea-mainnet')) return null; @@ -483,7 +487,7 @@ const NetworkSelector = () => { { networkName: lineaMainnetName, }) } + onLongPress={() => { + openModal(chainId, false, LINEA_MAINNET, true); + }} /> ); } @@ -513,7 +520,7 @@ const NetworkSelector = () => { return ( { > { sheetRef.current?.onCloseBottomSheet(() => { @@ -1011,6 +1014,7 @@ const NetworkSelector = () => { actionTitle={strings('app_settings.delete')} iconName={IconName.Trash} onPress={() => removeRpcUrl(showNetworkMenuModal.chainId)} + testID={`delete-network-button-${showNetworkMenuModal.chainId}`} /> ) : null} diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js index 5724b12ef673..17535ade9770 100644 --- a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js +++ b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js @@ -78,6 +78,11 @@ import { isNetworkUiRedesignEnabled } from '../../../../../util/networks/isNetwo import Cell, { CellVariant, } from '../../../../../component-library/components/Cells/Cell'; +import BottomSheet from '../../../../../component-library/components/BottomSheets/BottomSheet'; +import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader'; +import { TextVariant } from '../../../../../component-library/components/Texts/Text'; +import ButtonLink from '../../../../../component-library/components/Buttons/Button/variants/ButtonLink'; +import ButtonPrimary from '../../../../../component-library/components/Buttons/Button/variants/ButtonPrimary'; import { RpcEndpointType } from '@metamask/network-controller'; import { AvatarVariant } from '../../../../../component-library/components/Avatars/Avatar'; @@ -130,7 +135,7 @@ const createStyles = (colors) => padding: 10, color: colors.text.default, }, - rpcUrlInput: { + dropDownInput: { borderColor: colors.border.default, borderRadius: 5, borderWidth: 2, @@ -349,7 +354,7 @@ export class NetworkSettings extends PureComponent { rpcUrl: undefined, rpcName: undefined, rpcUrlFrom: undefined, - rpcNameForm: undefined, + rpcNameForm: '', rpcUrls: [], blockExplorerUrls: [], selectedRpcEndpointIndex: 0, @@ -492,7 +497,10 @@ export class NetworkSettings extends PureComponent { rpcName = networkConfiguration?.rpcEndpoints[ networkConfiguration?.defaultRpcEndpointIndex - ]?.name; + ]?.name ?? + networkConfiguration?.rpcEndpoints[ + networkConfiguration?.defaultRpcEndpointIndex + ]?.type; selectedRpcEndpointIndex = networkConfiguration?.defaultRpcEndpointIndex; @@ -703,10 +711,6 @@ export class NetworkSettings extends PureComponent { isCustomMainnet, shouldNetworkSwitchPopToWallet, navigation, - nativeToken, - networkType, - networkUrl, - showNetworkOnboarding, }) => { const { NetworkController, CurrencyRateController } = Engine.context; @@ -750,7 +754,7 @@ export class NetworkSettings extends PureComponent { (url) => url === blockExplorerUrl, ); - const addedNetwork = await NetworkController.addNetwork({ + await NetworkController.addNetwork({ chainId, blockExplorerUrls, defaultRpcEndpointIndex: 0, @@ -765,18 +769,6 @@ export class NetworkSettings extends PureComponent { }, ], }); - - const { networkClientId } = - addedNetwork?.rpcEndpoints?.[addedNetwork.defaultRpcEndpointIndex] ?? - {}; - - await NetworkController.setActiveNetwork(networkClientId); - this.props.showNetworkOnboardingAction({ - networkUrl, - networkType, - nativeToken, - showNetworkOnboarding, - }); } isCustomMainnet @@ -796,10 +788,10 @@ export class NetworkSettings extends PureComponent { nickname, blockExplorerUrls, blockExplorerUrl, - editable, enableAction, rpcUrls, addMode, + editable, } = this.state; const ticker = this.state.ticker && this.state.ticker.toUpperCase(); @@ -1156,12 +1148,17 @@ export class NetworkSettings extends PureComponent { }; onRpcItemAdd = async (url, name) => { - if (!url || !name) { + if (!url) { return; } + const rpcName = name ?? ''; + await this.setState((prevState) => ({ - rpcUrls: [...prevState.rpcUrls, { url, name }], + rpcUrls: [ + ...prevState.rpcUrls, + { url, name: rpcName, type: RpcEndpointType.Custom }, + ], })); await this.setState({ @@ -1274,7 +1271,6 @@ export class NetworkSettings extends PureComponent { if (addMode) { this.validateChainId(); } - this.validateRpcUrl(); this.validateSymbol(); this.getCurrentState(); }; @@ -1682,6 +1678,24 @@ export class NetworkSettings extends PureComponent { }; const renderButtons = () => { + if (isNetworkUiRedesignEnabled()) { + return ( + + +