Disable import button on maximum

frontend/src/lib/i18n/en.json

@@ -1061,6 +1061,7 @@
     "link_to_dashboard": "https://dashboard.internetcomputer.org/canister/$canisterId",
     "add_index_canister": "Add Index Canister",
     "add_index_description": "Transaction history is not available. To see this token’s transaction history in the NNS dapp, you need to provide an index canister. <strong>Note:</strong> not all tokens have index canisters.",
-    "failed_tooltip": "The NNS dapp couldn’t load an imported token. Please try again later, or contact the developers."
+    "failed_tooltip": "The NNS dapp couldn’t load an imported token. Please try again later, or contact the developers.",
+    "maximum_reached_tooltip": "You can import maximum $max tokens."
   }
 }

frontend/src/lib/pages/Tokens.svelte

@@ -7,11 +7,14 @@
   import { i18n } from "$lib/stores/i18n";
   import type { UserToken } from "$lib/types/tokens-page";
   import { heightTransition } from "$lib/utils/transition.utils";
-  import { IconPlus, IconSettings } from "@dfinity/gix-components";
+  import { IconPlus, IconSettings, Tooltip } from "@dfinity/gix-components";
   import { Popover } from "@dfinity/gix-components";
-  import { TokenAmountV2 } from "@dfinity/utils";
+  import { TokenAmountV2, nonNullish } from "@dfinity/utils";
   import { ENABLE_IMPORT_TOKEN } from "$lib/stores/feature-flags.store";
   import ImportTokenModal from "$lib/modals/accounts/ImportTokenModal.svelte";
+  import { importedTokensStore } from "$lib/stores/imported-tokens.store";
+  import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
 
   export let userTokensData: UserToken[];
 
@@ -43,6 +46,9 @@
   };
 
   let showImportTokenModal = false;
+  let maximumImportedTokensReached = false;
+  $: maximumImportedTokensReached =
+    ($importedTokensStore.importedTokens?.length ?? 0) >= MAX_IMPORTED_TOKENS;
 
   // TODO(Import token): After removing ENABLE_IMPORT_TOKEN combine divs -> <div slot="last-row" class="last-row">
 </script>
@@ -63,7 +69,7 @@
       >
     </div>
     <div slot="last-row">
-      {#if $ENABLE_IMPORT_TOKEN}
+      {#if $ENABLE_IMPORT_TOKEN && nonNullish($importedTokensStore.importedTokens)}
         <div class="last-row">
           {#if shouldHideZeroBalances}
             <div class="show-all-button-container">
@@ -78,13 +84,32 @@
             </div>
           {/if}
 
-          <button
-            data-tid="import-token-button"
-            class="ghost with-icon import-token-button"
-            on:click={() => (showImportTokenModal = true)}
-          >
-            <IconPlus />{$i18n.import_token.import_token}
-          </button>
+          {#if maximumImportedTokensReached}
+            <Tooltip
+              testId="maximum-imported-tokens-tooltip"
+              text={replacePlaceholders(
+                $i18n.import_token.maximum_reached_tooltip,
+                { $max: `${MAX_IMPORTED_TOKENS}` }
+              )}
+            >
+              <button
+                data-tid="import-token-button"
+                class="ghost with-icon import-token-button"
+                disabled
+              >
+                <IconPlus />{$i18n.import_token.import_token}
+              </button>
+            </Tooltip>
+          {:else}
+            <button
+              data-tid="import-token-button"
+              class="ghost with-icon import-token-button"
+              on:click={() => (showImportTokenModal = true)}
+              disabled={maximumImportedTokensReached}
+            >
+              <IconPlus />{$i18n.import_token.import_token}
+            </button>
+          {/if}
         </div>
       {:else if shouldHideZeroBalances}
         <div
@@ -183,6 +208,10 @@
     .import-token-button {
       gap: var(--padding);
       color: var(--primary);
+
+      &:disabled {
+        color: var(--button-disable-color);
+      }
     }
   }
 </style>

frontend/src/lib/types/i18n.d.ts

@@ -1121,6 +1121,7 @@ interface I18nImport_token {
   add_index_canister: string;
   add_index_description: string;
   failed_tooltip: string;
+  maximum_reached_tooltip: string;
 }
 
 interface I18nNeuron_state {

frontend/src/tests/lib/pages/Tokens.spec.ts

@@ -1,7 +1,9 @@
+import { MAX_IMPORTED_TOKENS } from "$lib/constants/imported-tokens.constants";
 import { NNS_TOKEN_DATA } from "$lib/constants/tokens.constants";
 import TokensPage from "$lib/pages/Tokens.svelte";
 import { overrideFeatureFlagsStore } from "$lib/stores/feature-flags.store";
 import { hideZeroBalancesStore } from "$lib/stores/hide-zero-balances.store";
+import { importedTokensStore } from "$lib/stores/imported-tokens.store";
 import type { UserTokenData } from "$lib/types/tokens-page";
 import { UnavailableTokenAmount } from "$lib/utils/token.utils";
 import { mockSnsToken, principal } from "$tests/mocks/sns-projects.mock";
@@ -12,7 +14,10 @@ import {
 } from "$tests/mocks/tokens-page.mock";
 import { TokensPagePo } from "$tests/page-objects/TokensPage.page-object";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
-import { advanceTime } from "$tests/utils/timers.test-utils";
+import {
+  advanceTime,
+  runResolvedPromises,
+} from "$tests/utils/timers.test-utils";
 import { TokenAmountV2 } from "@dfinity/utils";
 import { render } from "@testing-library/svelte";
 
@@ -65,6 +70,8 @@ describe("Tokens page", () => {
     overrideFeatureFlagsStore.reset();
     hideZeroBalancesStore.resetForTesting();
     vi.useFakeTimers();
+
+    importedTokensStore.set({ importedTokens: [], certified: true });
   });
 
   it("should render the tokens table", async () => {
@@ -213,6 +220,42 @@ describe("Tokens page", () => {
       expect(await po.getImportTokenButtonPo().isPresent()).toBe(true);
     });
 
+    it("should not display import token button before imported tokens are available", async () => {
+      importedTokensStore.reset();
+      const po = renderPage([]);
+
+      expect(await po.getImportTokenButtonPo().isPresent()).toBe(false);
+
+      importedTokensStore.set({ importedTokens: [], certified: true });
+      await runResolvedPromises();
+      expect(await po.getImportTokenButtonPo().isPresent()).toBe(true);
+    });
+
+    it("should disable import token button when maximum imported", async () => {
+      const setImportedTokens = (count: number) =>
+        importedTokensStore.set({
+          importedTokens: Array.from({ length: count }, (_, i) => ({
+            ledgerCanisterId: principal(i),
+            indexCanisterId: undefined,
+          })),
+          certified: true,
+        });
+
+      setImportedTokens(MAX_IMPORTED_TOKENS - 1);
+      const po = renderPage([]);
+
+      expect(await po.getImportTokenButtonPo().isPresent()).toBe(true);
+      expect(await po.getImportTokenButtonPo().isDisabled()).toBe(false);
+
+      setImportedTokens(MAX_IMPORTED_TOKENS);
+      await runResolvedPromises();
+      expect(await po.getImportTokenButtonPo().isDisabled()).toBe(true);
+
+      setImportedTokens(MAX_IMPORTED_TOKENS + 1);
+      await runResolvedPromises();
+      expect(await po.getImportTokenButtonPo().isDisabled()).toBe(true);
+    });
+
     it("should open import token modal", async () => {
       const po = renderPage([positiveBalance, zeroBalance]);