feat: New Ui for permissions dapp screen (#6576)

Co-authored-by: SamuelSalas <samuel.salas.reyes@gmail.com>
MetaMask · Jun 23, 2023 · 0a7830e · 0a7830e
1 parent 96473d3
commit 0a7830e
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 51 deletions.
diff --git a/app/components/Views/AccountPermissions/AccountPermissions.tsx b/app/components/Views/AccountPermissions/AccountPermissions.tsx
@@ -136,7 +136,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       hideSheet();
       toastRef?.current?.showToast({
         variant: ToastVariants.Plain,
-        labelOptions: [{ label: strings('toast.revoked_all') }],
+        labelOptions: [{ label: strings('toast.disconnected_all') }],
       });
       previousPermittedAccounts.current = permittedAccountsByHostname.length;
     }

diff --git a/...ents/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.styles.ts b/...ents/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.styles.ts
@@ -16,7 +16,6 @@ const styleSheet = (params: { theme: Theme }) => {
       paddingHorizontal: 16,
     },
     description: {
-      textAlign: 'center',
       marginVertical: 16,
       color: colors.text.alternative,
     },
@@ -33,6 +32,13 @@ const styleSheet = (params: { theme: Theme }) => {
     },
     downCaretContainer: { justifyContent: 'center', flex: 1 },
     disconnectButton: { alignSelf: 'center' },
+    permissionContainer: { flexDirection: 'row', alignItems: 'center' },
+    securityContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginVertical: 16,
+    },
+    permissionDescription: { marginLeft: 16 },
   });
 };
 

diff --git a/...components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx b/...components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx
@@ -32,7 +32,13 @@ import { AccountPermissionsRevokeProps } from './AccountPermissionsRevoke.types'
 import styleSheet from './AccountPermissionsRevoke.styles';
 import { useSelector } from 'react-redux';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { CONNECTED_ACCOUNTS_MODAL_REVOKE_BUTTON_ID } from '../../../../../wdio/screen-objects/testIDs/Components/ConnectedAccountsModal.testIds';
