fix ui issues for withdraw;add merge token to token list for withdraw

store/zksync/wallet.ts

@@ -1,3 +1,4 @@
+import { MERGE_TOKENS } from "./../../utils/constants";
 import { getPublicClient } from "@wagmi/core";
 import { BigNumber, ethers, VoidSigner } from "ethers";
 import { $fetch } from "ofetch";
@@ -13,6 +14,7 @@ import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTokensStore } from "@/store/zksync/tokens";
 import { L1Signer, L1VoidSigner, Web3Provider } from "@/zksync-web3-nova/src";
+
 export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
   const onboardStore = useOnboardStore();
   const providerStore = useZkSyncProviderStore();
@@ -91,7 +93,7 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
     await Promise.all([requestAccountState({ force: true }), tokensStore.requestTokens()]);
     if (!accountState.value) throw new Error("Account state is not available");
     if (!tokens.value) throw new Error("Tokens are not available");
-    return Object.entries(accountState.value.balances)
+    const accountBalances = Object.entries(accountState.value.balances)
       .filter(([, { token }]) => token)
       .map(([, { balance, token }]) => {
         return {
@@ -103,6 +105,21 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
           amount: balance,
         };
       });
+    //add merge tokens
+    for (const token of MERGE_TOKENS) {
+      const find = accountBalances.find((item) => item.address.toLowerCase() === token.address.toLowerCase());
+      if (!find) {
+        accountBalances.push({
+          address: token.address,
+          l1Address: undefined,
+          name: token!.symbol || undefined,
+          symbol: token!.symbol!,
+          decimals: token!.decimals,
+          amount: "0",
+        });
+      }
+    }
+    return accountBalances;
   };
   const getBalancesFromRPC = async (): Promise<TokenAmount[]> => {
     await tokensStore.requestTokens();

utils/constants.ts

@@ -1,4 +1,3 @@
-import { WITHDRAWAL_DELAY } from './../store/zksync/transactionStatus';
 import type { Token } from "@/types";
 
 export const ETH_TOKEN: Token = {
@@ -10,4 +9,35 @@ export const ETH_TOKEN: Token = {
   iconUrl: "/img/eth.svg",
 };
 
-export const WITHDRAWAL_DELAY_DAYS = 12
+export const WITHDRAWAL_DELAY_DAYS = 12;
+
+export const MERGE_TOKENS = [
+  {
+    symbol: "USDT",
+    address: "0x2F8A25ac62179B31D62D7F80884AE57464699059",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism"],
+    decimals: 6,
+  },
+  {
+    symbol: "WBTC",
+    address: "0xDa4AaEd3A53962c83B35697Cd138cc6df43aF71f",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism"],
+    decimals: 18,
+  },
+  {
+    symbol: "USDC",
+    address: "0x1a1A3b2ff016332e866787B311fcB63928464509",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism", "base"],
+    decimals: 6,
+  },
+  {
+    symbol: "DAI",
+    address: "0xF573fA04A73d5AC442F3DEa8741317fEaA3cDeab",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "optimism", "base"],
+    decimals: 18,
+  },
+];
+
+export const isMergeToken = (address: string) => {
+  return address && MERGE_TOKENS.some((token) => token.address.toLowerCase() === address.toLowerCase());
+};

views/transactions/Withdraw.vue

@@ -267,7 +267,16 @@
                 class="w-full"
                 @click="buttonContinue()"
               >
-                Continue
+                {{ isMergeTokenSelected ? "Redeem" : "Continue" }}
+              </CommonButton>
+              <CommonButton
+                v-else-if="step === 'confirm'"
+                :disabled="continueButtonDisabled || transactionStatus !== 'not-started'"
+                variant="primary"
+                class="w-full"
+                @click="buttonContinue()"
+              >
+                <span v-if="transactionStatus === 'processing'">Processing...</span>
               </CommonButton>
               <template v-else-if="step === 'confirm'">
                 <transition v-bind="TransitionAlertScaleInOutTransition">
@@ -353,7 +362,7 @@ import { WITHDRAWAL_DELAY } from "@/store/zksync/transactionStatus";
 import { useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
 import { useZkSyncTransfersHistoryStore } from "@/store/zksync/transfersHistory";
 import { useZkSyncWalletStore } from "@/store/zksync/wallet";
-import { ETH_TOKEN, WITHDRAWAL_DELAY_DAYS } from "@/utils/constants";
+import { ETH_TOKEN, WITHDRAWAL_DELAY_DAYS, isMergeToken } from "@/utils/constants";
 import { ZKSYNC_WITHDRAWAL_DELAY } from "@/utils/doc-links";
 import { checksumAddress, decimalToBigNumber, formatRawTokenPrice } from "@/utils/formatters";
 import { calculateFee } from "@/utils/helpers";
@@ -447,6 +456,9 @@ const availableTokens = computed(() => {
   if (!tokens.value) return [];
   if (props.type === "withdrawal") {
     return Object.values(tokens.value).filter((e) => {
+      if(isMergeToken(e.address)) {
+        return true;
+      }
       if (!e.l1Address) {
         return false;
       }
@@ -465,6 +477,9 @@ const availableBalances = computed(() => {
   if (props.type === "withdrawal") {
     if (!tokens.value) return [];
     return balance.value.filter((e) => {
+      if(isMergeToken(e.address)) {
+        return true;
+      }
       if (!e.l1Address) {
         return false;
       }
@@ -503,7 +518,7 @@ const selectedToken = computed<Token | undefined>(() => {
     return undefined;
   }
   if (!selectedTokenAddress.value) {
-    if (!selectedNetwork.value.isEthGasToken) {
+    if (!selectedNetwork.value.isEthGasToken && defaultToken.value?.l1Address === ETH_ADDRESS) {
       return availableTokens.value[1];
     }
     return defaultToken.value;
@@ -512,7 +527,7 @@ const selectedToken = computed<Token | undefined>(() => {
     availableTokens.value.find((e) => e.address === selectedTokenAddress.value) ||
     availableBalances.value.find((e) => e.address === selectedTokenAddress.value) ||
     defaultToken.value;
-  if (!selectedNetwork.value.isEthGasToken) {
+  if (!selectedNetwork.value.isEthGasToken && res.address === ETH_ADDRESS) {
     return availableTokens.value[1];
   }
   return res;
@@ -665,6 +680,10 @@ const estimate = async () => {
   ) {
     return;
   }
+  // skip estimate for merge token
+  if (isMergeTokenSelected.value) {
+    return;
+  }
   await estimateFee({
     type: props.type,
     from: transaction.value.from.address,
@@ -698,7 +717,14 @@ watch(
   { immediate: true }
 );
 
+const isMergeTokenSelected = computed(() => {
+  return isMergeToken(selectedToken.value?.address ?? "")
+})
+
 const continueButtonDisabled = computed(() => {
+  if(isMergeTokenSelected.value) {
+    return false;
+  }
   if (
     !isAddressInputValid.value ||
     !transaction.value ||
@@ -716,6 +742,10 @@ const buttonContinue = () => {
   if (continueButtonDisabled.value) {
     return;
   }
+  if (isMergeTokenSelected.value) {
+    window.open("https://zklink.io/merge", "_blank");
+    return;
+  }
   if (step.value === "form") {
     if (withdrawalManualFinalizationRequired.value) {
       step.value = "withdrawal-finalization-warning";