From 60ec8229171d63410490c5a01aeec9db67dca003 Mon Sep 17 00:00:00 2001
From: EtherWizard33 <165834542+EtherWizard33@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:02:05 -0500
Subject: [PATCH] feat: non-permissioned networks, when a dapp finds itself on
 a global network for which it doesn't have a granted network permission
 (#12212)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

non-permissioned networks, when a dapp finds itself on a global network
for which it doesn't have a granted network permission

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
Figma:
https://www.figma.com/design/njDnVDROVuIwLbjUjkUYuO/MC-Mobile-Amon-Hen?node-id=3109-157108&node-type=canvas&m=dev
## **Related issues**

Contributes to:
https://github.com/MetaMask/MetaMask-planning/issues/3598

## **Manual testing steps**

1. Start with a global network and a dapp connected to it
2. From the home screen, switch the network
3. Go back to the dapp, the bottom sheet will come up.

This works also with multiple dapps open at once, the bottom sheet comes
up the next time the dapp is in focus.

## **Screenshots/Recordings**


| Before (switch to non permitted change was not handled) | After
(handled) |
|--------------|--------------|
| <img width="350" alt="Screenshot 2024-04-18 at 3 56 43 PM"
src="https://github.com/user-attachments/assets/5adc97d3-b206-4655-84ff-15f60e172b7b">
|<img width="350" alt="Screenshot 2024-04-18s at 3 56 43 PM"
src="https://github.com/user-attachments/assets/decc4f08-46cd-4a1b-a32b-35d1058bd3fb">
|




## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.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.
---
 app/components/Nav/App/index.js               |   5 +
 .../NetworkSelectorList.styles.ts             |   4 -
 .../NetworkSelectorList.tsx                   |   2 -
 .../PermissionsSummary.styles.ts              |  15 +-
 .../PermissionsSummary/PermissionsSummary.tsx |  92 ++++++--
 .../PermissionsSummary.types.ts               |   3 +
 .../PermissionsSummary.test.tsx.snap          |  36 ++-
 .../AccountPermissions/AccountPermissions.tsx | 178 +++++++++++++-
 .../AccountPermissions.types.ts               |   2 +
 .../ConnectionDetails/ConnectionDetails.tsx   |   4 +-
 .../NetworkPermissionsConnected.styles.ts     |  50 ++++
 .../NetworkPermissionsConnected.tsx           | 220 ++++++++++++++++++
 .../NetworkPermissionsConnected.types.ts      |  24 ++
 .../NetworkPermissionsConnected/index.ts      |   2 +
 .../PermittedNetworksInfoSheet.styles.ts      |  26 +++
 .../PermittedNetworksInfoSheet.tsx            |  57 +++++
 .../PermittedNetworksInfoSheet/index.ts       |   1 +
 app/components/Views/Browser/index.js         |  23 +-
 app/components/Views/BrowserTab/index.js      |  73 ++++++
 .../NetworkConnectMultiSelector.styles.ts     |   3 +-
 .../NetworkConnectMultiSelector.tsx           |  46 +++-
 .../NetworkConnectMultiSelector.types.ts      |   1 +
 app/constants/navigation/Routes.ts            |   1 +
 .../RPCMethods/lib/ethereum-chain-utils.js    |   9 +-
 .../wallet_addEthereumChain.test.js           |  10 +-
 .../wallet_switchEthereumChain.test.js        |   4 +-
 app/util/networks/index.js                    |   9 +-
 bitrise.yml                                   |   3 +
 locales/languages/en.json                     |  10 +-
 sonar-project.properties                      |   2 +-
 30 files changed, 847 insertions(+), 68 deletions(-)
 create mode 100644 app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.styles.ts
 create mode 100644 app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.tsx
 create mode 100644 app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.types.ts
 create mode 100644 app/components/Views/AccountPermissions/NetworkPermissionsConnected/index.ts
 create mode 100644 app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.styles.ts
 create mode 100644 app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.tsx
 create mode 100644 app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/index.ts

diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
index 0ad4fa844e6..8763bf589d3 100644
--- a/app/components/Nav/App/index.js
+++ b/app/components/Nav/App/index.js
@@ -118,6 +118,7 @@ import OnboardingAssetsSettings from '../../Views/OnboardingSuccess/OnboardingAs
 import OnboardingSecuritySettings from '../../Views/OnboardingSuccess/OnboardingSecuritySettings';
 import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal';
 import ProfileSyncingModal from '../../UI/ProfileSyncing/ProfileSyncingModal/ProfileSyncingModal';
+import PermittedNetworksInfoSheet from '../../Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet';
 import ResetNotificationsModal from '../../UI/Notification/ResetNotificationsModal';
 import NFTAutoDetectionModal from '../../../../app/components/Views/NFTAutoDetectionModal/NFTAutoDetectionModal';
 import NftOptions from '../../../components/Views/NftOptions';
@@ -430,6 +431,10 @@ const RootModalFlow = () => (
       name={Routes.SHEET.CONNECTION_DETAILS}
       component={ConnectionDetails}
     />
+    <Stack.Screen
+      name={Routes.SHEET.PERMITTED_NETWORKS_INFO_SHEET}
+      component={PermittedNetworksInfoSheet}
+    />
     <Stack.Screen
       name={Routes.SHEET.NETWORK_SELECTOR}
       component={NetworkSelector}
diff --git a/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts b/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts
index e279b943357..93249844943 100644
--- a/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts
+++ b/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts
@@ -2,10 +2,6 @@ import { StyleSheet } from 'react-native';
 
 const styleSheet = () =>
   StyleSheet.create({
-    networkItemContainer: {
-      paddingHorizontal: 10,
-      paddingVertical: 14,
-    },
     networkAvatar: {
       marginHorizontal: 10,
     },
diff --git a/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx b/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx
index 152348b8573..551146856e0 100644
--- a/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx
+++ b/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx
@@ -67,7 +67,6 @@ const NetworkSelectorList = ({
             size: AvatarSize.Sm,
           }}
           disabled={isDisabled}
-          style={styles.networkItemContainer}
         >
           {renderRightAccessory?.(id, name)}
         </Cell>
@@ -79,7 +78,6 @@ const NetworkSelectorList = ({
       renderRightAccessory,
       isSelectionDisabled,
       onSelectNetwork,
-      styles,
       isMultiSelect,
     ],
   );
diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts b/app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts
index 3c25f4830a7..26b3b380eec 100644
--- a/app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts
+++ b/app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts
@@ -31,12 +31,13 @@ const createStyles = (params: {
       marginLeft: 24,
     },
     bottomButtonsContainer: {
-      marginTop: 16,
+      marginTop: 8,
     },
     actionButtonsContainer: {
       flex: 0,
       flexDirection: 'row',
       paddingHorizontal: 24,
+      marginTop: 8,
     },
     buttonPositioning: {
       flex: 1,
@@ -59,6 +60,9 @@ const createStyles = (params: {
       justifyContent: 'center',
       alignItems: 'center',
     },
+    logoContainerNonDapp: {
+      marginTop: 8,
+    },
     domainLogoContainer: {
       width: 32,
       height: 32,
@@ -81,6 +85,7 @@ const createStyles = (params: {
       maxWidth: '75%',
     },
     permissionRequestNetworkName: {
+      marginRight: 4,
       maxWidth: '75%',
     },
     avatarGroup: {
@@ -122,6 +127,7 @@ const createStyles = (params: {
     dataIcon: { alignSelf: 'flex-start' },
     disconnectAllContainer: {
       marginHorizontal: 24,
+      marginTop: 8,
       flexDirection: 'row',
     },
     disconnectButton: { flex: 1 },
@@ -129,6 +135,13 @@ const createStyles = (params: {
       width: 56,
       alignItems: 'center',
     },
+    nonDappNetworkSwitchButtons: {
+      gap: 16,
+    },
+    description: {
+      marginHorizontal: 24,
+      marginBottom: 16,
+    },
   });
 };
 
diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
index f48936e74ef..1d31aec69d9 100644
--- a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
+++ b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import StyledButton from '../StyledButton';
 import {
   ImageSourcePropType,
@@ -42,6 +42,9 @@ import ButtonIcon, {
 import { getNetworkImageSource } from '../../../util/networks';
 import Engine from '../../../core/Engine';
 import { SDKSelectorsIDs } from '../../../../e2e/selectors/Settings/SDK.selectors';
+import { useSelector } from 'react-redux';
+import { selectProviderConfig } from '../../../selectors/networkController';
+import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
 
 const PermissionsSummary = ({
   currentPageInformation,
@@ -57,16 +60,24 @@ const PermissionsSummary = ({
   isRenderedAsBottomSheet = true,
   isDisconnectAllShown = true,
   isNetworkSwitch = false,
+  isNonDappNetworkSwitch = false,
   accountAddresses = [],
   accounts = [],
   networkAvatars = [],
+  onAddNetwork = () => undefined,
+  onChooseFromPermittedNetworks = () => undefined,
 }: PermissionsSummaryProps) => {
   const { colors } = useTheme();
   const { styles } = useStyles(styleSheet, { isRenderedAsBottomSheet });
   const { navigate } = useNavigation();
   const selectedAccount = useSelectedAccount();
+  const providerConfig = useSelector(selectProviderConfig);
 
-  const hostname = new URL(currentPageInformation.url).hostname;
+  const hostname = useMemo(
+    () => new URL(currentPageInformation.url).hostname,
+    [currentPageInformation.url],
+  );
+  const networkInfo = useNetworkInfo(hostname);
 
   // if network switch, we get the chain name from the customNetworkInformation
   let chainName = '';
@@ -117,7 +128,7 @@ const PermissionsSummary = ({
     return (
       <View style={styles.header}>
         <View style={styles.startAccessory}>
-          {onBack && (
+          {onBack && !isNonDappNetworkSwitch && (
             <ButtonIcon
               size={ButtonIconSizes.Sm}
               iconColor={IconColor.Default}
@@ -127,7 +138,14 @@ const PermissionsSummary = ({
           )}
         </View>
 
-        <View style={styles.logoContainer}>{renderTopIcon()}</View>
+        <View
+          style={[
+            styles.logoContainer,
+            isNonDappNetworkSwitch && styles.logoContainerNonDapp,
+          ]}
+        >
+          {renderTopIcon()}
+        </View>
         <View style={styles.endAccessory}>
           {!isRenderedAsBottomSheet && (
             <ButtonIcon
@@ -321,7 +339,7 @@ const PermissionsSummary = ({
               {strings('permissions.use_enabled_networks')}
             </TextComponent>
             <View style={styles.permissionRequestNetworkInfo}>
-              {isNetworkSwitch && (
+              {(isNetworkSwitch || isNonDappNetworkSwitch) && (
                 <>
                   <View style={styles.permissionRequestNetworkName}>
                     <TextComponent numberOfLines={1} ellipsizeMode="tail">
@@ -329,19 +347,32 @@ const PermissionsSummary = ({
                         {strings('permissions.requesting_for')}
                       </TextComponent>
                       <TextComponent variant={TextVariant.BodySMMedium}>
-                        {chainName}
+                        {isNonDappNetworkSwitch
+                          ? networkInfo?.networkName || providerConfig.nickname
+                          : chainName}
                       </TextComponent>
                     </TextComponent>
                   </View>
                   <Avatar
                     variant={AvatarVariant.Network}
                     size={AvatarSize.Xs}
-                    name={chainName}
-                    imageSource={chainImage}
+                    name={
+                      isNonDappNetworkSwitch
+                        ? networkInfo?.networkName || providerConfig.nickname
+                        : chainName
+                    }
+                    imageSource={
+                      isNonDappNetworkSwitch
+                        ? // @ts-expect-error getNetworkImageSource is not implemented in typescript
+                          getNetworkImageSource({
+                            chainId: providerConfig.chainId,
+                          })
+                        : chainImage
+                    }
                   />
                 </>
               )}
-              {!isNetworkSwitch && (
+              {!isNetworkSwitch && !isNonDappNetworkSwitch && (
                 <>
                   <View style={styles.permissionRequestNetworkName}>
                     <TextComponent numberOfLines={1} ellipsizeMode="tail">
@@ -363,7 +394,7 @@ const PermissionsSummary = ({
               )}
             </View>
           </View>
-          {!isNetworkSwitch && renderEndAccessory()}
+          {!isNetworkSwitch && !isNonDappNetworkSwitch && renderEndAccessory()}
         </View>
       </TouchableOpacity>
     );
@@ -376,7 +407,9 @@ const PermissionsSummary = ({
           {renderHeader()}
           <View style={styles.title}>
             <TextComponent variant={TextVariant.HeadingSM}>
-              {!isAlreadyConnected || isNetworkSwitch
+              {isNonDappNetworkSwitch
+                ? strings('permissions.title_add_network_permission')
+                : !isAlreadyConnected || isNetworkSwitch
                 ? strings('permissions.title_dapp_url_wants_to', {
                     dappUrl: hostname,
                   })
@@ -385,7 +418,14 @@ const PermissionsSummary = ({
                   })}
             </TextComponent>
           </View>
-          {/*TODO These should be conditional upon which permissions are being requested*/}
+          {isNonDappNetworkSwitch && (
+            <TextComponent
+              variant={TextVariant.BodyMD}
+              style={styles.description}
+            >
+              {strings('permissions.non_permitted_network_description')}
+            </TextComponent>
+          )}
           {!isNetworkSwitch && renderAccountPermissionsRequestInfoCard()}
           {renderNetworkPermissionsRequestInfoCard()}
         </View>
@@ -405,7 +445,7 @@ const PermissionsSummary = ({
               />
             </View>
           )}
-          {showActionButtons && (
+          {showActionButtons && !isNonDappNetworkSwitch && (
             <View style={styles.actionButtonsContainer}>
               <StyledButton
                 type={'cancel'}
@@ -430,6 +470,32 @@ const PermissionsSummary = ({
               </StyledButton>
             </View>
           )}
+          {isNonDappNetworkSwitch && (
+            <View style={styles.nonDappNetworkSwitchButtons}>
+              <View style={styles.actionButtonsContainer}>
+                <Button
+                  variant={ButtonVariants.Primary}
+                  label={strings('permissions.add_this_network')}
+                  onPress={onAddNetwork}
+                  size={ButtonSize.Lg}
+                  style={{
+                    ...styles.disconnectButton,
+                  }}
+                />
+              </View>
+              <View style={styles.actionButtonsContainer}>
+                <Button
+                  variant={ButtonVariants.Secondary}
+                  label={strings('permissions.choose_from_permitted_networks')}
+                  onPress={onChooseFromPermittedNetworks}
+                  size={ButtonSize.Lg}
+                  style={{
+                    ...styles.disconnectButton,
+                  }}
+                />
+              </View>
+            </View>
+          )}
         </View>
       </View>
     </SafeAreaView>
diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts
index 3bf71acd277..a0abf555430 100644
--- a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts
+++ b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts
@@ -13,6 +13,7 @@ export interface PermissionsSummaryProps {
   onCancel?: () => void;
   onConfirm?: () => void;
   onUserAction?: React.Dispatch<React.SetStateAction<USER_INTENT>>;
+  onAddNetwork?: () => void;
   showActionButtons?: boolean;
   isAlreadyConnected?: boolean;
   isRenderedAsBottomSheet?: boolean;
@@ -25,4 +26,6 @@ export interface PermissionsSummaryProps {
   accounts?: Account[];
   accountAddresses?: string[];
   networkAvatars?: ({ name: string; imageSource: string } | null)[];
+  isNonDappNetworkSwitch?: boolean;
+  onChooseFromPermittedNetworks?: () => void;
 }
diff --git a/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap b/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap
index 85a2f958df1..03876a53b3b 100644
--- a/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap
+++ b/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap
@@ -41,11 +41,14 @@ exports[`PermissionsSummary should render correctly 1`] = `
         />
         <View
           style={
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "justifyContent": "center",
-            }
+            [
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "justifyContent": "center",
+              },
+              false,
+            ]
           }
         >
           <View
@@ -489,6 +492,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
               <View
                 style={
                   {
+                    "marginRight": 4,
                     "maxWidth": "75%",
                   }
                 }
@@ -566,7 +570,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
     <View
       style={
         {
-          "marginTop": 16,
+          "marginTop": 8,
         }
       }
     >
@@ -575,6 +579,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
           {
             "flexDirection": "row",
             "marginHorizontal": 24,
+            "marginTop": 8,
           }
         }
       >
@@ -636,6 +641,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
           {
             "flex": 0,
             "flexDirection": "row",
+            "marginTop": 8,
             "paddingHorizontal": 24,
           }
         }
@@ -808,11 +814,14 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
         />
         <View
           style={
-            {
-              "alignItems": "center",
-              "flex": 1,
-              "justifyContent": "center",
-            }
+            [
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "justifyContent": "center",
+              },
+              false,
+            ]
           }
         >
           <View
@@ -975,6 +984,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
               <View
                 style={
                   {
+                    "marginRight": 4,
                     "maxWidth": "75%",
                   }
                 }
@@ -1066,7 +1076,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
     <View
       style={
         {
-          "marginTop": 16,
+          "marginTop": 8,
         }
       }
     >
@@ -1075,6 +1085,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
           {
             "flexDirection": "row",
             "marginHorizontal": 24,
+            "marginTop": 8,
           }
         }
       >
@@ -1136,6 +1147,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
           {
             "flex": 0,
             "flexDirection": "row",
+            "marginTop": 8,
             "paddingHorizontal": 24,
           }
         }
diff --git a/app/components/Views/AccountPermissions/AccountPermissions.tsx b/app/components/Views/AccountPermissions/AccountPermissions.tsx
index 42101ac25ef..86d58938feb 100755
--- a/app/components/Views/AccountPermissions/AccountPermissions.tsx
+++ b/app/components/Views/AccountPermissions/AccountPermissions.tsx
@@ -65,6 +65,8 @@ import { PermissionKeys } from '../../../core/Permissions/specifications';
 import { CaveatTypes } from '../../../core/Permissions/constants';
 import { NetworkConfiguration } from '@metamask/network-controller';
 import { AvatarVariant } from '../../../component-library/components/Avatars/Avatar';
+import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
+import NetworkPermissionsConnected from './NetworkPermissionsConnected';
 
 const AccountPermissions = (props: AccountPermissionsProps) => {
   const navigation = useNavigation();
@@ -75,6 +77,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     },
     isRenderedAsBottomSheet = true,
     initialScreen = AccountPermissionsScreens.Connected,
+    isNonDappNetworkSwitch = false,
   } = props.route.params;
   const accountAvatarType = useSelector((state: RootState) =>
     state.settings.useBlockieIcon
@@ -118,7 +121,11 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
 
   const sheetRef = useRef<BottomSheetRef>(null);
   const [permissionsScreen, setPermissionsScreen] =
-    useState<AccountPermissionsScreens>(initialScreen);
+    useState<AccountPermissionsScreens>(
+      isNonDappNetworkSwitch && isMultichainVersion1Enabled
+        ? AccountPermissionsScreens.PermissionsSummary
+        : initialScreen,
+    );
   const { accounts, ensByAccountAddress } = useAccounts({
     isLoading,
   });
@@ -132,6 +139,8 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     USER_INTENT.None,
   );
 
+  const { chainId } = useNetworkInfo(hostname);
+
   useEffect(() => {
     let currentlyPermittedChains: string[] = [];
     try {
@@ -413,7 +422,14 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     }
 
     if (networkSelectorUserIntent === USER_INTENT.Confirm) {
-      setPermissionsScreen(AccountPermissionsScreens.PermissionsSummary);
+      if (isNonDappNetworkSwitch) {
+        setPermissionsScreen(
+          AccountPermissionsScreens.ChooseFromPermittedNetworks,
+        );
+      } else {
+        setPermissionsScreen(AccountPermissionsScreens.PermissionsSummary);
+      }
+
       setNetworkSelectorUserIntent(USER_INTENT.None);
       const networkToastProps: ToastOptions = {
         variant: ToastVariants.Network,
@@ -427,7 +443,13 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       };
       toastRef?.current?.showToast(networkToastProps);
     }
-  }, [networkSelectorUserIntent, hideSheet, faviconSource, toastRef]);
+  }, [
+    networkSelectorUserIntent,
+    hideSheet,
+    faviconSource,
+    toastRef,
+    isNonDappNetworkSwitch,
+  ]);
 
   useEffect(() => {
     if (userIntent === USER_INTENT.None) return;
@@ -653,9 +675,14 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         urlWithProtocol={urlWithProtocol}
         hostname={hostname}
         onBack={() =>
-          setPermissionsScreen(AccountPermissionsScreens.PermissionsSummary)
+          setPermissionsScreen(
+            isNonDappNetworkSwitch
+              ? AccountPermissionsScreens.ChooseFromPermittedNetworks
+              : AccountPermissionsScreens.PermissionsSummary,
+          )
         }
         isRenderedAsBottomSheet={isRenderedAsBottomSheet}
+        hideActiveNetwork={isNonDappNetworkSwitch}
       />
     ),
     [
@@ -664,6 +691,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       urlWithProtocol,
       hostname,
       isRenderedAsBottomSheet,
+      isNonDappNetworkSwitch,
     ],
   );
 
@@ -696,6 +724,135 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     ],
   );
 
+  const renderChooseFromPermittedNetworksScreen = useCallback(
+    () => (
+      <NetworkPermissionsConnected
+        isLoading={isLoading}
+        onSetSelectedAddresses={setSelectedAddresses}
+        onSetPermissionsScreen={setPermissionsScreen}
+        onDismissSheet={hideSheet}
+        accounts={accountsFilteredByPermissions.permitted}
+        ensByAccountAddress={ensByAccountAddress}
+        selectedAddresses={[activeAddress]}
+        favicon={faviconSource}
+        hostname={hostname}
+        urlWithProtocol={urlWithProtocol}
+        secureIcon={secureIcon}
+        accountAvatarType={accountAvatarType}
+      />
+    ),
+    [
+      ensByAccountAddress,
+      activeAddress,
+      isLoading,
+      accountsFilteredByPermissions,
+      setSelectedAddresses,
+      setPermissionsScreen,
+      hideSheet,
+      faviconSource,
+      hostname,
+      urlWithProtocol,
+      secureIcon,
+      accountAvatarType,
+    ],
+  );
+
+  const renderNetworkPermissionSummaryScreen = useCallback(() => {
+    const permissionsSummaryProps: PermissionsSummaryProps = {
+      currentPageInformation: {
+        currentEnsName: '',
+        icon: faviconSource as string,
+        url: urlWithProtocol,
+      },
+      onEdit: () => {
+        setPermissionsScreen(AccountPermissionsScreens.EditAccountsPermissions);
+        setSelectedAddresses(
+          permittedAccountsByHostname.map(toChecksumHexAddress),
+        );
+      },
+      onEditNetworks: () =>
+        setPermissionsScreen(AccountPermissionsScreens.ConnectMoreNetworks),
+      onUserAction: setUserIntent,
+      onAddNetwork: () => {
+        let currentlyPermittedChains: string[] = [];
+        try {
+          const caveat = Engine.context.PermissionController.getCaveat(
+            hostname,
+            PermissionKeys.permittedChains,
+            CaveatTypes.restrictNetworkSwitching,
+          );
+          if (Array.isArray(caveat?.value)) {
+            currentlyPermittedChains = caveat.value.filter(
+              (item): item is string => typeof item === 'string',
+            );
+          }
+        } catch (e) {
+          // noop
+        }
+
+        // Add current chainId if no chains are permitted yet
+        if (chainId) {
+          currentlyPermittedChains = [chainId, ...currentlyPermittedChains];
+        } else {
+          throw new Error('No chainId provided');
+        }
+
+        Engine.context.PermissionController.updateCaveat(
+          hostname,
+          PermissionKeys.permittedChains,
+          CaveatTypes.restrictNetworkSwitching,
+          currentlyPermittedChains,
+        );
+
+        const networkToastProps: ToastOptions = {
+          variant: ToastVariants.Network,
+          labelOptions: [
+            {
+              label: strings('toast.network_permissions_updated'),
+            },
+          ],
+          hasNoTimeout: false,
+          networkImageSource: faviconSource,
+        };
+        toastRef?.current?.showToast(networkToastProps);
+
+        hideSheet();
+      },
+      onBack: () =>
+        isRenderedAsBottomSheet
+          ? setPermissionsScreen(AccountPermissionsScreens.Connected)
+          : navigation.navigate('PermissionsManager'),
+      isRenderedAsBottomSheet,
+      accountAddresses: permittedAccountsByHostname.map(toChecksumHexAddress),
+      accounts,
+      networkAvatars,
+      isNetworkSwitch: true,
+      showActionButtons: false,
+      isDisconnectAllShown: false,
+      isNonDappNetworkSwitch: true,
+      onChooseFromPermittedNetworks: () => {
+        setPermissionsScreen(
+          AccountPermissionsScreens.ChooseFromPermittedNetworks,
+        );
+      },
+    };
+
+    return <PermissionsSummary {...permissionsSummaryProps} />;
+  }, [
+    faviconSource,
+    urlWithProtocol,
+    isRenderedAsBottomSheet,
+    navigation,
+    permittedAccountsByHostname,
+    setSelectedAddresses,
+    networkAvatars,
+    accounts,
+    chainId,
+    hideSheet,
+    hostname,
+    toastRef,
+  ]);
+
   const renderPermissionsScreens = useCallback(() => {
     switch (permissionsScreen) {
       case AccountPermissionsScreens.Connected:
@@ -708,21 +865,30 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         return renderConnectNetworksScreen();
       case AccountPermissionsScreens.Revoke:
         return renderRevokeScreen();
+      case AccountPermissionsScreens.ChooseFromPermittedNetworks:
+        return renderChooseFromPermittedNetworksScreen();
       case AccountPermissionsScreens.PermissionsSummary:
-        return renderPermissionsSummaryScreen();
+        return isNonDappNetworkSwitch
+          ? renderNetworkPermissionSummaryScreen()
+          : renderPermissionsSummaryScreen();
     }
   }, [
     permissionsScreen,
+    isNonDappNetworkSwitch,
     renderConnectedScreen,
     renderConnectMoreAccountsScreen,
     renderEditAccountsPermissionsScreen,
     renderConnectNetworksScreen,
     renderRevokeScreen,
+    renderChooseFromPermittedNetworksScreen,
     renderPermissionsSummaryScreen,
+    renderNetworkPermissionSummaryScreen,
   ]);
 
   return isRenderedAsBottomSheet ? (
-    <BottomSheet ref={sheetRef}>{renderPermissionsScreens()}</BottomSheet>
+    <BottomSheet ref={sheetRef} isInteractable={!isNonDappNetworkSwitch}>
+      {renderPermissionsScreens()}
+    </BottomSheet>
   ) : (
     renderPermissionsScreens()
   );
diff --git a/app/components/Views/AccountPermissions/AccountPermissions.types.ts b/app/components/Views/AccountPermissions/AccountPermissions.types.ts
index 0a7c0a4e897..fb536e2c5d4 100644
--- a/app/components/Views/AccountPermissions/AccountPermissions.types.ts
+++ b/app/components/Views/AccountPermissions/AccountPermissions.types.ts
@@ -8,6 +8,7 @@ export enum AccountPermissionsScreens {
   ConnectMoreNetworks = 'ConnectMoreNetworks',
   Revoke = 'Revoke',
   PermissionsSummary = 'PermissionsSummary',
+  ChooseFromPermittedNetworks = 'ChooseFromPermittedNetworks',
 }
 
 /**
@@ -24,6 +25,7 @@ export interface AccountPermissionsProps {
       };
       isRenderedAsBottomSheet?: boolean;
       initialScreen?: AccountPermissionsScreens;
+      isNonDappNetworkSwitch?: boolean;
     };
   };
 }
diff --git a/app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.tsx b/app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.tsx
index 49463cd91de..3521a375e7f 100644
--- a/app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.tsx
+++ b/app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.tsx
@@ -26,7 +26,7 @@ interface ConnectionDetailsProps {
   };
 }
 
-const AccountPermissionsConfirmRevokeAll = (props: ConnectionDetailsProps) => {
+const ConnectionDetails = (props: ConnectionDetailsProps) => {
   const { connectionDateTime = 123456789 } = props.route.params;
 
   const { styles } = useStyles(styleSheet, {});
@@ -73,4 +73,4 @@ const AccountPermissionsConfirmRevokeAll = (props: ConnectionDetailsProps) => {
   );
 };
 
-export default AccountPermissionsConfirmRevokeAll;
+export default ConnectionDetails;
diff --git a/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.styles.ts b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.styles.ts
new file mode 100644
index 00000000000..998a7efb9a4
--- /dev/null
+++ b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.styles.ts
@@ -0,0 +1,50 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+/**
+ * Style sheet function for AccountPermissionsConnected screen.
+ * @returns StyleSheet object.
+ */
+const styleSheet = StyleSheet.create({
+  body: {
+    paddingHorizontal: 16,
+  },
+  networkPicker: {
+    marginVertical: 16,
+  },
+  sheetActionContainer: {
+    marginVertical: 16,
+  },
+  ctaButtonsContainer: {
+    marginTop: 24,
+    flexDirection: 'row',
+  },
+  button: { flex: 1 },
+  buttonSeparator: {
+    width: 16,
+  },
+  downCaretContainer: { justifyContent: 'center', flex: 1 },
+  disabled: {
+    opacity: 0.5,
+  },
+  sectionTitle: { marginBottom: 16 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 16,
+  },
+  managePermissionsButton: { marginHorizontal: 16, marginTop: 16 },
+  sectionTitleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  infoButtonContainer: { alignSelf: 'flex-start', marginLeft: 4 },
+  networkSelectorListContainer: {
+    marginBottom: 16,
+    marginTop: 4,
+  },
+});
+
+export default styleSheet;
diff --git a/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.tsx b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.tsx
new file mode 100644
index 00000000000..1a1821c10b3
--- /dev/null
+++ b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.tsx
@@ -0,0 +1,220 @@
+// Third party dependencies.
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+
+// External dependencies.
+import SheetHeader from '../../../../component-library/components/Sheet/SheetHeader';
+import { strings } from '../../../../../locales/i18n';
+import TagUrl from '../../../../component-library/components/Tags/TagUrl';
+import PickerNetwork from '../../../../component-library/components/Pickers/PickerNetwork';
+import {
+  getDecimalChainId,
+  isMultichainVersion1Enabled,
+  getNetworkImageSource,
+  handleNetworkSwitch,
+} from '../../../../util/networks';
+import { AccountPermissionsScreens } from '../AccountPermissions.types';
+import { MetaMetricsEvents } from '../../../../core/Analytics';
+import Routes from '../../../../constants/navigation/Routes';
+import {
+  selectProviderConfig,
+  ProviderConfig,
+  selectNetworkConfigurations,
+} from '../../../../selectors/networkController';
+import { useNetworkInfo } from '../../../../selectors/selectedNetworkController';
+import { ConnectedAccountsSelectorsIDs } from '../../../../../e2e/selectors/Browser/ConnectedAccountModal.selectors';
+import {
+  IconColor,
+  IconName,
+} from '../../../../component-library/components/Icons/Icon';
+import ButtonIcon, {
+  ButtonIconSizes,
+} from '../../../../component-library/components/Buttons/ButtonIcon';
+import NetworkSelectorList from '../../../../components/UI/NetworkSelectorList/NetworkSelectorList';
+import Engine from '../../../../core/Engine';
+import { PermissionKeys } from '../../../../core/Permissions/specifications';
+import { CaveatTypes } from '../../../../core/Permissions/constants';
+
+// Internal dependencies.
+import { NetworkPermissionsConnectedProps } from './NetworkPermissionsConnected.types';
+import styles from './NetworkPermissionsConnected.styles';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
+import Text, {
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import Avatar, {
+  AvatarSize,
+  AvatarVariant,
+} from '../../../../component-library/components/Avatars/Avatar';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../../../component-library/components/Buttons/Button';
+
+const AccountPermissionsConnected = ({
+  onSetPermissionsScreen,
+  onDismissSheet,
+  hostname,
+  favicon,
+  secureIcon,
+  urlWithProtocol,
+}: NetworkPermissionsConnectedProps) => {
+  const { navigate } = useNavigation();
+  const { trackEvent } = useMetrics();
+
+  const providerConfig: ProviderConfig = useSelector(selectProviderConfig);
+
+  const { networkName, networkImageSource } = useNetworkInfo(hostname);
+
+  const openRevokePermissions = () =>
+    onSetPermissionsScreen(AccountPermissionsScreens.Revoke);
+
+  const switchNetwork = useCallback(() => {
+    navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+      screen: Routes.SHEET.NETWORK_SELECTOR,
+    });
+
+    trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, {
+      chain_id: getDecimalChainId(providerConfig.chainId),
+    });
+  }, [providerConfig.chainId, navigate, trackEvent]);
+
+  const networkConfigurations = useSelector(selectNetworkConfigurations);
+
+  // Get permitted chain IDs
+  const getPermittedChainIds = () => {
+    try {
+      const caveat = Engine.context.PermissionController.getCaveat(
+        hostname,
+        PermissionKeys.permittedChains,
+        CaveatTypes.restrictNetworkSwitching,
+      );
+      if (Array.isArray(caveat?.value)) {
+        return caveat.value.filter(
+          (item): item is string => typeof item === 'string',
+        );
+      }
+    } catch (e) {
+      // noop
+    }
+    // If no permitted chains found, default to current chain
+    return providerConfig?.chainId ? [providerConfig.chainId] : [];
+  };
+
+  const permittedChainIds = getPermittedChainIds();
+
+  // Filter networks to only show permitted ones, excluding the active network
+  const networks = Object.entries(networkConfigurations)
+    .filter(
+      ([key]) =>
+        permittedChainIds.includes(key) && key !== providerConfig?.chainId,
+    )
+    .map(([key, network]) => ({
+      id: key,
+      name: network.name,
+      rpcUrl: network.rpcEndpoints[network.defaultRpcEndpointIndex].url,
+      isSelected: false,
+      //@ts-expect-error - The utils/network file is still JS and this function expects a networkType, and should be optional
+      imageSource: getNetworkImageSource({
+        chainId: network?.chainId,
+      }),
+    }));
+
+  return (
+    <>
+      {!isMultichainVersion1Enabled && (
+        <SheetHeader title={strings('accounts.connected_accounts_title')} />
+      )}
+      {isMultichainVersion1Enabled && (
+        <View style={styles.header}>
+          <Avatar
+            variant={AvatarVariant.Favicon}
+            imageSource={favicon}
+            size={AvatarSize.Md}
+          />
+        </View>
+      )}
+      <View style={styles.body}>
+        {!isMultichainVersion1Enabled && (
+          <TagUrl
+            imageSource={favicon}
+            label={urlWithProtocol}
+            cta={{
+              label: strings('accounts.permissions'),
+              onPress: openRevokePermissions,
+            }}
+            iconName={secureIcon}
+          />
+        )}
+        {isMultichainVersion1Enabled && (
+          <View style={styles.sectionTitleContainer}>
+            <Text style={styles.sectionTitle} variant={TextVariant.HeadingSM}>
+              {strings('permissions.permitted_networks')}
+            </Text>
+            <View style={styles.infoButtonContainer}>
+              <ButtonIcon
+                size={ButtonIconSizes.Md}
+                iconName={IconName.Info}
+                iconColor={IconColor.Default}
+                onPress={() => {
+                  navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+                    screen: Routes.SHEET.PERMITTED_NETWORKS_INFO_SHEET,
+                  });
+                }}
+              />
+            </View>
+          </View>
+        )}
+        {!isMultichainVersion1Enabled && (
+          <PickerNetwork
+            label={providerConfig?.nickname || networkName}
+            imageSource={networkImageSource}
+            onPress={switchNetwork}
+            style={styles.networkPicker}
+            testID={ConnectedAccountsSelectorsIDs.NETWORK_PICKER}
+          />
+        )}
+      </View>
+      <View style={styles.networkSelectorListContainer}>
+        <NetworkSelectorList
+          networks={networks}
+          onSelectNetwork={(chainId) => {
+            const theNetworkName = handleNetworkSwitch(
+              getDecimalChainId(chainId),
+            );
+
+            if (theNetworkName) {
+              trackEvent(MetaMetricsEvents.NETWORK_SWITCHED, {
+                chain_id: getDecimalChainId(chainId),
+                from_network: providerConfig?.nickname || theNetworkName,
+                to_network: theNetworkName,
+              });
+              onDismissSheet();
+            }
+          }}
+          selectedChainIds={[]}
+          isMultiSelect={false}
+        />
+      </View>
+      {isMultichainVersion1Enabled && (
+        <Button
+          style={styles.managePermissionsButton}
+          variant={ButtonVariants.Secondary}
+          label={strings('permissions.edit_permissions')}
+          size={ButtonSize.Lg}
+          onPress={() => {
+            onSetPermissionsScreen(
+              AccountPermissionsScreens.ConnectMoreNetworks,
+            );
+          }}
+          width={ButtonWidthTypes.Full}
+        />
+      )}
+    </>
+  );
+};
+
+export default AccountPermissionsConnected;
diff --git a/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.types.ts b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.types.ts
new file mode 100644
index 00000000000..48f7081efc0
--- /dev/null
+++ b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/NetworkPermissionsConnected.types.ts
@@ -0,0 +1,24 @@
+// Third party dependencies.
+import { ImageSourcePropType } from 'react-native';
+
+// External dependencies.
+import { UseAccounts } from '../../../hooks/useAccounts';
+import { AccountPermissionsScreens } from '../AccountPermissions.types';
+import { IconName } from '../../../../component-library/components/Icons/Icon';
+import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
+
+/**
+ * AccountPermissionsConnected props.
+ */
+export interface NetworkPermissionsConnectedProps extends UseAccounts {
+  isLoading?: boolean;
+  selectedAddresses: string[];
+  onSetSelectedAddresses: (addresses: string[]) => void;
+  onSetPermissionsScreen: (screen: AccountPermissionsScreens) => void;
+  onDismissSheet: () => void;
+  hostname: string;
+  urlWithProtocol: string;
+  favicon: ImageSourcePropType;
+  secureIcon: IconName;
+  accountAvatarType: AvatarAccountType;
+}
diff --git a/app/components/Views/AccountPermissions/NetworkPermissionsConnected/index.ts b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/index.ts
new file mode 100644
index 00000000000..7e19acb067d
--- /dev/null
+++ b/app/components/Views/AccountPermissions/NetworkPermissionsConnected/index.ts
@@ -0,0 +1,2 @@
+export { default } from './NetworkPermissionsConnected';
+export type { NetworkPermissionsConnectedProps } from './NetworkPermissionsConnected.types';
diff --git a/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.styles.ts b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.styles.ts
new file mode 100644
index 00000000000..4cd67a1f432
--- /dev/null
+++ b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.styles.ts
@@ -0,0 +1,26 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+/**
+ * Style sheet function for AccountConnectMultiSelector screen.
+ * @returns StyleSheet object.
+ */
+const styleSheet = () =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: 16,
+      alignItems: 'center',
+    },
+    descriptionContainer: {
+      marginBottom: 16,
+    },
+    buttonsContainer: {
+      flexDirection: 'row',
+      gap: 16,
+    },
+    button: {
+      flex: 1,
+    },
+  });
+
+export default styleSheet;
diff --git a/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.tsx b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.tsx
new file mode 100644
index 00000000000..2324e44d58d
--- /dev/null
+++ b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/PermittedNetworksInfoSheet.tsx
@@ -0,0 +1,57 @@
+// Third party dependencies
+import React, { useRef } from 'react';
+
+// External dependencies
+import { View } from 'react-native';
+import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+} from '../../../../component-library/components/Buttons/Button';
+import Text, {
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import { strings } from '../../../../../locales/i18n';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../../component-library/components/BottomSheets/BottomSheet';
+import { useStyles } from '../../../../component-library/hooks';
+import styleSheet from './PermittedNetworksInfoSheet.styles';
+
+const PermittedNetworksInfoSheet = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  const onDismiss = () => {
+    sheetRef.current?.onCloseBottomSheet();
+  };
+
+  return (
+    <BottomSheet ref={sheetRef}>
+      <View style={styles.container}>
+        <BottomSheetHeader>
+          <Text variant={TextVariant.HeadingMD}>
+            {strings('permissions.permitted_networks')}
+          </Text>
+        </BottomSheetHeader>
+        <View style={styles.descriptionContainer}>
+          <Text variant={TextVariant.BodyMD}>
+            {strings('permissions.permitted_networks_info_sheet_description')}
+          </Text>
+        </View>
+        <View style={styles.buttonsContainer}>
+          <Button
+            label={strings('permissions.got_it')}
+            style={styles.button}
+            size={ButtonSize.Lg}
+            variant={ButtonVariants.Primary}
+            onPress={onDismiss}
+          />
+        </View>
+      </View>
+    </BottomSheet>
+  );
+};
+
+export default PermittedNetworksInfoSheet;
diff --git a/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/index.ts b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/index.ts
new file mode 100644
index 00000000000..57ea46d9c01
--- /dev/null
+++ b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/index.ts
@@ -0,0 +1 @@
+export { default } from './PermittedNetworksInfoSheet';
diff --git a/app/components/Views/Browser/index.js b/app/components/Views/Browser/index.js
index 9a32683dbb5..58ba5baf1f6 100644
--- a/app/components/Views/Browser/index.js
+++ b/app/components/Views/Browser/index.js
@@ -1,5 +1,11 @@
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+} from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { captureScreen } from 'react-native-view-shot';
 import { connect, useSelector } from 'react-redux';
@@ -36,9 +42,14 @@ import BrowserTab from '../BrowserTab';
 import { isEqual } from 'lodash';
 import URL from 'url-parse';
 import { useMetrics } from '../../../components/hooks/useMetrics';
-import { selectNetworkConfigurations } from '../../../selectors/networkController';
+import {
+  selectNetworkConfigurations,
+  selectChainId,
+} from '../../../selectors/networkController';
 import { getBrowserViewNavbarOptions } from '../../UI/Navbar';
 import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
+import Engine from '../../../core/Engine';
+import Routes from '../../../constants/navigation/Routes';
 
 const margin = 16;
 const THUMB_WIDTH = Dimensions.get('window').width / 2 - margin * 2;
@@ -60,6 +71,7 @@ export const Browser = (props) => {
     activeTab: activeTabId,
     tabs,
     accountsLength,
+    chainId,
   } = props;
   const previousTabs = useRef(null);
   const { colors } = useTheme();
@@ -146,6 +158,7 @@ export const Browser = (props) => {
       const hostname = new URL(browserUrl).hostname;
       const permittedAccounts = await getPermittedAccounts(hostname);
       const activeAccountAddress = permittedAccounts?.[0];
+
       if (activeAccountAddress) {
         const accountName = getAccountNameWithENS({
           accountAddress: activeAccountAddress,
@@ -363,6 +376,7 @@ export const Browser = (props) => {
         updateTabInfo={updateTabInfo}
         showTabs={showTabs}
         newTab={newTab}
+        isInTabsView={route.params?.showTabs}
       />
     ));
 
@@ -382,6 +396,7 @@ const mapStateToProps = (state) => ({
   networkConfigurations: selectNetworkConfigurations(state),
   tabs: state.browser.tabs,
   activeTab: state.browser.activeTab,
+  chainId: selectChainId(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -431,6 +446,10 @@ Browser.propTypes = {
   route: PropTypes.object,
   accountsLength: PropTypes.number,
   networkConfigurations: PropTypes.object,
+  /**
+   * Current network chainId
+   */
+  chainId: PropTypes.string,
 };
 
 export { default as createBrowserNavDetails } from './Browser.types';
diff --git a/app/components/Views/BrowserTab/index.js b/app/components/Views/BrowserTab/index.js
index 7910f9b52ca..646391aad67 100644
--- a/app/components/Views/BrowserTab/index.js
+++ b/app/components/Views/BrowserTab/index.js
@@ -111,6 +111,11 @@ import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAs
 import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
 import { isTest } from '../../../util/test/utils.js';
 import { EXTERNAL_LINK_TYPE } from '../../../constants/browser';
+import { PermissionKeys } from '../../../core/Permissions/specifications';
+import { CaveatTypes } from '../../../core/Permissions/constants';
+import { AccountPermissionsScreens } from '../AccountPermissions/AccountPermissions.types';
+import { isMultichainVersion1Enabled } from '../../../util/networks';
+import { useIsFocused } from '@react-navigation/native';
 
 const { HOMEPAGE_URL, NOTIFICATION_NAMES, OLD_HOMEPAGE_URL_HOST } =
   AppConstants;
@@ -308,6 +313,8 @@ export const BrowserTab = (props) => {
     (state) => state.browser.activeTab === props.id,
   );
 
+  const isFocused = useIsFocused();
+
   /**
    * Gets the url to be displayed to the user
    * For example, if it's ens then show [site].eth instead of ipfs url
@@ -1533,6 +1540,68 @@ export const BrowserTab = (props) => {
     [props.linkType],
   );
 
+  const checkTabPermissions = useCallback(() => {
+    if (!url.current) return;
+
+    const hostname = new URL(url.current).hostname;
+    const permissionsControllerState =
+      Engine.context.PermissionController.state;
+    const permittedAccounts = getPermittedAccountsByHostname(
+      permissionsControllerState,
+      hostname,
+    );
+
+    const isConnected = permittedAccounts.length > 0;
+
+    if (isConnected) {
+      let permittedChains = [];
+      try {
+        const caveat = Engine.context.PermissionController.getCaveat(
+          hostname,
+          PermissionKeys.permittedChains,
+          CaveatTypes.restrictNetworkSwitching,
+        );
+        permittedChains = Array.isArray(caveat?.value) ? caveat.value : [];
+
+        const currentChainId = props.chainId;
+        const isCurrentChainIdAlreadyPermitted =
+          permittedChains.includes(currentChainId);
+
+        if (!isCurrentChainIdAlreadyPermitted) {
+          props.navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+            screen: Routes.SHEET.ACCOUNT_PERMISSIONS,
+            params: {
+              isNonDappNetworkSwitch: true,
+              hostInfo: {
+                metadata: {
+                  origin: hostname,
+                },
+              },
+              isRenderedAsBottomSheet: true,
+              initialScreen: AccountPermissionsScreens.Connected,
+            },
+          });
+        }
+      } catch (e) {
+        Logger.error(e, 'Error in checkTabPermissions');
+      }
+    }
+  }, [props.chainId, props.navigation]);
+
+  const urlRef = useRef(url.current);
+  useEffect(() => {
+    urlRef.current = url.current;
+    if (
+      isMultichainVersion1Enabled &&
+      urlRef.current &&
+      isFocused &&
+      !props.isInTabsView &&
+      isTabActive
+    ) {
+      checkTabPermissions();
+    }
+  }, [checkTabPermissions, isFocused, props.isInTabsView, isTabActive]);
+
   /**
    * Main render
    */
@@ -1695,6 +1764,10 @@ BrowserTab.propTypes = {
    * Represents the current chain id
    */
   chainId: PropTypes.string,
+  /**
+   * Boolean indicating if browser is in tabs view
+   */
+  isInTabsView: PropTypes.bool,
 };
 
 BrowserTab.defaultProps = {
diff --git a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.styles.ts b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.styles.ts
index bc8b12c76b2..5c76cc491e3 100644
--- a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.styles.ts
+++ b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.styles.ts
@@ -11,7 +11,8 @@ const styleSheet = (params: {
       height: Device.isAndroid() || Device.isMediumDevice() ? '99%' : '100%',
     },
     bodyContainer: {
-      paddingHorizontal: 16,
+      paddingHorizontal: 22,
+      paddingBottom: 4,
     },
     buttonsContainer: {
       marginTop: isMultichainVersion1Enabled ? 0 : 24,
diff --git a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.tsx b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.tsx
index 7f865484329..b9fa49fa1c1 100644
--- a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.tsx
+++ b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.tsx
@@ -28,7 +28,10 @@ import { NetworkConnectMultiSelectorProps } from './NetworkConnectMultiSelector.
 import Routes from '../../../../constants/navigation/Routes';
 import Checkbox from '../../../../component-library/components/Checkbox';
 import NetworkSelectorList from '../../../UI/NetworkSelectorList/NetworkSelectorList';
-import { selectNetworkConfigurations } from '../../../../selectors/networkController';
+import {
+  selectNetworkConfigurations,
+  selectChainId,
+} from '../../../../selectors/networkController';
 import Engine from '../../../../core/Engine';
 import { PermissionKeys } from '../../../../core/Permissions/specifications';
 import { CaveatTypes } from '../../../../core/Permissions/constants';
@@ -45,12 +48,14 @@ const NetworkConnectMultiSelector = ({
   initialChainId,
   selectedChainIds: propSelectedChainIds,
   isInitializedWithPermittedChains = true,
+  hideActiveNetwork = false,
 }: NetworkConnectMultiSelectorProps) => {
   const { styles } = useStyles(styleSheet, { isRenderedAsBottomSheet });
   const { navigate } = useNavigation();
   const [selectedChainIds, setSelectedChainIds] = useState<string[]>([]);
   const [originalChainIds, setOriginalChainIds] = useState<string[]>([]);
   const networkConfigurations = useSelector(selectNetworkConfigurations);
+  const currentChainId = useSelector(selectChainId);
 
   useEffect(() => {
     if (propSelectedChainIds && !isInitializedWithPermittedChains) {
@@ -90,6 +95,25 @@ const NetworkConnectMultiSelector = ({
     if (onNetworksSelected) {
       onNetworksSelected(selectedChainIds);
     } else {
+      // Check if current network is being removed from permissions
+      if (!selectedChainIds.includes(currentChainId)) {
+        // Find the network configuration for the first permitted chain
+        const networkToSwitch = Object.entries(networkConfigurations).find(
+          ([, { chainId }]) => chainId === selectedChainIds[0],
+        );
+
+        if (networkToSwitch) {
+          const [, config] = networkToSwitch;
+          const { rpcEndpoints, defaultRpcEndpointIndex } = config;
+          const { networkClientId } = rpcEndpoints[defaultRpcEndpointIndex];
+
+          // Switch to the network using networkClientId
+          await Engine.context.NetworkController.setActiveNetwork(
+            networkClientId,
+          );
+        }
+      }
+
       let hasPermittedChains = false;
       try {
         hasPermittedChains = Engine.context.PermissionController.hasCaveat(
@@ -127,10 +151,17 @@ const NetworkConnectMultiSelector = ({
       }
       onUserAction(USER_INTENT.Confirm);
     }
-  }, [selectedChainIds, hostname, onUserAction, onNetworksSelected]);
+  }, [
+    selectedChainIds,
+    hostname,
+    onUserAction,
+    onNetworksSelected,
+    currentChainId,
+    networkConfigurations,
+  ]);
 
-  const networks = Object.entries(networkConfigurations).map(
-    ([key, network]: [string, NetworkConfiguration]) => ({
+  const networks = Object.entries(networkConfigurations)
+    .map(([key, network]: [string, NetworkConfiguration]) => ({
       id: key,
       name: network.name,
       rpcUrl: network.rpcEndpoints[network.defaultRpcEndpointIndex].url,
@@ -139,8 +170,11 @@ const NetworkConnectMultiSelector = ({
       imageSource: getNetworkImageSource({
         chainId: network?.chainId,
       }),
-    }),
-  );
+    }))
+    .filter((network) => {
+      if (!hideActiveNetwork) return true;
+      return network.id !== currentChainId;
+    });
 
   const onSelectNetwork = useCallback(
     (clickedChainId) => {
diff --git a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.types.ts b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.types.ts
index ca7173f8928..fd5a90d72ba 100644
--- a/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.types.ts
+++ b/app/components/Views/NetworkConnect/NetworkConnectMultiSelector/NetworkConnectMultiSelector.types.ts
@@ -17,4 +17,5 @@ export interface NetworkConnectMultiSelectorProps {
   initialChainId?: string;
   selectedChainIds?: string[];
   isInitializedWithPermittedChains?: boolean;
+  hideActiveNetwork?: boolean;
 }
diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts
index e3eef28d2b7..d7bc8c39c29 100644
--- a/app/constants/navigation/Routes.ts
+++ b/app/constants/navigation/Routes.ts
@@ -103,6 +103,7 @@ const Routes = {
     ACCOUNT_PERMISSIONS: 'AccountPermissions',
     REVOKE_ALL_ACCOUNT_PERMISSIONS: 'RevokeAllAccountPermissions',
     CONNECTION_DETAILS: 'ConnectionDetails',
+    PERMITTED_NETWORKS_INFO_SHEET: 'PermittedNetworksInfoSheet',
     NETWORK_SELECTOR: 'NetworkSelector',
     RETURN_TO_DAPP_MODAL: 'ReturnToDappModal',
     ACCOUNT_ACTIONS: 'AccountActions',
diff --git a/app/core/RPCMethods/lib/ethereum-chain-utils.js b/app/core/RPCMethods/lib/ethereum-chain-utils.js
index dc3575ad718..48c1cc5d353 100644
--- a/app/core/RPCMethods/lib/ethereum-chain-utils.js
+++ b/app/core/RPCMethods/lib/ethereum-chain-utils.js
@@ -206,11 +206,8 @@ export async function switchToNetwork({
   origin,
   isAddNetworkFlow = false,
 }) {
-  const {
-    NetworkController,
-    PermissionController,
-    SelectedNetworkController,
-  } = controllers;
+  const { NetworkController, PermissionController, SelectedNetworkController } =
+    controllers;
   const getCaveat = ({ target, caveatType }) => {
     try {
       return PermissionController.getCaveat(origin, target, caveatType);
@@ -249,7 +246,7 @@ export async function switchToNetwork({
   // for some reason this extra step is necessary for accessing the env variable in test environment
   const chainPermissionsFeatureEnabled =
     { ...process.env }?.NODE_ENV === 'test'
-      ? { ...process.env }?.MM_CHAIN_PERMISSIONS === '1'
+      ? { ...process.env }?.MM_CHAIN_PERMISSIONS === 'true'
       : isChainPermissionsFeatureEnabled;
 
   const { value: permissionedChainIds } =
diff --git a/app/core/RPCMethods/wallet_addEthereumChain.test.js b/app/core/RPCMethods/wallet_addEthereumChain.test.js
index 5ed8451424b..cdfe2e510c1 100644
--- a/app/core/RPCMethods/wallet_addEthereumChain.test.js
+++ b/app/core/RPCMethods/wallet_addEthereumChain.test.js
@@ -296,10 +296,12 @@ describe('RPC Method - wallet_addEthereumChain', () => {
     await expect(
       wallet_addEthereumChain({
         req: {
-          params: [{
+          params: [
+            {
               ...correctParams,
               nativeCurrency: { symbol, decimals: 18 },
-          }],
+            },
+          ],
         },
         ...otherOptions,
       }),
@@ -471,10 +473,10 @@ describe('RPC Method - wallet_addEthereumChain', () => {
 
   describe('MM_CHAIN_PERMISSIONS is enabled', () => {
     beforeAll(() => {
-      process.env.MM_CHAIN_PERMISSIONS = 1;
+      process.env.MM_CHAIN_PERMISSIONS = 'true';
     });
     afterAll(() => {
-      process.env.MM_CHAIN_PERMISSIONS = 0;
+      process.env.MM_CHAIN_PERMISSIONS = 'false';
     });
     afterEach(() => {
       jest.clearAllMocks();
diff --git a/app/core/RPCMethods/wallet_switchEthereumChain.test.js b/app/core/RPCMethods/wallet_switchEthereumChain.test.js
index 032a8a6ca5d..8f04f11f321 100644
--- a/app/core/RPCMethods/wallet_switchEthereumChain.test.js
+++ b/app/core/RPCMethods/wallet_switchEthereumChain.test.js
@@ -163,10 +163,10 @@ describe('RPC Method - wallet_switchEthereumChain', () => {
 
   describe('MM_CHAIN_PERMISSIONS is enabled', () => {
     beforeAll(() => {
-      process.env.MM_CHAIN_PERMISSIONS = 1;
+      process.env.MM_CHAIN_PERMISSIONS = 'true';
     });
     afterAll(() => {
-      process.env.MM_CHAIN_PERMISSIONS = 0;
+      process.env.MM_CHAIN_PERMISSIONS = 'false';
     });
     it('should not change network permissions and should switch without user approval when chain is already permitted', async () => {
       const spyOnGrantPermissionsIncremental = jest.spyOn(
diff --git a/app/util/networks/index.js b/app/util/networks/index.js
index b05627467d4..7fb7d10b9ae 100644
--- a/app/util/networks/index.js
+++ b/app/util/networks/index.js
@@ -585,13 +585,12 @@ export const deprecatedGetNetworkId = async () => {
 };
 
 export const isMultichainVersion1Enabled =
-  process.env.MM_MULTICHAIN_V1_ENABLED === '1';
+  process.env.MM_MULTICHAIN_V1_ENABLED === 'true';
 
 export const isChainPermissionsFeatureEnabled =
-  process.env.MM_CHAIN_PERMISSIONS === '1';
+  process.env.MM_CHAIN_PERMISSIONS === 'true';
 
 export const isPermissionsSettingsV1Enabled =
-  process.env.MM_PERMISSIONS_SETTINGS_V1_ENABLED === '1';
+  process.env.MM_PERMISSIONS_SETTINGS_V1_ENABLED === 'true';
 
-export const isPortfolioViewEnabled =
-  process.env.PORTFOLIO_VIEW === 'true';
+export const isPortfolioViewEnabled = process.env.PORTFOLIO_VIEW === 'true';
diff --git a/bitrise.yml b/bitrise.yml
index c2c128b9ebd..23db9437bee 100644
--- a/bitrise.yml
+++ b/bitrise.yml
@@ -1535,6 +1535,9 @@ app:
     - opts:
         is_expand: false
       MM_MULTICHAIN_V1_ENABLED: false
+    - opts:
+        is_expand: false
+      MM_CHAIN_PERMISSIONS: false
     - opts:
         is_expand: false
       MM_PERMISSIONS_SETTINGS_V1_ENABLED: false
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 490e20b7f2a..709285ac508 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -1880,7 +1880,15 @@
     "cancel": "Cancel",
     "got_it": "Got it",
     "connection_details_title": "Connection Details",
-    "connection_details_description": "You connected to this site using the MetaMask browser on {{connectionDateTime}}"
+    "connection_details_description": "You connected to this site using the MetaMask browser on {{connectionDateTime}}",
+    "title_add_network_permission": "Add network permission",
+    "add_this_network": "Add this network",
+    "permitted_networks": "Permitted networks",
+    "choose_from_permitted_networks": "Choose from permitted networks",
+    "this_site_cant": "This site can't be used with your current network. Add network permissions or choose an already permitted network.",
+    "non_permitted_network_description": "This site can't be used with your current network. Add network permissions or choose an already permitted network.",
+    "edit_permissions": "Edit permissions",
+    "permitted_networks_info_sheet_description": "This is a list of networks that you've previously granted permissions to use on this site. Select one from the list or edit network permissions for this site."
   },
   "select": {
     "cancel": "Cancel",
diff --git a/sonar-project.properties b/sonar-project.properties
index bf4c01cde7d..12e0532c996 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -15,7 +15,7 @@ sonar.exclusions=**.stories.**, e2e/**, wdio/**
 sonar.test.inclusions=**.test.**
 
 # Excluded project files from coverage.
-sonar.coverage.exclusions=**AccountConnectMultiSelector**, **AccountPermissionsConfirmRevokeAll**, **PermissionsSettings**, **NetworkConnectMultiSelector**, **NetworkSelectorList**, **PermissionsSummary**, **AccountConnect.tsx,  **util/test**, **AccountPermissions.tsx, **NetworkVerificationInfo.tsx, **ConnectionDetails**, **TabThumbnail**,
+sonar.coverage.exclusions=**AccountConnectMultiSelector**, **AccountPermissionsConfirmRevokeAll**, **PermissionsSettings**, **NetworkConnectMultiSelector**, **NetworkSelectorList**, **PermissionsSummary**, **AccountConnect.tsx,  **util/test**, **AccountPermissions.tsx, **NetworkVerificationInfo.tsx, **ConnectionDetails**, **TabThumbnail**, **PermittedNetworksInfoSheet**, **NetworkPermissionsConnected**, **BrowserTab**,
 
 # Test coverage path in GitHub action
 sonar.javascript.lcov.reportPaths=/coverage/lcov.info