Merge pull request #163 from zkLinkProtocol/feat/withdraw_estimate_time

update for estimate withdray delay time

components/common/Timer.vue

@@ -49,7 +49,7 @@ const formatTimeDiff = (diff: number, onlyDays = false): string => {
 
   if (props.format === "human-readable") {
     if (onlyDays) {
-      return `~ ${day} day${day !== 1 ? "s" : ""}`
+      return `~ ${day + 1} day${day + 1 !== 1 ? "s" : ""}`;
     }
     let formattedString = "";
     if (hours > 0) formattedString += `${day} day ${hours} hour${hours > 1 ? "s" : ""} `;

store/zksync/transactionStatus.ts

@@ -44,7 +44,7 @@ export const getEstmatdDepositDelay = (networkKey: string): number => {
     return ESTIMATED_DEPOSIT_DELAY_SECONDARY;
   }
 };
-export const WITHDRAWAL_DELAY = 14 * 24 * 60 * 60 * 1000; // 7 * 24 hours
+export const WITHDRAWAL_DELAY = 7 * 24 * 60 * 60 * 1000; // 7 * 24 hours
 export type Address = Hash;
 export type ForwardL2Request = {
   gateway: Address;

store/zksync/withdrawals.ts

@@ -33,7 +33,7 @@ export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () =>
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
   const setStatus = async (obj: { transactionHash: ethers.utils.BytesLike; status: string; gateway: string }) => {
-    const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+    const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
 
     const { selectedNetwork } = storeToRefs(useNetworkStore());
     let provider: Provider | undefined;
@@ -82,7 +82,7 @@ export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () =>
     );
     const withdrawals = transfers.items.filter((e) => e.type === "withdrawal" && e.token && e.amount);
     for (const withdrawal of withdrawals) {
-      const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+      const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
 
       const transactionFromStorage = transactionStatusStore.getTransaction(withdrawal.transactionHash);
       if (transactionFromStorage) {
@@ -156,7 +156,8 @@ export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () =>
         },
         info: {
           expectedCompleteTimestamp: new Date(
-            new Date(withdrawalTransfer.timestamp).getTime() + WITHDRAWAL_DELAY
+            new Date(withdrawalTransfer.timestamp).getTime() +
+              getEstimateWithdrawalDelayDays(withdrawalTransfer.timestamp) * 24 * 3600 * 1000
           ).toISOString(),
           completed: withdrawal.status === "Finalized",
           withdrawalFinalizationAvailable: transactionDetails.status === "verified",

utils/constants.ts

@@ -9,7 +9,13 @@ export const ETH_TOKEN: Token = {
   iconUrl: "/img/eth.svg",
 };
 
-export const WITHDRAWAL_DELAY_DAYS = 14;
+export const WITHDRAWAL_DELAY_DAYS = 7;
+
+// Last syncL2Requests tx on blast: Apr-20-2024 09:45:31 AM +UTC;
+// deposit before this time , estimate withdraw time is 14 days;
+// deposit after this time, estimate withdraw time is :
+// ( 14 days - (deposit time - this time)) < 7days ? 7days : ( 14 days - (deposit time - this time));
+export const LAST_BLAST_SYNCL2_TIME = 1713606331000;
 
 export const MERGE_TOKENS = [
   {

utils/helpers.ts

@@ -54,3 +54,13 @@ export async function retry<T>(func: () => Promise<T>, options: RetryOptions = {
     }
   }
 }
+
+export const getEstimateWithdrawalDelayDays = (txTime: string | number) => {
+  const transactionTime = new Date(txTime).getTime();
+  if (transactionTime < LAST_BLAST_SYNCL2_TIME) {
+    return 14;
+  } else {
+    const gap = Math.ceil(14 - (transactionTime - LAST_BLAST_SYNCL2_TIME) / (24 * 3600 * 1000));
+    return gap >= 8 ? gap : 8;
+  }
+};

views/transactions/Withdraw.vue

@@ -201,11 +201,12 @@
             class="mb-block-padding-1/2 sm:mb-block-gap"
           >
             <p v-if="withdrawalManualFinalizationRequired">
-              You will be able to claim your withdrawal only after a {{ WITHDRAWAL_DELAY_DAYS }}-day withdrawal delay.
+              You will be able to claim your withdrawal only after a {{ displayEstimateWithdrawalDelayDays }}-day
+              withdrawal delay.
               <!-- <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">Learn more</a> -->
             </p>
             <p v-else>
-              You will receive funds only after a {{ WITHDRAWAL_DELAY_DAYS }}-day withdrawal delay.
+              You will receive funds only after a {{ displayEstimateWithdrawalDelayDays }}-day withdrawal delay.
               <!-- <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">Learn more</a> -->
             </p>
           </CommonAlert>
@@ -504,20 +505,13 @@ import { useOnboardStore } from "@/store/onboard";
 import { usePreferencesStore } from "@/store/preferences";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTokensStore } from "@/store/zksync/tokens";
-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,
-  isMergeToken,
-  isSupportedMergeToken,
-  MergeTokenContractUrl,
-  WITHDRAWAL_DELAY_DAYS,
-} from "@/utils/constants";
+import { ETH_TOKEN, isMergeToken, isSupportedMergeToken } from "@/utils/constants";
 import { ZKSYNC_WITHDRAWAL_DELAY } from "@/utils/doc-links";
 import { checksumAddress, decimalToBigNumber, formatRawTokenPrice, parseTokenAmount } from "@/utils/formatters";
-import { calculateFee } from "@/utils/helpers";
+import { calculateFee, getEstimateWithdrawalDelayDays } from "@/utils/helpers";
 import { silentRouterChange } from "@/utils/helpers";
 import { TransitionAlertScaleInOutTransition, TransitionOpacity } from "@/utils/transitions";
 import TransferSubmitted from "@/views/transactions/TransferSubmitted.vue";
@@ -612,6 +606,8 @@ const fromNetworkSelected = (networkKey?: string) => {
 const step = ref<"form" | "withdrawal-finalization-warning" | "confirm" | "submitted">("form");
 const destination = computed(() => (props.type === "transfer" ? destinations.value.nova : destinations.value.arbitrum));
 
+const displayEstimateWithdrawalDelayDays = getEstimateWithdrawalDelayDays(Date.now());
+
 const availableTokens = computed(() => {
   if (!tokens.value) return [];
   if (props.type === "withdrawal") {
@@ -1084,7 +1080,9 @@ const makeTransaction = async () => {
       info: {
         expectedCompleteTimestamp:
           transaction.value?.type === "withdrawal"
-            ? new Date(new Date().getTime() + WITHDRAWAL_DELAY).toISOString()
+            ? new Date(
+                new Date().getTime() + getEstimateWithdrawalDelayDays(Date.now()) * 24 * 60 * 60 * 1000
+              ).toISOString()
             : undefined,
         completed: false,
       },

views/transactions/WithdrawalSubmitted.vue

@@ -11,8 +11,7 @@
         </template>
         <template v-else>
           Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
-          the {{WITHDRAWAL_DELAY_DAYS}}-day delay.
-          During this time, the transaction will be processed
+          the {{ displayEstimateWithdrawTime }}-day delay. During this time, the transaction will be processed
           {{
             withdrawalManualFinalizationRequired
               ? "and become available for claiming."
@@ -160,7 +159,8 @@ import { useNetworkStore } from "@/store/network";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTransactionStatusStore } from "@/store/zksync/transactionStatus";
-import { WITHDRAWAL_DELAY_DAYS } from '@/utils/constants'
+import { getEstimateWithdrawalDelayDays } from "@/utils/helpers";
+
 const props = defineProps({
   transaction: {
     type: Object as PropType<TransactionInfo>,
@@ -189,8 +189,8 @@ const getNetworkInfo = () => {
     return props.transaction ? newNetwork ?? primaryNetwork : obj;
   } else {
     let objs = zkSyncNetworks.find(
-      (item) => item.key && item.key.toLowerCase() === (props.transaction?.token?.networkKey || 'primary').toLowerCase()
-    )
+      (item) => item.key && item.key.toLowerCase() === (props.transaction?.token?.networkKey || "primary").toLowerCase()
+    );
     const obj = { l1Network: { id: l1Network.value?.id, blockExplorers: { default: { url: l1BlockExplorerUrl } } } };
     return props.transaction ? objs ?? primaryNetwork : obj;
   }
@@ -204,7 +204,7 @@ const { connectorName } = storeToRefs(onboardStore);
 
 const network = computed(() => {
   return onboardStore.network;
-})
+});
 
 const withdrawalManualFinalizationRequired = computed(() => {
   return (
@@ -216,6 +216,10 @@ const withdrawalFinalizationAvailable = computed(() => {
   return withdrawalManualFinalizationRequired.value && props.transaction.info.withdrawalFinalizationAvailable;
 });
 
+const displayEstimateWithdrawTime = computed(() => {
+  return getEstimateWithdrawalDelayDays(props.transaction.timestamp);
+});
+
 const {
   feeToken,
   totalFee: fee,