From 354f08e1593cf9a96550fd8efabe0e3547d58d2e Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Thu, 20 Jun 2024 23:07:02 +0800
Subject: [PATCH 1/5] feat: add all filter for token select modal on withdraw
 page

---
 components/token/TokenLine.vue        |   7 +-
 components/token/TokenSelectModal.vue | 115 +++++++++++++++-----------
 data/wallets.ts                       |   3 +-
 types/index.d.ts                      |   2 +-
 utils/mappers.ts                      |  18 +++-
 views/transactions/Withdraw.vue       |   2 +-
 6 files changed, 94 insertions(+), 53 deletions(-)

diff --git a/components/token/TokenLine.vue b/components/token/TokenLine.vue
index ab4dca21..a0421c74 100644
--- a/components/token/TokenLine.vue
+++ b/components/token/TokenLine.vue
@@ -9,7 +9,7 @@
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
         <template #label>
-          <div class="truncate">{{ symbol }}</div>
+          <div class="truncate">{{ symbol }} {{ networkKey ? ` (${getNetworkName(networkKey)})` : "" }}</div>
         </template>
         <template v-if="name" #underline>
           <CommonButtonLabel
@@ -44,6 +44,11 @@ import type { Component, PropType } from "vue";
 import { iconsList } from "@/data/iconlists";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 
