diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx index 1078fcddb8e..9fea3eecabf 100644 --- a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx +++ b/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 ( @@ -177,31 +205,35 @@ const PermissionsSummary = ({ /> - {strings('permissions.wants_to_see_your_accounts')} + {strings('permissions.see_your_accounts')} - {strings('permissions.requesting_for')} - - - {`${ - selectedAccount?.name ?? - strings('browser.undefined_account') - }`} + {getAccountLabel()} - {selectedAccount?.address && ( - - + {accountAddresses.length > 0 ? ( + ({ + variant: AvatarVariant.Account, + accountAddress: address, + size: AvatarSize.Xs, + }))} /> - - )} + ) : ( + selectedAccount?.address && ( + + ) + )} + {renderEndAccessory()} @@ -317,7 +349,7 @@ const PermissionsSummary = ({ ]} testID={CommonSelectorsIDs.CONNECT_BUTTON} > - {strings('confirmation_modal.confirm_cta')} + {strings('accounts.connect')} )} diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts index 1be07727a7d..470f893f93d 100644 --- a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts +++ b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts @@ -21,4 +21,5 @@ export interface PermissionsSummaryProps { chainName: string; chainId: string; }; + accountAddresses?: string[]; } diff --git a/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap b/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap index b6d0fea2047..2543543d2a1 100644 --- a/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap +++ b/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap @@ -240,22 +240,7 @@ exports[`PermissionsSummary should render correctly 1`] = ` } } > - Requesting for - - - Account 2 + Connected to Account 2 @@ -1018,7 +1003,7 @@ exports[`PermissionsSummary should render correctly 1`] = ` ] } > - Confirm + Connect @@ -1512,7 +1497,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = ` ] } > - Confirm + Connect diff --git a/app/components/Views/AccountConnect/AccountConnect.tsx b/app/components/Views/AccountConnect/AccountConnect.tsx index 9883878435c..2258e29f9a0 100644 --- a/app/components/Views/AccountConnect/AccountConnect.tsx +++ b/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( selectedWalletAddress ? [selectedWalletAddress] : [], ); + const [confirmedAddresses, setConfirmedAddresses] = + useState(selectedAddresses); + const sheetRef = useRef(null); const [screen, setScreen] = useState( 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 ; - }, [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, diff --git a/app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.styles.ts b/app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.styles.ts index c255f107de9..e4debbf38b0 100644 --- a/app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.styles.ts +++ b/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, diff --git a/app/components/Views/AccountPermissions/AccountPermissions.tsx b/app/components/Views/AccountPermissions/AccountPermissions.tsx index 7db1f844369..b571decaa67 100755 --- a/app/components/Views/AccountPermissions/AccountPermissions.tsx +++ b/app/components/Views/AccountPermissions/AccountPermissions.tsx @@ -487,6 +487,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => { ? setPermissionsScreen(AccountPermissionsScreens.Connected) : navigation.navigate('PermissionsManager'), isRenderedAsBottomSheet, + accountAddresses: checksummedPermittedAddresses, }; return ; diff --git a/locales/languages/en.json b/locales/languages/en.json index 44faf32cba7..ffa3e6c9d9c 100644 --- a/locales/languages/en.json +++ b/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"