From 18ceebf843bafe052fe450682469ddd76eb5fd0d Mon Sep 17 00:00:00 2001
From: "Ramon \"9Tails\" Canales" <emaildoramon@gmail.com>
Date: Thu, 23 May 2024 15:31:58 +0100
Subject: [PATCH 01/10] feat: updating zksync-ethers

---
 composables/zksync/useWithdrawalFinalization.ts | 11 ++---------
 package-lock.json                               | 11 +++++++----
 package.json                                    |  2 +-
 store/zksync/transactionStatus.ts               | 14 ++------------
 4 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/composables/zksync/useWithdrawalFinalization.ts b/composables/zksync/useWithdrawalFinalization.ts
index 3d91bf7b1..e23b06958 100644
--- a/composables/zksync/useWithdrawalFinalization.ts
+++ b/composables/zksync/useWithdrawalFinalization.ts
@@ -2,7 +2,7 @@ import { useMemoize } from "@vueuse/core";
 import { BigNumber, type BigNumberish } from "ethers";
 import { Wallet } from "zksync-ethers";
 import ZkSyncL1BridgeAbi from "zksync-ethers/abi/IL1Bridge.json";
-import ZkSyncContractAbi from "zksync-ethers/abi/IZkSync.json";
+import ZkSyncContractAbi from "zksync-ethers/abi/IZkSyncStateTransition.json";
 
 import type { Hash } from "@/types";
 
@@ -22,7 +22,6 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
       .getDefaultBridgeAddresses()
       .then((e) => e.erc20L1)
   );
-  const retrieveMainContractAddress = useMemoize(() => providerStore.requestProvider().getMainContractAddress());
 
   const gasLimit = ref<BigNumberish | undefined>();
   const gasPrice = ref<BigNumberish | undefined>();
@@ -70,7 +69,7 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     finalizeWithdrawalParams.value = await getFinalizationParams();
     if (usingMainContract.value) {
       return {
-        address: (await retrieveMainContractAddress()) as Hash,
+        address: (await retrieveBridgeAddress()) as Hash,
         abi: ZkSyncContractAbi,
         account: onboardStore.account.address!,
         functionName: "finalizeEthWithdrawal",
@@ -147,12 +146,6 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
         },
       });
 
-      trackEvent("withdrawal-finalized", {
-        token: transactionInfo.value!.token.symbol,
-        amount: transactionInfo.value!.token.amount,
-        to: transactionInfo.value!.to.address,
-      });
-
       status.value = "done";
       return receipt;
     } catch (err) {
diff --git a/package-lock.json b/package-lock.json
index c4d5608cf..937e03812 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "vite": "^3.0.0",
         "vue-tippy": "^6.0.0",
         "web3-avatar-vue": "^1.0.0",
-        "zksync-ethers": "^5.5.0"
+        "zksync-ethers": "^5.8.0-beta.5"
       },
       "devDependencies": {
         "@commitlint/cli": "^17.4.2",
@@ -34517,12 +34517,15 @@
       }
     },
     "node_modules/zksync-ethers": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/zksync-ethers/-/zksync-ethers-5.5.0.tgz",
-      "integrity": "sha512-sH77qSRSa1iEzy9abK2d5yaKA30QIpztbLUtjRJ34kWujdlVre8Sd0uUzLu+zW56AksU3AHGDl/iMtr/eHhDwg==",
+      "version": "5.8.0-beta.5",
+      "resolved": "https://registry.npmjs.org/zksync-ethers/-/zksync-ethers-5.8.0-beta.5.tgz",
+      "integrity": "sha512-saT/3OwLgifqzrBG7OujvUMapzXnshAaLzAZMycUtdV20eLSSVkyLIARVwh1M6hMQIUvX2htV0JN82QRMyM3Ig==",
       "dependencies": {
         "ethers": "~5.7.0"
       },
+      "engines": {
+        "node": ">=16.0.0"
+      },
       "peerDependencies": {
         "ethers": "~5.7.0"
       }
diff --git a/package.json b/package.json
index bdad0dda3..295e1fb54 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "vite": "^3.0.0",
     "vue-tippy": "^6.0.0",
     "web3-avatar-vue": "^1.0.0",
