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

…tatus

Feat/withdraw claimable status

components/loaders/Connecting.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onMounted } from "vue";
 
 import { storeToRefs } from "pinia";
 

components/transaction/TransferWithdrawalLineItem.vue

@@ -94,14 +94,14 @@ const props = defineProps({
   },
 });
 
-const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
 const { account } = storeToRefs(useOnboardStore());
 const eraNetwork = getNetworkInfo(props.transfer);
 const label = computed(() => {
-  if(props.transfer.status === 'failed') {
-    return 'Failed Deposit'
+  if (props.transfer.status === "failed") {
+    return "Failed Deposit";
   }
-  const article = 'Withdraw';
+  const article = "Withdraw";
   if (props.transfer.to === account.value.address) {
     return article;
   }
@@ -139,8 +139,8 @@ const getl1NetworkName = () => {
       };
     } else {
       return {
-        from: primaryNetwork.l1Network?.name,
-        to: primaryNetwork.l1Network?.name,
+        from: eraNetwork.l1Network?.name,
+        to: eraNetwork.l1Network?.name,
       };
     }
   }

components/transaction/WithdrawalsAvailableForClaimAlert.vue

@@ -1,7 +1,7 @@
 <template>
   <CommonHeightTransition :opened="!!withdrawalsAvailableForClaiming.length">
     <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-gap">
-      <p>You have withdrawals available for claiming on {{ newNetwork?.l1Network?.name }} network</p>
+      <p class="mr-4">You have withdrawals available for claiming on {{ newNetwork?.l1Network?.name }} network</p>
       <CommonButton as="RouterLink" :to="{ name: 'transfers' }" variant="primary">
         <span class="whitespace-nowrap">See withdrawals</span>
       </CommonButton>
@@ -19,10 +19,10 @@ import useNetworks from "@/composables/useNetworks";
 
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 const { withdrawalsAvailableForClaiming } = storeToRefs(useZkSyncWithdrawalsStore());
-const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
 const newNetwork = computed(() => {
-  if (withdrawalsAvailableForClaiming.value.length> 0) {
-    return getNetworkInfo(withdrawalsAvailableForClaiming.value[0])
+  if (withdrawalsAvailableForClaiming.value.length > 0) {
+    return getNetworkInfo(withdrawalsAvailableForClaiming.value[0]);
   }
-})
+});
 </script>

composables/transaction/useMergeToken.ts

@@ -15,14 +15,15 @@ export type SourceTokenInfo = {
 };
 const NOVA_CHAIN_ID = nodeType === "nexus" ? 810180 : 810181;
 const MERGE_TOKEN_PORTAL_ADDRESSES =
-  nodeType === "nexus" ? "0x83FD59FD58C6A5E6eA449e5400D02803875e1104" : "0x83FD59FD58C6A5E6eA449e5400D02803875e1104";
+  nodeType === "nexus" ? "0x83FD59FD58C6A5E6eA449e5400D02803875e1104" : "0x400993142059ddF34636c58Bb066aAD2d21ec273";
 export default (tokenL2Address: Ref<string | undefined>) => {
   const onboardStore = useOnboardStore();
   const {
     result,
     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
   };
 };

composables/zksync/useTransaction.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useMemoize } from "@vueuse/core";
 import { type BigNumberish } from "ethers";
 
@@ -6,8 +7,11 @@ import useScreening from "@/composables/useScreening";
 import type { TokenAmount } from "@/types";
 import type { Provider, Signer } from "@/zksync-web3-nova/src";
 
+import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncWalletStore } from "@/store/zksync/wallet";
 import { formatError } from "@/utils/formatters";
+import { sleep } from "@/utils/helpers";
+import { NOVA_CHAIN_ID } from "@/utils/constants";
 
 type TransactionParams = {
   type: "transfer" | "withdrawal";
@@ -29,6 +33,8 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
   const error = ref<Error | undefined>();
   const transactionHash = ref<string | undefined>();
   const eraWalletStore = useZkSyncWalletStore();
+  const onboardStore = useOnboardStore();
+  const publicClient = onboardStore.getPublicClient(NOVA_CHAIN_ID);
 
   const retrieveBridgeAddresses = useMemoize(() => getProvider().getDefaultBridgeAddresses());
   const { validateAddress } = useScreening();
@@ -68,6 +74,12 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
       });
 
       transactionHash.value = tx.hash;
