Merge pull request #165 from zkLinkProtocol/feat/withdraw_estimate_time

Feat/withdraw estimate time

components/network/NetworkSelectModal.vue

@@ -25,7 +25,7 @@
               variant="light"
               size="sm"
               @click="
-                buttonClicked(zkSyncNetwork[groupIndex]);
+                buttonClicked(zkSyncNetwork.find(item => item.key === group.key)!);
                 selectedNetworkKey = group.key!;
               "
             />

data/wallets.ts

@@ -3,7 +3,8 @@ type WalletEntry = { walletName: string; type: "injected" | "metaMask" | "wallet
 export const confirmedSupportedWallets: WalletEntry[] = [
   { walletName: "MetaMask", type: "metaMask" },
 
-  { walletName: "OKX", type: "injected" },
+  { walletName: "Injected", type: "injected" },
+  { walletName: "OKX", type: "injected" },  
   { walletName: "GateWallet", type: "injected" },
   { walletName: "MetaMask", type: "injected" },
   { walletName: "BitKeep", type: "injected" },

store/network.ts

@@ -45,7 +45,12 @@ export const useNetworkStore = defineStore("network", () => {
   const identifyNetworkByQueryParam = () => {
     const windowLocation = window.location;
     const networkFromQueryParam = new URLSearchParams(windowLocation.search).get("network");
-    if (networkFromQueryParam && zkSyncNetworks.some((e) => e.key === networkFromQueryParam)) {
+    if (windowLocation.pathname === "/" && networkFromQueryParam === "blast") {
+      // hide blast for deposit
+      const url = new URL(windowLocation.href);
+      url.searchParams.set("network", zkSyncNetworks[0].key);
+      window.location.replace(url.toString());
+    } else if (networkFromQueryParam && zkSyncNetworks.some((e) => e.key === networkFromQueryParam)) {
       selectedNetworkKey.value = networkFromQueryParam;
       resetNetworkChangeWarning();
     }

store/onboard.ts

@@ -1,5 +1,6 @@
 import { injected, safe, walletConnect } from "@wagmi/connectors";
 import {
+  createConfig,
   getAccount,
   getConnections,
   getConnectors,
@@ -26,7 +27,7 @@ import { confirmedSupportedWallets, disabledWallets } from "@/data/wallets";
 import { useNetworkStore } from "@/store/network";
 
 const isMobile = () => window.innerWidth < 800; // simple way to detect mobile device
-
+const isBinanceWeb3App = () => window.ethereum?.isBinance;
 export const useOnboardStore = defineStore("onboard", () => {
   const { zkSyncNetworks } = useNetworks();
   const runtimeConfig = useRuntimeConfig();
@@ -83,12 +84,23 @@ export const useOnboardStore = defineStore("onboard", () => {
   };
   console.log("extendedChains", extendedChains);
   console.log("selectedNetwork", selectedNetwork.value);
-  const wagmiConfig = defaultWagmiConfig({
+  const wagmiConfig = createConfig({
     chains: extendedChains,
     projectId: env.walletConnectProjectID,
     metadata,
     connectors: [
-      injected(),
+      isBinanceWeb3App()
+        ? injected({
+            target() {
+              return {
+                id: "Binance Web3 Wallet",
+                name: "Binance Web3 Wallet",
+                provider: window.ethereum,
+                icon: "/img-binance-web3-wallet.png",
+              };
+            },
+          })
+        : injected(),
       safe({
         allowedDomains: [/app.safe.global$/],
         debug: true,
@@ -169,7 +181,7 @@ export const useOnboardStore = defineStore("onboard", () => {
 
   const BinanceWalletId = "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4";
   const excludeWalletIds = ["bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6"];
-  if (isMobile()) {
+  if (isMobile() && isBinanceWeb3App()) {
     excludeWalletIds.push(BinanceWalletId);
   }
   const featuredWalletIds = [
@@ -181,18 +193,13 @@ export const useOnboardStore = defineStore("onboard", () => {
     // "aba1f652e61fd536e8a7a5cd5e0319c9047c435ef8f7e907717361ff33bb3588",
     // "38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662",//bitget
   ];
-  if (!isMobile()) {
+  if (!isBinanceWeb3App()) {
     featuredWalletIds.unshift(BinanceWalletId);
   }
 
   const web3modal = createWeb3Modal({
     wagmiConfig,
     projectId: env.walletConnectProjectID,
-    connectorImages: isMobile()
-      ? {
-          injected: "/img-browser-wallet.png",
-        }
-      : undefined,
     excludeWalletIds,
     featuredWalletIds,
     // termsConditionsUrl: "https://zksync.io/terms",

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/Deposit.vue

@@ -430,7 +430,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import { Switch } from "@headlessui/vue";
 import {
@@ -449,6 +449,7 @@ import EthereumTransactionFooter from "@/components/transaction/EthereumTransact
 import useAllowance from "@/composables/transaction/useAllowance";
 import useMergeToken from "@/composables/transaction/useMergeToken";
 import useInterval from "@/composables/useInterval";
+import useNetworks from "@/composables/useNetworks";
 import useEcosystemBanner from "@/composables/zksync/deposit/useEcosystemBanner";
 import useFee from "@/composables/zksync/deposit/useFee";
 import useMntAndWeth from "@/composables/zksync/deposit/useMntAndWeth";
@@ -482,6 +483,7 @@ import { ETH_ADDRESS, WMNT_CONTRACT } from "@/zksync-web3-nova/src/utils";
 
 // const okxIcon = "/img/okx-cryptopedia.svg";
 const launchIcon = "/img/launch.svg";
+const { zkSyncNetworks } = useNetworks();
 
 const route = useRoute();
 const router = useRouter();
@@ -494,7 +496,7 @@ const eraWalletStore = useZkSyncWalletStore();
 const { account, isConnected } = storeToRefs(onboardStore);
 const { eraNetwork } = storeToRefs(providerStore);
 const { destinations } = storeToRefs(useDestinationsStore());
-const { l1BlockExplorerUrl, selectedNetwork } = storeToRefs(useNetworkStore());
+const { l1BlockExplorerUrl, selectedNetwork, selectedNetworkKey } = storeToRefs(useNetworkStore());
 const { l1Tokens, tokensRequestInProgress, tokensRequestError } = storeToRefs(tokensStore);
 const { balance, balanceInProgress, balanceError } = storeToRefs(zkSyncEthereumBalance);
 
@@ -957,6 +959,12 @@ onboardStore.subscribeOnNetworkChange((newchainId) => {
   if (!newchainId) return;
   resetFeeImmediately();
 });
+
+onMounted(() => {
+  if (selectedNetworkKey.value === "blast") {
+    selectedNetworkKey.value = zkSyncNetworks[0].key;
+  }
+})
 </script>
 
 <style lang="scss" scoped>

views/transactions/Withdraw.vue

@@ -23,7 +23,10 @@
     </PageTitle>
 
     <div class="warnBox flex" v-if="!route.query.s || route.query.s !== 'okx'">
-      <div>Note: All LRT points will continue to be calculated after you request a withdrawal. They will appear in the next few days in dashboard due to the data synchronization process.</div>
+      <div>
+        Note: All LRT points will continue to be calculated after you request a withdrawal. They will appear in the next
+        few days in dashboard due to the data synchronization process.
+      </div>
     </div>
 
     <div v-if="showBridge">
@@ -181,11 +184,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>
@@ -227,7 +231,7 @@
             class="mt-2"
             @try-again="isMergeTokenSelected ? estiamteForMergeToken : estimate"
           >
-           Fee estimation error: {{ feeError.message }}
+            Fee estimation error: {{ feeError.message }}
           </CommonErrorBlock>
           <div class="mt-4 flex items-center gap-4">
             <transition v-bind="TransitionOpacity()">
@@ -292,7 +296,7 @@
 
           <CommonHeightTransition
             v-if="isMergeTokenSelected && step === 'form'"
-            :opened="( !enoughAllowance && !continueButtonDisabled) || !!setAllowanceReceipt"
+            :opened="(!enoughAllowance && !continueButtonDisabled) || !!setAllowanceReceipt"
           >
             <CommonCardWithLineButtons class="mt-4">
               <DestinationItem
@@ -429,7 +433,7 @@
         </template>
       </form>
     </div>
-    <div class="flex flex-col gap-block-gap" v-else>
+    <div class="mt-6 flex flex-col gap-block-gap">
       <CommonCardWithLineButtons v-for="(item, index) in thirdChainMethods" :key="index" class="relative">
         <DestinationItem v-bind="item.props">
           <template #image v-if="item.icon">
@@ -484,31 +488,40 @@ 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";
 import WithdrawalSubmitted from "@/views/transactions/WithdrawalSubmitted.vue";
 import { ETH_ADDRESS } from "~/zksync-web3-nova/src/utils";
 const showBridge = true;
 const chainList = [
-  // {
-  //   "name": "Symbiosis",
-  //   "description": "https://symbiosis.finance/",
-  //   "logo": "Symbiosys.svg",
-  //   "bannerImg": "Symbiosys.jpg",
-  //   "type": "Defi",
-  //   "url": "https://symbiosis.finance/",
-  //   "tiwwerUrl": "https://twitter.com/symbiosis_fi",
-  //   "discordUrl": "https://discord.com/invite/YHgDSJ42eG"
-  // },
+  {
+    name: "Meson Finance",
+    description: "https://meson.fi/",
+    logo: "Meson.svg",
+    bannerImg: "Meson.jpg",
+    type: "Infra",
+    url: "https://meson.fi/",
+    tiwwerUrl: "https://twitter.com/mesonfi",
+    discordUrl: "https://discord.com/invite/meson",
+  },
+  {
+    name: "Symbiosis",
+    description: "https://symbiosis.finance/",
+    logo: "Symbiosys.svg",
+    bannerImg: "Symbiosys.jpg",
+    type: "Defi",
+    url: "https://symbiosis.finance/",
+    tiwwerUrl: "https://twitter.com/symbiosis_fi",
+    discordUrl: "https://discord.com/invite/YHgDSJ42eG",
+  },
   {
     name: "Owlto Finance",
     description: "https://owlto.finance/",
@@ -576,6 +589,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") {
@@ -1048,7 +1063,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,
       },