feat(2793): permission UI requirements from figma, avatar groups and other stuff

app/components/UI/PermissionsSummary/PermissionsSummary.tsx

@@ -56,6 +56,7 @@ const PermissionsSummary = ({
   isRenderedAsBottomSheet = true,
   isDisconnectAllShown = true,
   isNetworkSwitch = false,
+  accountAddresses = [],
 }: PermissionsSummaryProps) => {
   const { colors } = useTheme();
   const { styles } = useStyles(styleSheet, { isRenderedAsBottomSheet });
@@ -163,6 +164,33 @@ const PermissionsSummary = ({
     });
   }, [navigate, currentPageInformation?.url]);
 
+  const getAccountLabel = useCallback(() => {
+    if (isAlreadyConnected) {
+      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 ||
+      (accountAddresses.length === 0 && selectedAccount)
+    ) {
+      return (
+        selectedAccount?.name &&
+        `${strings('permissions.requesting_for')}${selectedAccount?.name}`
+      );
+    }
+
+    return strings('permissions.requesting_for_accounts', {
+      numberOfAccounts: accountAddresses.length,
+    });
+  }, [accountAddresses, isAlreadyConnected, selectedAccount]);
+
   function renderAccountPermissionsRequestInfoCard() {
     return (
       <TouchableOpacity onPress={handleEditAccountsButtonPress}>
@@ -177,31 +205,35 @@ const PermissionsSummary = ({
           />
           <View style={styles.accountPermissionRequestDetails}>
             <TextComponent variant={TextVariant.BodyMD}>
-              {strings('permissions.wants_to_see_your_accounts')}
+              {strings('permissions.see_your_accounts')}
             </TextComponent>
             <View style={styles.permissionRequestAccountInfo}>
               <View style={styles.permissionRequestAccountName}>
                 <TextComponent numberOfLines={1} ellipsizeMode="tail">
                   <TextComponent variant={TextVariant.BodySM}>
-                    {strings('permissions.requesting_for')}
-                  </TextComponent>
-                  <TextComponent variant={TextVariant.BodySMMedium}>
-                    {`${
-                      selectedAccount?.name ??
-                      strings('browser.undefined_account')
-                    }`}
+                    {getAccountLabel()}
                   </TextComponent>
                 </TextComponent>
               </View>
-              {selectedAccount?.address && (
-                <View style={styles.avatarGroup}>
-                  <Avatar
-                    size={AvatarSize.Xs}
-                    variant={AvatarVariant.Account}
-                    accountAddress={selectedAccount?.address}
+              <View style={styles.avatarGroup}>
+                {accountAddresses.length > 0 ? (
+                  <AvatarGroup
+                    avatarPropsList={accountAddresses.map((address) => ({
+                      variant: AvatarVariant.Account,
+                      accountAddress: address,
+                      size: AvatarSize.Xs,
+                    }))}
                   />
-                </View>
-              )}
+                ) : (
+                  selectedAccount?.address && (
+                    <Avatar
+                      size={AvatarSize.Xs}
+                      variant={AvatarVariant.Account}
+                      accountAddress={selectedAccount.address}
+                    />
+                  )
+                )}
+              </View>
             </View>
           </View>
           {renderEndAccessory()}
@@ -317,7 +349,7 @@ const PermissionsSummary = ({
                 ]}
                 testID={CommonSelectorsIDs.CONNECT_BUTTON}
               >
-                {strings('confirmation_modal.confirm_cta')}
+                {strings('accounts.connect')}
               </StyledButton>
             </View>
           )}

app/components/UI/PermissionsSummary/PermissionsSummary.types.ts

@@ -21,4 +21,5 @@ export interface PermissionsSummaryProps {
     chainName: string;
     chainId: string;
   };
+  accountAddresses?: string[];
 }

app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap

@@ -240,22 +240,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
                       }
                     }
                   >
-                    Requesting for 
-                  </Text>
-                  <Text
-                    accessibilityRole="text"
-                    style={
-                      {
-                        "color": "#141618",
-                        "fontFamily": "EuclidCircularB-Medium",
-                        "fontSize": 12,
-                        "fontWeight": "500",
-                        "letterSpacing": 0,
-                        "lineHeight": 20,
-                      }
-                    }
-                  >
-                    Account 2
+                    Connected to  Account 2
                   </Text>
                 </Text>
               </View>
@@ -1018,7 +1003,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
               ]
             }
           >
-            Confirm
+            Connect
           </Text>
         </TouchableOpacity>
       </View>
@@ -1512,7 +1497,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
               ]
             }
           >
-            Confirm
+            Connect
           </Text>
         </TouchableOpacity>
       </View>

app/components/Views/AccountConnect/AccountConnect.tsx

@@ -38,7 +38,11 @@ import {
   getAddressAccountType,
   safeToChecksumAddress,
 } from '../../../util/address';
-import { getHost, getUrlObj, prefixUrlWithProtocol } from '../../../util/browser';
+import {
+  getHost,
+  getUrlObj,
+  prefixUrlWithProtocol,
+} from '../../../util/browser';
 import { getActiveTabUrl } from '../../../util/transactions';
 import { Account, useAccounts } from '../../hooks/useAccounts';
 
