Merge pull request #112 from zkLinkProtocol/feat/merge_main_dev

Feat/merge main dev

components/header/Banner.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="banner max-w-[100vw] md:max-w-[700px]">
+    <swiper
+      :spaceBetween="30"
+      :centeredSlides="true"
+      :autoplay="{
+        delay: 2500,
+        disableOnInteraction: false,
+      }"
+      :pagination="{
+        clickable: true,
+      }"
+      :navigation="true"
+      :modules="modules"
+      class="mySwiper"
+    >
+      <swiper-slide>
+        <!-- <div>
+          <img src="/img/banner.svg" class="m-auto hidden md:block" />
+          <img src="/img/mobile.svg" class="m-auto block md:hidden" />
+        </div> -->
+
+        <a href="https://app.zklink.io/" target="\_blank">
+          <img src="/img/banner.svg" className="bannerImg" />
+          <img src="/img/mobile.svg" className="mobileImg" />
+        </a>
+      </swiper-slide>
+      <swiper-slide>
+        <a href="https://zklink.io/merge" target="\_blank">
+          <img src="/img/portal-banner.png" className="bannerImg" />
+          <img src="/img/portal-banner-mobile.png" className="mobileImg" />
+        </a>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+<script>
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+// Import Swiper styles
+import "swiper/css";
+
+// import "swiper/css/pagination";
+// import "swiper/css/navigation";
+
+// import required modules
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    return {
+      modules: [Autoplay, Pagination, Navigation],
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/* @import "swiper/css"; */
+.banner {
+  margin: 0 auto;
+  overflow: auto;
+  width: 100%;
+  text-align: center;
+  a {
+    display: block;
+    width: 100%;
+    min-width: 0px;
+    max-width: 700px;
+  }
+  .bannerImg {
+    display: block;
+    width: 100%;
+    height: 80px;
+  }
+  .mobileImg {
+    display: none;
+  }
+  @media screen and (max-width: 640px) {
+    .bannerImg {
+      display: none;
+    }
+    .mobileImg {
+      display: none;
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+}
+</style>

components/header/Header.vue

@@ -75,7 +75,10 @@
         <CommonButton class="hamburger-icon" @click="mobileMainNavigationOpened = true">
           <Bars3Icon class="h-6 w-6" aria-hidden="true" />
           <transition v-bind="TransitionOpacity()">
-            <CommonBadge v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length" class="action-available-badge">
+            <CommonBadge
+              v-if="withdrawalsAvailableForClaiming && withdrawalsAvailableForClaiming.length"
+              class="action-available-badge"
+            >
               {{ withdrawalsAvailableForClaiming.length }}
             </CommonBadge>
           </transition>
@@ -102,19 +105,8 @@
       </span>
       <div>Note: Withdrawals will be enabled before 04/13/2024</div>
     </div> -->
-    <div className="banner" v-if="!route.query.s || route.query.s !== 'okx'">
-      <a href="https://app.zklink.io/" target="\_blank">
-        <img
-          src="/img/banner.svg"
-          alt=""
-          className="bannerImg"
-        />
-        <img
-          src="/img/mobile.svg"
-          alt=""
-          className="mobileImg"
-        />
-      </a>
+    <div className="banner" v-if="route.query.s !== 'okx' && route.query.s !== 'binance'">
+      <banner />
     </div>
   </div>
 </template>
@@ -138,6 +130,7 @@ import { useRoute } from "#imports";
 import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
 import useNetworks from "@/composables/useNetworks";
+import Banner from "./Banner.vue";
 const { defaultNetwork, isMainnet } = useNetworks();
 
 const route = useRoute();
@@ -217,28 +210,28 @@ const isShowFaucet = computed(() => defaultNetwork.id === 810182);
     height: 18px;
   }
 }
-.banner{
+.banner {
   width: 100%;
   text-align: center;
-  a{
+  a {
     display: inline-block;
     width: 100%;
     min-width: 0px;
     max-width: 700px;
   }
-  .bannerImg{
+  .bannerImg {
     display: inline-block;
     width: 100%;
     height: 80px;
   }
-  .mobileImg{
+  .mobileImg {
     display: none;
   }
   @media screen and (max-width: 640px) {
-    .bannerImg{
+    .bannerImg {
       display: none;
     }
-    .mobileImg{
+    .mobileImg {
       display: none;
       display: inline-block;
       width: 100%;

components/transaction/TransactionFooter.vue

@@ -19,7 +19,10 @@
     <div v-if="buttonStep === 'network'" class="transaction-footer-row">
       <CommonButtonTopInfo>Incorrect network selected in your wallet</CommonButtonTopInfo>
       <CommonButton
-        v-if="connectorName !== 'WalletConnect'"
+        v-if="
+          connectorName !== 'WalletConnect' ||
+          (connectorName === 'WalletConnect' && (walletName?.includes('OKX') || walletName?.includes('MetaMask')))
+        "
         type="submit"
         :disabled="switchingNetworkInProgress"
         variant="primary"

data/networks.ts

@@ -54,6 +54,12 @@ export const mantaSepolia = /*#__PURE__*/ defineChain({
       blockCreated: 468626,
     },
   },
+  contracts: {
+    multicall3: {
+      address: "0xcA11bde05977b3631167028862bE2a173976CA11",
+      blockCreated: 212929,
+    },
+  },
 });
 
 export const l1Networks = {

package.json

@@ -89,6 +89,7 @@
     "ofetch": "^1.3.3",
     "pinia": "^2.0.33",
     "sass": "^1.57.1",
+    "swiper": "^11.1.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.5",
     "viem": "^2.9.16",

store/onboard.ts

@@ -27,7 +27,7 @@ import { useNetworkStore } from "@/store/network";
 
 export const useOnboardStore = defineStore("onboard", () => {
   const { zkSyncNetworks } = useNetworks();
-
+  const runtimeConfig = useRuntimeConfig();
   const createZkLinkNova = (network: ZkSyncNetwork) => {
     return {
       id: network.id,
@@ -41,6 +41,14 @@ export const useOnboardStore = defineStore("onboard", () => {
       blockExplorers: {
         default: { name: "zkLink Nova Explorer", url: "https://explorer.zklink.io" },
       },
+      contracts: {
+        multicall3: {
+          address:
+            runtimeConfig.public.nodeType === "nexus-goerli"
+              ? "0x6F02406FC2495171dC03c7b6D80c2f327320C3f6"
+              : "0x825267E0fA5CAe92F98540828a54198dcB3Eaeb5",
+        },
+      },
     };
   };
   const getAllChains = () => {

store/zksync/transactionStatus.ts

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

store/zksync/wallet.ts

@@ -1,3 +1,4 @@
+import { MERGE_TOKENS } from "./../../utils/constants";
 import { getPublicClient } from "@wagmi/core";
 import { BigNumber, ethers, VoidSigner } from "ethers";
 import { $fetch } from "ofetch";
@@ -13,6 +14,7 @@ import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { useZkSyncTokensStore } from "@/store/zksync/tokens";
 import { L1Signer, L1VoidSigner, Web3Provider } from "@/zksync-web3-nova/src";
+
 export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
   const onboardStore = useOnboardStore();
   const providerStore = useZkSyncProviderStore();
@@ -91,7 +93,7 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
     await Promise.all([requestAccountState({ force: true }), tokensStore.requestTokens()]);
     if (!accountState.value) throw new Error("Account state is not available");
     if (!tokens.value) throw new Error("Tokens are not available");
-    return Object.entries(accountState.value.balances)
+    const accountBalances = Object.entries(accountState.value.balances)
       .filter(([, { token }]) => token)
       .map(([, { balance, token }]) => {
         return {
@@ -103,6 +105,21 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
           amount: balance,
         };
       });
+    //add merge tokens
+    for (const token of MERGE_TOKENS) {
+      const find = accountBalances.find((item) => item.address.toLowerCase() === token.address.toLowerCase());
+      if (!find) {
+        accountBalances.push({
+          address: token.address,
+          l1Address: undefined,
+          name: token!.symbol || undefined,
+          symbol: token!.symbol!,
+          decimals: token!.decimals,
+          amount: "0",
+        });
+      }
+    }
+    return accountBalances;
   };
   const getBalancesFromRPC = async (): Promise<TokenAmount[]> => {
     await tokensStore.requestTokens();
@@ -158,7 +175,8 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
 
   const deductBalance = (tokenAddress: string, amount: BigNumberish) => {
     if (!balance.value) return;
-    const tokenBalance = balance.value.find((balance) => balance.address === tokenAddress);
+    const index = balance.value.findIndex((balance) => balance.address === tokenAddress);
+    const tokenBalance = balance.value[index];
     if (!tokenBalance) return;
     const newBalance = BigNumber.from(tokenBalance.amount).sub(amount);
     tokenBalance.amount = newBalance.isNegative() ? "0" : newBalance.toString();

utils/constants.ts

@@ -10,4 +10,35 @@ export const ETH_TOKEN: Token = {
   iconUrl: "/img/eth.svg",
 };
 
-export const WITHDRAWAL_DELAY_DAYS = 12
+export const WITHDRAWAL_DELAY_DAYS = 14;
+
+export const MERGE_TOKENS = [
+  {
+    symbol: "USDT",
+    address: "0x2F8A25ac62179B31D62D7F80884AE57464699059",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism"],
+    decimals: 6,
+  },
+  {
+    symbol: "WBTC",
+    address: "0xDa4AaEd3A53962c83B35697Cd138cc6df43aF71f",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism"],
+    decimals: 18,
+  },
+  {
+    symbol: "USDC",
+    address: "0x1a1A3b2ff016332e866787B311fcB63928464509",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "manta", "mantle", "optimism", "base"],
+    decimals: 6,
+  },
+  {
+    symbol: "DAI",
+    address: "0xF573fA04A73d5AC442F3DEa8741317fEaA3cDeab",
+    targetNetworkKeys: ["ethereum", "arbitrum", "zksync", "linea", "optimism", "base"],
+    decimals: 18,
+  },
+];
+
+export const isMergeToken = (address: string) => {
+  return address && MERGE_TOKENS.some((token) => token.address.toLowerCase() === address.toLowerCase());
+};