chore: cherry-pick #12036 (#12052)

This PR cherry-picks #12036 --------- Co-authored-by: Salim TOUBAL <salim.toubal@outlook.com>
MetaMask · Oct 28, 2024 · e371dae · e371dae
1 parent eb3db8d
commit e371dae
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git a/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js b/app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js
@@ -2065,6 +2065,7 @@ export class NetworkSettings extends PureComponent {
               <View style={styles.dropDownInput}>
                 <Cell
                   key={rpcUrl}
+                  testID={NetworksViewSelectorsIDs.ICON_BUTTON_BLOCK_EXPLORER}
                   variant={CellVariant.SelectWithMenu}
                   title={blockExplorerUrl}
                   isSelected={false}
@@ -2233,7 +2234,9 @@ export class NetworkSettings extends PureComponent {
                   )}
                   testID={NetworksViewSelectorsIDs.BLOCK_EXPLORER_INPUT}
                   placeholderTextColor={colors.text.muted}
-                  onSubmitEditing={this.toggleNetworkDetailsModal}
+                  onSubmitEditing={() => {
+                    this.onBlockExplorerItemAdd(blockExplorerUrlForm);
+                  }}
                   keyboardAppearance={themeAppearance}
                 />
                 {blockExplorerUrl &&
@@ -2247,6 +2250,7 @@ export class NetworkSettings extends PureComponent {
                 <View style={styles.addRpcNameButton}>
                   <ButtonPrimary
                     label={strings('app_settings.add_block_explorer_url')}
+                    testID={NetworksViewSelectorsIDs.ADD_BLOCK_EXPLORER}
                     size={ButtonSize.Lg}
                     onPress={() => {
                       this.onBlockExplorerItemAdd(blockExplorerUrlForm);
@@ -2324,6 +2328,7 @@ export class NetworkSettings extends PureComponent {
                       this.openAddBlockExplorerForm();
                       this.closeBlockExplorerModal();
                     }}
+                    testID={NetworksViewSelectorsIDs.ADD_BLOCK_EXPLORER}
                     width={ButtonWidthTypes.Auto}
                     labelTextVariant={TextVariant.DisplayMD}
                   />

diff --git a/e2e/pages/Settings/NetworksView.js b/e2e/pages/Settings/NetworksView.js
@@ -27,6 +27,16 @@ class NetworkView {
     return Matchers.getElementByID(NetworksViewSelectorsIDs.ICON_BUTTON_RPC);
   }
 
+  get addBlockExplorerDropDownButton() {
+    return Matchers.getElementByID(
+      NetworksViewSelectorsIDs.ICON_BUTTON_BLOCK_EXPLORER,
+    );
+  }
+
+  get addBlockExplorerButton() {
+    return Matchers.getElementByID(NetworksViewSelectorsIDs.ADD_BLOCK_EXPLORER);
+  }
+
   get addRpcButton() {
     return Matchers.getElementByID(NetworksViewSelectorsIDs.ADD_RPC_BUTTON);
   }
@@ -91,6 +101,12 @@ class NetworkView {
     );
   }
 
+  get networkBlockExplorerInput() {
+    return Matchers.getElementByID(
+      NetworksViewSelectorsIDs.BLOCK_EXPLORER_INPUT,
+    );
+  }
+
   get rpcAddButton() {
     return Matchers.getElementByID(
       NetworksViewSelectorsIDs.ADD_CUSTOM_NETWORK_BUTTON,
@@ -138,6 +154,14 @@ class NetworkView {
     await Gestures.waitAndTap(this.addRpcDropDownButton);
   }
 
+  async tapBlockExplorerDownButton() {
+    await Gestures.waitAndTap(this.addBlockExplorerDropDownButton);
+  }
+
+  async tapBlockExplorerButton() {
+    await Gestures.waitAndTap(this.addBlockExplorerButton);
+  }
+
   async tapAddRpcButton() {
     await Gestures.waitAndTap(this.addRpcButton);
   }
@@ -192,6 +216,13 @@ class NetworkView {
     );
   }
 
+  async typeInNetworkBlockExplorer(networkBlockExplorer) {
+    await Gestures.typeTextAndHideKeyboard(
+      this.networkBlockExplorerInput,
+      networkBlockExplorer,
+    );
+  }
+
   async clearRpcInputBox() {
     await Gestures.clearField(this.rpcURLInput);
   }

diff --git a/e2e/resources/networks.e2e.js b/e2e/resources/networks.e2e.js
@@ -1,4 +1,4 @@
-import { toHex } from '@metamask/controller-utils';
+import { BlockExplorerUrl, toHex } from '@metamask/controller-utils';
 
 /* eslint-disable @typescript-eslint/no-require-imports, import/no-commonjs */
 const InfuraKey = process.env.MM_INFURA_PROJECT_ID;
@@ -109,6 +109,7 @@ const CustomNetworks = {
       rpcUrl: 'https://rpc.gnosischain.com',
       nickname: 'Gnosis',
       ticker: 'xDAI',
+      BlockExplorerUrl: 'https://gnosisscan.io',
     },
   },
 };

diff --git a/e2e/selectors/Settings/NetworksView.selectors.js b/e2e/selectors/Settings/NetworksView.selectors.js
@@ -6,6 +6,7 @@ export const NetworksViewSelectorsIDs = {
   ADD_NETWORKS_BUTTON: 'add-network-button',
   NETWORK_NAME_INPUT: 'input-network-name',
   BLOCK_EXPLORER_INPUT: 'block-explorer',
+  ADD_BLOCK_EXPLORER: 'add-block-explorer-button',
   RPC_URL_INPUT: 'input-rpc-url',
   CHAIN_INPUT: 'input-chain-id',
   NETWORKS_SYMBOL_INPUT: 'input-network-symbol',
@@ -20,6 +21,7 @@ export const NetworksViewSelectorsIDs = {
   SEARCH_NETWORK_INPUT_BOX_ID: 'network-search-input',
   CONTAINER: 'network-form-container',
   ICON_BUTTON_RPC: 'drop-down-rpc-menu',
+  ICON_BUTTON_BLOCK_EXPLORER: 'drop-down-block-explorer-menu',
   ADD_RPC_BUTTON: 'add-rpc-button',
   RPC_NAME_INPUT: 'input-rpc-name',
 };

diff --git a/e2e/specs/networks/add-custom-rpc.spec.js b/e2e/specs/networks/add-custom-rpc.spec.js
@@ -17,8 +17,6 @@ import { getFixturesServerPort } from '../../fixtures/utils';
 import FixtureServer from '../../fixtures/fixture-server';
 import Assertions from '../../utils/Assertions';
 import { CustomNetworks } from '../../resources/networks.e2e';
-import Gestures from '../../utils/Gestures';
-import Matchers from '../../utils/Matchers';
 
 const fixtureServer = new FixtureServer();
 
@@ -75,6 +73,12 @@ describe(Regression('Custom RPC Tests'), () => {
 
     await NetworkView.tapChainIDLabel(); // Focus outside of text input field
 
+    await NetworkView.tapBlockExplorerDownButton();
+    await NetworkView.tapBlockExplorerButton();
+    await NetworkView.typeInNetworkBlockExplorer(
+      `${CustomNetworks.Gnosis.providerConfig.BlockExplorerUrl}\n`,
+    );
+
     if (device.getPlatform() === 'ios') {
       await NetworkView.tapChainIDLabel(); // Focus outside of text input field
       await NetworkView.tapChainIDLabel(); // Focus outside of text input field