@@ -97,6 +101,9 @@ const AccountConnect = (props: AccountConnectProps) => {
   const [selectedAddresses, setSelectedAddresses] = useState<string[]>(
     selectedWalletAddress ? [selectedWalletAddress] : [],
   );
+  const [confirmedAddresses, setConfirmedAddresses] =
+    useState<string[]>(selectedAddresses);
+
   const sheetRef = useRef<BottomSheetRef>(null);
   const [screen, setScreen] = useState<AccountConnectScreens>(
     AccountConnectScreens.SingleConnect,
@@ -140,7 +147,8 @@ const AccountConnect = (props: AccountConnectProps) => {
 
   const isOriginMMSDKRemoteConn = sdkConnection !== undefined;
 
-  const isOriginWalletConnect = !isOriginMMSDKRemoteConn && wc2Metadata?.id && wc2Metadata?.id.length > 0;
+  const isOriginWalletConnect =
+    !isOriginMMSDKRemoteConn && wc2Metadata?.id && wc2Metadata?.id.length > 0;
 
   const dappIconUrl = sdkConnection?.originatorInfo?.icon;
   const dappUrl = sdkConnection?.originatorInfo?.url ?? '';
@@ -564,9 +572,10 @@ const AccountConnect = (props: AccountConnectProps) => {
         setScreen(AccountConnectScreens.MultiConnectNetworkSelector),
       onUserAction: setUserIntent,
       isAlreadyConnected: false,
+      accountAddresses: confirmedAddresses,
     };
     return <PermissionsSummary {...permissionsSummaryProps} />;
-  }, [faviconSource, urlWithProtocol]);
+  }, [faviconSource, urlWithProtocol, confirmedAddresses]);
 
   const renderSingleConnectSelectorScreen = useCallback(
     () => (
@@ -603,20 +612,25 @@ const AccountConnect = (props: AccountConnectProps) => {
         secureIcon={secureIcon}
         urlWithProtocol={urlWithProtocol}
         onUserAction={setUserIntent}
-        onBack={() => setScreen(AccountConnectScreens.SingleConnect)}
+        onBack={() => {
+          setSelectedAddresses(confirmedAddresses);
+          setScreen(AccountConnectScreens.SingleConnect);
+        }}
         connection={sdkConnection}
         hostname={hostname}
-        onPrimaryActionButtonPress={
-          isMultichainVersion1Enabled
-            ? () => setScreen(AccountConnectScreens.SingleConnect)
-            : undefined
-        }
+        onPrimaryActionButtonPress={() => {
+          setConfirmedAddresses(selectedAddresses);
+          return isMultichainVersion1Enabled
+            ? setScreen(AccountConnectScreens.SingleConnect)
+            : undefined;
+        }}
       />
     ),
     [
       accounts,
       ensByAccountAddress,
       selectedAddresses,
+      confirmedAddresses,
       isLoading,
       faviconSource,
       secureIcon,

app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.styles.ts

@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native';
 // External dependencies.
 import { Theme } from '../../../../util/theme/models';
 import { isMultichainVersion1Enabled } from '../../../../util/networks';
+import Device from '../../../../util/device';
 
 /**
  * Style sheet function for AccountConnectMultiSelector screen.
@@ -18,7 +19,7 @@ const styleSheet = (params: {
   const { vars } = params;
   return StyleSheet.create({
     container: {
-      height: '100%',
+      height: Device.isAndroid() || Device.isMediumDevice() ? '99%' : '100%',
     },
     body: {
       paddingHorizontal: 16,

app/components/Views/AccountPermissions/AccountPermissions.tsx

@@ -487,6 +487,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
           ? setPermissionsScreen(AccountPermissionsScreens.Connected)
           : navigation.navigate('PermissionsManager'),
       isRenderedAsBottomSheet,
+      accountAddresses: checksummedPermittedAddresses,
     };
 
     return <PermissionsSummary {...permissionsSummaryProps} />;

locales/languages/en.json

@@ -714,6 +714,10 @@
     "site_permission_to": "This site has permission to:",
     "address_balance_activity_permission": "See address, account balance, and activity",
     "suggest_transactions": "Suggest transactions to approve",
+    "accounts_connected": "accounts connected",
+    "account_connected": "account connected",
+    "accounts_disconnected": "accounts disconnected.",
+    "account_disconnected": "account disconnected.",
     "disconnect": "Disconnect",
     "disconnect_all": "Disconnect all",
     "reconnect_notice": "If you disconnect from {{dappUrl}}, you’ll need to reconnect your accounts and networks to use this site again.",
@@ -1825,6 +1829,9 @@
     "use_enabled_networks": "Use your enabled networks",
     "wants_to_see_your_accounts": "See your accounts and suggest transactions",
     "requesting_for": "Requesting for ",
+    "requesting_for_accounts": "Requesting for {{numberOfAccounts}} accounts",
+    "see_your_accounts": "See your accounts and suggest transactions",
+    "connected_to": "Connected to ",
     "manage_permissions": "Manage Permissions",
     "edit": "Edit",
     "cancel": "Cancel"