fix: show up to 300 tokens and improve texts for token modal

matter-labs · Feb 16, 2024 · 9eab4a1 · 9eab4a1
1 parent 0570ee8
commit 9eab4a1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
@@ -23,7 +23,7 @@
             {{ error.message }}
           </CommonErrorBlock>
         </template>
-        <template v-else-if="!hasBalances">
+        <template v-else-if="isConnected && !hasBalances">
           <div class="category -mx-block-padding-1/4 sm:-mx-block-padding-1/2">
             <TokenLine
               v-for="item in displayedTokens"
@@ -52,9 +52,12 @@
           </div>
         </template>
         <p v-else class="mt-block-padding-1/2 text-center">
-          No tokens was found for "{{ search }}"
-          <br />
-          <span class="mt-1.5 inline-block">Make sure you are using correct zkSync network</span>
+          <template v-if="isConnected">
+            No tokens for "{{ search }}" were found on connected account
+            <br />
+            <span class="mt-1.5 inline-block">Make sure you are using correct zkSync network</span>
+          </template>
+          <template v-else>Connect wallet to see all tokens available for you</template>
         </p>
         <slot name="body-bottom" />
       </div>
@@ -67,10 +70,12 @@ import { computed, ref } from "vue";
 
 import { Combobox } from "@headlessui/vue";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
+import { storeToRefs } from "pinia";
 
 import type { Token, TokenAmount } from "@/types";
 import type { PropType } from "vue";
 
+import { useOnboardStore } from "@/store/onboard";
 import { groupBalancesByAmount } from "@/utils/mappers";
 
 const props = defineProps({
@@ -108,6 +113,8 @@ const emit = defineEmits<{
   (eventName: "try-again"): void;
 }>();
 
+const { isConnected } = storeToRefs(useOnboardStore());
+
 const search = ref("");
 const hasBalances = computed(() => props.balances.length > 0);
 const filterTokens = (tokens: Token[]) => {

diff --git a/store/zksync/tokens.ts b/store/zksync/tokens.ts
@@ -18,10 +18,12 @@ export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
     reset: resetTokens,
   } = usePromise<Token[]>(async () => {
     if (eraNetwork.value.blockExplorerApi) {
-      const response: Api.Response.Collection<Api.Response.Token> = await $fetch(
-        `${eraNetwork.value.blockExplorerApi}/tokens?limit=100`
-      );
-      const explorerTokens = response.items.map(mapApiToken);
+      const responses: Api.Response.Collection<Api.Response.Token>[] = await Promise.all([
+        $fetch(`${eraNetwork.value.blockExplorerApi}/tokens?minLiquidity=0&limit=100&page=1`),
+        $fetch(`${eraNetwork.value.blockExplorerApi}/tokens?minLiquidity=0&limit=100&page=2`),
+        $fetch(`${eraNetwork.value.blockExplorerApi}/tokens?minLiquidity=0&limit=100&page=3`),
+      ]);
+      const explorerTokens = responses.map((response) => response.items.map(mapApiToken)).flat();
       const etherExplorerToken = explorerTokens.find((token) => token.address === ETH_TOKEN.address);
       const tokensWithoutEther = explorerTokens.filter((token) => token.address !== ETH_TOKEN.address);
       return [etherExplorerToken || ETH_TOKEN, ...tokensWithoutEther] as Token[];