-    "zksync-ethers": "^5.5.0"
+    "zksync-ethers": "^5.8.0-beta.5"
   },
   "overrides": {
     "vue": "latest"
diff --git a/store/zksync/transactionStatus.ts b/store/zksync/transactionStatus.ts
index bb760b149..bb6d4c384 100644
--- a/store/zksync/transactionStatus.ts
+++ b/store/zksync/transactionStatus.ts
@@ -1,6 +1,6 @@
 import { useStorage } from "@vueuse/core";
 import { decodeEventLog } from "viem";
-import ZkSyncContractInterface from "zksync-ethers/abi/IZkSync.json";
+import ZkSyncContractInterface from "zksync-ethers/abi/IZkSyncStateTransition.json";
 
 import type { FeeEstimationParams } from "@/composables/zksync/useFee";
 import type { TokenAmount, Hash } from "@/types";
@@ -30,14 +30,6 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
   const { account } = storeToRefs(onboardStore);
   const { eraNetwork } = storeToRefs(providerStore);
 
-  const failedTransaction = useStorage<TransactionInfo[]>("zksync-bridge-failed-transaction", []);
-  const addFailedTransaction = (transaction: TransactionInfo) => {
-    if (failedTransaction.value.some((tx) => tx.transactionHash === transaction.transactionHash)) {
-      return;
-    }
-    failedTransaction.value = [...failedTransaction.value, transaction];
-  };
-
   const storageSavedTransactions = useStorage<{ [networkKey: string]: TransactionInfo[] }>(
     "zksync-bridge-transactions",
     {}
@@ -96,7 +88,6 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
         transaction.info.withdrawalFinalizationAvailable = false;
         transaction.info.failed = true;
         transaction.info.completed = true;
-        addFailedTransaction(transaction);
         return transaction;
       }
       if (transactionDetails.status !== "verified") {
@@ -115,11 +106,10 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     const transactionReceipt = await providerStore.requestProvider().getTransactionReceipt(transaction.transactionHash);
     if (!transactionReceipt) return transaction;
     const transactionDetails = await providerStore.requestProvider().getTransactionDetails(transaction.transactionHash);
-    transaction.info.completed = true;
     if (transactionDetails.status === "failed") {
       transaction.info.failed = true;
-      addFailedTransaction(transaction);
     }
+    transaction.info.completed = true;
     return transaction;
   };
   const waitForCompletion = async (transaction: TransactionInfo) => {

From 48c740a2fccd9b9d5e0246b22eb0420173ce375b Mon Sep 17 00:00:00 2001
From: "Ramon \"9Tails\" Canales" <emaildoramon@gmail.com>
Date: Thu, 23 May 2024 15:38:11 +0100
Subject: [PATCH 02/10] feat: fixing chain convertion for wagmi

---
 data/wagmi.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/data/wagmi.ts b/data/wagmi.ts
index 8839332a8..2e36f648e 100644
--- a/data/wagmi.ts
+++ b/data/wagmi.ts
@@ -19,7 +19,7 @@ const useExistingEraChain = (network: ZkSyncNetwork) => {
   const existingNetworks = [zkSync, zkSyncSepoliaTestnet, zkSyncTestnet];
   return existingNetworks.find((existingNetwork) => existingNetwork.id === network.id);
 };
-const createEraChain = (network: ZkSyncNetwork) => {
+const createZKChain = (network: ZkSyncNetwork) => {
   return {
     id: network.id,
     name: network.name,
@@ -29,8 +29,17 @@ const createEraChain = (network: ZkSyncNetwork) => {
       default: { http: [network.rpcUrl] },
       public: { http: [network.rpcUrl] },
     },
+    blockExplorers: network.blockExplorerUrl
+      ? {
+          default: {
+            name: "Explorer",
+            url: network.blockExplorerUrl,
+          },
+        }
+      : undefined,
   };
 };
+
 const getAllChains = () => {
   const chains: Chain[] = [];
   const addUniqueChain = (chain: Chain) => {
@@ -42,7 +51,7 @@ const getAllChains = () => {
     if (network.l1Network) {
       addUniqueChain(network.l1Network);
     }
-    addUniqueChain(useExistingEraChain(network) ?? createEraChain(network));
+    addUniqueChain(useExistingEraChain(network) ?? createZKChain(network));
   }
 
   return chains;

From 28271730eda5c937913f51fd58a578d653e34cca Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Mon, 3 Jun 2024 18:21:44 +0200
Subject: [PATCH 03/10] fix: using shared bridge for ETH based chain withdrawal

---
 .../zksync/useWithdrawalFinalization.ts       | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/composables/zksync/useWithdrawalFinalization.ts b/composables/zksync/useWithdrawalFinalization.ts
index e23b06958..260ba9a40 100644
--- a/composables/zksync/useWithdrawalFinalization.ts
+++ b/composables/zksync/useWithdrawalFinalization.ts
@@ -2,7 +2,7 @@ import { useMemoize } from "@vueuse/core";
 import { BigNumber, type BigNumberish } from "ethers";
 import { Wallet } from "zksync-ethers";
 import ZkSyncL1BridgeAbi from "zksync-ethers/abi/IL1Bridge.json";
-import ZkSyncContractAbi from "zksync-ethers/abi/IZkSyncStateTransition.json";
+import IL1SharedBridge from "zksync-ethers/abi/IL1SharedBridge.json";
 
 import type { Hash } from "@/types";
 
@@ -16,11 +16,13 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   const { isCorrectNetworkSet } = storeToRefs(onboardStore);
   const { tokens } = storeToRefs(tokensStore);
 
-  const retrieveBridgeAddress = useMemoize(() =>
+  const retrieveBridgeAddresses = useMemoize(() => providerStore.requestProvider().getDefaultBridgeAddresses());
+
+  const retrieveChainId = useMemoize(() =>
     providerStore
       .requestProvider()
-      .getDefaultBridgeAddresses()
-      .then((e) => e.erc20L1)
+      .getNetwork()
+      .then((network) => network.chainId)
   );
 
   const gasLimit = ref<BigNumberish | undefined>();
@@ -57,6 +59,7 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
       transactionInfo.value.transactionHash
     );
     return {
+      chainId: await retrieveChainId(),
       l1BatchNumber,
       l2MessageIndex,
       l2TxNumberInBlock,
@@ -69,15 +72,15 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
     finalizeWithdrawalParams.value = await getFinalizationParams();
     if (usingMainContract.value) {
       return {
-        address: (await retrieveBridgeAddress()) as Hash,
-        abi: ZkSyncContractAbi,
+        address: (await retrieveBridgeAddresses()).sharedL1 as Hash,
+        abi: IL1SharedBridge,
         account: onboardStore.account.address!,
-        functionName: "finalizeEthWithdrawal",
+        functionName: "finalizeWithdrawal",
         args: Object.values(finalizeWithdrawalParams.value!),
       };
     } else {
       return {
-        address: (await retrieveBridgeAddress()) as Hash,
+        address: (await retrieveBridgeAddresses()).erc20L1 as Hash,
         abi: ZkSyncL1BridgeAbi,
         account: onboardStore.account.address!,
         functionName: "finalizeWithdrawal",
@@ -146,6 +149,12 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
         },
       });
 
+      trackEvent("withdrawal-finalized", {
+        token: transactionInfo.value!.token.symbol,
+        amount: transactionInfo.value!.token.amount,
+        to: transactionInfo.value!.to.address,
+      });
+
       status.value = "done";
       return receipt;
     } catch (err) {

From 5909553e3effebf4f2d0019ad204025b6e252a93 Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Wed, 5 Jun 2024 03:39:40 +0200
Subject: [PATCH 04/10] erc20 deposit and withdraw fix

---
 composables/zksync/deposit/useTransaction.ts    | 1 +
 composables/zksync/useTransaction.ts            | 2 +-
 composables/zksync/useWithdrawalFinalization.ts | 5 ++---
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/composables/zksync/deposit/useTransaction.ts b/composables/zksync/deposit/useTransaction.ts
index 1b8811878..7cd33a109 100644
--- a/composables/zksync/deposit/useTransaction.ts
+++ b/composables/zksync/deposit/useTransaction.ts
@@ -44,6 +44,7 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
         token: transaction.tokenAddress,
         amount: transaction.amount,
         l2GasLimit: fee.l2GasLimit,
+        approveERC20: true,
         overrides,
       });
 
diff --git a/composables/zksync/useTransaction.ts b/composables/zksync/useTransaction.ts
index 19ca672aa..d8662c93b 100644
--- a/composables/zksync/useTransaction.ts
+++ b/composables/zksync/useTransaction.ts
@@ -40,7 +40,7 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
       const getRequiredBridgeAddress = async () => {
         if (transaction.tokenAddress === ETH_TOKEN.address) return undefined;
         const bridgeAddresses = await retrieveBridgeAddresses();
-        return bridgeAddresses.erc20L2;
+        return bridgeAddresses.sharedL2;
       };
       const bridgeAddress = transaction.type === "withdrawal" ? await getRequiredBridgeAddress() : undefined;
 
diff --git a/composables/zksync/useWithdrawalFinalization.ts b/composables/zksync/useWithdrawalFinalization.ts
index 260ba9a40..a9dca2428 100644
--- a/composables/zksync/useWithdrawalFinalization.ts
+++ b/composables/zksync/useWithdrawalFinalization.ts
@@ -1,7 +1,6 @@
 import { useMemoize } from "@vueuse/core";
 import { BigNumber, type BigNumberish } from "ethers";
 import { Wallet } from "zksync-ethers";
-import ZkSyncL1BridgeAbi from "zksync-ethers/abi/IL1Bridge.json";
 import IL1SharedBridge from "zksync-ethers/abi/IL1SharedBridge.json";
 
 import type { Hash } from "@/types";
@@ -80,8 +79,8 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
       };
     } else {
       return {
-        address: (await retrieveBridgeAddresses()).erc20L1 as Hash,
-        abi: ZkSyncL1BridgeAbi,
+        address: (await retrieveBridgeAddresses()).sharedL1 as Hash,
+        abi: IL1SharedBridge,
         account: onboardStore.account.address!,
         functionName: "finalizeWithdrawal",
         args: Object.values(finalizeWithdrawalParams.value!),

From 0068f4584c999e500b203c9dbb76882eeb163a28 Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Wed, 5 Jun 2024 10:03:24 +0200
Subject: [PATCH 05/10] fix: approve ERC-20 with UI

---
 composables/zksync/deposit/useTransaction.ts | 1 -
 views/transactions/Deposit.vue               | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/composables/zksync/deposit/useTransaction.ts b/composables/zksync/deposit/useTransaction.ts
index 7cd33a109..1b8811878 100644
--- a/composables/zksync/deposit/useTransaction.ts
+++ b/composables/zksync/deposit/useTransaction.ts
@@ -44,7 +44,6 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
         token: transaction.tokenAddress,
         amount: transaction.amount,
         l2GasLimit: fee.l2GasLimit,
-        approveERC20: true,
         overrides,
       });
 
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index ccfc0151a..fd43f9cc8 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -486,7 +486,7 @@ const {
 } = useAllowance(
   computed(() => account.value.address),
   computed(() => selectedToken.value?.address),
-  async () => (await providerStore.requestProvider().getDefaultBridgeAddresses()).erc20L1
+  async () => (await providerStore.requestProvider().getDefaultBridgeAddresses()).sharedL1
 );
 const enoughAllowance = computed(() => {
   if (!allowance.value || !selectedToken.value) {

From 039bd1eca4ee3f91b60b03c6914abd8c6c9f4622 Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Wed, 5 Jun 2024 10:06:54 +0200
Subject: [PATCH 06/10] chore: redundant if statement removed

---
 .../zksync/useWithdrawalFinalization.ts       | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/composables/zksync/useWithdrawalFinalization.ts b/composables/zksync/useWithdrawalFinalization.ts
index a9dca2428..06ea67a3f 100644
--- a/composables/zksync/useWithdrawalFinalization.ts
+++ b/composables/zksync/useWithdrawalFinalization.ts
@@ -44,7 +44,6 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   const feeToken = computed(() => {
     return tokens.value?.[ETH_TOKEN.address];
   });
-  const usingMainContract = computed(() => transactionInfo.value.token.address === ETH_TOKEN.address);
 
   const getFinalizationParams = async () => {
     const provider = providerStore.requestProvider();
@@ -69,23 +68,13 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
 
   const getTransactionParams = async () => {
     finalizeWithdrawalParams.value = await getFinalizationParams();
-    if (usingMainContract.value) {
-      return {
-        address: (await retrieveBridgeAddresses()).sharedL1 as Hash,
-        abi: IL1SharedBridge,
-        account: onboardStore.account.address!,
-        functionName: "finalizeWithdrawal",
-        args: Object.values(finalizeWithdrawalParams.value!),
-      };
-    } else {
-      return {
-        address: (await retrieveBridgeAddresses()).sharedL1 as Hash,
-        abi: IL1SharedBridge,
-        account: onboardStore.account.address!,
-        functionName: "finalizeWithdrawal",
-        args: Object.values(finalizeWithdrawalParams.value!),
-      };
-    }
+    return {
+      address: (await retrieveBridgeAddresses()).sharedL1 as Hash,
+      abi: IL1SharedBridge,
+      account: onboardStore.account.address!,
+      functionName: "finalizeWithdrawal",
+      args: Object.values(finalizeWithdrawalParams.value!),
+    };
   };
 
   const {

From 02a2804628e9d1f486016296e70be3775cc951b8 Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Wed, 5 Jun 2024 13:19:27 +0300
Subject: [PATCH 07/10] fix: enable manual finalization by default

---
 views/transactions/Deposit.vue             | 9 +--------
 views/transactions/Transfer.vue            | 3 +--
 views/transactions/WithdrawalSubmitted.vue | 8 +-------
 3 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index fd43f9cc8..819e3e5dd 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -130,14 +130,7 @@
         <CommonButton type="submit" variant="primary" class="mt-block-gap w-full gap-1" @click="buttonContinue()">
           I understand, proceed to bridge
         </CommonButton>
-        <CommonButton
-          as="a"
-          href="https://zksync.dappradar.com/ecosystem?category=defi_bridge"
-          target="_blank"
-          size="sm"
-          class="mx-auto mt-block-gap w-max"
-          @click="disableWalletWarning()"
-        >
+        <CommonButton size="sm" class="mx-auto mt-block-gap w-max" @click="disableWalletWarning()">
           Don't show again
         </CommonButton>
       </template>
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index e842f7258..c402ab67f 100644
--- a/views/transactions/Transfer.vue
+++ b/views/transactions/Transfer.vue
@@ -491,8 +491,7 @@ const withdrawalManualFinalizationRequired = computed(() => {
   if (!transaction.value) return false;
   return (
     props.type === "withdrawal" &&
-    (isCustomNode ||
-      isWithdrawalManualFinalizationRequired(transaction.value.token, eraNetwork.value.l1Network?.id || -1))
+    isWithdrawalManualFinalizationRequired(transaction.value.token, eraNetwork.value.l1Network?.id || -1)
   );
 });
 
diff --git a/views/transactions/WithdrawalSubmitted.vue b/views/transactions/WithdrawalSubmitted.vue
index c3b0ccabe..07a958c83 100644
--- a/views/transactions/WithdrawalSubmitted.vue
+++ b/views/transactions/WithdrawalSubmitted.vue
@@ -149,9 +149,7 @@
 <script lang="ts" setup>
 import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 
-import { isWithdrawalManualFinalizationRequired } from "@/composables/zksync/useTransaction";
 import useWithdrawalFinalization from "@/composables/zksync/useWithdrawalFinalization";
-import { isCustomNode } from "@/data/networks";
 
 const props = defineProps({
   transaction: {
@@ -172,11 +170,7 @@ const { connectorName, isCorrectNetworkSet } = storeToRefs(onboardStore);
 
 const isCustomBridgeToken = computed(() => !props.transaction.token.l1Address);
 const withdrawalManualFinalizationRequired = computed(() => {
-  return (
-    !props.transaction.info.completed &&
-    (isCustomNode ||
-      isWithdrawalManualFinalizationRequired(props.transaction.token, eraNetwork.value.l1Network?.id || -1))
-  );
+  return !props.transaction.info.completed;
 });
 const withdrawalFinalizationAvailable = computed(() => {
   return (

From 35b9f7cd21765224f503b9a2a5e3d432c39db6dd Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Wed, 5 Jun 2024 16:00:28 +0300
Subject: [PATCH 08/10] fix: improve hyperchain config creation process

---
 data/networks.ts                           |  25 ++-
 hyperchains/README.md                      |  19 +--
 package.json                               |   1 -
 pages/send-methods.vue                     |   3 +-
 scripts/hyperchains/common.ts              |   9 +
 scripts/hyperchains/configure.ts           |   2 +-
 scripts/hyperchains/create.ts              | 182 ++++++++++++---------
 scripts/hyperchains/utils.ts               |  11 +-
 views/transactions/Transfer.vue            |   8 +-
 views/transactions/WithdrawalSubmitted.vue |   7 +
 10 files changed, 158 insertions(+), 109 deletions(-)
 create mode 100644 scripts/hyperchains/common.ts

diff --git a/data/networks.ts b/data/networks.ts
index 567368e8c..cf0fdb991 100644
--- a/data/networks.ts
+++ b/data/networks.ts
@@ -1,6 +1,7 @@
 import { mainnet, sepolia } from "@wagmi/core/chains";
 
 import Hyperchains from "@/hyperchains/config.json";
+import { PUBLIC_L1_CHAINS, type Config } from "@/scripts/hyperchains/common";
 
 import type { Token } from "@/types";
 import type { Chain } from "@wagmi/core/chains";
@@ -101,6 +102,25 @@ const publicChains: ZkSyncNetwork[] = [
   },
 ];
 
+const getHyperchains = (): ZkSyncNetwork[] => {
+  const hyperchains = Hyperchains as Config;
+  return hyperchains.map((e) => {
+    const network: ZkSyncNetwork = {
+      ...e.network,
+      getTokens: () => e.tokens,
+    };
+    if (e.network.publicL1NetworkId) {
+      network.l1Network = PUBLIC_L1_CHAINS.find((chain) => chain.id === e.network.publicL1NetworkId);
+      if (!network.l1Network) {
+        throw new Error(
+          `L1 network with ID ${e.network.publicL1NetworkId} from ${network.name} config wasn't found in the list of public L1 networks.`
+        );
+      }
+    }
+    return network;
+  });
+};
+
 const nodeType = portalRuntimeConfig.nodeType;
 const determineChainList = (): ZkSyncNetwork[] => {
   switch (nodeType) {
@@ -109,10 +129,7 @@ const determineChainList = (): ZkSyncNetwork[] => {
     case "dockerized":
       return [dockerizedNode];
     case "hyperchain":
-      return (Hyperchains as unknown as Array<{ network: ZkSyncNetwork; tokens: Token[] }>).map((e) => ({
-        ...e.network,
-        getTokens: () => e.tokens,
-      }));
+      return getHyperchains();
     default:
       return [...publicChains];
   }
diff --git a/hyperchains/README.md b/hyperchains/README.md
index 6fdaec904..803b8bdf4 100644
--- a/hyperchains/README.md
+++ b/hyperchains/README.md
@@ -8,23 +8,6 @@ Portal supports custom ZK Stack Hyperchain nodes.
 
 There are a few different ways to configure the application:
 
-### 📁 Configure using ZK Stack configuration files
-<details>
-<summary>If you're using ZK Stack, just link your zksync-era repo directory to configure Portal.</summary>
-
-1. If you haven't already setup your hyperchain yet, follow the [instructions](https://zkstack.io/quickstart)
-2. Make sure to install the dependencies:
-    ```bash
-    npm install
-    ```
-3. 🔄 Pull your hyperchain config files by running:
-    ```bash
-    npm run hyperchain:configure
-    ```
-    This will regenerate `/hyperchains/config.json` file. You can edit this file manually if needed.
-4. 🚀 Now you can start or build the application. See [Development](#development-server) or [Production](#production) section below for more details.
-</details>
-
 ### 🖊️ Configure automatically with form
 <details>
 <summary>Fill out a simple form to configure the application.</summary>
@@ -61,7 +44,9 @@ Array<{
     rpcUrl: string; // L2 RPC URL
     name: string;
     blockExplorerUrl?: string; // L2 Block Explorer URL
+    blockExplorerApi?: string; // L2 Block Explorer API
     hidden?: boolean; // Hidden in the network selector
+    publicL1NetworkId?: number; // If you wish to use Ethereum Mainnet or Ethereum Sepolia Testnet with default configuration. Can be provided instead of `l1Network`
     l1Network?: { // @wagmi `Chain` structure https://wagmi.sh/core/chains#build-your-own
       // minimal required fields shown
       id: number;
diff --git a/package.json b/package.json
index 295e1fb54..c1d063686 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "generate:node:hyperchain": "ts-node --transpile-only scripts/hyperchains/empty-check.ts && cross-env NODE_TYPE=hyperchain npm run generate",
     "generate-meta": "ts-node --transpile-only scripts/updateBridgeMetaTags.ts",
     "hyperchain:create": "ts-node --transpile-only scripts/hyperchains/create.ts",
-    "hyperchain:configure": "ts-node --transpile-only scripts/hyperchains/configure.ts",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "prepare": "husky install",
diff --git a/pages/send-methods.vue b/pages/send-methods.vue
index 934945229..043507e83 100644
--- a/pages/send-methods.vue
+++ b/pages/send-methods.vue
@@ -20,9 +20,8 @@
           :to="{ name: 'bridge-withdraw', query: $route.query }"
         />
       </CommonCardWithLineButtons>
-      <CommonCardWithLineButtons>
+      <CommonCardWithLineButtons v-if="eraNetwork.displaySettings?.showPartnerLinks">
         <DestinationItem
-          v-if="eraNetwork.displaySettings?.showPartnerLinks"
           :label="`Bridge to other networks`"
           :description="`Explore ecosystem of third party bridges`"
           :icon="ArrowTopRightOnSquareIcon"
diff --git a/scripts/hyperchains/common.ts b/scripts/hyperchains/common.ts
new file mode 100644
index 000000000..340abcf9f
--- /dev/null
+++ b/scripts/hyperchains/common.ts
@@ -0,0 +1,9 @@
+import { mainnet, sepolia } from "viem/chains";
+
+import type { ZkSyncNetwork } from "../../data/networks";
+import type { Token } from "../../types";
+
+export type Network = Omit<ZkSyncNetwork & { publicL1NetworkId?: number }, "getTokens">;
+export type Config = { network: Network; tokens: Token[] }[];
+
+export const PUBLIC_L1_CHAINS = [mainnet, sepolia];
diff --git a/scripts/hyperchains/configure.ts b/scripts/hyperchains/configure.ts
index 850d24c55..9678de096 100644
--- a/scripts/hyperchains/configure.ts
+++ b/scripts/hyperchains/configure.ts
@@ -10,7 +10,7 @@ import { join as pathJoin, parse as pathParse } from "path";
 
 import { generateNetworkConfig, logUserInfo, promptNetworkReplacement } from "./utils";
 
-import type { Network } from "./utils";
+import type { Network } from "./common";
 import type { Token } from "../../types";
 
 const rootPath = process.env.ZKSYNC_HOME;
diff --git a/scripts/hyperchains/create.ts b/scripts/hyperchains/create.ts
index a84a7b0a7..c63ba8a9a 100644
--- a/scripts/hyperchains/create.ts
+++ b/scripts/hyperchains/create.ts
@@ -1,10 +1,10 @@
 import { prompt } from "enquirer";
 import slugify from "slugify";
+import { mainnet, Chain } from "viem/chains";
 
+import { PUBLIC_L1_CHAINS, type Network } from "./common";
 import { generateNetworkConfig, logUserInfo, promptNetworkReplacement } from "./utils";
 
-import type { Network } from "./utils";
-
 const promptHyperchainInfo = async (): Promise<Network> => {
   const { id, name }: { id: number; name: string } = await prompt([
     {
@@ -25,95 +25,127 @@ const promptHyperchainInfo = async (): Promise<Network> => {
     key,
     rpcUrl,
     blockExplorerUrl,
+    blockExplorerApi,
     connectedToL1,
-  }: { key: string; rpcUrl: string; blockExplorerUrl: string; connectedToL1: boolean } = await prompt([
-    {
-      message: "Hyperchain key",
-      name: "key",
-      type: "input",
-      required: true,
-      initial: slugify(name, {
-        lower: true,
-        replacement: "-",
-        strict: true,
-      }),
-    },
-    {
-      message: "Hyperchain RPC URL",
-      name: "rpcUrl",
-      type: "input",
-      required: true,
-    },
-    {
-      message: "Hyperchain Block Explorer URL (optional)",
-      name: "blockExplorerUrl",
-      type: "input",
-    },
-    {
-      message: "Is hyperchain connected to L1 network?",
-      name: "connectedToL1",
-      type: "confirm",
-      required: true,
-      initial: true,
-    },
-  ]);
-
-  let l1Network: Network["l1Network"] | undefined;
-  if (connectedToL1) {
-    const {
-      l1NetworkId,
-      l1NetworkName,
-      l1NetworkRpcUrl,
-      l1NetworkBlockExplorerUrl,
-    }: {
-      l1NetworkId: number;
-      l1NetworkName: string;
-      l1NetworkRpcUrl: string;
-      l1NetworkBlockExplorerUrl: string;
-    } = await prompt([
+  }: { key: string; rpcUrl: string; blockExplorerUrl: string; blockExplorerApi: string; connectedToL1: boolean } =
+    await prompt([
       {
-        message: "L1 chain id",
-        name: "l1NetworkId",
-        type: "numeral",
+        message: "Hyperchain key",
+        name: "key",
+        type: "input",
         required: true,
-        float: false,
+        initial: slugify(name, {
+          lower: true,
+          replacement: "-",
+          strict: true,
+        }),
       },
       {
-        message: "Displayed L1 chain name",
-        name: "l1NetworkName",
+        message: "Hyperchain RPC URL",
+        name: "rpcUrl",
         type: "input",
         required: true,
       },
       {
-        message: "L1 chain RPC URL",
-        name: "l1NetworkRpcUrl",
+        message: "Hyperchain Block Explorer URL (optional)",
+        name: "blockExplorerUrl",
         type: "input",
-        required: true,
       },
       {
-        message: "L1 chain Block Explorer URL (optional)",
-        name: "l1NetworkBlockExplorerUrl",
+        message: "Hyperchain Block Explorer API (optional)",
+        name: "blockExplorerApi",
         type: "input",
       },
+      {
+        message: "Is hyperchain connected to L1 network?",
+        name: "connectedToL1",
+        type: "confirm",
+        required: true,
+        initial: true,
+      },
     ]);
 
-    l1Network = {
-      id: l1NetworkId,
-      name: l1NetworkName,
-      nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
-      rpcUrls: {
-        default: { http: [l1NetworkRpcUrl] },
-        public: { http: [l1NetworkRpcUrl] },
+  let l1Network: Network["l1Network"] | undefined;
+  let publicL1NetworkId: number | undefined;
+
+  if (connectedToL1) {
+    // Ask select from public L1 chains (should list all options) or `+ Add custom L1 chain`
+    const { selectedOption }: { selectedOption: "add-custom-chain" | Chain } = await prompt({
+      message: "Select L1 chain",
+      name: "selectedOption",
+      type: "select",
+      required: true,
+      choices: [
+        ...PUBLIC_L1_CHAINS.map((chain) => ({
+          name: `${chain.id === mainnet.id ? "Ethereum Mainnet" : "Ethereum " + chain.name}${
+            chain.testnet ? " Testnet" : ""
+          }`,
+          value: chain,
+        })),
+        { name: "+ Add custom L1 chain", value: "add-custom-chain" },
+      ],
+      result(resultName) {
+        return this.choices.find((choice: { name: string }) => choice.name === resultName).value;
       },
-      blockExplorers: l1NetworkBlockExplorerUrl
-        ? {
-            default: {
-              name: l1NetworkName,
-              url: l1NetworkBlockExplorerUrl,
-            },
-          }
-        : undefined,
-    };
+    });
+    if (selectedOption === "add-custom-chain") {
+      const {
+        l1NetworkId,
+        l1NetworkName,
+        l1NetworkRpcUrl,
+        l1NetworkBlockExplorerUrl,
+      }: {
+        l1NetworkId: number;
+        l1NetworkName: string;
+        l1NetworkRpcUrl: string;
+        l1NetworkBlockExplorerUrl: string;
+      } = await prompt([
+        {
+          message: "L1 chain id",
+          name: "l1NetworkId",
+          type: "numeral",
+          required: true,
+          float: false,
+        },
+        {
+          message: "Displayed L1 chain name",
+          name: "l1NetworkName",
+          type: "input",
+          required: true,
+        },
+        {
+          message: "L1 chain RPC URL",
+          name: "l1NetworkRpcUrl",
+          type: "input",
+          required: true,
+        },
+        {
+          message: "L1 chain Block Explorer URL (optional)",
+          name: "l1NetworkBlockExplorerUrl",
+          type: "input",
+        },
+      ]);
+
+      l1Network = {
+        id: l1NetworkId,
+        name: l1NetworkName,
+        nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+        rpcUrls: {
+          default: { http: [l1NetworkRpcUrl] },
+          public: { http: [l1NetworkRpcUrl] },
+        },
+        blockExplorers: l1NetworkBlockExplorerUrl
+          ? {
+              default: {
+                name: l1NetworkName,
+                url: l1NetworkBlockExplorerUrl,
+              },
+            }
+          : undefined,
+      };
+    } else {
+      publicL1NetworkId = selectedOption.id;
+    }
   }
 
   return {
@@ -122,7 +154,9 @@ const promptHyperchainInfo = async (): Promise<Network> => {
     key,
     rpcUrl,
     blockExplorerUrl,
+    blockExplorerApi,
     l1Network,
+    publicL1NetworkId,
   };
 };
 
diff --git a/scripts/hyperchains/utils.ts b/scripts/hyperchains/utils.ts
index c50614ba3..6a0b5e92c 100644
--- a/scripts/hyperchains/utils.ts
+++ b/scripts/hyperchains/utils.ts
@@ -3,14 +3,9 @@ import { prompt } from "enquirer";
 import { readFileSync, writeFileSync } from "fs";
 import { join as pathJoin } from "path";
 
-import { ETH_TOKEN } from "../../utils/constants";
-
-import type { ZkSyncNetwork } from "../../data/networks";
+import type { Network, Config } from "./common";
 import type { Token } from "../../types";
 
-export type Network = Omit<ZkSyncNetwork, "getTokens">;
-export type Config = { network: Network; tokens: Token[] }[];
-
 export const configPath = pathJoin(__dirname, "../../hyperchains/config.json");
 const getConfig = (): Config => {
   return JSON.parse(readFileSync(configPath).toString());
@@ -50,10 +45,10 @@ export const promptNetworkReplacement = async (network: Network) => {
 export const generateNetworkConfig = (network: Network, tokens: Token[]) => {
   const config = getConfig();
 
-  // Add ETH token if it's not in the list
+  /* // Add ETH token if it's not in the list
   if (!tokens.some((token: Token) => token.address === ETH_TOKEN.address)) {
     tokens.unshift(ETH_TOKEN);
-  }
+  } */
 
   config.unshift({ network, tokens });
   saveConfig(config);
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index c402ab67f..0f68a36c3 100644
--- a/views/transactions/Transfer.vue
+++ b/views/transactions/Transfer.vue
@@ -109,7 +109,7 @@
       </template>
       <template v-else-if="step === 'withdrawal-finalization-warning'">
         <CommonAlert variant="warning" :icon="ExclamationTriangleIcon" class="mb-block-padding-1/2 sm:mb-block-gap">
-          <p>
+          <p v-if="!isCustomNode">
             After a
             <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank"
               >24-hour withdrawal delay</a
@@ -122,6 +122,10 @@
               >third-party bridges</a
             >.
           </p>
+          <p v-else>
+            After transaction is executed on {{ eraNetwork.l1Network?.name }}, you will need to manually claim your
+            funds which requires paying another transaction fee on {{ eraNetwork.l1Network?.name }}.
+          </p>
         </CommonAlert>
         <CommonButton
           as="a"
@@ -140,7 +144,7 @@
       </template>
       <template v-else-if="step === 'confirm'">
         <CommonAlert
-          v-if="type === 'withdrawal'"
+          v-if="type === 'withdrawal' && !isCustomNode"
           variant="warning"
           :icon="ExclamationTriangleIcon"
           class="mb-block-padding-1/2 sm:mb-block-gap"
diff --git a/views/transactions/WithdrawalSubmitted.vue b/views/transactions/WithdrawalSubmitted.vue
index 07a958c83..fd3240a13 100644
--- a/views/transactions/WithdrawalSubmitted.vue
+++ b/views/transactions/WithdrawalSubmitted.vue
@@ -9,6 +9,12 @@
           Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
           you claim the withdrawal.
         </template>
+        <template v-else-if="isCustomNode">
+          Your funds will be available for claiming after the transaction is processed on
+          <span class="font-medium">{{ eraNetwork.name }}</span> and executed on the
+          <span class="font-medium">{{ eraNetwork.l1Network?.name }}</span
+          >.
+        </template>
         <template v-else>
           Your funds will be available on <span class="font-medium">{{ transaction.to.destination.label }}</span> after
           the <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">24-hour delay</a>.
@@ -150,6 +156,7 @@
 import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 
 import useWithdrawalFinalization from "@/composables/zksync/useWithdrawalFinalization";
+import { isCustomNode } from "@/data/networks";
 
 const props = defineProps({
   transaction: {

From 6e6a1e2f64def59da13d6e00e1f98e80f2e7f75f Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Wed, 3 Jul 2024 15:55:58 +0100
Subject: [PATCH 09/10] chore: zksync-ethers to stable v5.9.0

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 937e03812..c0e426bbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "vite": "^3.0.0",
         "vue-tippy": "^6.0.0",
         "web3-avatar-vue": "^1.0.0",
-        "zksync-ethers": "^5.8.0-beta.5"
+        "zksync-ethers": "^5.9.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^17.4.2",
@@ -34517,9 +34517,9 @@
       }
     },
     "node_modules/zksync-ethers": {
-      "version": "5.8.0-beta.5",
-      "resolved": "https://registry.npmjs.org/zksync-ethers/-/zksync-ethers-5.8.0-beta.5.tgz",
-      "integrity": "sha512-saT/3OwLgifqzrBG7OujvUMapzXnshAaLzAZMycUtdV20eLSSVkyLIARVwh1M6hMQIUvX2htV0JN82QRMyM3Ig==",
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/zksync-ethers/-/zksync-ethers-5.9.0.tgz",
+      "integrity": "sha512-VnRUesrBcPBmiTYTAp+WreIazK2qCIJEHE7j8BiK+cDApHzjAfIXX+x8SXXJpG1npGJANxiJKnPwA5wjGZtCRg==",
       "dependencies": {
         "ethers": "~5.7.0"
       },
diff --git a/package.json b/package.json
index c1d063686..44ce3963f 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "vite": "^3.0.0",
     "vue-tippy": "^6.0.0",
     "web3-avatar-vue": "^1.0.0",
-    "zksync-ethers": "^5.8.0-beta.5"
+    "zksync-ethers": "^5.9.0"
   },
   "overrides": {
     "vue": "latest"

From f836401173c3ca3bdb9d3c8355a18319309898f3 Mon Sep 17 00:00:00 2001
From: Bence Haromi <bence.haromi@gmail.com>
Date: Wed, 3 Jul 2024 16:07:41 +0100
Subject: [PATCH 10/10] fix: v5.9.0 abi interface change

---
 store/zksync/transactionStatus.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/store/zksync/transactionStatus.ts b/store/zksync/transactionStatus.ts
index bb6d4c384..0d165e898 100644
--- a/store/zksync/transactionStatus.ts
+++ b/store/zksync/transactionStatus.ts
@@ -1,6 +1,6 @@
 import { useStorage } from "@vueuse/core";
 import { decodeEventLog } from "viem";
-import ZkSyncContractInterface from "zksync-ethers/abi/IZkSyncStateTransition.json";
+import IZkSyncHyperchain from "zksync-ethers/abi/IZkSyncHyperchain.json";
 
 import type { FeeEstimationParams } from "@/composables/zksync/useFee";
 import type { TokenAmount, Hash } from "@/types";
@@ -58,7 +58,7 @@ export const useZkSyncTransactionStatusStore = defineStore("zkSyncTransactionSta
     for (const log of transaction.logs) {
       try {
         const { args, eventName } = decodeEventLog({
-          abi: ZkSyncContractInterface,
+          abi: IZkSyncHyperchain,
           data: log.data,
           topics: log.topics,
         });