feat: add gateway

Author: itsacoyote

components/transaction/NativeBridge.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <CommonAlert variant="warning" size="sm" :icon="ExclamationTriangleIcon" class="mb-block-gap">
+      <p>
+        Only {{ eraNetwork.nativeCurrency!.symbol }} is allowed for bridging {{ type === "withdraw" ? "from" : "to" }}
+        {{ eraNetwork.name }}.
+      </p>
+    </CommonAlert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+
+import type { ZkSyncNetwork } from "@/data/networks"; // Adjust the import path as needed
+
+defineProps<{
+  eraNetwork: ZkSyncNetwork;
+  type: "withdraw" | "deposit";
+}>();
+</script>

composables/zksync/useFee.ts

@@ -33,7 +33,7 @@ export default (
     }
     const feeTokenBalance = balances.value.find((e) => e.address === feeToken.value!.address);
     if (!feeTokenBalance) return true;
-    if (totalFee.value && BigInt(totalFee.value) > feeTokenBalance.amount) {
+    if (totalFee.value && BigInt(totalFee.value) > BigInt(feeTokenBalance.amount)) {
       return false;
     }
     return true;

composables/zksync/useWithdrawalFinalization.ts

@@ -35,7 +35,7 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     return calculateFee(gasLimit.value, gasPrice.value).toString();
   });
   const feeToken = computed(() => {
-    return ethToken;
+    return ethToken.value;
   });
 
   const getFinalizationParams = async () => {

data/networks.ts

@@ -52,6 +52,8 @@ export type ZkSyncNetwork = {
     onramp?: boolean;
     showPartnerLinks?: boolean;
   };
+  nativeCurrency?: { name: string; symbol: string; decimals: number; iconUrl: string; l1Address: string };
+  nativeBridgingOnly?: boolean;
   getTokens?: () => Token[] | Promise<Token[]>; // If blockExplorerApi is specified, tokens will be fetched from there. Otherwise, this function will be used.
 };
 
