From 1511bdf39f7cd739cbb1c20a15b064c8217237bc Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Thu, 29 Feb 2024 16:21:48 +0200
Subject: [PATCH] fix: keep eth in the top of the tokens list

---
 store/zksync/ethereumBalance.ts | 10 +++++++---
 store/zksync/wallet.ts          | 14 ++++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/store/zksync/ethereumBalance.ts b/store/zksync/ethereumBalance.ts
index 1d732c495..2c84688c5 100644
--- 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
index 3ce2b5ecb..de1093fa4 100644
--- 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`