Merge branch 'preview' into feat/wrap_mnt

components/common/Timer.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: String,
     default: "hh:mm:ss", // 'hh:mm:ss' for "00:00:00", 'human-readable' for "1 hour 30 minutes"
   },
+  onlyDays: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits<{
   (eventName: "finish"): void;
@@ -37,13 +41,16 @@ watch(
 
 let intervalId: ReturnType<typeof setInterval> | undefined = undefined;
 
-const formatTimeDiff = (diff: number): string => {
+const formatTimeDiff = (diff: number, onlyDays = false): string => {
   const day = Math.floor(diff / (1000 * 60 * 60 * 24));
   const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
   const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
   if (props.format === "human-readable") {
+    if (onlyDays) {
+      return `~ ${day} day${day !== 1 ? "s" : ""}`
+    }
     let formattedString = "";
     if (hours > 0) formattedString += `${day} day ${hours} hour${hours > 1 ? "s" : ""} `;
     if (minutes > 0) formattedString += `${minutes} minute${minutes > 1 ? "s" : ""} `;
@@ -61,7 +68,7 @@ const updateTimer = () => {
   const currentTime = new Date().getTime();
   const targetTime = new Date(props.futureDate).getTime();
   diff.value = Math.max(targetTime - currentTime, 0);
-  timer.value = formatTimeDiff(diff.value);
+  timer.value = formatTimeDiff(diff.value, props.onlyDays);
 
   if (diff.value === 0) {
     clearInterval(intervalId);

components/common/input/TransactionWithdraw.vue

@@ -56,6 +56,9 @@
               <template v-else-if="amountError === 'exceeds_merge_limit'">
                 Input amount exceeds the merge limit.
               </template>
+              <template v-else-if="amountError === 'exceeds_merge_withdrawal_limit'">
+                The input amount exceeds the {{ selectedToken.symbol }}.{{ selectedNetwork.l1Network?.name }} amount locked in the <a :href="MergeTokenContractUrl" target="_blank" class="underline underline-offset-2">merge token contract.</a>  Consider withdrawing to another network or reducing the input.
+              </template>
               <template v-else-if="amountError === 'exceeds_max_amount' || amountError === 'exceeds_balance'">
                 Max amount is
                 <button
@@ -113,6 +116,7 @@ import type { PropType } from "vue";
 import { useNetworkStore } from "@/store/network";
 import { decimalToBigNumber, formatTokenPrice, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 import { ETH_ADDRESS, L2_ETH_TOKEN_ADDRESS } from "~/zksync-web3-nova/src/utils";
+import { MergeTokenContractUrl } from '@/utils/constants'
 const { selectedNetwork } = storeToRefs(useNetworkStore());
 const props = defineProps({
   modelValue: {
@@ -151,8 +155,12 @@ const props = defineProps({
   },
   mergeLimitExceeds: {
     type: Boolean,
-    default: false,
+    default: false
   },
+  mergeWithdrawalLimitExceeds: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const emit = defineEmits<{
@@ -233,6 +241,9 @@ const amountError = computed(() => {
   if (props.mergeLimitExceeds) {
     return "exceeds_merge_limit";
   }
+  if(props.mergeWithdrawalLimitExceeds) {
+    return 'exceeds_merge_withdrawal_limit'
+  }
   if (!selectedToken.value) return;
   if (tokenBalance.value && totalComputeAmount.value.gt(tokenBalance.value.amount)) {
     return "exceeds_balance";

components/transaction/EthereumTransactionFooter.vue

@@ -62,6 +62,9 @@
             Change wallet network to {{ l1Network.name }}
           </slot>
         </CommonButton>
+        <template v-if="connectorName === 'WalletConnect'">
+          <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+        </template>
       </template>
       <template v-else>
         <CommonButton disabled variant="primary" class="w-full">

components/transaction/TransactionFooter.vue

@@ -21,7 +21,7 @@
       <CommonButton
         v-if="
           connectorName !== 'WalletConnect' ||
-          (connectorName === 'WalletConnect' && (walletName?.includes('OKX') || walletName?.includes('MetaMask')))
+          (connectorName === 'WalletConnect' && (walletName?.includes('OKX') || walletName?.includes('MetaMask') || walletName?.includes('Binance')))
         "
         type="submit"
         :disabled="switchingNetworkInProgress"
@@ -31,12 +31,16 @@
       >
         Change wallet network to {{ eraNetwork.name }}
       </CommonButton>
+      <CommonButton v-else-if="connectorName === 'WalletConnect'" disabled variant="primary" class="w-full">
+        Change network manually to {{ eraNetwork.name }} in your {{ walletName }} wallet
+      </CommonButton>
+      <template v-if="connectorName === 'WalletConnect'">
+        <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+      </template>
+
       <CommonButton v-else-if="walletName === 'Binance Web3'" disabled variant="primary" class="w-full">
         The current version of your {{ walletName }} wallet may not support {{ eraNetwork.name }}
       </CommonButton>
-      <CommonButton v-else disabled variant="primary" class="w-full">
-        Change network manually to {{ eraNetwork.name }} in your {{ walletName }} wallet
-      </CommonButton>
     </div>
     <div v-else-if="buttonStep === 'continue'" class="transaction-footer-row">
       <slot name="after-checks" />

components/transaction/TransactionProgress.vue

@@ -89,12 +89,18 @@
         </span>
       </div>
       <div v-if="expectedCompleteTimestamp && !completed">
-        <span class="text-neutral-400">Time: </span>
-        <CommonTimer format="human-readable" :future-date="expectedCompleteTimestamp">
+        <span class="text-neutral-400">Time{{ !isWithdraw ? "" : " left" }}: </span>
+        <CommonTimer format="human-readable" :future-date="expectedCompleteTimestamp" :only-days="isWithdraw">
           <template #default="{ timer, isTimerFinished }">
             <template v-if="isTimerFinished">Funds should arrive soon!</template>
             <template v-else>
-              <span class="tabular-nums">{{ timer }} left</span>
+              <span class="tabular-nums">{{ timer }} {{ isWithdraw ? "" : "left" }}</span>
+              <CommonButtonLabel as="span" class="showTip relative text-left" v-if="isWithdraw">
+                <img src="/img/Shape.svg" class="ml-1 inline-block h-3 w-3" alt="" />
+                <div class="tooltip">
+                  The estimated time remaining may differ from the actual time remaining.
+                </div>
+              </CommonButtonLabel>
             </template>
           </template>
         </CommonTimer>
@@ -162,6 +168,10 @@ const props = defineProps({
   animationState: {
     type: String as PropType<AnimationState>,
   },
+  isWithdraw: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const isSameAddress = computed(() => props.fromAddress === props.toAddress);
@@ -220,4 +230,24 @@ const isSameAddressDifferentDestination = computed(
     }
   }
 }
+.showTip:hover {
+  .tooltip {
+    display: block;
+    z-index: 100;
+  }
+}
+.tooltip {
+  display: none;
+  position: absolute;
+  padding: 12px 20px 12px 24px;
+  bottom: 105%;
+  width: 30rem;
+  left: -15rem;
+  border-radius: 8px;
+  background: #1f2127;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 400;
+  transition: all .5s linear;
+}
 </style>

components/transaction/TransferLineItem.vue

@@ -166,13 +166,13 @@ const getl1NetworkName = () => {
       };
     } else if (type === "withdrawal") {
       const newNetwork = zkSyncNetworks.find(
-        (item) => item.key && item.key.toLowerCase() === (props.transfer.token?.networkKey || 'primary').toLowerCase()
-      )
+        (item) => item.key && item.key.toLowerCase() === props.transfer.token?.networkKey?.toLowerCase()
+      );
       return {
         from: newNetwork?.l1Network?.name,
         to: newNetwork?.l1Network?.name,
       };
-    } else {
+    }  else {
       return {
         from: getNetworkInfo().l1Network?.name,
         to: getNetworkInfo().l1Network?.name,

composables/transaction/useAllowance.ts

@@ -40,7 +40,12 @@ export default (
   );
 
   const requestAllowance = async () => {
-    if (accountAddress.value && tokenAddress.value && tokenAddress.value !== ETH_TOKEN.l1Address) {
+    if (
+      accountAddress.value &&
+      tokenAddress.value &&
+      tokenAddress.value !== ETH_TOKEN.l1Address &&
+      tokenAddress.value !== ETH_TOKEN.address
+    ) {
       await getAllowance();
     } else {
       reset();

composables/zksync/useFee.ts

@@ -15,6 +15,7 @@ export type FeeEstimationParams = {
   from: string;
   to: string;
   tokenAddress: string;
+  isMergeToken?: boolean;
 };
 
 export default (
@@ -66,6 +67,7 @@ export default (
             to: params.to,
             token: params.tokenAddress === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : params.tokenAddress,
             amount: "1",
+            isMergeToken: params.isMergeToken,
           });
         }),
       ]);

composables/zksync/useTransaction.ts

@@ -14,6 +14,7 @@ type TransactionParams = {
   to: string;
   tokenAddress: string;
   amount: BigNumberish;
+  isMergeToken?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -58,6 +59,7 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
         to: transaction.to,
         token: transaction.tokenAddress === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : transaction.tokenAddress,
         amount: transaction.amount,
+        isMergeToken: transaction.isMergeToken,
         bridgeAddress,
         overrides: {
           gasPrice: fee.gasPrice,