+      await sleep(1500);
+      try {
+        await publicClient?.getTransactionReceipt({ hash: tx.hash as `0x${string}` });
+      } catch (e) {
+        error.value = formatError(e as Error);
+      }
       status.value = "done";
 
       return tx;

composables/zksync/useWithdrawalFinalization.ts

@@ -24,7 +24,7 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   const tokensStore = useZkSyncTokensStore();
   const { network } = storeToRefs(onboardStore);
   const { tokens } = storeToRefs(tokensStore);
-  const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+  const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
 
   const { selectedNetwork } = storeToRefs(useNetworkStore());
   let provider: Provider | undefined;
@@ -119,10 +119,12 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     inProgress: estimationInProgress,
     error: estimationError,
     execute: estimateFee,
+    reload: reloadEstimateFee,
   } = usePromise(
     async () => {
+      const eraNetwork = getNetworkInfo(transactionInfo.value) || selectedNetwork.value;
       tokensStore.requestTokens();
-      const publicClient = onboardStore.getPublicClient();
+      const publicClient = onboardStore.getPublicClient(eraNetwork.l1Network?.id);
       if (!publicClient) return;
       const transactionParams = await getTransactionParams();
       const [price, limit] = await Promise.all([

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <LoadersConnecting />
+  <!-- <LoadersConnecting /> -->
   <ModalConnectingWalletError />
   <!-- <ModalNetworkChangedWarning v-if="!isConnectingWallet" /> -->
   <ModalLegalNotice />

pages/transfers.vue

@@ -59,7 +59,7 @@
           Loading transfers error: {{ recentTransfersRequestError.message }}
         </CommonErrorBlock>
       </CommonCardWithLineButtons>
-      <div v-else-if="displayedTransfers.length">
+      <div v-else-if="displayedTransfers.length" class="mt-6">
         <CommonCardWithLineButtons>
           <TransactionTransferLineItem v-for="(item, index) in displayedTransfers" :key="index" :transfer="item" />
         </CommonCardWithLineButtons>
@@ -135,8 +135,7 @@ type RecentBridgeOperation = Transfer & {
 const recentBridgeOperations = computed<RecentBridgeOperation[]>(() => {
   const recent = userTransactions.value.filter(
     (tx) =>
-      (tx.type === "withdrawal" &&
-        (!tx.info.completed || new Date(tx.timestamp).getTime() + WITHDRAWAL_DELAY * 2 > new Date().getTime())) ||
+      (tx.type === "withdrawal" && !tx.info.completed) ||
       (tx.type === "deposit" &&
         new Date(tx.timestamp).getTime() + getWaitTime(eraNetwork.value.l1Network?.id)[0] > new Date().getTime())
   );

store/zksync/transactionStatus.ts

@@ -9,6 +9,9 @@ import ZkSyncContractInterface from "@/zksync-web3-nova/abi/IZkSync.json";
 
 import type { FeeEstimationParams } from "@/composables/zksync/useFee";
 import type { TransactionDestination } from "@/store/destinations";
+
+import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
+
 import type { TokenAmount } from "@/types";
 import type { Hash } from "@/types";
 
@@ -44,6 +47,9 @@ export const getEstmatdDepositDelay = (networkKey: string): number => {
     return ESTIMATED_DEPOSIT_DELAY_SECONDARY;
   }
 };
+
+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 = {
@@ -64,7 +70,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
   const onboardStore = useOnboardStore();
   const { account } = storeToRefs(onboardStore);
   const eraWalletStore = useZkSyncWalletStore();
-
+  const zkSyncWithdrawalsStore = useZkSyncWithdrawalsStore();
   const storageSavedTransactions = useStorage<{ [networkKey: string]: TransactionInfo[] }>(
     "zksync-bridge-transactions",
     {}
@@ -183,7 +189,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     transaction.info.completed = true;
     return transaction;
   };
-  const { primaryNetwork, zkSyncNetworks,getNetworkInfo } = useNetworks();
+  const { primaryNetwork, zkSyncNetworks, getNetworkInfo } = useNetworks();
   const { selectedNetwork } = storeToRefs(useNetworkStore());
   let provider: Provider | undefined;
   const request = (transaction: any) => {
@@ -205,15 +211,21 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
   };
   const getWithdrawalStatus = async (transaction: TransactionInfo) => {
     if (!transaction.info.withdrawalFinalizationAvailable) {
-      const transactionDetails = await request(transaction).getTransactionDetails(transaction.transactionHash);
-      if (transactionDetails.status !== "verified") {
+      const claimable = await zkSyncWithdrawalsStore.checkWithdrawalFinalizeAvailable(transaction);
+      if (!claimable) {
         return transaction;
       }
+      // const transactionDetails = await request(transaction).getTransactionDetails(transaction.transactionHash);
+      // if (transactionDetails.status !== "verified") {
+      //   return transaction;
+      // }
     }
-    const isFinalized = await useZkSyncWalletStore()
-      .getL1VoidSigner(true)
-      ?.isWithdrawalFinalized(transaction.transactionHash)
-      .catch(() => false);
+
+    // const isFinalized = await useZkSyncWalletStore()
+    //   .getL1VoidSigner(true)
+    //   ?.isWithdrawalFinalized(transaction.transactionHash)
+    //   .catch(() => false);
+    const isFinalized = await zkSyncWithdrawalsStore.setStatus(transaction);
     transaction.info.withdrawalFinalizationAvailable = true;
     transaction.info.completed = isFinalized;
     return transaction;

store/zksync/transfersHistory.ts

@@ -1,19 +1,30 @@
+import useNetworks from "@/composables/useNetworks";
 import usePaginatedRequest from "@/composables/zksync/usePaginatedRequest";
 
 import type { Api } from "@/types";
 import type { Transfer } from "@/utils/mappers";
 
+import { useDestinationsStore } from "@/store/destinations";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
-import { mapApiTransfer } from "@/utils/mappers";
+import {
+  useZkSyncTransactionStatusStore,
+  WITHDRAWAL_CHECK_DELAY_DAYS,
+  WITHDRAWAL_DELAY,
+} from "@/store/zksync/transactionStatus";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
+import { mapApiTransfer } from "@/utils/mappers";
 
 const TRANSACTIONS_FETCH_LIMIT = 50;
 
 export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistory", () => {
   const onboardStore = useOnboardStore();
   const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
   const { account } = storeToRefs(onboardStore);
+  const transactionStatusStore = useZkSyncTransactionStatusStore();
+  const { userTransactions } = storeToRefs(transactionStatusStore);
+  const { destinations } = storeToRefs(useDestinationsStore());
+  const { getNetworkInfo } = useNetworks();
 
   const filterOutDuplicateTransfers = (transfers: Transfer[]) => {
     /*
@@ -81,6 +92,42 @@ export const useZkSyncTransfersHistoryStore = defineStore("zkSyncTransfersHistor
       const mappedTransfers = response.items.map(mapApiTransfer);
       useZkSyncWithdrawalsStore().updateWithdrawals();
       transfers.value = filterOutDuplicateTransfers(mappedTransfers);
+      //TODO put withdrawals into local storage
+      for (const withdrawal of transfers.value.filter((e) => e.type === "withdrawal")) {
+        if (!userTransactions.value.find((e) => e.transactionHash === withdrawal.transactionHash)) {
+          const eraNetworks = getNetworkInfo(withdrawal);
+          const obj = {
+            iconUrl: eraNetworks.logoUrl,
+            key: "nova",
+            label: eraNetworks?.l1Network?.name,
+          };
+          transactionStatusStore.saveTransaction({
+            type: "withdrawal",
+            transactionHash: withdrawal.transactionHash!,
+            timestamp: withdrawal.timestamp,
+            token: {
+              ...withdrawal.token!,
+              amount: withdrawal.amount!,
+            },
+            from: {
+              address: withdrawal.from,
+              destination: destinations.value.nova,
+            },
+            to: {
+              address: withdrawal.to,
+              destination: obj,
+            },
+            info: {
+              expectedCompleteTimestamp: new Date(
+                new Date(withdrawal.timestamp).getTime() + WITHDRAWAL_DELAY
+              ).toISOString(),
+              completed: false, // will check internally
+              withdrawalFinalizationAvailable: false, // will check internally
+            },
+            gateway: withdrawal.gateway,
+          });
+        }
+      }
     },
     { cache: 30000 }
   );