Merge branch 'hotfix/fix-breaking-selector' of github.com:MetaMask/me…

…tamask-mobile into hotfix/fix-breaking-selector
MetaMask · Nov 22, 2024 · 825d2a4 · 825d2a4
2 parents 01a1859 + 4540de3
commit 825d2a4
Show file tree

Hide file tree

Showing 30 changed files with 847 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,13 +127,21 @@ const createStyles = (params: {
     dataIcon: { alignSelf: 'flex-start' },
     disconnectAllContainer: {
       marginHorizontal: 24,
+      marginTop: 8,
       flexDirection: 'row',
     },
     disconnectButton: { flex: 1 },
     editTextContainer: {
       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
@@ -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,27 +339,40 @@ const PermissionsSummary = ({
               {strings('permissions.use_enabled_networks')}
             </TextComponent>
             <View style={styles.permissionRequestNetworkInfo}>
-              {isNetworkSwitch && (
+              {(isNetworkSwitch || isNonDappNetworkSwitch) && (
                 <>
                   <View style={styles.permissionRequestNetworkName}>
                     <TextComponent numberOfLines={1} ellipsizeMode="tail">
                       <TextComponent variant={TextVariant.BodySM}>
                         {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
@@ -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;
 }