feat: show custom token with toggle (#42829)

NidhiKJha · web-flow · commit 8d6c095f0a2d · 2026-05-20T19:17:46.000Z
This PR is to fix: 1. Show imported custom token in the token list 2. If a user manually hides a token, they should be able to import it with custom token route ## **Description**  ## **Changelog**  CHANGELOG entry: null ## **Related issues** Fixes: ## **Manual testing steps** 1. Start extension with assets unified state enabled (ASSETS_UNIFIED_STATE_ENABLED=true) and remote flag assetsUnifyState.enabled=true, featureVersion='1'. 2. Open wallet, go to Manage tokens, and ensure an ERC20 token can be found/imported (or use one already imported). 4. Hide that token from Manage tokens (toggle off), then leave and return to confirm it is hidden. 5. Go to Add custom token and enter the same token contract address you just hid. 6. Verify you do not see the error “Token has already been added”. 7. Verify symbol/decimals autofill still works and the Import button becomes enabled. 8. Click Import and verify you are returned to Manage tokens with the success toast. 9. In Manage tokens, verify that token is now visible again with toggle on. 10. Validate regression case: with a token that is already visible (not hidden), open Add custom token and enter that token’s address. 11. Verify you do see “Token has already been added” and import remains blocked. 12. Validate legacy behavior toggle: disable remote flag (assetsUnifyState.enabled=false) and repeat step 9 to confirm existing “already added” validation still works as before. ## **Screenshots/Recordings**  ### **Before**  ### **After** https://github.com/user-attachments/assets/8c6372f9-eab2-477e-bf1f-e14a3f765fb8 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.  --- > [!NOTE] > **Medium Risk** > Updates custom token import behavior under the `assets-unify-state` flag, affecting token visibility/rehydration and dispatching additional controller actions; mistakes could cause tokens not to appear or to be incorrectly marked hidden/visible. > > **Overview** > Fixes custom token import when **`assets-unify-state` is enabled** by (1) treating *hidden* assets in `assetPreferences` as eligible for re-import (so the “tokenAlreadyAdded” guard won’t block them) and (2) dispatching `importCustomAssetsBatch` on submit to seed AssetsController metadata so newly imported tokens show up in Manage Tokens. > > Adds `name` to the autofill state and persists `name`/`symbol` separately in the AssetsController metadata (defaulting `name` to `symbol` if missing), while preserving legacy behavior when the feature flag is off. > > Extends `custom-token-import` unit tests to cover the new flag-gated behavior (including hidden-token re-import) and updates the Jest console baseline for the added test warnings. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 51467ca. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/test/jest/console-baseline-unit.json b/test/jest/console-baseline-unit.json
@@ -1372,6 +1372,9 @@
     "ui/pages/confirmations/utils/confirm.test.ts": {
       "error: Failed to detect if URL": 1
     },
+    "ui/pages/custom-token-import/custom-token-import.test.tsx": {
+      "React: Act warnings (component updates not wrapped)": 2
+    },
     "ui/pages/defi/components/defi-details-page.test.tsx": {
       "Reselect: Identity function warnings": 1
     },
diff --git a/ui/pages/custom-token-import/custom-token-import.test.tsx b/ui/pages/custom-token-import/custom-token-import.test.tsx
@@ -38,6 +38,12 @@ jest.mock('react-router-dom', () => {
   };
 });
 
+jest.mock('../../../shared/lib/assets-unify-state/remote-feature-flag', () =>
+  jest.requireActual(
+    '../../../shared/lib/assets-unify-state/remote-feature-flag',
+  ),
+);
+
 // The page kicks off real on-chain probes through `getTokenStandardAndDetailsByChain`
 // and `tokenInfoGetter`. Replace them with deterministic stubs so the unit
 // test never reaches the background script.
