feat(2808): edit network permissions (#11963)

## **Description** add and remove permissions to network  ## **Related issues** Contributes to solve issue: MetaMask/MetaMask-planning#2808 ## **Manual testing steps** I have added screenshot below to see how it looks. Set these following variables in js.env, otherwise none of these screens will show. ` export MM_NETWORK_UI_REDESIGN_ENABLED="1" ` ` export MM_MULTICHAIN_V1_ENABLED="1" ` ` export MM_CHAIN_PERMISSIONS="1" ` 1. Go to the in-app brower on the mobile wallet, connect to a dapp like uniswap 2. Click on the icon on top right header, a bottom sheet opens, click on the manage permissions button 3. Edit permissions, and confirm, when going back to the screen, permissions should be kept. ## **Screenshots/Recordings** | Before, user was prompted to give permission | After, user gave permission and is not prompted to give it | |--------------|--------------| | <img width="350" alt="Screenshot 2024-04-18 at 3 56 43 PM" src="https://github.com/user-attachments/assets/5209ce57-6b39-4f37-a2f3-9a700581ff70"> |<img width="350" alt="Screenshot 2024-04-18s at 3 56 43 PM" src="https://github.com/user-attachments/assets/c40883eb-458b-418d-8183-02677d812d43"> | ## **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. --------- Co-authored-by: Alex <[email protected]>
MetaMask · Nov 1, 2024 · b8061aa · b8061aa
1 parent 771100f
commit b8061aa
Show file tree

Hide file tree

Showing 17 changed files with 526 additions and 416 deletions.
diff --git a/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts b/app/components/UI/NetworkSelectorList/NetworkSelectorList.styles.ts
@@ -3,9 +3,8 @@ import { StyleSheet } from 'react-native';
 const styleSheet = () =>
   StyleSheet.create({
     networkItemContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 10,
+      paddingHorizontal: 10,
+      paddingVertical: 14,
     },
     networkAvatar: {
       marginHorizontal: 10,

diff --git a/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx b/app/components/UI/NetworkSelectorList/NetworkSelectorList.tsx
@@ -24,7 +24,7 @@ const NetworkSelectorList = ({
   onSelectNetwork,
   networks = [],
   isLoading = false,
-  selectedNetworkIds,
+  selectedChainIds,
   isMultiSelect = true,
   renderRightAccessory,
   isSelectionDisabled,
@@ -33,7 +33,6 @@ const NetworkSelectorList = ({
 }: NetworkConnectMultiSelectorProps) => {
   const networksLengthRef = useRef<number>(0);
   const { styles } = useStyles(styleSheet, {});
-
   /**
    * Ref for the FlatList component.
    * The type of the ref is not explicitly defined.
@@ -51,8 +50,8 @@ const NetworkSelectorList = ({
         ? CellVariant.MultiSelect
         : CellVariant.Select;
       let isSelectedNetwork = isSelected;
-      if (selectedNetworkIds) {
-        isSelectedNetwork = selectedNetworkIds.includes(id);
+      if (selectedChainIds) {
+        isSelectedNetwork = selectedChainIds.includes(id);
       }
 
       return (
@@ -76,7 +75,7 @@ const NetworkSelectorList = ({
     },
     [
       isLoading,
-      selectedNetworkIds,
+      selectedChainIds,
       renderRightAccessory,
       isSelectionDisabled,
       onSelectNetwork,

diff --git a/app/components/UI/NetworkSelectorList/NetworkSelectorList.types.ts b/app/components/UI/NetworkSelectorList/NetworkSelectorList.types.ts
@@ -12,7 +12,7 @@ export interface NetworkConnectMultiSelectorProps {
   onSelectNetwork?: (id: string, isSelected: boolean) => void;
   networks?: Network[];
   isLoading?: boolean;
-  selectedNetworkIds?: string[];
+  selectedChainIds?: string[];
   isMultiSelect?: boolean;
   renderRightAccessory?: (id: string, name: string) => React.ReactNode;
   isSelectionDisabled?: boolean;

diff --git a/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx b/app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx
@@ -100,6 +100,20 @@ const NetworkVerificationInfo = ({
     [customNetworkInformation],
   );
 
+  const dappOrigin = useMemo(() => {
+    // @ts-expect-error - The CustomNetworkInformation type is missing the pageMeta property
+    const customNetworkUrl = customNetworkInformation.pageMeta?.url;
+    const url = customNetworkUrl ? new URL(customNetworkUrl) : null;
+    if (url) {
+      try {
+        return url.hostname;
+      } catch (error) {
+        console.error('Invalid URL:', error);
+      }
+    }
+    return 'Undefined dapp origin';
+  }, [customNetworkInformation]);
+
   const renderCurrencySymbol = () => (
     <>
       <Text
@@ -437,9 +451,7 @@ const NetworkVerificationInfo = ({
               {strings(
                 'switch_custom_network.add_network_and_give_dapp_permission_warning',
                 {
-                  // @ts-expect-error let's adjust the CustomNetworkInformation after multichain controllers have been updated by the api team
-                  dapp_origin: new URL(customNetworkInformation.pageMeta.url)
-                    ?.hostname,
+                  dapp_origin: dappOrigin,
                 },
               )}
             </Text>

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
@@ -24,7 +24,6 @@ import TextComponent, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import AvatarGroup from '../../../component-library/components/Avatars/AvatarGroup';
-import { SAMPLE_AVATARGROUP_PROPS } from '../../../component-library/components/Avatars/AvatarGroup/AvatarGroup.constants';
 import Button, {
   ButtonSize,
   ButtonVariants,
@@ -57,6 +56,8 @@ const PermissionsSummary = ({
   isDisconnectAllShown = true,
   isNetworkSwitch = false,
   accountAddresses = [],
+  accounts = [],
+  networkAvatars = [],
 }: PermissionsSummaryProps) => {
   const { colors } = useTheme();
   const { styles } = useStyles(styleSheet, { isRenderedAsBottomSheet });
@@ -169,27 +170,56 @@ const PermissionsSummary = ({
       if (accountAddresses.length === 0 && selectedAccount) {
         return `${strings('permissions.connected_to')} ${selectedAccount.name}`;
       }
-      return accountAddresses.length === 1
-        ? `1 ${strings('accounts.account_connected')}`
-        : `${accountAddresses.length} ${strings(
-            'accounts.accounts_connected',
-          )}`;
+      if (accountAddresses.length === 1) {
+        const matchedConnectedAccount = accounts.find(
+          (account) => account.address === accountAddresses[0],
+        );
+        return matchedConnectedAccount?.name;
+      }
+
+      return `${accountAddresses.length} ${strings(
+        'accounts.accounts_connected',
+      )}`;
     }
 
-    if (
-      accountAddresses.length === 1 ||
-      (accountAddresses.length === 0 && selectedAccount)
-    ) {
-      return (
-        selectedAccount?.name &&
-        `${strings('permissions.requesting_for')}${selectedAccount?.name}`
+    if (accountAddresses.length === 1 && accounts?.length >= 1) {
+      const matchedAccount = accounts.find(
+        (account) => account.address === accountAddresses[0],
       );
+      return `${strings('permissions.requesting_for')}${
+        matchedAccount?.name ? matchedAccount.name : accountAddresses[0]
+      }`;
+    }
+
+    if (accountAddresses.length === 0 && selectedAccount) {
+      return `${strings('permissions.requesting_for')}${selectedAccount?.name}`;
     }
 
     return strings('permissions.requesting_for_accounts', {
       numberOfAccounts: accountAddresses.length,
     });
-  }, [accountAddresses, isAlreadyConnected, selectedAccount]);
+  }, [accountAddresses, isAlreadyConnected, selectedAccount, accounts]);
+
+  const getNetworkLabel = useCallback(() => {
+    if (isAlreadyConnected) {
+      return networkAvatars.length === 1
+        ? networkAvatars[0]?.name
+        : `${strings('permissions.n_networks_connect', {
+            numberOfNetworks: networkAvatars.length,
+          })}`;
+    }
+
+    if (networkAvatars.length === 1) {
+      return (
+        networkAvatars[0]?.name &&
+        `${strings('permissions.requesting_for')}${networkAvatars[0]?.name}`
+      );
+    }
+
+    return strings('permissions.requesting_for_networks', {
+      numberOfNetworks: networkAvatars.length,
+    });
+  }, [networkAvatars, isAlreadyConnected]);
 
   function renderAccountPermissionsRequestInfoCard() {
     return (
@@ -280,11 +310,24 @@ const PermissionsSummary = ({
                 </>
               )}
               {!isNetworkSwitch && (
-                <View style={styles.avatarGroup}>
-                  <AvatarGroup
-                    avatarPropsList={SAMPLE_AVATARGROUP_PROPS.avatarPropsList}
-                  />
-                </View>
+                <>
+                  <View style={styles.permissionRequestNetworkName}>
+                    <TextComponent numberOfLines={1} ellipsizeMode="tail">
+                      <TextComponent variant={TextVariant.BodySM}>
+                        {getNetworkLabel()}
+                      </TextComponent>
+                    </TextComponent>
+                  </View>
+                  <View style={styles.avatarGroup}>
+                    <AvatarGroup
+                      // @ts-expect-error - AvatarGroup is not typed
+                      avatarPropsList={networkAvatars.map((avatar) => ({
+                        ...avatar,
+                        variant: AvatarVariant.Network,
+                      }))}
+                    />
+                  </View>
+                </>
               )}
             </View>
           </View>

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts
@@ -1,4 +1,5 @@
 import { USER_INTENT } from '../../../constants/permissions';
+import { Account } from '../../hooks/useAccounts';
 
 export interface PermissionsSummaryProps {
   currentPageInformation: {
@@ -21,5 +22,7 @@ export interface PermissionsSummaryProps {
     chainName: string;
     chainId: string;
   };
+  accounts?: Account[];
   accountAddresses?: string[];
+  networkAvatars?: ({ name: string; imageSource: string } | null)[];
 }