From 96a699cab2f312afe5685dd77f65d0693b7ae63b Mon Sep 17 00:00:00 2001
From: haymond-ZK <haymond@zklink.org>
Date: Wed, 24 Apr 2024 19:33:27 +0800
Subject: [PATCH] fix: Modify the token selection dialog on the withdraw page
 closed #148

---
 .../common/input/TransactionWithdraw.vue      |   5 +
 components/token/TokenSelectModal.vue         | 105 +++++++++++++++++-
 views/transactions/Deposit.vue                |   1 +
 views/transactions/Withdraw.vue               |   4 +-
 4 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/components/common/input/TransactionWithdraw.vue b/components/common/input/TransactionWithdraw.vue
index 47c881bd..3d361804 100644
--- a/components/common/input/TransactionWithdraw.vue
+++ b/components/common/input/TransactionWithdraw.vue
@@ -6,6 +6,7 @@
       :loading="loading"
       :tokens="tokens"
       :balances="balances"
+      :title="from==='withdraw'? 'Choose chain and token':''"
     >
       <template #body-bottom v-if="$slots['token-dropdown-bottom']">
         <slot name="token-dropdown-bottom" />
@@ -155,6 +156,10 @@ const props = defineProps({
     type: String,
     default: "Amount",
   },
+  from: {
+    type: String,
+    default: "",
+  },
   tokens: {
     type: Array as PropType<Token[]>,
     default: () => [],
diff --git a/components/token/TokenSelectModal.vue b/components/token/TokenSelectModal.vue
index a156be1d..7a80aa7f 100644
--- a/components/token/TokenSelectModal.vue
+++ b/components/token/TokenSelectModal.vue
@@ -1,5 +1,14 @@
 <template>
-  <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :title="title" @after-leave="search = ''">
+  <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :class="{ 'token-modal': title === 'Choose chain and token' }" :title="title" @after-leave="search = ''">
+    <div v-if="title === 'Choose chain and token'" class="mb-4">
+      <div class="flex gap-2 flex-wrap">
+        <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)!);">
+          <img :src="group.iconUrl" :alt="group.label"/>
+        </div>
+      </div>
+      <p v-if="!arr.length" class="mt-block-padding-1/2 text-center">No chains found</p>
+    </div>
     <Combobox v-model="selectedToken">
       <!-- TODO: Refactor this to use ComboboxInput as main component but look like CommonInputSearch -->
       <CommonInputSearch
@@ -46,7 +55,7 @@
                 size="sm"
                 variant="light"
                 :key="item.address"
-                @click="selectedToken = item"
+                @click="changeToken(item)"
               />
             </div>
           </div>
@@ -85,7 +94,28 @@ import { useSearchtokenStore } from "@/store/searchToken";
 import { useZkSyncEthereumBalanceStore } from "@/store/zksync/ethereumBalance";
 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 { eraNetwork } = storeToRefs(providerStore);
+const { zkSyncNetworks } = useNetworks();
 
