Merge pull request #191 from zkLinkProtocol/feat/withdraw_claimable_s…

…tatus

add reload merge token info

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" : ""} `;
@@ -70,7 +70,6 @@ const updateTimer = () => {
   diff.value = Math.max(targetTime - currentTime, 0);
   timer.value = formatTimeDiff(diff.value, props.onlyDays);
 
-
   if (diff.value === 0) {
     clearInterval(intervalId);
     return;

composables/transaction/useMergeToken.ts

@@ -23,6 +23,7 @@ export default (tokenL2Address: Ref<string | undefined>) => {
     inProgress,
     error,
     execute: getMergeTokenInfo,
+    reload: reloadMergeTokenInfo,
     reset,
   } = usePromise(
     async () => {
@@ -59,5 +60,6 @@ export default (tokenL2Address: Ref<string | undefined>) => {
     inProgress: computed(() => inProgress.value),
     error: computed(() => error.value),
     requestMergeTokenInfo,
+    reloadMergeTokenInfo
   };
 };

store/zksync/transactionStatus.ts

@@ -47,10 +47,10 @@ 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_CHECK_DELAY_DAYS = process.env.NODE_TYPE === "nexus-sepolia" ? 0.5 : 7;
 
+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

@@ -214,10 +214,31 @@ export const useZkSyncWithdrawalsStore = defineStore("zkSyncWithdrawals", () =>
     );
     const withdrawals = transfers.items.filter((e) => e.type === "withdrawal" && e.token && e.amount);
     for (const withdrawal of withdrawals) {
-      if (isWithinDelayDays(withdrawal.timestamp)) continue;
       const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
+
       const transactionFromStorage = transactionStatusStore.getTransaction(withdrawal.transactionHash);
       if (transactionFromStorage) {
+        // check if tx.to.destination is matching with tx.token.networkKey for erc20
+        if (
+          transactionFromStorage.to.destination.key !== transactionFromStorage.token.networkKey &&
+          transactionFromStorage.token.symbol !== "ETH"
+        ) {
+          const { selectedNetwork } = storeToRefs(useNetworkStore());
+          const eraNetworks = getNetworkInfo(withdrawal) || selectedNetwork.value;
+          const obj = {
+            iconUrl: eraNetworks.logoUrl!,
+            key: "nova",
+            label: eraNetworks?.l1Network?.name ?? "",
+          };
+          transactionStatusStore.updateTransactionData(withdrawal.transactionHash, {
+            ...transactionFromStorage,
+            to: {
+              ...transactionFromStorage.to,
+              destination: obj,
+            },
+          });
+        }
+        if (isWithinDelayDays(withdrawal.timestamp)) continue;
         if (!transactionFromStorage.info.withdrawalFinalizationAvailable) {
           const status = await checkWithdrawalFinalizeAvailable(transactionFromStorage);
           if (status) {
@@ -280,7 +301,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: claimable,

utils/constants.ts

@@ -1,4 +1,3 @@
-import { WITHDRAWAL_DELAY } from "./../store/zksync/transactionStatus";
 import type { Token } from "@/types";
 
 export const ETH_TOKEN: Token = {
@@ -12,7 +11,13 @@ export const ETH_TOKEN: Token = {
 
 export const NOVA_CHAIN_ID = process.env.NODE_TYPE === "nexus" ? 810180 : 810181;
 
-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 =
   process.env.NODE_TYPE === "nexus"

utils/helpers.ts

@@ -58,3 +58,12 @@ export async function retry<T>(func: () => Promise<T>, options: RetryOptions = {
 export async function sleep(time: number) {
   return new Promise((resolve) => setTimeout(resolve, time));
 }
+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/Deposit.vue

@@ -580,7 +580,7 @@ const amountInputTokenAddress = computed({
 const tokenBalance = computed<BigNumberish | undefined>(() => {
   return balance.value?.find((e) => e.address === selectedToken.value?.address)?.amount;
 });
-const { result: mergeTokenInfo } = useMergeToken(computed(() => selectedToken.value?.l2Address));
+const { result: mergeTokenInfo, reloadMergeTokenInfo } = useMergeToken(computed(() => selectedToken.value?.l2Address));
 
 const {
   result: allowance,
@@ -854,6 +854,7 @@ const makeTransaction = async () => {
     step.value = "submitted";
     previousTransactionAddress.value = transaction.value!.to.address;
     recentlyBridged.value = true;
+    reloadMergeTokenInfo();
   }
 
   if (tx) {
@@ -965,7 +966,7 @@ onMounted(() => {
   if (selectedNetworkKey.value === "blast") {
     selectedNetworkKey.value = zkSyncNetworks[0].key;
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>

views/transactions/Withdraw.vue

@@ -202,11 +202,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>
@@ -505,20 +506,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") {
@@ -806,7 +802,11 @@ const mergeTokenL2Address = computed(() => {
   return undefined;
 });
 
-const { result: mergeTokenInfo, inProgress: mergeTokenInfoInProgress } = useMergeToken(mergeTokenL2Address);
+const {
+  result: mergeTokenInfo,
+  reloadMergeTokenInfo,
+  inProgress: mergeTokenInfoInProgress,
+} = useMergeToken(mergeTokenL2Address);
 
 const mergeTokenWithdrawalLimitExceeds = computed(() => {
   try {
@@ -1066,6 +1066,7 @@ const makeTransaction = async () => {
   if (transactionStatus.value === "done") {
     step.value = "submitted";
     previousTransactionAddress.value = transaction.value!.to.address;
+    reloadMergeTokenInfo();
   }
 
   if (tx) {
@@ -1083,7 +1084,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,