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

… data (#11590)  ## **Description** The data is not ready yet to display permissions of all source, it will require a 'source' attribute to say if its sdk, wallet connect or in app browser. This is an attempt at filtering them based on differences the 'might' always have, but even if it did work now, it could break anytime because it requires a real source property meant to identify the source.  ## **Related issues** Fixes: ## **Manual testing steps** 1. set the feature flag export MM_MULTICHAIN_V1_ENABLED="1" 2. go to settings -> permissions 3. if you have in app browser permissions, they should be visible in this list of permissions ## **Screenshots/Recordings**  | Before (mocked list) | After (not mocked list) | |--------------|--------------| | <img width="350" alt="Screenshot 2024-04-18 at 3 56 43 PM" src="https://github.com/user-attachments/assets/2a46f217-742a-4651-a7d0-71c2cef60fde"> |<img width="350" alt="Screenshot 2024-04-18 at 3 56 43 PM" src="https://github.com/user-attachments/assets/1f965baa-89c8-4745-b378-1281c7001db2"> | ## **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 8, 2024 · 099b3df · 099b3df
1 parent 1c27676
commit 099b3df
Show file tree

Hide file tree

Showing 19 changed files with 287 additions and 136 deletions.
diff --git a/app/components/Nav/App/index.js b/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}

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.styles.ts b/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,
     },

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
@@ -40,6 +40,8 @@ import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../component-library/components/Buttons/ButtonIcon';
 import { getNetworkImageSource } from '../../../util/networks';
+import Engine from '../../../core/Engine';
+import { SDKSelectorsIDs } from '../../../../e2e/selectors/Settings/SDK.selectors';
 
 const PermissionsSummary = ({
   currentPageInformation,
@@ -64,6 +66,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 +128,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={SDKSelectorsIDs.CONNECTION_DETAILS_BUTTON}
+            />
+          )}
+        </View>
       </View>
     );
   }
@@ -150,20 +178,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 +378,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>

diff --git a/app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap b/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,
             }

diff --git a/app/components/Views/AccountConnect/AccountConnect.tsx b/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(

diff --git a/...mponents/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.tsx b/...mponents/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(
     () =>

diff --git a/app/components/Views/AccountPermissions/AccountPermissions.tsx b/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();

diff --git a/...ountPermissions/AccountPermissionsConfirmRevokeAll/AccountPermissionsConfirmRevokeAll.tsx b/...ountPermissions/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();

diff --git a/app/components/Views/AccountPermissions/ConnectionDetails/ConnectionDetails.styles.ts b/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;