Feat/merge main dev

components/common/Timer.vue

@@ -43,7 +43,7 @@ let intervalId: ReturnType<typeof setInterval> | undefined = undefined;
 
 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);
 

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

@@ -47,34 +47,64 @@
             autocomplete="off"
             autofocus
           />
-          <transition v-bind="TransitionOpacity()" mode="default">
-            <CommonInputErrorMessage v-if="amountError">
-              <template v-if="amountError === 'insufficient_balance' || maxDecimalAmount === '0'">
-                Insufficient balance
-              </template>
-              <template v-else-if="amountError === 'exceeds_balance' && !maxAmount">Amount exceeds balance</template>
-              <template v-else-if="amountError === 'exceeds_merge_limit'">
-                Input amount exceeds the merge limit.
-              </template>
-              <template v-else-if="amountError === 'exceeds_max_amount' || amountError === 'exceeds_balance'">
-                Max amount is
-                <button
-                  type="button"
-                  class="cursor-pointer font-medium underline underline-offset-2"
-                  @click.prevent="setMaxAmount()"
+          <div class="flex justify-between">
+            <transition v-bind="TransitionOpacity()" mode="default">
+              <div class="mr-5">
+                <CommonButtonLabel
+                  v-if="mergeWithdrawalLimit !== undefined"
+                  as="div"
+                  variant="light"
+                  class="mt-1 text-left text-sm"
                 >
-                  {{ maxDecimalAmount }}
-                </button>
-              </template>
-              <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 }}
-            </CommonButtonLabel>
-          </transition>
+                  Available for redemption: {{ mergeWithdrawalLimit }}
+                </CommonButtonLabel>
+                <CommonInputErrorMessage v-if="amountError">
+                  <template v-if="amountError === 'insufficient_balance' || maxDecimalAmount === '0'">
+                    Insufficient balance
+                  </template>
+                  <template v-else-if="amountError === 'exceeds_balance' && !maxAmount"
+                    >Amount exceeds balance</template
+                  >
+                  <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.split(" ")[0]
+                    }}
+                    amount locked in the
+                    <a :href="MergeTokenContractUrl" target="_blank" class="underline underline-offset-2"
+                      >Nova merge token contract.</a
+                    >
+                    You may want to 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
+                      type="button"
+                      class="cursor-pointer font-medium underline underline-offset-2"
+                      @click.prevent="setMaxAmount()"
+                    >
+                      {{ maxDecimalAmount }}
+                    </button>
+                  </template>
+                  <template v-else-if="amountError === 'exceeds_decimals'">
+                    Max decimal length for {{ selectedToken?.symbol }} is {{ selectedToken?.decimals }}
+                  </template>
+                </CommonInputErrorMessage>
+              </div>
+            </transition>
+            <transition>
+              <CommonButtonLabel
+                v-if="!amountError && inputted"
+                as="div"
+                variant="light"
+                class="-mb-6 mt-1 text-right text-sm"
+              >
+                {{ totalAmountPrice }}
+              </CommonButtonLabel>
+            </transition>
+          </div>
         </div>
 
         <transition v-bind="TransitionOpacity(300)">
@@ -101,15 +131,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { computed, mergeProps, 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 { MergeTokenContractUrl } from "@/utils/constants";
 import { decimalToBigNumber, formatTokenPrice, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 import { ETH_ADDRESS, L2_ETH_TOKEN_ADDRESS } from "~/zksync-web3-nova/src/utils";
 const { selectedNetwork } = storeToRefs(useNetworkStore());
@@ -150,8 +183,15 @@ const props = defineProps({
   },
   mergeLimitExceeds: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  mergeWithdrawalLimitExceeds: {
+    type: Boolean,
+    default: false,
+  },
+  mergeWithdrawalLimit: {
+    type: String,
+  },
 });
 
 const emit = defineEmits<{
@@ -166,7 +206,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 +269,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>