@@ -105,6 +107,7 @@ const publicChains: ZkSyncNetwork[] = [
     blockExplorerUrl: "https://sepolia-era.zksync.network",
     blockExplorerApi: "https://block-explorer-api.sepolia.zksync.dev",
     displaySettings: {
+      onramp: false,
       showPartnerLinks: true,
     },
     l1Network: l1Networks.sepolia,
@@ -119,6 +122,74 @@ const publicChains: ZkSyncNetwork[] = [
     l1Network: l1Networks.sepolia,
     hidden: true,
   },
+  {
+    id: 9075,
+    key: "gateway",
+    name: "ZKsync Gateway Mainnet",
+    rpcUrl: "https://rpc.era-gateway-mainnet.zksync.dev",
+    blockExplorerUrl: "https://explorer.era-gateway-mainnet.zksync.dev",
+    blockExplorerApi: "https://block-explorer-api.era-gateway-mainnet.zksync.dev",
+    l1Network: l1Networks.mainnet,
+    displaySettings: {
+      onramp: false,
+      showPartnerLinks: false,
+    },
+    nativeCurrency: {
+      name: "ZKsync",
+      symbol: "ZK",
+      decimals: 18,
+      iconUrl: "img/era.svg",
+      l1Address: "0x66A5cFB2e9c529f14FE6364Ad1075dF3a649C0A5",
+    },
+    nativeBridgingOnly: true,
+    getTokens: () => {
+      return [
+        {
+          address: L2_BASE_TOKEN_ADDRESS,
+          l1Address: "0x2569600E58850a0AaD61F7Dd2569516C3d909521",
+          name: "ZKsync",
+          symbol: "ZK",
+          decimals: 18,
+          iconUrl: "/img/era.svg",
+          isETH: false,
+        },
+      ];
+    },
+  },
+  {
+    id: 32657,
+    key: "gateway-testnet",
+    name: "ZKsync Gateway Testnet",
+    rpcUrl: "https://rpc.era-gateway-testnet.zksync.dev",
+    blockExplorerUrl: "https://explorer.era-gateway-testnet.zksync.dev",
+    blockExplorerApi: "https://block-explorer.era-gateway-testnet.zksync.dev",
+    l1Network: l1Networks.sepolia,
+    displaySettings: {
+      onramp: false,
+      showPartnerLinks: false,
+    },
+    nativeCurrency: {
+      name: "ZKsync",
+      symbol: "ZK",
+      decimals: 18,
+      iconUrl: "img/era.svg",
+      l1Address: "0x2569600E58850a0AaD61F7Dd2569516C3d909521",
+    },
+    nativeBridgingOnly: true,
+    getTokens: () => {
+      return [
+        {
+          address: L2_BASE_TOKEN_ADDRESS,
+          l1Address: "0x2569600E58850a0AaD61F7Dd2569516C3d909521",
+          name: "ZKsync",
+          symbol: "ZK",
+          decimals: 18,
+          iconUrl: "/img/era.svg",
+          isETH: false,
+        },
+      ];
+    },
+  },
 ];
 
 const getHyperchains = (): ZkSyncNetwork[] => {

data/wagmi.ts

@@ -26,7 +26,7 @@ const formatZkSyncChain = (network: ZkSyncNetwork) => {
     id: network.id,
     name: network.name,
     network: network.key,
-    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+    nativeCurrency: network.nativeCurrency ?? { name: "Ether", symbol: "ETH", decimals: 18 },
     rpcUrls: {
       default: { http: [network.rpcUrl] },
       public: { http: [network.rpcUrl] },

package-lock.json

@@ -91,7 +91,7 @@
     "vue-tippy": "^6.0.0",
     "web3-avatar-vue": "^1.0.0",
     "zksync-easy-onramp": "3.2.1",
-    "zksync-ethers": "^6.17.0"
+    "zksync-ethers": "^6.18.0"
   },
   "overrides": {
     "vue": "latest"

package.json

@@ -47,12 +47,12 @@ export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
 
     if (!baseToken) {
       baseToken = {
-        address: "0x000000000000000000000000000000000000800A",
+        address: L2_BASE_TOKEN_ADDRESS,
         l1Address: await provider.getBaseTokenContractAddress(),
-        symbol: "BASETOKEN",
-        name: "Base Token",
-        decimals: 18,
-        iconUrl: "/img/eth.svg",
+        symbol: eraNetwork.value.nativeCurrency!.symbol ?? "BASETOKEN",
+        name: eraNetwork.value.nativeCurrency!.name ?? "Base Token",
+        decimals: eraNetwork.value.nativeCurrency!.decimals ?? 18,
+        iconUrl: eraNetwork.value.nativeCurrency!.iconUrl ?? "/img/eth.svg",
       };
     }
     if (!ethToken) {
@@ -72,7 +72,7 @@ export const useZkSyncTokensStore = defineStore("zkSyncTokens", () => {
     );
     return [
       baseToken,
-      ...(baseToken.address.toUpperCase() !== ethToken.address.toUpperCase() ? [ethToken] : []),
+      ...(ethToken && baseToken.address.toUpperCase() !== ethToken.address.toUpperCase() ? [ethToken] : []),
       ...nonBaseOrEthExplorerTokens,
     ].map((token) => ({
       ...token,

store/zksync/tokens.ts

@@ -111,6 +111,12 @@
           class="mt-6"
           :custom-bridge-token="tokenCustomBridge"
         />
+        <TransactionNativeBridge
+          v-if="nativeTokenBridgingOnly"
+          :era-network="eraNetwork"
+          type="deposit"
+          class="mt-6"
+        ></TransactionNativeBridge>
       </template>
       <template v-else-if="step === 'wallet-warning'">
         <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-padding-1/2 sm:mb-block-gap">
@@ -158,7 +164,11 @@
       </template>
 
       <template
-        v-if="(!tokenCustomBridge || !tokenCustomBridge?.bridgingDisabled) && (step === 'form' || step === 'confirm')"
+        v-if="
+          !nativeTokenBridgingOnly &&
+          (!tokenCustomBridge || !tokenCustomBridge?.bridgingDisabled) &&
+          (step === 'form' || step === 'confirm')
+        "
       >
         <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
           Fee estimation error: {{ feeError.message }}
@@ -290,7 +300,7 @@
         <EthereumTransactionFooter>
           <template #after-checks>
             <template v-if="step === 'form'">
-              <template v-if="!enoughAllowance && !continueButtonDisabled">
+              <template v-if="!enoughAllowance && !continueButtonDisabled && !nativeTokenBridgingOnly">
                 <CommonButton
                   type="submit"
                   :disabled="continueButtonDisabled || setAllowanceInProgress"
@@ -645,6 +655,18 @@ watch(
   { immediate: true }
 );
 
+const nativeTokenBridgingOnly = computed(() => {
+  if (
+    eraNetwork.value.nativeBridgingOnly &&
+    eraNetwork.value.nativeCurrency &&
+    selectedToken.value &&
+    selectedToken.value.symbol !== eraNetwork.value.nativeCurrency.symbol
+  ) {
+    return true;
+  }
+  return false;
+});
+
 const continueButtonDisabled = computed(() => {
   if (
     !transaction.value ||

views/transactions/Deposit.vue

@@ -106,6 +106,12 @@
           class="mt-6"
           :custom-bridge-token="tokenCustomBridge"
         />
+        <TransactionNativeBridge
+          v-if="nativeTokenBridgingOnly"
+          :era-network="eraNetwork"
+          type="withdraw"
+          class="mt-6"
+        ></TransactionNativeBridge>
       </template>
       <template v-else-if="step === 'withdrawal-finalization-warning'">
         <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-padding-1/2 sm:mb-block-gap">
@@ -190,7 +196,7 @@
         />
       </template>
 
-      <template v-if="!tokenCustomBridge && (step === 'form' || step === 'confirm')">
+      <template v-if="!nativeTokenBridgingOnly && !tokenCustomBridge && (step === 'form' || step === 'confirm')">
         <CommonErrorBlock v-if="feeError" class="mt-2" @try-again="estimate">
           Fee estimation error: {{ feeError.message }}
         </CommonErrorBlock>
@@ -553,6 +559,18 @@ watch(
   { immediate: true }
 );
 
+const nativeTokenBridgingOnly = computed(() => {
+  if (
+    eraNetwork.value.nativeBridgingOnly &&
+    eraNetwork.value.nativeCurrency &&
+    selectedToken.value &&
+    selectedToken.value.symbol !== eraNetwork.value.nativeCurrency.symbol
+  ) {
+    return true;
+  }
+  return false;
+});
+
 const continueButtonDisabled = computed(() => {
   if (
     !isAddressInputValid.value ||