feat: Added UI for switching via dapp for custom chain id (#26905)

This PR is to update the UI when the dapp tries to add custom Chain Id network in MetaMask ## **Related issues** Fixes: [https://github.com/MetaMask/MetaMask-planning/issues/2661](https://github.com/MetaMask/MetaMask-planning/issues/2661) ## **Manual testing steps** 1. Connect MetaMask to Uniswap 2. Go to Uniswap console. 3. Make an add ethereum chain call, the new popup should appear on confirmations screen ## **Screenshots/Recordings**  ### **Before** NA ### **After** https://github.com/user-attachments/assets/69fa8baa-9344-4f1f-9f6e-58dee1a7c073 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Sep 9, 2024 · 82f645e · 82f645e
1 parent 416d024
commit 82f645e
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 12 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -12,7 +12,12 @@ import TextField from '../../ui/text-field';
 import ConfirmationNetworkSwitch from '../../../pages/confirmations/confirmation/components/confirmation-network-switch';
 import UrlIcon from '../../ui/url-icon';
 import Tooltip from '../../ui/tooltip/tooltip';
-import { AvatarIcon, FormTextField, Text } from '../../component-library';
+import {
+  AvatarIcon,
+  FormTextField,
+  Text,
+  BannerAlert,
+} from '../../component-library';
 import ActionableMessage from '../../ui/actionable-message/actionable-message';
 import { AccountListItem } from '../../multichain';
 import {
@@ -84,6 +89,7 @@ export const safeComponentList = {
   SnapUILink,
   SnapUIIcon,
   SnapUIImage,
+  BannerAlert,
   Spinner,
   ConfirmInfoRow,
   ConfirmInfoRowAddress,

diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
@@ -528,7 +528,7 @@ export default function ConfirmationPage({
       )}
       <Box
         className="confirmation-page__content"
-        paddingTop={process.env.CHAIN_PERMISSIONS ? 4 : 0}
+        padding={process.env.CHAIN_PERMISSIONS ? 4 : 0}
         style={{
           marginTop: `${contentMargin}px`,
           overflowY: 'auto',

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -6,7 +6,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/...confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap b/...confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
@@ -6,7 +6,7 @@ exports[`create-named-snap-account confirmation matches snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div
@@ -106,7 +106,7 @@ exports[`create-named-snap-account confirmation matches snapshot 2`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -6,7 +6,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/error.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/error.test.js.snap
@@ -6,7 +6,7 @@ exports[`error template matches the snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <h2

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -6,7 +6,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/...ges/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/...ges/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -6,7 +6,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/success.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/success.test.js.snap
@@ -6,7 +6,7 @@ exports[`success template matches the snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <h2

diff --git a/...ges/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/...ges/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -6,7 +6,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div
@@ -123,7 +123,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-top-0"
+      class="mm-box confirmation-page__content mm-box--padding-0"
       style="margin-top: 0px; overflow-y: auto;"
     >
       <div

diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
@@ -18,6 +18,7 @@ import {
 import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import { jsonRpcRequest } from '../../../../../shared/modules/rpc.utils';
+import { BannerAlertSeverity } from '../../../../components/component-library';
 import { isValidASCIIURL, toPunycodeURL } from '../../utils/confirm';
 
 const UNRECOGNIZED_CHAIN = {
@@ -149,6 +150,8 @@ const MISMATCHED_NETWORK_RPC_CHAIN_ID = {
   },
 };
 
+const multichainFlag = process.env.CHAIN_PERMISSIONS;
+
 const ERROR_CONNECTING_TO_RPC = {
   id: 'ERROR_CONNECTING_TO_RPC',
   severity: Severity.Danger,
@@ -249,6 +252,82 @@ function getValues(pendingApproval, t, actions, history, data) {
           },
         ],
       },
+      multichainFlag && {
+        element: 'BannerAlert',
+        key: 'only-add-networks-you-trust',
+        children: [
+          {
+            element: 'Typography',
+            key: 'description',
+            props: {
+              style: { display: originIsMetaMask && '-webkit-box' },
+            },
+            children: [
+              `${t('unknownChainWarning')} `,
+              {
+                hide: !originIsMetaMask,
+                element: 'Tooltip',
+                key: 'tooltip-info',
+                props: {
+                  position: 'bottom',
+                  interactive: true,
+                  trigger: 'mouseenter',
+                  html: (
+                    <div
+                      style={{
+                        width: '180px',
+                        margin: '16px',
+                        textAlign: 'left',
+                      }}
+                    >
+                      <a
+                        key="zendesk_page_link"
+                        href={ZENDESK_URLS.UNKNOWN_NETWORK}
+                        rel="noreferrer"
+                        target="_blank"
+                        style={{ color: 'var(--color-primary-default)' }}
+                      >
+                        {t('learnMoreUpperCase')}
+                      </a>
+                    </div>
+                  ),
+                },
+                children: [
+                  {
+                    element: 'i',
+                    key: 'info-circle',
+                    props: {
+                      className: 'fas fa-info-circle',
+                      style: {
+                        marginLeft: '4px',
+                        color: 'var(--color-icon-default)',
+                      },
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            element: 'a',
+            children: t('learnMoreUpperCase'),
+            key: 'learnMoreUpperCase',
+            props: {
+              href: ZENDESK_URLS.USER_GUIDE_CUSTOM_NETWORKS,
+              target: '__blank',
+            },
+          },
+        ],
+        props: {
+          severity: BannerAlertSeverity.Warning,
+          boxProps: {
+            margin: [0, 4],
+            display: Display.Flex,
+            flexDirection: FlexDirection.Column,
+            alignItems: AlignItems.center,
+          },
+        },
+      },
 
       {
         element: 'Typography',