fix: keep eth in the top of the tokens list

matter-labs · Feb 29, 2024 · 1511bdf · 1511bdf
1 parent d974f2f
commit 1511bdf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/store/zksync/ethereumBalance.ts b/store/zksync/ethereumBalance.ts
@@ -41,7 +41,11 @@ export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances
           ...e,
           amount: "0",
         })),
-    ];
+    ].sort((a, b) => {
+      if (a.address === ETH_TOKEN.l1Address) return -1; // Always bring ETH to the beginning
+      if (b.address === ETH_TOKEN.l1Address) return 1; // Keep ETH at the beginning if comparing with any other token
+      return 0; // Keep other tokens' order unchanged
+    });
   };
   const getBalancesFromRPC = async (): Promise<TokenAmount[]> => {
     await tokensStore.requestTokens();
@@ -76,9 +80,9 @@ export const useZkSyncEthereumBalanceStore = defineStore("zkSyncEthereumBalances
         ([l1Networks.mainnet.id, l1Networks.goerli.id] as number[]).includes(l1Network.value?.id) &&
         runtimeConfig.public.ankrToken
       ) {
-        return getBalancesFromApi();
+        return await getBalancesFromApi();
       } else {
-        return getBalancesFromRPC();
+        return await getBalancesFromRPC();
       }
     },
     { cache: 30000 }

diff --git a/store/zksync/wallet.ts b/store/zksync/wallet.ts
@@ -126,10 +126,16 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
   const balance = computed<TokenAmount[]>(() => {
     if (!balancesResult.value) return [];
 
-    const knownTokens: TokenAmount[] = Object.entries(tokens.value ?? {}).map(([, token]) => {
-      const amount = balancesResult.value!.find((e) => e.address === token.address)?.amount ?? "0";
-      return { ...token, amount };
-    });
+    const knownTokens: TokenAmount[] = Object.entries(tokens.value ?? {})
+      .map(([, token]) => {
+        const amount = balancesResult.value!.find((e) => e.address === token.address)?.amount ?? "0";
+        return { ...token, amount };
+      })
+      .sort((a, b) => {
+        if (a.address === ETH_TOKEN.address) return -1; // Always bring ETH to the beginning
+        if (b.address === ETH_TOKEN.address) return 1; // Keep ETH at the beginning if comparing with any other token
+        return 0; // Keep other tokens' order unchanged
+      });
     const knownTokenAddresses = new Set(knownTokens.map((token) => token.address));
 
     // Filter out the tokens in `balancesResult` that are not in `tokens`