feat: add custom network new checkers

MetaMask · Jun 24, 2024 · 38c38f2 · 38c38f2
1 parent dbdbaf1
commit 38c38f2
Show file tree

Hide file tree

Showing 11 changed files with 424 additions and 72 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/shared/constants/swaps.ts b/shared/constants/swaps.ts
@@ -175,14 +175,14 @@ export const GAS_API_BASE_URL = 'https://gas.api.cx.metamask.io';
 export const GAS_DEV_API_BASE_URL = 'https://gas.uat-api.cx.metamask.io';
 
 const BSC_DEFAULT_BLOCK_EXPLORER_URL = 'https://bscscan.com/';
-const MAINNET_DEFAULT_BLOCK_EXPLORER_URL = 'https://etherscan.io/';
+export const MAINNET_DEFAULT_BLOCK_EXPLORER_URL = 'https://etherscan.io/';
 const GOERLI_DEFAULT_BLOCK_EXPLORER_URL = 'https://goerli.etherscan.io/';
 const POLYGON_DEFAULT_BLOCK_EXPLORER_URL = 'https://polygonscan.com/';
 const AVALANCHE_DEFAULT_BLOCK_EXPLORER_URL = 'https://snowtrace.io/';
 const OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL = 'https://optimistic.etherscan.io/';
 const ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL = 'https://arbiscan.io/';
 const ZKSYNC_DEFAULT_BLOCK_EXPLORER_URL = 'https://explorer.zksync.io/';
-const LINEA_DEFAULT_BLOCK_EXPLORER_URL = 'https://lineascan.build/';
+export const LINEA_DEFAULT_BLOCK_EXPLORER_URL = 'https://lineascan.build/';
 const BASE_DEFAULT_BLOCK_EXPLORER_URL = 'https://basescan.org/';
 
 export const ALLOWED_PROD_SWAPS_CHAIN_IDS = [

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -257,16 +257,19 @@ export const NetworkListMenu = ({ onClose }) => {
     };
   };
 
-  const getOnEditCallback = (network) => {
-    return () => {
-      const networkToUse = {
-        ...network,
-        label: network.nickname,
-      };
-      setModalTitle(network.nickname);
-      setNetworkToEdit(networkToUse);
-      setActionMode(ACTION_MODES.EDIT);
+  const getOnEdit = (network) => {
+    const networkToUse = {
+      ...network,
+      label: network.nickname,
     };
+
+    setModalTitle(network.nickname);
+    setNetworkToEdit(networkToUse);
+    setActionMode(ACTION_MODES.EDIT);
+  };
+
+  const getOnEditCallback = (network) => {
+    return () => getOnEdit(network);
   };
 
   const generateMenuItems = (desiredNetworks) => {
@@ -527,7 +530,13 @@ export const NetworkListMenu = ({ onClose }) => {
         </>
       );
     } else if (actionMode === ACTION_MODES.ADD) {
-      return <AddNetworkModal isNewNetworkFlow addNewNetwork />;
+      return (
+        <AddNetworkModal
+          isNewNetworkFlow
+          addNewNetwork
+          getOnEditCallback={getOnEdit}
+        />
+      );
     }
     return (
       <AddNetworkModal

diff --git a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
@@ -64,29 +64,37 @@ exports[`Add Network Modal should render 1`] = `
             type="text"
             value=""
           />
-          
         </label>
       </div>
-      <p
-        class="mm-box mm-text networks-tab__rpc-header mm-text--body-sm-bold mm-box--margin-top-1 mm-box--margin-bottom-1 mm-box--color-text-default"
-      >
-        Default RPC URL
-      </p>
       <div
-        class="mm-box networks-tab__rpc-dropdown mm-box--padding-2 mm-box--display-flex mm-box--justify-content-space-between mm-box--rounded-md mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+        class="form-field"
       >
-        <p
-          class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
-        />
-        <button
-          aria-label="Default RPC URL"
-          class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+        <label
+          class="mm-box"
         >
-          <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-            style="mask-image: url('./images/icons/arrow-down.svg');"
+          <div
+            class="form-field__heading"
+          >
+            <div
+              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
+            >
+              <h6
+                class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
+              >
+                New RPC URL
+              </h6>
+              
+              
+            </div>
+            
+          </div>
+          <input
+            class="form-field__input"
+            data-testid="network-form-rpc-url"
+            type="text"
+            value=""
           />
-        </button>
+        </label>
       </div>
       <div
         class="form-field"
@@ -140,8 +148,6 @@ exports[`Add Network Modal should render 1`] = `
             type="text"
             value=""
           />
-          
-          
         </label>
       </div>
       <div
@@ -198,7 +204,6 @@ exports[`Add Network Modal should render 1`] = `
             type="text"
             value=""
           />
-          
         </label>
       </div>
     </div>
@@ -209,7 +214,7 @@ exports[`Add Network Modal should render 1`] = `
         class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         disabled=""
       >
-        Save
+        Next
       </button>
     </div>
   </div>

diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
@@ -23,7 +23,7 @@ describe('Add Network Modal', () => {
     mockNetworkMenuRedesignToggle.mockImplementation(() => false);
 
     const mockStore = configureMockStore([])({
-      metamask: { useSafeChainsListValidation: true },
+      metamask: { useSafeChainsListValidation: true, orderedNetworkList: {} },
     });
 
     const { container } = renderWithProvider(
@@ -40,7 +40,7 @@ describe('Add Network Modal', () => {
     mockNetworkMenuRedesignToggle.mockReturnValue(true);
 
     const mockStore = configureMockStore([thunk])({
-      metamask: { useSafeChainsListValidation: true },
+      metamask: { useSafeChainsListValidation: true, orderedNetworkList: {} },
     });
 
     const { queryByText } = renderWithProvider(
@@ -50,7 +50,7 @@ describe('Add Network Modal', () => {
 
     await waitFor(() => {
       expect(queryByText('Cancel')).not.toBeInTheDocument();
-      expect(queryByText('Save')).toBeInTheDocument();
+      expect(queryByText('Next')).toBeInTheDocument();
     });
   });
 });
diff --git a/ui/pages/onboarding-flow/add-network-modal/index.js b/ui/pages/onboarding-flow/add-network-modal/index.js
@@ -16,7 +16,7 @@ import NetworksForm from '../../settings/networks-tab/networks-form/networks-for
 
 export default function AddNetworkModal({
   showHeader = false,
-  isNewNetworkFlow = false,
+  getOnEditCallback = null,
   addNewNetwork = true,
   networkToEdit = null,
 }) {
@@ -50,7 +50,7 @@ export default function AddNetworkModal({
         networksToRender={[]}
         cancelCallback={closeCallback}
         submitCallback={closeCallback}
-        isNewNetworkFlow={isNewNetworkFlow}
+        getOnEditCallback={getOnEditCallback}
         {...additionalProps}
       />
     </>
@@ -59,14 +59,14 @@ export default function AddNetworkModal({
 
 AddNetworkModal.propTypes = {
   showHeader: PropTypes.bool,
-  isNewNetworkFlow: PropTypes.bool,
+  getOnEditCallback: PropTypes.func,
   addNewNetwork: PropTypes.bool,
   networkToEdit: PropTypes.object,
 };
 
 AddNetworkModal.defaultProps = {
   showHeader: false,
-  isNewNetworkFlow: false,
+  getOnEditCallback: null,
   addNewNetwork: true,
   networkToEdit: null,
 };