feat: add token autodetect modal (MetaMask#24281)

## **Description** Add in recommended auto token enablement button in new Extension app update, once we enable auto token detection by default for new users, for existing users, we need to get them to turn on auto token detection as well. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24281?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. you are an existing user and you have token autodetection off 2. once the upgrade will be done , you should see the modal below right after what's new pop up 3. if you have it of and you decide to disable , you should see the pop up once ## **Screenshots/Recordings**  ### **Before** No Modal was displayed ### **After** Existing users with toggle off https://github.com/MetaMask/metamask-extension/assets/26223211/2ff49f38-e652-4287-9b0a-a7092b8a1812 Users with toggle on and want to disable it ( the modal should be displayed once ) https://github.com/MetaMask/metamask-extension/assets/26223211/4438312f-cbb3-47f1-bc80-d1158b73e66a ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.
ngraveio · May 31, 2024 · b560fdc · b560fdc
1 parent 5f22357
commit b560fdc
Show file tree

Hide file tree

Showing 30 changed files with 448 additions and 7 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/images/wallet-alpha.png b/app/images/wallet-alpha.png
diff --git a/app/scripts/controllers/app-metadata.ts b/app/scripts/controllers/app-metadata.ts
@@ -9,6 +9,7 @@ export type AppMetadataControllerState = {
   previousAppVersion: string;
   previousMigrationVersion: number;
   currentMigrationVersion: number;
+  showTokenAutodetectModalOnUpgrade: boolean | null;
 };
 
 /**
@@ -25,6 +26,7 @@ const defaultState: AppMetadataControllerState = {
   previousAppVersion: '',
   previousMigrationVersion: 0,
   currentMigrationVersion: 0,
+  showTokenAutodetectModalOnUpgrade: false,
 };
 
 /**
@@ -76,6 +78,7 @@ export default class AppMetadataController extends EventEmitter {
       this.store.updateState({
         currentAppVersion: maybeNewAppVersion,
         previousAppVersion: oldCurrentAppVersion,
+        showTokenAutodetectModalOnUpgrade: null,
       });
     }
   }
@@ -96,4 +99,13 @@ export default class AppMetadataController extends EventEmitter {
       });
     }
   }
+
+  /**
+   * Setter for the `showTokenAutodetectModalOnUpgrade` property
+   *
+   * @param val - Indicates the value of showTokenAutodetectModalOnUpgrade
+   */
+  setShowTokenAutodetectModalOnUpgrade(val: boolean): void {
+    this.store.updateState({ showTokenAutodetectModalOnUpgrade: val });
+  }
 }
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
@@ -97,6 +97,7 @@ export default class PreferencesController {
         petnamesEnabled: true,
         redesignedConfirmationsEnabled: true,
         featureNotificationsEnabled: false,
+        showTokenAutodetectModal: null,
       },
       // ENS decentralized website resolution
       ipfsGateway: IPFS_DEFAULT_GATEWAY_URL,

