Merge pull request #199 from zkLinkProtocol/preview

Preview
zkLinkProtocol · Apr 26, 2024 · faf2c46 · faf2c46
2 parents ab2377c + 9a2eac4
commit faf2c46
Show file tree

Hide file tree

Showing 20 changed files with 349 additions and 102 deletions.
diff --git a/components/loaders/Connecting.vue b/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";
 

diff --git a/components/transaction/EthereumTransactionFooter.vue b/components/transaction/EthereumTransactionFooter.vue
@@ -63,7 +63,9 @@
           </slot>
         </CommonButton>
         <template v-if="connectorName === 'WalletConnect'">
-          <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+          <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')"
+            >If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText
+          >
         </template>
       </template>
       <template v-else>
@@ -126,8 +128,8 @@ const getNetworkInfo = () => {
     return props.transaction ? newNetwork ?? primaryNetwork : obj;
   } else {
     let obj = 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 objs = { l1Network: { id: l1Network.value?.id } };
     return props.transaction ? obj ?? primaryNetwork : objs;
   }
@@ -146,7 +148,7 @@ const isGateWalletUnsupportedChain = computed(() => {
 const buttonStep = computed(() => {
   console.log("buttonStep getNetworkInfo().l1Network?.id", getNetworkInfo().l1Network?.id);
   console.log("buttonStep network.value.chain?.id", network.value.chain?.id);
-  if (!account.value.address || isConnectingWallet.value) {
+  if (!account.value.address) {
     return "connect";
   } else if (!(network.value.chain?.id === getNetworkInfo().l1Network?.id)) {
     return "network";

diff --git a/components/transaction/TransactionFooter.vue b/components/transaction/TransactionFooter.vue
@@ -21,7 +21,8 @@
       <CommonButton
         v-if="
           connectorName !== 'WalletConnect' ||
-          (connectorName === 'WalletConnect' && (walletName?.includes('OKX') || walletName?.includes('MetaMask') || walletName?.includes('Binance')))
+          (connectorName === 'WalletConnect' &&
+            (walletName?.includes('OKX') || walletName?.includes('MetaMask') || walletName?.includes('Binance')))
         "
         type="submit"
         :disabled="switchingNetworkInProgress"
@@ -35,7 +36,9 @@
         Change network manually to {{ eraNetwork.name }} in your {{ walletName }} wallet
       </CommonButton>
       <template v-if="connectorName === 'WalletConnect'">
-        <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+        <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')"
+          >If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText
+        >
       </template>
 
       <CommonButton v-else-if="walletName === 'Binance Web3'" disabled variant="primary" class="w-full">
@@ -68,7 +71,7 @@ const { isCorrectNetworkSet, switchingNetworkInProgress, switchingNetworkError }
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
 const buttonStep = computed(() => {
-  if (!account.value.address || isConnectingWallet.value) {
+  if (!account.value.address) {
     return "connect";
   } else if (!isCorrectNetworkSet.value) {
     return "network";

diff --git a/components/transaction/TransferWithdrawalLineItem.vue b/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,
       };
     }
   }

diff --git a/components/transaction/WithdrawalsAvailableForClaimAlert.vue b/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>
diff --git a/composables/transaction/useMergeToken.ts b/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
   };
 };
diff --git a/composables/zksync/useTransaction.ts b/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;

diff --git a/composables/zksync/useWithdrawalFinalization.ts b/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([

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <LoadersConnecting />
+  <!-- <LoadersConnecting /> -->
   <ModalConnectingWalletError />
   <!-- <ModalNetworkChangedWarning v-if="!isConnectingWallet" /> -->
   <ModalLegalNotice />
@@ -15,7 +15,14 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+// import { onBeforeMount } from "vue";
+// onBeforeMount(() => {
+//   if (window.innerWidth < 500) {
+//     window.eruda.init();
+//   }
+// });
+</script>
 
 <style lang="scss" scoped>
 .app-layout {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -45,6 +45,9 @@ export default defineNuxtConfig({
           src: "https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
           defer: true,
         },
+        // {
+        //   src: '//cdn.jsdelivr.net/npm/eruda'
+        // }
       ],
     },
   },

diff --git a/pages/transfers.vue b/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())
   );

diff --git a/store/onboard.ts b/store/onboard.ts
@@ -146,7 +146,7 @@ export const useOnboardStore = defineStore("onboard", () => {
     wagmiConnector.value = connector;
     connectorName.value = connector?.name;
     let name = "";
-    if (connections?.[0]?.connector.getProvider) {
+    if (connections?.[0]?.connector?.getProvider && typeof connections?.[0]?.connector?.getProvider === "function") {
       const provider: unknown = await connections?.[0]?.connector.getProvider();
       name = provider?.session?.peer?.metadata?.name;
     } else {
@@ -315,7 +315,13 @@ export const useOnboardStore = defineStore("onboard", () => {
     isConnected: computed(() => !!account.value.address),
     network: computed(() => network.value),
     isConnectingWallet: computed(() => {
-      console.log("account.value", account.value.isConnecting, account.value.isReconnecting);
+      console.log(
+        "account.value",
+        account.value.address,
+        account.value.open,
+        account.value.isConnecting,
+        account.value.isReconnecting
+      );
       return account.value.isReconnecting || account.value.isConnecting;
     }),
     connectingWalletError,

diff --git a/store/zksync/transactionStatus.ts b/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;