@@ -46,6 +52,7 @@ jest.mock('../../store/actions', () => {
   return {
     ...actual,
     addImportedTokens: jest.fn(() => () => Promise.resolve()),
+    importCustomAssetsBatch: jest.fn(() => () => Promise.resolve()),
     getTokenStandardAndDetailsByChain: jest.fn().mockResolvedValue({
       standard: 'ERC20',
       symbol: 'APE',
@@ -69,15 +76,25 @@ jest.mock('../../helpers/utils/token-util', () => {
 const getMockedActions = () =>
   jest.requireMock('../../store/actions') as {
     addImportedTokens: jest.Mock;
+    importCustomAssetsBatch: jest.Mock;
   };
 
+const ASSETS_UNIFY_STATE_FLAG_ON = {
+  assetsUnifyState: {
+    enabled: true,
+    featureVersion: '1',
+  },
+};
+
 describe('CustomTokenImportPage', () => {
   beforeEach(() => {
     mockNavigate.mockClear();
-    getMockedActions().addImportedTokens.mockClear();
+    const actions = getMockedActions();
+    actions.addImportedTokens.mockClear();
+    actions.importCustomAssetsBatch.mockClear();
   });
 
-  const buildState = () => ({
+  const buildState = (metamaskOverrides: Record<string, unknown> = {}) => ({
     ...mockState,
     metamask: {
       ...mockState.metamask,
@@ -98,11 +115,15 @@ describe('CustomTokenImportPage', () => {
           ],
         },
       },
+      ...metamaskOverrides,
     },
   });
 
-  const renderPage = (trackEvent = jest.fn()) => {
-    const store = configureStore(buildState());
+  const renderPage = (
+    trackEvent = jest.fn(),
+    metamaskOverrides: Record<string, unknown> = {},
+  ) => {
+    const store = configureStore(buildState(metamaskOverrides));
     return {
       store,
       ...renderWithProvider(
@@ -115,6 +136,28 @@ describe('CustomTokenImportPage', () => {
     };
   };
 
+  const submitCustomToken = async (
+    metamaskOverrides: Record<string, unknown> = {},
+  ) => {
+    const trackEvent = jest.fn();
+    const rendered = renderPage(trackEvent, metamaskOverrides);
+
+    fireEvent.change(screen.getByTestId('custom-token-import-address-input'), {
+      target: { value: '0x1111111111111111111111111111111111111111' },
+    });
+
+    await screen.findByTestId('custom-token-import-symbol-input');
+    await waitFor(() =>
+      expect(
+        screen.getByTestId('custom-token-import-submit-button'),
+      ).not.toBeDisabled(),
+    );
+
+    fireEvent.click(screen.getByTestId('custom-token-import-submit-button'));
+
+    return { trackEvent, ...rendered };
+  };
+
   it('renders the form scaffolding without crashing', () => {
     renderPage();
 
@@ -185,21 +228,7 @@ describe('CustomTokenImportPage', () => {
 
   it('returns to token management with success toast state after submitting a custom token', async () => {
     const actions = getMockedActions();
-    const trackEvent = jest.fn();
-    renderPage(trackEvent);
-
-    fireEvent.change(screen.getByTestId('custom-token-import-address-input'), {
-      target: { value: '0x1111111111111111111111111111111111111111' },
-    });
-
-    await screen.findByTestId('custom-token-import-symbol-input');
-    await waitFor(() =>
-      expect(
-        screen.getByTestId('custom-token-import-submit-button'),
-      ).not.toBeDisabled(),
-    );
-
-    fireEvent.click(screen.getByTestId('custom-token-import-submit-button'));
+    const { trackEvent } = await submitCustomToken();
 
     await waitFor(() =>
       expect(actions.addImportedTokens).toHaveBeenCalledWith(
@@ -241,4 +270,191 @@ describe('CustomTokenImportPage', () => {
       }),
     );
   });
+
+  describe('when the assets-unify-state remote feature flag is enabled', () => {
+    it('seeds AssetsController via importCustomAssetsBatch so the token appears in the manage-tokens list', async () => {
+      const actions = getMockedActions();
+
+      await submitCustomToken({
+        remoteFeatureFlags: ASSETS_UNIFY_STATE_FLAG_ON,
+      });
+
+      const expectedAssetId =
+        'eip155:1/erc20:0x1111111111111111111111111111111111111111';
+
+      await waitFor(() =>
+        expect(actions.importCustomAssetsBatch).toHaveBeenCalledWith(
+          'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+          [
+            {
+              assetId: expectedAssetId,
+              isHidden: false,
+            },
+          ],
+          {
+            [expectedAssetId]: expect.objectContaining({
+              address: '0x1111111111111111111111111111111111111111',
+              symbol: 'APE',
+              name: 'ApeCoin',
+              decimals: 18,
+              chainId: '0x1',
+              unlisted: true,
+            }),
+          },
+        ),
+      );
+
+      await waitFor(() => expect(actions.addImportedTokens).toHaveBeenCalled());
+    });
+
+    it('passes the full token name (not the symbol) as the name field in metadata', async () => {
+      const actions = getMockedActions();
+
+      await submitCustomToken({
+        remoteFeatureFlags: ASSETS_UNIFY_STATE_FLAG_ON,
+      });
+
+      const expectedAssetId =
+        'eip155:1/erc20:0x1111111111111111111111111111111111111111';
+
+      await waitFor(() => {
+        const metadataArg = actions.importCustomAssetsBatch.mock.calls[0][2];
+        const metadata = metadataArg[expectedAssetId];
+        // tokenInfoGetter mock returns name: 'ApeCoin' and symbol: 'APE'.
+        // These must be stored separately; the symbol must not be used in place
+        // of the name.
+        expect(metadata.name).toBe('ApeCoin');
+        expect(metadata.symbol).toBe('APE');
+        expect(metadata.name).not.toBe(metadata.symbol);
+      });
+    });
+
+    it('marks the asset as previously hidden when assetPreferences has hidden: true for it', async () => {
+      const actions = getMockedActions();
+      const assetId =
+        'eip155:1/erc20:0x1111111111111111111111111111111111111111';
+
+      await submitCustomToken({
+        remoteFeatureFlags: ASSETS_UNIFY_STATE_FLAG_ON,
+        assetPreferences: {
+          [assetId]: { hidden: true },
+        },
+      });
+
+      await waitFor(() =>
+        expect(actions.importCustomAssetsBatch).toHaveBeenCalledWith(
+          'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+          [
+            {
+              assetId,
+              isHidden: true,
+            },
+          ],
+          expect.any(Object),
+        ),
+      );
+    });
+
+    it('allows re-importing a token that is currently hidden in assetPreferences without showing "tokenAlreadyAdded"', async () => {
+      const actions = getMockedActions();
+      const tokenAddress = '0x1111111111111111111111111111111111111111';
+      const assetId = `eip155:1/erc20:${tokenAddress}`;
+      const accountId = 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3';
+
+      renderPage(jest.fn(), {
+        remoteFeatureFlags: ASSETS_UNIFY_STATE_FLAG_ON,
+        // Simulate state after the user hid the token from the manage tokens
+        // list when assets-unify-state is on: the token remains in
+        // `customAssets` (so the unified `getAllTokens` selector still
+        // returns it) and `assetPreferences[assetId].hidden` is `true`.
+        customAssets: { [accountId]: [assetId] },
+        assetsInfo: {
+          [assetId]: {
+            type: 'erc20',
+            symbol: 'APE',
+            name: 'ApeCoin',
+            decimals: 18,
+          },
+        },
+        assetPreferences: {
+          [assetId]: { hidden: true },
+        },
+      });
+
+      fireEvent.change(
+        screen.getByTestId('custom-token-import-address-input'),
+        { target: { value: tokenAddress } },
+      );
+
+      await screen.findByTestId('custom-token-import-symbol-input');
+
+      expect(
+        screen.queryByText(messages.tokenAlreadyAdded.message),
+      ).not.toBeInTheDocument();
+      await waitFor(() =>
+        expect(
+          screen.getByTestId('custom-token-import-submit-button'),
+        ).not.toBeDisabled(),
+      );
+
+      fireEvent.click(screen.getByTestId('custom-token-import-submit-button'));
+
+      await waitFor(() =>
+        expect(actions.importCustomAssetsBatch).toHaveBeenCalledWith(
+          accountId,
+          [
+            {
+              assetId,
+              isHidden: true,
+            },
+          ],
+          expect.any(Object),
+        ),
+      );
+    });
+  });
+
+  it('still shows "tokenAlreadyAdded" for a visible (non-hidden) token even when assets-unify-state is enabled', async () => {
+    const tokenAddress = '0x1111111111111111111111111111111111111111';
+    const assetId = `eip155:1/erc20:${tokenAddress}`;
+    const accountId = 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3';
+
+    renderPage(jest.fn(), {
+      remoteFeatureFlags: ASSETS_UNIFY_STATE_FLAG_ON,
+      // Token is present in `customAssets` but NOT hidden: the unified
+      // selector should still return it, so the "already added" guard
+      // must trigger.
+      customAssets: { [accountId]: [assetId] },
+      assetsInfo: {
+        [assetId]: {
+          type: 'erc20',
+          symbol: 'APE',
+          name: 'ApeCoin',
+          decimals: 18,
+        },
+      },
+    });
+
+    fireEvent.change(screen.getByTestId('custom-token-import-address-input'), {
+      target: { value: tokenAddress },
+    });
+
+    await waitFor(() =>
+      expect(
+        screen.getByText(messages.tokenAlreadyAdded.message),
+      ).toBeInTheDocument(),
+    );
+    expect(
+      screen.getByTestId('custom-token-import-submit-button'),
+    ).toBeDisabled();
+  });
+
+  it('does not call importCustomAssetsBatch when the assets-unify-state remote feature flag is off', async () => {
+    const actions = getMockedActions();
+
+    await submitCustomToken();
+
+    await waitFor(() => expect(actions.addImportedTokens).toHaveBeenCalled());
+    expect(actions.importCustomAssetsBatch).not.toHaveBeenCalled();
+  });
 });
diff --git a/ui/pages/custom-token-import/custom-token-import.tsx b/ui/pages/custom-token-import/custom-token-import.tsx
