feat: wrap MNT to WMNT and unwrap WETH to ETH when deposit

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 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/button/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <CommonButton class="dropdown-button" :class="noChevron?'noClick':''">
+  <CommonButton class="dropdown-button" :class="noChevron ? 'noClick' : ''">
     <div v-if="$slots['left-icon']" class="left-icon-container">
       <slot name="left-icon" />
     </div>
@@ -46,10 +46,10 @@ defineProps({
   }
 }
 
-.noClick{
-  background: transparent !important;
-  :hover{
+.noClick {
   background: transparent !important;
+  :hover {
+    background: transparent !important;
   }
 }
 </style>

components/common/input/TransactionSend.vue

@@ -102,16 +102,17 @@ import { computed, ref, watch } from "vue";
 import { LockClosedIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
 
+import useNetworks from "@/composables/useNetworks";
+
 import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 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 useNetworks from "@/composables/useNetworks";
-const { zkSyncNetworks,isCustomNode,defaultNetwork } = useNetworks();
+const { zkSyncNetworks } = useNetworks();
 // const { selectedNetwork } = storeToRefs(useNetworkStore());
-const selectedNetwork = zkSyncNetworks.filter((i:any)=>i.key === "primary")[0];
+const selectedNetwork = zkSyncNetworks.filter((i) => i.key === "primary")[0];
 const props = defineProps({
   modelValue: {
     type: String,
@@ -161,7 +162,12 @@ const selectedTokenAddress = computed({
 });
 const selectedToken = computed(() => {
   const tokens = props.balances.length ? props.balances : props.tokens;
-  return tokens.filter((e)=> selectedNetwork.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)).find((e) => e.address === props.tokenAddress);
+  return tokens
+    .filter(
+      (e) =>
+        selectedNetwork.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+    )
+    .find((e) => e.address === props.tokenAddress);
 });
 const tokenBalance = computed(() => {
   if (!props.balances.length || !selectedToken.value) {

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
@@ -69,7 +72,6 @@
               <template v-else-if="amountError === 'exceeds_decimals'">
                 Max decimal length for {{ selectedToken?.symbol }} is {{ selectedToken?.decimals }}
               </template>
-
             </CommonInputErrorMessage>
             <CommonButtonLabel v-else-if="inputted" as="div" variant="light" class="-mb-6 mt-1 text-right text-sm">
               {{ totalAmountPrice }}
@@ -105,13 +107,16 @@ import { computed, ref, watch } from "vue";
 
 import { LockClosedIcon } from "@heroicons/vue/24/outline";
 import { BigNumber } from "ethers";
+import { storeToRefs } from "pinia";
 
 import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 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,6 +156,10 @@ const props = defineProps({
   mergeLimitExceeds: {
     type: Boolean,
     default: false
+  },
+  mergeWithdrawalLimitExceeds: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -166,7 +175,13 @@ const selectedTokenAddress = computed({
 });
 const selectedToken = computed(() => {
   const tokens = props.balances.length ? props.balances : props.tokens;
-  return tokens.filter((e)=> selectedNetwork.value.isEthGasToken || (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)).find((e) => e.address === props.tokenAddress);
+  return tokens
+    .filter(
+      (e) =>
+        selectedNetwork.value.isEthGasToken ||
+        (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+    )
+    .find((e) => e.address === props.tokenAddress);
 });
 const tokenBalance = computed(() => {
   if (!props.balances.length || !selectedToken.value) {
@@ -223,8 +238,11 @@ const setMaxAmount = () => {
 };
 
 const amountError = computed(() => {
-  if(props.mergeLimitExceeds) {
-    return 'exceeds_merge_limit'
+  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)) {

components/destination/DestinationItem.vue

@@ -1,5 +1,11 @@
 <template>
-  <CommonButtonLineWithImg :as="as" :icon="icon" class="destination-item" :class="{ 'disable': disabled }" v-tooltip="disabled&&'Withdrawal from Nova will be enable in April.'">
+  <CommonButtonLineWithImg
+    :as="as"
+    :icon="icon"
+    class="destination-item"
+    :class="{ disable: disabled }"
+    v-tooltip="disabled && 'Withdrawal from Nova will be enable in April.'"
+  >
     <template #image>
       <slot name="image">
         <CommonImageLoader class="destination-item-icon" :src="iconUrl" />
@@ -50,18 +56,18 @@ defineProps({
   disabled: {
     type: Boolean,
     default: false,
-  }
+  },
 });
 </script>
 
 <style lang="scss">
-.marginLeft{
+.marginLeft {
   display: inline-block;
   position: absolute;
   right: 10px;
   color: #999a9c;
 }
-.disable{
+.disable {
   background: #252628 !important;
   color: #999a9c !important;
   position: relative;

components/header/AccountDropdown.vue

@@ -74,13 +74,7 @@ import { computed, ref, watch } from "vue";
 import { useTippy } from "vue-tippy";
 
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import {
-  ArrowTopRightOnSquareIcon,
-  DocumentDuplicateIcon,
-  ExclamationCircleIcon,
-  PowerIcon,
-  Squares2X2Icon,
-} from "@heroicons/vue/24/outline";
+import { ArrowTopRightOnSquareIcon, DocumentDuplicateIcon, PowerIcon, Squares2X2Icon } from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
 
 import useCopy from "@/composables/useCopy";

components/header/AccountDropdownButton.vue

@@ -13,5 +13,5 @@ import { storeToRefs } from "pinia";
 import { useOnboardStore } from "@/store/onboard";
 
 const onboardStore = useOnboardStore();
-const { account,walletName } = storeToRefs(onboardStore);
+const { account, walletName } = storeToRefs(onboardStore);
 </script>

components/header/Banner.vue

@@ -35,18 +35,15 @@
   </div>
 </template>
 <script>
-// Import Swiper Vue.js components
-import { Swiper, SwiperSlide } from "swiper/vue";
-
-// Import Swiper styles
-import "swiper/css";
-
 // import "swiper/css/pagination";
 // import "swiper/css/navigation";
 
 // import required modules
-import { Autoplay, Pagination, Navigation } from "swiper/modules";
-
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from "swiper/vue";
+// Import Swiper styles
+import "swiper/css";
 export default {
   components: {
     Swiper,

components/header/Header.vue

@@ -113,6 +113,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import { computed } from "vue";
 
 import {
   ArrowsRightLeftIcon,
@@ -124,13 +125,14 @@ import {
 } from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
 
+import Banner from "./Banner.vue";
+
 import useColorMode from "@/composables/useColorMode";
+import useNetworks from "@/composables/useNetworks";
 
 import { useRoute } from "#imports";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
-import useNetworks from "@/composables/useNetworks";
-import Banner from "./Banner.vue";
 const { defaultNetwork, isMainnet } = useNetworks();
 
 const route = useRoute();

components/header/MobileMainNavigation.vue

@@ -106,19 +106,22 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
+
 import {
   ArrowsRightLeftIcon,
   ArrowsUpDownIcon,
   CheckIcon,
-  ChevronRightIcon,
   MoonIcon,
   SunIcon,
   WalletIcon,
 } from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
+
 import useColorMode from "@/composables/useColorMode";
 import useNetworks from "@/composables/useNetworks";
+
 import type { ZkSyncNetwork } from "@/data/networks";
+
 import { useRoute } from "#imports";
 import { useNetworkStore } from "@/store/network";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";

components/header/NetworkDropdown.vue

@@ -4,7 +4,7 @@
       <CommonButtonDropdown :toggled="open">
         <template #left-icon>
           <!-- <IconsEra /> -->
-          <img class="image-loader-image loaded" :src="selectedNetwork.logoUrl">
+          <img class="image-loader-image loaded" :src="selectedNetwork.logoUrl" />
         </template>
         <span>{{ selectedNetwork.l1Network?.name }}</span>
       </CommonButtonDropdown>
@@ -27,7 +27,7 @@
           >
             <template #left-icon>
               <!-- <IconsEra /> -->
-            <img class="image-loader-image loaded" :src="item.logoUrl">
+              <img class="image-loader-image loaded" :src="item.logoUrl" />
             </template>
             <span>{{ item.l1Network?.name }}</span>
             <template #right-icon>