From 982ecc1fc8b8b6a19b3c6e488068f589f26f1817 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Fri, 30 Aug 2024 12:44:31 +0100
Subject: [PATCH] switching via dapp for custom chain id

---
 app/_locales/en/messages.json                 |  3 +
 .../safe-component-list.js                    |  2 +
 .../confirmation/confirmation.js              |  2 +-
 .../templates/add-ethereum-chain.js           | 78 +++++++++++++++++++
 4 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index c5f16a427c8c..6dc325bb7c8a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -6243,6 +6243,9 @@
   "unknown": {
     "message": "Unknown"
   },
+  "unknownChainWarning": {
+    "message": "We can’t verify custom networks. To avoid malicious providers from recording your network activity, only add networks you trust."
+  },
   "unknownCollection": {
     "message": "Unnamed collection"
   },
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index 4297291cdadb..b4a677e91aac 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -34,6 +34,7 @@ import { SnapUIForm } from '../snaps/snap-ui-form';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
 import { SnapUIRadioGroup } from '../snaps/snap-ui-radio-group';
+import { BannerAlert } from '../../component-library';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
 import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
@@ -84,6 +85,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
index eecf75d456e2..627b20ad720a 100644
--- 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/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
index 4487dfa5a7ed..64a1dfd24762 100644
--- 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/index';
 import { isValidASCIIURL, toPunycodeURL } from '../../utils/confirm';
 
 const UNRECOGNIZED_CHAIN = {
@@ -249,6 +250,83 @@ function getValues(pendingApproval, t, actions, history, data) {
           },
         ],
       },
+      {
+        element: process.env.CHAIN_PERMISSIONS && 'BannerAlert',
+        key: 'only-add-networks-you-trust',
+        children: process.env.CHAIN_PERMISSIONS && [
+          {
+            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',