+const getNetworkName = (networkKey: string) => {
+  if (!networkKey) return "";
+  return networkKey === "primary" ? "Linea" : networkKey[0].toUpperCase() + networkKey.slice(1);
+};
+
 defineProps({
   as: {
     type: [String, Object] as PropType<string | Component>,
diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index cee787c3..f1117d59 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -7,15 +7,16 @@
     @after-leave="search = ''"
   >
     <div v-if="title === 'Choose chain and token'" class="mb-4">
-      <div class="flex gap-2 flex-wrap">
+      <div class="flex flex-wrap gap-2">
         <div
           v-for="(group, groupIndex) in arr"
           :key="groupIndex"
           class="chainBox cursor-pointer"
           :class="{ active: selectChain === group.key }"
-          @click="buttonClicked(zkSyncNetwork.find(item => item.key === group.key)!);"
+          @click="buttonClicked(group.key === 'ALL' ? 'ALL' : zkSyncNetwork.find((item) => item.key === group.key)!)"
         >
-          <img :src="group.iconUrl" :alt="group.label" />
+          <img v-if="group.iconUrl" :src="group.iconUrl" :alt="group.label" />
+          <p v-else>{{ group.label }}</p>
         </div>
       </div>
       <p v-if="!arr.length" class="mt-block-padding-1/2 text-center">No chains found</p>
@@ -56,7 +57,12 @@
         </template>
         <template v-else-if="balanceGroups.length || !search">
           <div v-for="(group, index) in balanceGroups" :key="index" class="category">
-            <TypographyCategoryLabel size="sm" variant="darker" class="group-category-label">
+            <TypographyCategoryLabel
+              v-if="selectChain !== 'ALL'"
+              size="sm"
+              variant="darker"
+              class="group-category-label"
+            >
               {{ group.title || "Your assets" }}
             </TypographyCategoryLabel>
             <div class="-mx-block-padding-1/4 sm:-mx-block-padding-1/2">
@@ -95,21 +101,24 @@ import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
 import { ethers } from "ethers";
 import { storeToRefs } from "pinia";
 
+import useNetworks from "@/composables/useNetworks";
+
+import type { ZkSyncNetwork } from "@/data/networks";
 import type { Token, TokenAmount } from "@/types";
 import type { Address } from "viem";
 import type { PropType } from "vue";
 
+import { useRoute } from "#app";
 import { useNetworkStore } from "@/store/network";
 import { useOnboardStore } from "@/store/onboard";
 import { useSearchtokenStore } from "@/store/searchToken";
 import { useZkSyncEthereumBalanceStore } from "@/store/zksync/ethereumBalance";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useZkSyncWalletStore } from "@/store/zksync/wallet";
+import { isSupportedMergeToken } from "@/utils/constants";
 import { groupBalancesByAmount } from "@/utils/mappers";
 import { ETH_ADDRESS, fetchErc20, L2_ETH_TOKEN_ADDRESS } from "~/zksync-web3-nova/src/utils";
-import useNetworks from "@/composables/useNetworks";
-import type { ZkSyncNetwork } from "@/data/networks";
-import { useZkSyncWalletStore } from "@/store/zksync/wallet";
-import { useZkSyncProviderStore } from "@/store/zksync/provider";
-import { useRoute } from "#app";
+
 const route = useRoute();
 const providerStore = useZkSyncProviderStore();
 const { zkSyncNetworks } = useNetworks();
@@ -126,6 +135,10 @@ zkSyncNetwork.map((i) => {
   };
   arr.push(obj);
 });
+arr.unshift({
+  key: "ALL",
+  label: "All",
+});
 const props = defineProps({
   title: {
     type: String,
@@ -173,7 +186,8 @@ watch(
     }
   }
 );
-const selectChain = ref(selectedNetwork.value.key);
+// const selectChain = ref(selectedNetwork.value.key);
+const selectChain = ref("ALL");
 const showLoading = ref(false);
 const hasBalances = computed(() => props.balances.length > 0);
 const onboardStore = useOnboardStore();
@@ -218,7 +232,7 @@ const changeToken = (item: any) => {
     return;
   }
   const url = new URL(route.fullPath, window.location.origin);
-  url.searchParams.set("network", selectChain.value);
+  url.searchParams.set("network", selectChain.value === "ALL" ? item.networkKey : selectChain.value);
   url.searchParams.set("tokenAddress", item.address);
   window.location.href = url.toString();
 };
@@ -230,34 +244,48 @@ const isWithdraw = computed(() => {
   return props.title === "Choose chain and token";
 });
 
-const buttonClicked = async (network: ZkSyncNetwork) => {
-  if (isNetworkSelected(network)) {
-    return;
-  }
-  selectChain.value = network.key;
-  chainLists.value = balance.value.filter((e) => {
-    if (isSupportedMergeToken(e.address, network.key)) {
-      return true;
+const buttonClicked = async (network: ZkSyncNetwork | "ALL") => {
+  if (network === "ALL") {
+    if (selectChain.value === "ALL") {
+      return;
     }
-    if (!e.l1Address) {
-      return false;
+    selectChain.value = "ALL";
+    chainLists.value = balance.value.filter((e) => {
+      return Number(e.amount) > 0;
+    });
+    chainList.value = filterTokens(
+      chainLists.value.filter((e) => e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+    ) as TokenAmount[];
+    balanceGroups = groupBalancesByAmount(chainList, "ALL");
+  } else {
+    if (isNetworkSelected(network)) {
+      return;
     }
-    if (isWithdraw.value && network.key === "mantle" && e.l1Address === ETH_ADDRESS) {
+    selectChain.value = network.key;
+    chainLists.value = balance.value.filter((e) => {
+      if (isSupportedMergeToken(e.address, network.key)) {
+        return true;
+      }
+      if (!e.l1Address) {
+        return false;
+      }
+      if (isWithdraw.value && network.key === "mantle" && e.l1Address === ETH_ADDRESS) {
+        return false;
+      } else if (e.l1Address === ETH_ADDRESS) {
+        return true;
+      }
+      if (e.networkKey === network.key) {
+        return true;
+      }
       return false;
-    } else if (e.l1Address === ETH_ADDRESS) {
-      return true;
-    }
-    if (e.networkKey === network.key) {
-      return true;
-    }
-    return false;
-  });
-  chainList.value = filterTokens(
-    chainLists.value.filter(
-      (e) => network.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
-    )
-  ) as TokenAmount[];
-  balanceGroups = groupBalancesByAmount(chainList);
+    });
+    chainList.value = filterTokens(
+      chainLists.value.filter(
+        (e) => network.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+      )
+    ) as TokenAmount[];
+    balanceGroups = groupBalancesByAmount(chainList);
+  }
 };
 const displayedTokens = computed(() =>
   filterTokens(
@@ -272,14 +300,12 @@ const displayedTokens = computed(() =>
 const displayedBalances = computed(
   () =>
     filterTokens(
-      props.balances.filter(
-        (e) =>
-          selectedNetwork.value.isEthGasToken ||
-          (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+      balance.value.filter(
+        (e) => Number(e.amount) > 0 && e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS
       )
     ) as TokenAmount[]
 );
-let balanceGroups = groupBalancesByAmount(displayedBalances);
+let balanceGroups = groupBalancesByAmount(displayedBalances, "ALL");
 const selectedTokenAddress = computed({
   get: () => props.tokenAddress,
   set: (value) => emit("update:tokenAddress", value),
@@ -290,11 +316,7 @@ const selectedToken = computed({
       return undefined;
     }
     return props.tokens
-      .filter(
-        (e) =>
-          selectedNetwork.value.isEthGasToken ||
-          (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
-      )
+      .filter((e) => e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
       .find((e) => e.address === selectedTokenAddress.value);
   },
   set: (value) => {
@@ -319,6 +341,7 @@ const closeModal = () => {
 .token-select-modal {
   .modal-card {
     @apply grid h-full grid-rows-[max-content_max-content_1fr];
+    max-height: 680px !important;
   }
   .category:first-child .group-category-label {
     @apply pt-0;
diff --git a/data/wallets.ts b/data/wallets.ts
index afd6d6f8..735285d8 100644
--- a/data/wallets.ts
+++ b/data/wallets.ts
@@ -5,13 +5,14 @@ export const confirmedSupportedWallets: WalletEntry[] = [
 
   { walletName: "Binance Web3", type: "injected" },
   { walletName: "Injected", type: "injected" },
-  { walletName: "OKX", type: "injected" },  
+  { walletName: "OKX", type: "injected" },
   { walletName: "GateWallet", type: "injected" },
   { walletName: "MetaMask", type: "injected" },
   { walletName: "BitKeep", type: "injected" },
   { walletName: "BlockWallet", type: "injected" },
   { walletName: "MathWallet", type: "injected" },
   { walletName: "ImToken", type: "injected" },
+  { walletName: "Bitget", type: "injected" },
 
   { walletName: "GateWallet", type: "walletConnect" },
   { walletName: "MetaMask", type: "walletConnect" },
diff --git a/types/index.d.ts b/types/index.d.ts
index 9cf0933d..1270b183 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -12,7 +12,7 @@ export type Token = {
   networkKey?: string;
   l2Address: string;
 };
-export type TokenAmount = Token & { amount: BigNumberish };
+export type TokenAmount = Token & { amount: BigNumberish, usdBalance?: number };
 
 export declare namespace Api {
   namespace Response {
diff --git a/utils/mappers.ts b/utils/mappers.ts
index d82d4760..0a173aa6 100644
--- a/utils/mappers.ts
+++ b/utils/mappers.ts
@@ -3,7 +3,7 @@ import { computed } from "vue";
 import type { Api, Token, TokenAmount } from "@/types";
 import type { Ref } from "vue";
 
-export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>) =>
+export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>, networkKey?: string) =>
   computed(() => {
     const groups: Record<string, { title: string | null; balances: T[] }> = {
       default: {
@@ -32,7 +32,19 @@ export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>) =>
         groups.small.balances.push(balanceItem);
       }
     }
-    return [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
+    const res = [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
+    if (networkKey === "ALL") {
+      const result = { title: null, balances: [] as TokenAmount[] };
+      for (const group of res) {
+        result.balances.push(...(group.balances as TokenAmount[]));
+      }
+      result.balances.forEach(
+        (item) => (item.usdBalance = Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)))
+      );
+      result.balances.sort((a, b) => (b.usdBalance ?? 0) - (a.usdBalance ?? 0));
+      return [result];
+    }
+    return res;
   });
 
 export const mapApiToken = (token: Api.Response.Token): Token => {
@@ -73,4 +85,4 @@ export function mapApiTransfer(transfer: Api.Response.Transfer) {
   };
 }
 export type Transfer = ReturnType<typeof mapApiTransfer>;
-export type Transaction = Api.Response.Transaction;
\ No newline at end of file
+export type Transaction = Api.Response.Transaction;
diff --git a/views/transactions/Withdraw.vue b/views/transactions/Withdraw.vue
index b3266c28..a75d1af8 100644
--- a/views/transactions/Withdraw.vue
+++ b/views/transactions/Withdraw.vue
@@ -75,7 +75,7 @@
             :merge-withdrawal-limit="mergeTokenLockedBalance"
           >
             <template #token-dropdown-bottom v-if="type === 'withdrawal' && account.address">
-              <CommonAlert class="sticky bottom-0 mt-3" variant="neutral" :icon="InformationCircleIcon">
+              <CommonAlert class="bottom-0 mt-3" variant="neutral" :icon="InformationCircleIcon">
                 <p>Only tokens available for withdrawal are displayed</p>
               </CommonAlert>
             </template>

From f38851fa76d2809026ae573e13b2ade4818b1f6a Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Fri, 21 Jun 2024 10:18:21 +0800
Subject: [PATCH 2/5] fix undefine network key

---
 components/token/TokenSelectModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index f1117d59..ca386e7a 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -232,7 +232,7 @@ const changeToken = (item: any) => {
     return;
   }
   const url = new URL(route.fullPath, window.location.origin);
-  url.searchParams.set("network", selectChain.value === "ALL" ? item.networkKey : selectChain.value);
+  url.searchParams.set("network", selectChain.value === "ALL" ? item.networkKey ?? "ethereum" : selectChain.value);
   url.searchParams.set("tokenAddress", item.address);
   window.location.href = url.toString();
 };

From 01fe653be5e8734a068dc7dbb4e0b2c14e269b6a Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Fri, 21 Jun 2024 14:05:36 +0800
Subject: [PATCH 3/5] fix ui issuees

---
 .../common/input/TransactionWithdraw.vue      |  1 +
 components/token/TokenLine.vue                |  6 +-
 components/token/TokenSelectModal.vue         | 29 ++++---
 utils/mappers.ts                              | 77 +++++++++----------
 4 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/components/common/input/TransactionWithdraw.vue b/components/common/input/TransactionWithdraw.vue
index 2d27ec88..c2215853 100644
--- a/components/common/input/TransactionWithdraw.vue
+++ b/components/common/input/TransactionWithdraw.vue
@@ -7,6 +7,7 @@
       :tokens="tokens"
       :balances="balances"
       :title="from === 'withdraw' ? 'Choose chain and token' : 'Choose token'"
+      :from="from"
     >
       <template #body-bottom v-if="$slots['token-dropdown-bottom']">
         <slot name="token-dropdown-bottom" />
diff --git a/components/token/TokenLine.vue b/components/token/TokenLine.vue
index a0421c74..480eba18 100644
--- a/components/token/TokenLine.vue
+++ b/components/token/TokenLine.vue
@@ -9,7 +9,7 @@
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
         <template #label>
-          <div class="truncate">{{ symbol }} {{ networkKey ? ` (${getNetworkName(networkKey)})` : "" }}</div>
+          <div class="truncate">{{ symbol }}</div>
         </template>
         <template v-if="name" #underline>
           <CommonButtonLabel
@@ -21,10 +21,10 @@
             class="flex gap-1"
             @click.stop=""
           >
-            <span class="truncate">{{ name }}</span>
+            <span class="truncate">{{ name }} {{ networkKey ? ` (${getNetworkName(networkKey)})` : "" }}</span>
             <ArrowTopRightOnSquareIcon class="h-6 w-6 flex-shrink-0" />
           </CommonButtonLabel>
-          <div v-else class="truncate">{{ name }}</div>
+          <div v-else class="truncate">{{ name }} {{ networkKey ? ` (${getNetworkName(networkKey)})` : "" }}</div>
         </template>
       </CommonButtonLineBodyInfo>
     </template>
diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index ca386e7a..788d3bb2 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -57,14 +57,14 @@
         </template>
         <template v-else-if="balanceGroups.length || !search">
           <div v-for="(group, index) in balanceGroups" :key="index" class="category">
-            <TypographyCategoryLabel
+            <!-- <TypographyCategoryLabel
               v-if="selectChain !== 'ALL'"
               size="sm"
               variant="darker"
               class="group-category-label"
             >
               {{ group.title || "Your assets" }}
-            </TypographyCategoryLabel>
+            </TypographyCategoryLabel> -->
             <div class="-mx-block-padding-1/4 sm:-mx-block-padding-1/2">
               <TokenBalance
                 v-for="item in group.balances"
@@ -166,6 +166,9 @@ const props = defineProps({
     type: Array as PropType<TokenAmount[]>,
     default: () => [],
   },
+  from: {
+    type: String,
+  },
 });
 const emit = defineEmits<{
   (eventName: "update:opened", value: boolean): void;
@@ -186,8 +189,7 @@ watch(
     }
   }
 );
-// const selectChain = ref(selectedNetwork.value.key);
-const selectChain = ref("ALL");
+const selectChain = ref(props.from === "deposit" ? selectedNetwork.value.key : "ALL");
 const showLoading = ref(false);
 const hasBalances = computed(() => props.balances.length > 0);
 const onboardStore = useOnboardStore();
@@ -253,9 +255,7 @@ const buttonClicked = async (network: ZkSyncNetwork | "ALL") => {
     chainLists.value = balance.value.filter((e) => {
       return Number(e.amount) > 0;
     });
-    chainList.value = filterTokens(
-      chainLists.value.filter((e) => e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
-    ) as TokenAmount[];
+    chainList.value = filterTokens(chainLists.value) as TokenAmount[];
     balanceGroups = groupBalancesByAmount(chainList, "ALL");
   } else {
     if (isNetworkSelected(network)) {
@@ -298,14 +298,9 @@ const displayedTokens = computed(() =>
 );
 
 const displayedBalances = computed(
-  () =>
-    filterTokens(
-      balance.value.filter(
-        (e) => Number(e.amount) > 0 && e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS
-      )
-    ) as TokenAmount[]
+  () => filterTokens(selectChain.value === "ALL" ? balance.value : props.balances) as TokenAmount[]
 );
-let balanceGroups = groupBalancesByAmount(displayedBalances, "ALL");
+let balanceGroups = groupBalancesByAmount(displayedBalances, selectChain.value);
 const selectedTokenAddress = computed({
   get: () => props.tokenAddress,
   set: (value) => emit("update:tokenAddress", value),
@@ -316,7 +311,11 @@ const selectedToken = computed({
       return undefined;
     }
     return props.tokens
-      .filter((e) => e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+      .filter(
+        (e) =>
+          selectedNetwork.value.isEthGasToken ||
+          (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+      )
       .find((e) => e.address === selectedTokenAddress.value);
   },
   set: (value) => {
diff --git a/utils/mappers.ts b/utils/mappers.ts
index 0a173aa6..f3db39c7 100644
--- a/utils/mappers.ts
+++ b/utils/mappers.ts
@@ -5,46 +5,43 @@ import type { Ref } from "vue";
 
 export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>, networkKey?: string) =>
   computed(() => {
-    const groups: Record<string, { title: string | null; balances: T[] }> = {
-      default: {
-        title: null,
-        balances: [],
-      },
-      small: {
-        title: "Small balances",
-        balances: [],
-      },
-      zero: {
-        title: "Zero balances",
-        balances: [],
-      },
-    };
-    for (const balanceItem of balances.value as (T & TokenAmount)[]) {
-      const decimalBalance =
-        typeof balanceItem.price === "number"
-          ? removeSmallAmount(balanceItem.amount, balanceItem.decimals, balanceItem.price)
-          : parseTokenAmount(balanceItem.amount, balanceItem.decimals);
-      if (!isOnlyZeroes(decimalBalance)) {
-        groups.default.balances.push(balanceItem);
-      } else if (decimalBalance === "0") {
-        groups.zero.balances.push(balanceItem);
-      } else {
-        groups.small.balances.push(balanceItem);
-      }
-    }
-    const res = [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
-    if (networkKey === "ALL") {
-      const result = { title: null, balances: [] as TokenAmount[] };
-      for (const group of res) {
-        result.balances.push(...(group.balances as TokenAmount[]));
-      }
-      result.balances.forEach(
-        (item) => (item.usdBalance = Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)))
-      );
-      result.balances.sort((a, b) => (b.usdBalance ?? 0) - (a.usdBalance ?? 0));
-      return [result];
-    }
-    return res;
+    // const groups: Record<string, { title: string | null; balances: T[] }> = {
+    //   default: {
+    //     title: null,
+    //     balances: [],
+    //   },
+    //   small: {
+    //     title: "Small balances",
+    //     balances: [],
+    //   },
+    //   zero: {
+    //     title: "Zero balances",
+    //     balances: [],
+    //   },
+    // };
+    // for (const balanceItem of balances.value as (T & TokenAmount)[]) {
+    //   const decimalBalance =
+    //     typeof balanceItem.price === "number"
+    //       ? removeSmallAmount(balanceItem.amount, balanceItem.decimals, balanceItem.price)
+    //       : parseTokenAmount(balanceItem.amount, balanceItem.decimals);
+    //   if (!isOnlyZeroes(decimalBalance)) {
+    //     groups.default.balances.push(balanceItem);
+    //   } else if (decimalBalance === "0") {
+    //     groups.zero.balances.push(balanceItem);
+    //   } else {
+    //     groups.small.balances.push(balanceItem);
+    //   }
+    // }
+    // const res = [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
+    // return res;
+
+    const balanceWithUsd = (balances.value as (T & TokenAmount)[]).map((item) => ({
+      ...item,
+      usdBalance: Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)),
+    })) as TokenAmount[];
+
+    balanceWithUsd.sort((a, b) => (b.usdBalance ?? 0) - (a.usdBalance ?? 0));
+    return [{ title: null, balances: balanceWithUsd }];
   });
 
 export const mapApiToken = (token: Api.Response.Token): Token => {

From 1b9cf110ba92eeddee30d619c50c21a63023ebcd Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Fri, 21 Jun 2024 16:08:45 +0800
Subject: [PATCH 4/5] fix ui issues

---
 components/token/TokenSelectModal.vue | 18 +++----
 utils/mappers.ts                      | 78 ++++++++++++++-------------
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index 788d3bb2..1cd6a1cb 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -57,14 +57,9 @@
         </template>
         <template v-else-if="balanceGroups.length || !search">
           <div v-for="(group, index) in balanceGroups" :key="index" class="category">
-            <!-- <TypographyCategoryLabel
-              v-if="selectChain !== 'ALL'"
-              size="sm"
-              variant="darker"
-              class="group-category-label"
-            >
+            <TypographyCategoryLabel v-if="from === 'deposit'" size="sm" variant="darker" class="group-category-label">
               {{ group.title || "Your assets" }}
-            </TypographyCategoryLabel> -->
+            </TypographyCategoryLabel>
             <div class="-mx-block-padding-1/4 sm:-mx-block-padding-1/2">
               <TokenBalance
                 v-for="item in group.balances"
@@ -168,6 +163,7 @@ const props = defineProps({
   },
   from: {
     type: String,
+    default: "deposit",
   },
 });
 const emit = defineEmits<{
@@ -185,7 +181,7 @@ watch(
   (value) => {
     if (chainList.value.length > 0) {
       searchList.value = filterTokens(chainList.value) as TokenAmount[];
-      balanceGroups = groupBalancesByAmount(searchList);
+      balanceGroups = groupBalancesByAmount(searchList, props.from);
     }
   }
 );
@@ -256,7 +252,7 @@ const buttonClicked = async (network: ZkSyncNetwork | "ALL") => {
       return Number(e.amount) > 0;
     });
     chainList.value = filterTokens(chainLists.value) as TokenAmount[];
-    balanceGroups = groupBalancesByAmount(chainList, "ALL");
+    balanceGroups = groupBalancesByAmount(chainList, props.from);
   } else {
     if (isNetworkSelected(network)) {
       return;
@@ -284,7 +280,7 @@ const buttonClicked = async (network: ZkSyncNetwork | "ALL") => {
         (e) => network.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
       )
     ) as TokenAmount[];
-    balanceGroups = groupBalancesByAmount(chainList);
+    balanceGroups = groupBalancesByAmount(chainList, props.from);
   }
 };
 const displayedTokens = computed(() =>
@@ -300,7 +296,7 @@ const displayedTokens = computed(() =>
 const displayedBalances = computed(
   () => filterTokens(selectChain.value === "ALL" ? balance.value : props.balances) as TokenAmount[]
 );
-let balanceGroups = groupBalancesByAmount(displayedBalances, selectChain.value);
+let balanceGroups = groupBalancesByAmount(displayedBalances, props.from);
 const selectedTokenAddress = computed({
   get: () => props.tokenAddress,
   set: (value) => emit("update:tokenAddress", value),
diff --git a/utils/mappers.ts b/utils/mappers.ts
index f3db39c7..0015a537 100644
--- a/utils/mappers.ts
+++ b/utils/mappers.ts
@@ -3,45 +3,49 @@ import { computed } from "vue";
 import type { Api, Token, TokenAmount } from "@/types";
 import type { Ref } from "vue";
 
-export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>, networkKey?: string) =>
+export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>, type = "deposit") =>
   computed(() => {
-    // const groups: Record<string, { title: string | null; balances: T[] }> = {
-    //   default: {
-    //     title: null,
-    //     balances: [],
-    //   },
-    //   small: {
-    //     title: "Small balances",
-    //     balances: [],
-    //   },
-    //   zero: {
-    //     title: "Zero balances",
-    //     balances: [],
-    //   },
-    // };
-    // for (const balanceItem of balances.value as (T & TokenAmount)[]) {
-    //   const decimalBalance =
-    //     typeof balanceItem.price === "number"
-    //       ? removeSmallAmount(balanceItem.amount, balanceItem.decimals, balanceItem.price)
-    //       : parseTokenAmount(balanceItem.amount, balanceItem.decimals);
-    //   if (!isOnlyZeroes(decimalBalance)) {
-    //     groups.default.balances.push(balanceItem);
-    //   } else if (decimalBalance === "0") {
-    //     groups.zero.balances.push(balanceItem);
-    //   } else {
-    //     groups.small.balances.push(balanceItem);
-    //   }
-    // }
-    // const res = [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
-    // return res;
+    if (type === "deposit") {
+      const groups: Record<string, { title: string | null; balances: T[] }> = {
+        default: {
+          title: null,
+          balances: [],
+        },
+        small: {
+          title: "Small balances",
+          balances: [],
+        },
+        zero: {
+          title: "Zero balances",
+          balances: [],
+        },
+      };
+      for (const balanceItem of balances.value as (T & TokenAmount)[]) {
+        const decimalBalance =
+          typeof balanceItem.price === "number"
+            ? removeSmallAmount(balanceItem.amount, balanceItem.decimals, balanceItem.price)
+            : parseTokenAmount(balanceItem.amount, balanceItem.decimals);
+        if (!isOnlyZeroes(decimalBalance)) {
+          groups.default.balances.push(balanceItem);
+        } else if (decimalBalance === "0") {
+          groups.zero.balances.push(balanceItem);
+        } else {
+          groups.small.balances.push(balanceItem);
+        }
+      }
+      const res = [groups.default, groups.small, groups.zero].filter((group) => group.balances.length);
+      return res;
+    } else {
+      const balanceWithUsd = (balances.value as TokenAmount[])
+        .filter((e) => Number(e.amount) > 0)
+        .map((item) => ({
+          ...item,
+          usdBalance: Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)),
+        })) as TokenAmount[];
 
-    const balanceWithUsd = (balances.value as (T & TokenAmount)[]).map((item) => ({
-      ...item,
-      usdBalance: Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)),
-    })) as TokenAmount[];
-
-    balanceWithUsd.sort((a, b) => (b.usdBalance ?? 0) - (a.usdBalance ?? 0));
-    return [{ title: null, balances: balanceWithUsd }];
+      balanceWithUsd.sort((a, b) => (b.usdBalance ?? 0) - (a.usdBalance ?? 0));
+      return [{ title: null, balances: balanceWithUsd }];
+    }
   });
 
 export const mapApiToken = (token: Api.Response.Token): Token => {

From 4d9ce988130189c964bdd4eb5356340b4beb723d Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Fri, 21 Jun 2024 20:07:25 +0800
Subject: [PATCH 5/5] fix ui issues

---
 components/token/TokenSelectModal.vue | 4 +---
 utils/mappers.ts                      | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index 1cd6a1cb..0ae14c8d 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -248,9 +248,7 @@ const buttonClicked = async (network: ZkSyncNetwork | "ALL") => {
       return;
     }
     selectChain.value = "ALL";
-    chainLists.value = balance.value.filter((e) => {
-      return Number(e.amount) > 0;
-    });
+    chainLists.value = balance.value;
     chainList.value = filterTokens(chainLists.value) as TokenAmount[];
     balanceGroups = groupBalancesByAmount(chainList, props.from);
   } else {
diff --git a/utils/mappers.ts b/utils/mappers.ts
index 0015a537..76303dc6 100644
--- a/utils/mappers.ts
+++ b/utils/mappers.ts
@@ -37,7 +37,7 @@ export const groupBalancesByAmount = <T = TokenAmount>(balances: Ref<T[]>, type
       return res;
     } else {
       const balanceWithUsd = (balances.value as TokenAmount[])
-        .filter((e) => Number(e.amount) > 0)
+        .filter((e) => Number(e.amount) > 0 && (e.l1Address || (!e.l1Address && isMergeToken(e.address))))
         .map((item) => ({
           ...item,
           usdBalance: Number(formatRawTokenPrice(item.amount, item.decimals, item.price ?? 0)),