diff --git a/app/scripts/lib/backup.test.js b/app/scripts/lib/backup.test.js
@@ -163,6 +163,7 @@ const jsonData = JSON.stringify({
       showTestNetworks: true,
       smartTransactionsOptInStatus: false,
       useNativeCurrencyAsPrimaryCurrency: true,
+      showTokenAutodetectModal: false,
     },
     ipfsGateway: 'dweb.link',
     ledgerTransportType: 'webhid',

diff --git a/app/scripts/lib/setupSentry.js b/app/scripts/lib/setupSentry.js
@@ -79,6 +79,7 @@ export const SENTRY_BACKGROUND_STATE = {
     currentMigrationVersion: true,
     previousAppVersion: true,
     previousMigrationVersion: true,
+    showTokenAutodetectModalOnUpgrade: false,
   },
   ApprovalController: {
     approvalFlows: false,
@@ -240,6 +241,7 @@ export const SENTRY_BACKGROUND_STATE = {
       smartTransactionsOptInStatus: true,
       useNativeCurrencyAsPrimaryCurrency: true,
       petnamesEnabled: true,
+      showTokenAutodetectModal: false,
     },
     useExternalServices: false,
     selectedAddress: false,

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -2961,6 +2961,7 @@ export default class MetamaskController extends EventEmitter {
       networkController,
       announcementController,
       onboardingController,
+      appMetadataController,
       permissionController,
       preferencesController,
       swapsController,
@@ -3394,6 +3395,12 @@ export default class MetamaskController extends EventEmitter {
           this.encryptionPublicKeyController,
         ),
 
+      // AppMetadataController
+      setShowTokenAutodetectModalOnUpgrade:
+        appMetadataController.setShowTokenAutodetectModalOnUpgrade.bind(
+          appMetadataController,
+        ),
+
       // onboarding controller
       setSeedPhraseBackedUp:
         onboardingController.setSeedPhraseBackedUp.bind(onboardingController),

diff --git a/shared/constants/metametrics.ts b/shared/constants/metametrics.ts
@@ -712,6 +712,8 @@ export enum MetaMetricsEventName {
   SnapAccountTransactionFinalizeRedirectGoToSiteClicked = 'Snap Account Transaction Finalize Redirect "Go To Site" Clicked',
   SnapAccountTransactionFinalizeRedirectSnapUrlClicked = 'Snap Account Transaction Finalize Redirect "Snap URL" Clicked',
   SnapAccountTransactionFinalizeClosed = 'Snap Account Transaction Finalize Closed',
+  TokenAutoDetectionEnableModal = 'Token Autodetection Enabled from modal',
+  TokenAutoDetectionDisableModal = 'Token Autodetection Disabled from modal',
   ///: END:ONLY_INCLUDE_IF
   TurnOffProfileSyncing = 'Turn Off Profile Syncing',
   TurnOnProfileSyncing = 'Turn On Profile Syncing',

diff --git a/shared/modules/selectors/index.test.ts b/shared/modules/selectors/index.test.ts
@@ -13,6 +13,7 @@ describe('Selectors', () => {
       metamask: {
         preferences: {
           smartTransactionsOptInStatus: true,
+          showTokenAutodetectModal: true,
         },
         internalAccounts: {
           selectedAccount: 'account1',
@@ -68,6 +69,14 @@ describe('Selectors', () => {
     });
   });
 
+  describe('getShowTokenAutodetectModal', () => {
+    it('should return show autodetection token modal status', () => {
+      const state = createMockState();
+      const result = getSmartTransactionsOptInStatus(state);
+      expect(result).toBe(true);
+    });
+  });
+
   describe('getCurrentChainSupportsSmartTransactions', () => {
     it('should return true if the chain ID is allowed for smart transactions', () => {
       const state = createMockState();

diff --git a/shared/modules/selectors/index.ts b/shared/modules/selectors/index.ts
@@ -1,2 +1,3 @@
 export * from './smart-transactions';
 export * from './feature-flags';
+export * from './token-auto-detect';
diff --git a/shared/modules/selectors/token-auto-detect.ts b/shared/modules/selectors/token-auto-detect.ts
@@ -0,0 +1,32 @@
+import { getUseTokenDetection } from '../../../ui/selectors/selectors';
+
+type TokenAutoDetectionMetaMaskState = {
+  metamask: {
+    preferences: {
+      showTokenAutodetectModal: boolean | null;
+    };
+    showTokenAutodetectModalOnUpgrade: boolean | null;
+  };
+};
+
+export const getShowTokenAutodetectModal = (
+  state: TokenAutoDetectionMetaMaskState,
+): boolean | null => {
+  return state.metamask.preferences?.showTokenAutodetectModal;
+};
+
+export const getIsShowTokenAutodetectModal = (
+  state: TokenAutoDetectionMetaMaskState,
+) => {
+  // Upgrade case
+  if (state.metamask.showTokenAutodetectModalOnUpgrade === null) {
+    return (
+      !getUseTokenDetection(state) &&
+      state.metamask.showTokenAutodetectModalOnUpgrade === null
+    );
+  }
+
+  return (
+    !getUseTokenDetection(state) && getShowTokenAutodetectModal(state) === null
+  );
+};
diff --git a/test/e2e/default-fixture.js b/test/e2e/default-fixture.js
@@ -190,6 +190,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           smartTransactionsOptInStatus: false,
           useNativeCurrencyAsPrimaryCurrency: true,
           petnamesEnabled: true,
+          showTokenAutodetectModal: false,
         },
         selectedAddress: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
         theme: 'light',

diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
@@ -87,6 +87,7 @@ function onboardingFixture() {
           smartTransactionsOptInStatus: false,
           useNativeCurrencyAsPrimaryCurrency: true,
           petnamesEnabled: true,
+          showTokenAutodetectModal: false,
         },
         useExternalServices: true,
         theme: 'light',

diff --git a/test/e2e/restore/MetaMaskUserData.json b/test/e2e/restore/MetaMaskUserData.json
@@ -37,7 +37,8 @@
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "smartTransactionsOptInStatus": false,
-      "useNativeCurrencyAsPrimaryCurrency": true
+      "useNativeCurrencyAsPrimaryCurrency": true,
+      "showTokenAutodetectModal": "boolean"
     },
     "theme": "light",
     "useBlockie": false,

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -18,7 +18,8 @@
     "currentAppVersion": "string",
     "previousAppVersion": "",
     "previousMigrationVersion": 0,
-    "currentMigrationVersion": "number"
+    "currentMigrationVersion": "number",
+    "showTokenAutodetectModalOnUpgrade": "object"
   },
   "AppStateController": {
     "connectedStatusPopoverHasBeenShown": true,
@@ -187,7 +188,8 @@
       "showTestNetworks": false,
       "smartTransactionsOptInStatus": false,
       "useNativeCurrencyAsPrimaryCurrency": true,
-      "petnamesEnabled": true
+      "petnamesEnabled": true,
+      "showTokenAutodetectModal": "boolean"
     },
     "ipfsGateway": "string",
     "isIpfsGatewayEnabled": "boolean",

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -33,7 +33,8 @@
       "showTestNetworks": false,
       "smartTransactionsOptInStatus": false,
       "useNativeCurrencyAsPrimaryCurrency": true,
-      "petnamesEnabled": true
+      "petnamesEnabled": true,
+      "showTokenAutodetectModal": "boolean"
     },
     "firstTimeFlowType": "import",
     "completedOnboarding": true,
@@ -91,6 +92,7 @@
     "previousMigrationVersion": 0,
     "currentMigrationVersion": "number",
     "selectedNetworkClientId": "string",
+    "showTokenAutodetectModalOnUpgrade": "object",
     "networksMetadata": {
       "networkConfigurationId": {
         "EIPS": { "1559": false },

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json
@@ -112,7 +112,8 @@
         "showTestNetworks": false,
         "smartTransactionsOptInStatus": false,
         "useNativeCurrencyAsPrimaryCurrency": true,
-        "petnamesEnabled": true
+        "petnamesEnabled": true,
+        "showTokenAutodetectModal": "boolean"
       },
       "selectedAddress": "string",
       "theme": "light",

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json
@@ -112,7 +112,8 @@
         "showTestNetworks": false,
         "smartTransactionsOptInStatus": false,
         "useNativeCurrencyAsPrimaryCurrency": true,
-        "petnamesEnabled": true
+        "petnamesEnabled": true,
+        "showTokenAutodetectModal": "boolean"
       },
       "selectedAddress": "string",
       "theme": "light",

diff --git a/test/jest/mock-store.js b/test/jest/mock-store.js
@@ -151,6 +151,7 @@ export const createSwapsMockStore = () => {
       preferences: {
         showFiatInTestnets: true,
         smartTransactionsOptInStatus: true,
+        showTokenAutodetectModal: false,
       },
       transactions: [
         {

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -45,6 +45,7 @@
 @import 'recovery-phrase-reminder/index';
 @import 'step-progress-bar/index.scss';
 @import 'selected-account/index';
+@import 'auto-detect-token/index';
 @import 'smart-transactions/index';
 @import 'srp-input/srp-input';
 @import 'snaps/snap-privacy-warning/index';

diff --git a/ui/components/app/auto-detect-token/auto-detect-token-modal.test.stories.js b/ui/components/app/auto-detect-token/auto-detect-token-modal.test.stories.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import testData from '../../../../.storybook/test-data';
+import configureStore from '../../../store/store';
+import AutoDetectTokenModal from './auto-detect-token-modal';
+
+const customData = {
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    currentCurrency: 'USD',
+    intlLocale: 'en-US',
+  },
+};
+const customStore = configureStore(customData);
+
+export default {
+  title: 'Components/App/AutoDetectTokenModal',
+  component: AutoDetectTokenModal,
+  decorators: [
+    (Story) => (
+      <Provider store={customStore}>
+        <Story />
+      </Provider>
+    ),
+  ],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+    },
+    onClose: { action: 'onClose' },
+  },
+  args: {
+    isOpen: true,
+  },
+};
+
+const Template = (args) => <AutoDetectTokenModal {...args} />;
+
+export const ModalOpen = Template.bind({});
+ModalOpen.args = {
+  isOpen: true,
+};
+
+export const ModalClosed = Template.bind({});
+ModalClosed.args = {
+  isOpen: false,
+};