+import {
+  CONNECTED_ACCOUNTS_MODAL_DISCONNECT_ALL_BUTTON_ID,
+  CONNECTED_ACCOUNTS_MODAL_REVOKE_BUTTON_ID,
+} from '../../../../../wdio/screen-objects/testIDs/Components/ConnectedAccountsModal.testIds';
+import { IconName } from '../../../../component-library/components/Icons/Icon';
+import Avatar from '../../../../component-library/components/Avatars/Avatar/Avatar';
+import { AvatarVariants } from '../../../../component-library/components/Avatars/Avatar';
 
 const AccountPermissionsRevoke = ({
   ensByAccountAddress,
@@ -88,14 +94,19 @@ const AccountPermissionsRevoke = ({
 
   const renderSheetAction = useCallback(
     () => (
-      <View style={styles.sheetActionContainer}>
+      <View
+        style={styles.sheetActionContainer}
+        {...generateTestId(
+          Platform,
+          CONNECTED_ACCOUNTS_MODAL_DISCONNECT_ALL_BUTTON_ID,
+        )}
+      >
         <SheetActions
           actions={[
             {
-              label: strings('accounts.revoke_all'),
+              label: strings('accounts.disconnect_all_accounts'),
               onPress: revokeAllAccounts,
               disabled: isLoading,
-              isDanger: true,
             },
           ]}
         />
@@ -107,7 +118,7 @@ const AccountPermissionsRevoke = ({
   return (
     <>
       <SheetHeader
-        title={strings('accounts.connected_accounts_title')}
+        title={strings('accounts.permissions')}
         onBack={() =>
           onSetPermissionsScreen(AccountPermissionsScreens.Connected)
         }
@@ -119,14 +130,25 @@ const AccountPermissionsRevoke = ({
           iconName={secureIcon}
         />
         <Text style={styles.description}>
-          {strings('accounts.connect_description')}
+          {strings('accounts.site_permission_to')}
         </Text>
+        <View style={styles.permissionContainer}>
+          <Avatar variant={AvatarVariants.Icon} name={IconName.Eye} />
+          <Text style={styles.permissionDescription}>
+            {strings('accounts.address_balance_activity_permission')}
+          </Text>
+        </View>
+        <View style={styles.securityContainer}>
+          <Avatar variant={AvatarVariants.Icon} name={IconName.SecurityTick} />
+          <Text style={styles.permissionDescription}>
+            {strings('accounts.suggest_transactions')}
+          </Text>
+        </View>
       </View>
       <AccountSelectorList
         renderRightAccessory={(address, name) => (
           <Button
             variant={ButtonVariants.Secondary}
-            isDanger
             onPress={() => {
               if (permittedAddresses.length === 1) {
                 // Dismiss and show toast
@@ -137,7 +159,7 @@ const AccountPermissionsRevoke = ({
                     label: `${name} `,
                     isBold: true,
                   },
-                  { label: strings('toast.revoked') },
+                  { label: strings('toast.disconnected') },
                 ];
                 if (activeAddress === address) {
                   const nextActiveAddress = permittedAddresses[1];
@@ -178,7 +200,7 @@ const AccountPermissionsRevoke = ({
                 );
               }
             }}
-            label={strings('accounts.revoke')}
+            label={strings('accounts.disconnect')}
             size={ButtonSize.Sm}
             style={styles.disconnectButton}
             {...generateTestId(

diff --git a/e2e/pages/modals/ConnectedAccountsModal.js b/e2e/pages/modals/ConnectedAccountsModal.js
@@ -12,9 +12,8 @@ import {
 import messages from '../../../locales/languages/en.json';
 
 const CONNECTED_ACCOUNTS_PERMISSION_LINK_TEXT = messages.accounts.permissions;
-const CONNECTED_ACCOUNTS_REVOKE_LINK_TEXT = messages.accounts.revoke;
-
-const CONNECTED_ACCOUNTS_REVOKE_ALL_TEXT = messages.accounts.revoke_all;
+const CONNECTED_ACCOUNTS_DISCONNECT_ALL_TEXT =
+  messages.accounts.disconnect_all_accounts;
 
 export default class ConnectedAccountsModal {
   static async tapCancelButton() {
@@ -28,30 +27,19 @@ export default class ConnectedAccountsModal {
   static async tapPermissionsButton() {
     await TestHelpers.tapByText(CONNECTED_ACCOUNTS_PERMISSION_LINK_TEXT);
   }
+
   static async tapNetworksPicker() {
     await TestHelpers.waitAndTap(CONNECTED_ACCOUNTS_MODAL_NETWORK_PICKER_ID);
   }
-  static async tapRevokeAllButton() {
-    await TestHelpers.tapByText(CONNECTED_ACCOUNTS_REVOKE_ALL_TEXT);
-  }
 
-  static async tapRevokeButton() {
-    await TestHelpers.tapByText(CONNECTED_ACCOUNTS_REVOKE_LINK_TEXT);
+  static async tapDisconnectAllButton() {
+    await TestHelpers.tapByText(CONNECTED_ACCOUNTS_DISCONNECT_ALL_TEXT);
   }
 
   static async tapToSetAsPrimaryAccount() {
     await TestHelpers.tapItemAtIndex(CELL_SELECT_TEST_ID, 1); // selecting the second account on the list
   }
 
-  static async swipeToDimssConnectedAccountsModal() {
-    await TestHelpers.swipe(
-      CONNECTED_ACCOUNTS_MODAL_CONTAINER,
-      'down',
-      'slow',
-      0.6,
-    );
-  }
-
   static async isVisible() {
     await TestHelpers.checkIfVisible(CONNECTED_ACCOUNTS_MODAL_CONTAINER);
   }

diff --git a/e2e/specs/permission-system-revoke-single-account.spec.js b/e2e/specs/permission-system-revoke-single-account.spec.js
@@ -128,7 +128,7 @@ describe(Regression('Revoke Single Account after connecting to a dapp'), () => {
   it('should revoke accounts', async () => {
     await Browser.tapNetworkAvatarButtonOnBrowser();
     await ConnectedAccountsModal.tapPermissionsButton();
-    await ConnectedAccountsModal.tapRevokeButton();
+    await ConnectedAccountsModal.tapDisconnectAllButton();
     await Browser.isAccountToastVisible('Account 1');
 
     await TestHelpers.delay(3500);

diff --git a/e2e/specs/permission-system-revoking-multiple-accounts.spec.js b/e2e/specs/permission-system-revoking-multiple-accounts.spec.js
@@ -77,7 +77,7 @@ describe('Connecting to multiple dapps and revoking permission on one but stayin
     await Browser.tapNetworkAvatarButtonOnBrowser();
     await ConnectedAccountsModal.tapPermissionsButton();
     await TestHelpers.delay(1500);
-    await ConnectedAccountsModal.tapRevokeAllButton();
+    await ConnectedAccountsModal.tapDisconnectAllButton();
     await Browser.isRevokeAllAccountToastVisible();
   });
 

diff --git a/wdio/features/Onboarding/ImportWallet.feature b/wdio/features/Onboarding/ImportWallet.feature
@@ -48,7 +48,6 @@ Feature: Onboarding Import Wallet
     And I tap "Import"
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     Then I am on the main wallet view
     Examples:
       | SRP                                                                   | password        |

diff --git a/wdio/features/SecurityAndPrivacy/RememberMe.feature b/wdio/features/SecurityAndPrivacy/RememberMe.feature
@@ -8,7 +8,6 @@ Feature: Security & Privacy Remember Me
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     When I tap on the Settings tab option
     And In settings I tap on "Security & Privacy"
     Then on Security & Privacy screen I toggle on Remember me

diff --git a/wdio/screen-objects/Modals/ConnectedAccountsModal.js b/wdio/screen-objects/Modals/ConnectedAccountsModal.js
@@ -1,43 +1,32 @@
 import Gestures from '../../helpers/Gestures';
 import Selectors from '../../helpers/Selectors';
-import {
-  CANCEL_BUTTON_ID,
-  CONNECT_BUTTON_ID,
-} from '../../../app/constants/test-ids';
 
 import {
   CONNECTED_ACCOUNTS_MODAL_CONTAINER,
-  CONNECTED_ACCOUNTS_MODAL_REVOKE_BUTTON_ID,
+  CONNECTED_ACCOUNTS_MODAL_DISCONNECT_ALL_BUTTON_ID,
 } from '../testIDs/Components/ConnectedAccountsModal.testIds';
 class ConnectedAccountsModal {
   get connectedModalContainer() {
     return Selectors.getElementByPlatform(CONNECTED_ACCOUNTS_MODAL_CONTAINER);
   }
 
-  get revokeButton() {
+  get disconnectAllButton() {
     return Selectors.getElementByPlatform(
-      CONNECTED_ACCOUNTS_MODAL_REVOKE_BUTTON_ID,
+      CONNECTED_ACCOUNTS_MODAL_DISCONNECT_ALL_BUTTON_ID,
     );
   }
 
-  static async tapCancelButton() {
-    await Gestures.tap(CANCEL_BUTTON_ID);
-  }
-
-  static async tapConnectButton() {
-    await Gestures.tap(CONNECT_BUTTON_ID);
-  }
-
   async isVisible() {
     await expect(this.connectedModalContainer).toBeDisplayed();
   }
+
   async isNotVisible() {
     await expect(this.connectedModalContainer).not.toBeDisplayed();
   }
 
-  async tapRevokeButton() {
-    await Gestures.waitAndTap(this.revokeButton);
-    const element = await this.revokeButton;
+  async tapDisconnectAllButton() {
+    await Gestures.waitAndTap(this.disconnectAllButton);
+    const element = await this.disconnectAllButton;
     await element.waitForExist({ reverse: true });
   }
 }

diff --git a/wdio/screen-objects/testIDs/Components/ConnectedAccountsModal.testIds.js b/wdio/screen-objects/testIDs/Components/ConnectedAccountsModal.testIds.js
@@ -6,3 +6,5 @@ export const CONNECTED_ACCOUNTS_MODAL_NETWORK_PICKER_ID =
 
 export const CONNECTED_ACCOUNTS_MODAL_REVOKE_BUTTON_ID =
   'accounts-connected-revoke-button';
+export const CONNECTED_ACCOUNTS_MODAL_DISCONNECT_ALL_BUTTON_ID =
+  'accounts-connected-revoke-button';
diff --git a/wdio/step-definitions/revoke-single-account.steps.js b/wdio/step-definitions/revoke-single-account.steps.js
@@ -3,7 +3,7 @@ import ConnectedAccountsModal from '../screen-objects/Modals/ConnectedAccountsMo
 import CommonScreen from '../screen-objects/CommonScreen';
 
 When(/^I tap on Revoke button$/, async () => {
-  await ConnectedAccountsModal.tapRevokeButton();
+  await ConnectedAccountsModal.tapDisconnectAllButton();
   await CommonScreen.waitForToastToDisplay();
   await CommonScreen.waitForToastToDisappear();
 });