+const walletStore = useZkSyncWalletStore();
+const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
+const zkSyncNetwork = zkSyncNetworks.filter((e) => !e.hidden)
+let arr : any[] = [];
+zkSyncNetwork.map((i)=> {
+  const obj = {
+    iconUrl: i.logoUrl,
+    key: i.key,
+    label: i.l1Network?.name,
+  };
+  arr.push(obj);
+});
 const props = defineProps({
   title: {
     type: String,
@@ -123,6 +153,7 @@ const { selectedNetwork } = storeToRefs(useNetworkStore());
 const zkSyncEthereumBalance = useZkSyncEthereumBalanceStore();
 
 const search = ref("");
+const selectChain = ref(selectedNetwork.value.key)
 const showLoading = ref(false);
 const hasBalances = computed(() => props.balances.length > 0);
 const onboardStore = useOnboardStore();
@@ -160,7 +191,48 @@ const filterTokens = (tokens: Token[]) => {
   }
   return newTokens;
 };
-
+const changeToken = (item:any) => {
+  console.log(item)
+  selectedToken.value = item
+  if (selectChain.value === selectedNetwork.value.key) {
+    return;
+  }
+  const url = new URL(route.fullPath, window.location.origin);
+  url.searchParams.set("network", selectChain.value);
+  url.searchParams.set("tokenAddress", item.address);
+  window.location.href = url.toString();
+}
+const isNetworkSelected = (network: ZkSyncNetwork) => selectChain.value === network.key;
+const chainList = ref<any[]>([]);
+const buttonClicked = (network: ZkSyncNetwork) => {
+  if (isNetworkSelected(network)) {
+    return;
+  }
+  selectChain.value = network.key;
+  const chainLists = balance.value.filter((e) => {
+    if (isSupportedMergeToken(e.address, network.key)) {
+      return true;
+    }
+    if (!e.l1Address) {
+      return false;
+    }
+    if (e.l1Address === ETH_ADDRESS) {
+      return true;
+    }
+    if (e.networkKey === eraNetwork.value.key) {
+      return true;
+    }
+    return false;
+  });
+  chainList.value = filterTokens(
+    chainLists.filter(
+      (e) =>
+        network.isEthGasToken ||
+        (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+    )
+  ) as TokenAmount[]
+  balanceGroups = groupBalancesByAmount(chainList)
+};
 const displayedTokens = computed(() =>
   filterTokens(
     props.tokens.filter(
@@ -180,7 +252,7 @@ const displayedBalances = computed(
       )
     ) as TokenAmount[]
 );
-const balanceGroups = groupBalancesByAmount(displayedBalances);
+let balanceGroups = groupBalancesByAmount(displayedBalances);
 const selectedTokenAddress = computed({
   get: () => props.tokenAddress,
   set: (value) => emit("update:tokenAddress", value),
@@ -225,4 +297,29 @@ const closeModal = () => {
     @apply pt-0;
   }
 }
+.token-modal {
+  .modal-card {
+    @apply block h-full grid-rows-[max-content_max-content_1fr];
+  }
+  .category:first-child .group-category-label {
+    @apply pt-0;
+  }
+}
+.chainBox{
+  display: flex;
+  width: 75.7px;
+  height: 64px;
+  padding: 12px 18px 12px 18px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: #3D424D;
+}
+.chainBox:hover{
+  border-radius: 8px;
+  background: rgba(23, 85, 244, 0.25);
+}
+.active{
+  border: 2px solid #1755F4;
+}
 </style>
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 52dc72a7..8e3d6bee 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -71,6 +71,7 @@
           v-model:error="amountError"
           v-model:token-address="amountInputTokenAddress"
           label="From"
+          :from="'deposit'"
           :tokens="availableTokens"
           :balances="availableBalances"
           :max-amount="maxAmount"
diff --git a/views/transactions/Withdraw.vue b/views/transactions/Withdraw.vue
index 20501d27..1a9690b7 100644
--- a/views/transactions/Withdraw.vue
+++ b/views/transactions/Withdraw.vue
@@ -74,6 +74,7 @@
             v-model:error="amountError"
             v-model:token-address="amountInputTokenAddress"
             :label="type === 'withdrawal' ? 'From' : undefined"
+            :from="'withdraw'"
             :tokens="availableTokens"
             :balances="availableBalances"
             :max-amount="maxAmount"
@@ -584,7 +585,6 @@ const props = defineProps({
 const { selectedNetwork } = storeToRefs(useNetworkStore());
 const route = useRoute();
 const router = useRouter();
-
 const onboardStore = useOnboardStore();
 const walletStore = useZkSyncWalletStore();
 const tokensStore = useZkSyncTokensStore();
@@ -671,7 +671,7 @@ const tokenWithHighestBalancePrice = computed(() => {
 });
 const defaultToken = computed(() => availableTokens.value?.[0] ?? undefined);
 const selectedTokenAddress = ref<string | undefined>(
-  routeTokenAddress.value ?? tokenWithHighestBalancePrice.value?.address ?? defaultToken.value?.address
+  route.query.tokenAddress ?? routeTokenAddress.value ?? tokenWithHighestBalancePrice.value?.address ?? defaultToken.value?.address
 );
 const selectedToken = computed<Token | undefined>(() => {
   if (!tokens.value) {