feat(2796): permission settings replace some of the mock data by real data

app/components/Nav/App/index.js

@@ -63,6 +63,7 @@ import AccountConnect from '../../../components/Views/AccountConnect';
 import AccountPermissions from '../../../components/Views/AccountPermissions';
 import { AccountPermissionsScreens } from '../../../components/Views/AccountPermissions/AccountPermissions.types';
 import AccountPermissionsConfirmRevokeAll from '../../../components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll';
+import ConnectionDetails from '../../../components/Views/AccountPermissions/ConnectionDetails';
 import { SRPQuiz } from '../../Views/Quiz';
 import { TurnOffRememberMeModal } from '../../../components/UI/TurnOffRememberMeModal';
 import AssetHideConfirmation from '../../Views/AssetHideConfirmation';
@@ -424,6 +425,10 @@ const RootModalFlow = () => (
       name={Routes.SHEET.REVOKE_ALL_ACCOUNT_PERMISSIONS}
       component={AccountPermissionsConfirmRevokeAll}
     />
+    <Stack.Screen
+      name={Routes.SHEET.CONNECTION_DETAILS}
+      component={ConnectionDetails}
+    />
     <Stack.Screen
       name={Routes.SHEET.NETWORK_SELECTOR}
       component={NetworkSelector}

app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts

@@ -107,7 +107,11 @@ const createStyles = (params: {
       justifyContent: 'space-between',
     },
     startAccessory: { flex: 1, paddingLeft: 16 },
-    endAccessory: { flex: 1, paddingRight: 16 },
+    endAccessory: {
+      flex: 1,
+      paddingRight: 16,
+      alignItems: 'flex-end',
+    },
     editArrow: {
       marginHorizontal: 16,
     },

app/components/UI/PermissionsSummary/PermissionsSummary.tsx

@@ -40,6 +40,7 @@ import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../component-library/components/Buttons/ButtonIcon';
 import { getNetworkImageSource } from '../../../util/networks';
+import Engine from '../../../core/Engine';
 
 const PermissionsSummary = ({
   currentPageInformation,
@@ -64,6 +65,8 @@ const PermissionsSummary = ({
   const { navigate } = useNavigation();
   const selectedAccount = useSelectedAccount();
 
+  const hostname = new URL(currentPageInformation.url).hostname;
+
   // if network switch, we get the chain name from the customNetworkInformation
   let chainName = '';
   let chainImage: ImageSourcePropType;
@@ -124,7 +127,31 @@ const PermissionsSummary = ({
         </View>
 
         <View style={styles.logoContainer}>{renderTopIcon()}</View>
-        <View style={styles.endAccessory}></View>
+        <View style={styles.endAccessory}>
+          {!isRenderedAsBottomSheet && (
+            <ButtonIcon
+              size={ButtonIconSizes.Sm}
+              iconName={IconName.Info}
+              iconColor={IconColor.Default}
+              onPress={() => {
+                navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
+                  screen: Routes.SHEET.CONNECTION_DETAILS,
+                  params: {
+                    hostInfo: {
+                      metadata: {
+                        origin:
+                          currentPageInformation?.url &&
+                          new URL(currentPageInformation?.url).hostname,
+                      },
+                    },
+                    connectionDateTime: new Date().getTime(),
+                  },
+                });
+              }}
+              // testID={CommonSelectorsIDs.PERMISSIONS_INFO_BUTTON}
+            />
+          )}
+        </View>
       </View>
     );
   }
@@ -150,20 +177,24 @@ const PermissionsSummary = ({
     </View>
   );
 
+  const onRevokeAllHandler = useCallback(async () => {
+    await Engine.context.PermissionController.revokeAllPermissions(hostname);
+    navigate('PermissionsManager');
+  }, [hostname, navigate]);
+
   const toggleRevokeAllPermissionsModal = useCallback(() => {
     navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
       screen: Routes.SHEET.REVOKE_ALL_ACCOUNT_PERMISSIONS,
       params: {
         hostInfo: {
           metadata: {
-            origin:
-              currentPageInformation?.url &&
-              new URL(currentPageInformation?.url).hostname,
+            origin: hostname,
           },
         },
+        onRevokeAll: !isRenderedAsBottomSheet && onRevokeAllHandler,
       },
     });
-  }, [navigate, currentPageInformation?.url]);
+  }, [navigate, isRenderedAsBottomSheet, onRevokeAllHandler, hostname]);
 
   const getAccountLabel = useCallback(() => {
     if (isAlreadyConnected) {
@@ -346,10 +377,10 @@ const PermissionsSummary = ({
             <TextComponent variant={TextVariant.HeadingSM}>
               {!isAlreadyConnected || isNetworkSwitch
                 ? strings('permissions.title_dapp_url_wants_to', {
-                    dappUrl: new URL(currentPageInformation.url).hostname,
+                    dappUrl: hostname,
                   })
                 : strings('permissions.title_dapp_url_has_approval_to', {
-                    dappUrl: new URL(currentPageInformation.url).hostname,
+                    dappUrl: hostname,
                   })}
             </TextComponent>
           </View>

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

@@ -99,6 +99,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
         <View
           style={
             {
+              "alignItems": "flex-end",
               "flex": 1,
               "paddingRight": 16,
             }
@@ -860,6 +861,7 @@ exports[`PermissionsSummary should render correctly for network switch 1`] = `
         <View
           style={
             {
+              "alignItems": "flex-end",
               "flex": 1,
               "paddingRight": 16,
             }

app/components/Views/AccountConnect/AccountConnect.tsx

@@ -13,7 +13,6 @@ import Modal from 'react-native-modal';
 import { useSelector } from 'react-redux';
 // External dependencies.
 import { strings } from '../../../../locales/i18n';
-import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
@@ -33,7 +32,6 @@ import {
 } from '../../../selectors/accountsController';
 import { isDefaultAccountName } from '../../../util/ENSUtils';
 import Logger from '../../../util/Logger';
-import getAccountNameWithENS from '../../../util/accounts';
 import {
   getAddressAccountType,
   safeToChecksumAddress,
@@ -133,11 +131,6 @@ const AccountConnect = (props: AccountConnectProps) => {
   >([]);
 
   const { toastRef } = useContext(ToastContext);
-  const accountAvatarType = useSelector((state: RootState) =>
-    state.settings.useBlockieIcon
-      ? AvatarAccountType.Blockies
-      : AvatarAccountType.JazzIcon,
-  );
 
   // origin is set to the last active tab url in the browser which can conflict with sdk
   const inappBrowserOrigin: string = useSelector(getActiveTabUrl, isEqual);
@@ -439,11 +432,6 @@ const AccountConnect = (props: AccountConnectProps) => {
     };
     const connectedAccountLength = selectedAddresses.length;
     const activeAddress = selectedAddresses[0];
-    const activeAccountName = getAccountNameWithENS({
-      accountAddress: activeAddress,
-      accounts,
-      ensByAccountAddress,
-    });
 
     try {
       setIsLoading(true);
@@ -463,26 +451,15 @@ const AccountConnect = (props: AccountConnectProps) => {
         source: eventSource,
       });
       let labelOptions: ToastOptions['labelOptions'] = [];
-      if (connectedAccountLength > 1) {
-        labelOptions = [
-          { label: `${connectedAccountLength} `, isBold: true },
-          {
-            label: `${strings('toast.accounts_connected')}`,
-          },
-          { label: `\n${activeAccountName} `, isBold: true },
-          { label: strings('toast.now_active') },
-        ];
-      } else {
-        labelOptions = [
-          { label: `${activeAccountName} `, isBold: true },
-          { label: strings('toast.connected_and_active') },
-        ];
+
+      if (connectedAccountLength >= 1) {
+        labelOptions = [{ label: `${strings('toast.permissions_updated')}` }];
       }
+
       toastRef?.current?.showToast({
-        variant: ToastVariants.Account,
+        variant: ToastVariants.Network,
         labelOptions,
-        accountAddress: activeAddress,
-        accountAvatarType,
+        networkImageSource: faviconSource,
         hasNoTimeout: false,
       });
     } catch (e) {
@@ -496,14 +473,12 @@ const AccountConnect = (props: AccountConnectProps) => {
     eventSource,
     selectedAddresses,
     hostInfo,
-    accounts,
-    ensByAccountAddress,
-    accountAvatarType,
     toastRef,
     accountsLength,
     channelIdOrHostname,
     triggerDappViewedEvent,
     trackEvent,
+    faviconSource,
   ]);
 
   const handleCreateAccount = useCallback(

app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.tsx

@@ -21,6 +21,7 @@ import AccountSelectorList from '../../../UI/AccountSelectorList';
 import HelpText, {
   HelpTextSeverity,
 } from '../../../../component-library/components/Form/HelpText';
+import Engine from '../../../../core/Engine';
 
 // Internal dependencies.
 import { ConnectAccountBottomSheetSelectorsIDs } from '../../../../../e2e/selectors/Browser/ConnectAccountBottomSheet.selectors';
@@ -84,6 +85,11 @@ const AccountConnectMultiSelector = ({
     [accounts, selectedAddresses, onSelectAddress],
   );
 
+  const onRevokeAllHandler = useCallback(async () => {
+    await Engine.context.PermissionController.revokeAllPermissions(hostname);
+    navigate('PermissionsManager');
+  }, [hostname, navigate]);
+
   const toggleRevokeAllAccountPermissionsModal = useCallback(() => {
     navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
       screen: Routes.SHEET.REVOKE_ALL_ACCOUNT_PERMISSIONS,
@@ -93,9 +99,10 @@ const AccountConnectMultiSelector = ({
             origin: urlWithProtocol && new URL(urlWithProtocol).hostname,
           },
         },
+        onRevokeAll: !isRenderedAsBottomSheet && onRevokeAllHandler,
       },
     });
-  }, [navigate, urlWithProtocol]);
+  }, [navigate, urlWithProtocol, isRenderedAsBottomSheet, onRevokeAllHandler]);
 
   const renderSelectAllButton = useCallback(
     () =>

app/components/Views/AccountPermissions/AccountPermissions.tsx

@@ -196,8 +196,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
   useEffect(() => {
     if (
       previousPermittedAccounts.current === undefined &&
-      permittedAccountsByHostname.length === 0 &&
-      isRenderedAsBottomSheet
+      permittedAccountsByHostname.length === 0
     ) {
       // TODO - Figure out better UX instead of auto dismissing. However, we cannot be in this state as long as accounts are not connected.
       hideSheet();

app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/AccountPermissionsConfirmRevokeAll.tsx

@@ -26,6 +26,7 @@ interface AccountPermissionsConfirmRevokeAllProps {
       hostInfo: {
         metadata: { origin: string };
       };
+      onRevokeAll?: () => void;
     };
   };
 }
@@ -37,6 +38,7 @@ const AccountPermissionsConfirmRevokeAll = (
     hostInfo: {
       metadata: { origin: hostname },
     },
+    onRevokeAll,
   } = props.route.params;
 
   const { styles } = useStyles(styleSheet, {});
@@ -48,12 +50,18 @@ const AccountPermissionsConfirmRevokeAll = (
 
   const revokeAllAccounts = useCallback(async () => {
     try {
-      await Engine.context.PermissionController.revokeAllPermissions(hostname);
-      sheetRef.current?.onCloseBottomSheet();
+      if (onRevokeAll) {
+        onRevokeAll();
+      } else {
+        await Engine.context.PermissionController.revokeAllPermissions(
+          hostname,
+        );
+        sheetRef.current?.onCloseBottomSheet();
+      }
     } catch (e) {
       Logger.log(`Failed to revoke all accounts for ${hostname}`, e);
     }
-  }, [hostname, Engine.context.PermissionController]);
+  }, [hostname, Engine.context.PermissionController, onRevokeAll]);
 
   const onCancel = () => {
     sheetRef.current?.onCloseBottomSheet();

app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.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;