feat: integrate wstETH bridge addresses

composables/zksync/deposit/useTransaction.ts

@@ -1,4 +1,5 @@
 import type { DepositFeeValues } from "@/composables/zksync/deposit/useFee";
+import type { Token } from "@/types";
 import type { BigNumberish } from "ethers";
 import type { L1Signer } from "zksync-ethers";
 
@@ -13,7 +14,7 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
   const commitTransaction = async (
     transaction: {
       to: string;
-      tokenAddress: string;
+      token: Token;
       amount: BigNumberish;
     },
     fee: DepositFeeValues
@@ -39,11 +40,14 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
       }
 
       status.value = "waiting-for-signature";
+      const isCustomBridge = isExternalBridgeToken(transaction.token);
+      const bridgeAddress = isCustomBridge ? EXTERNAL_BRIDGES[transaction.token.address] : "";
       const depositResponse = await wallet.deposit({
         to: transaction.to,
-        token: transaction.tokenAddress,
+        token: transaction.token.address,
         amount: transaction.amount,
         l2GasLimit: fee.l2GasLimit,
+        ...(isCustomBridge ? { bridgeAddress } : {}),
         overrides,
       });
 

composables/zksync/useFee.ts

@@ -8,7 +8,7 @@ export type FeeEstimationParams = {
   type: "transfer" | "withdrawal";
   from: string;
   to: string;
-  tokenAddress: string;
+  token: Token;
 };
 
 export default (
@@ -51,15 +51,18 @@ export default (
       if (!params) throw new Error("Params are not available");
 
       const provider = getProvider();
-      const tokenBalance = balances.value.find((e) => e.address === params!.tokenAddress)?.amount || "1";
+      const tokenBalance = balances.value.find((e) => e.address === params!.token.address)?.amount || "1";
       const [price, limit] = await Promise.all([
         retry(() => provider.getGasPrice()),
         retry(() => {
+          const isCustomBridge = isExternalBridgeToken(params!.token);
+          const bridgeAddress = isCustomBridge ? EXTERNAL_BRIDGES[params!.token.address] : "";
           return provider[params!.type === "transfer" ? "estimateGasTransfer" : "estimateGasWithdraw"]({
             from: params!.from,
             to: params!.to,
-            token: params!.tokenAddress === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : params!.tokenAddress,
+            token: params!.token.address === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : params!.token.address,
             amount: tokenBalance,
+            ...(isCustomBridge ? { bridgeAddress } : {}),
           });
         }),
       ]);

composables/zksync/useTransaction.ts

@@ -3,13 +3,13 @@ import { type BigNumberish } from "ethers";
 
 import { isCustomNode } from "@/data/networks";
 
-import type { TokenAmount } from "@/types";
+import type { Token, TokenAmount } from "@/types";
 import type { Provider, Signer } from "zksync-ethers";
 
 type TransactionParams = {
   type: "transfer" | "withdrawal";
   to: string;
-  tokenAddress: string;
+  token: Token;
   amount: BigNumberish;
 };
 
@@ -38,7 +38,9 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
       if (!signer) throw new Error("zkSync Signer is not available");
 
       const getRequiredBridgeAddress = async () => {
-        if (transaction.tokenAddress === ETH_TOKEN.address) return undefined;
+        if (transaction.token.address === ETH_TOKEN.address) return undefined;
+        const isCustomBridge = isExternalBridgeToken(transaction.token);
+        if (isCustomBridge) return EXTERNAL_BRIDGES[transaction.token.address];
         const bridgeAddresses = await retrieveBridgeAddresses();
         return bridgeAddresses.erc20L2;
       };
@@ -50,7 +52,7 @@ export default (getSigner: () => Promise<Signer | undefined>, getProvider: () =>
       status.value = "waiting-for-signature";
       const tx = await signer[transaction.type === "transfer" ? "transfer" : "withdraw"]({
         to: transaction.to,
-        token: transaction.tokenAddress === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : transaction.tokenAddress,
+        token: transaction.token.address === ETH_TOKEN.address ? ETH_TOKEN.l1Address! : transaction.token.address,
         amount: transaction.amount,
         bridgeAddress,
         overrides: {

composables/zksync/useWithdrawalFinalization.ts

@@ -16,12 +16,16 @@ export default (transactionInfo: ComputedRef<TransactionInfo>) => {
   const { isCorrectNetworkSet } = storeToRefs(onboardStore);
   const { tokens } = storeToRefs(tokensStore);
 
-  const retrieveBridgeAddress = useMemoize(() =>
-    providerStore
+  const retrieveBridgeAddress = useMemoize(() => {
+    const isCustomBridge = isExternalBridgeToken(transactionInfo.value.token);
+    if (isCustomBridge) {
+      return EXTERNAL_BRIDGES[transactionInfo.value.token.address];
+    }
+    return providerStore
       .requestProvider()
       .getDefaultBridgeAddresses()
-      .then((e) => e.erc20L1)
-  );
+      .then((e) => e.erc20L1);
+  });
   const retrieveMainContractAddress = useMemoize(() => providerStore.requestProvider().getMainContractAddress());
 
   const gasLimit = ref<BigNumberish | undefined>();

data/customBridgeTokens.ts

@@ -8,14 +8,4 @@ type CustomBridgeToken = {
   symbol: string;
 };
 
-export const customBridgeTokens: CustomBridgeToken[] = [
-  {
-    chainId: 1,
-    l1Address: "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0",
-    l2Address: "0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
-    bridgeName: "txSync Bridge",
-    bridgeUrlDeposit: "https://portal.txsync.io/bridge/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
-    bridgeUrlWithdraw: "https://portal.txsync.io/bridge/withdraw/?token=0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
-    symbol: "wstETH",
-  },
-];
+export const customBridgeTokens: CustomBridgeToken[] = [];

utils/constants.ts

@@ -8,3 +8,18 @@ export const ETH_TOKEN: Token = {
   decimals: 18,
   iconUrl: "/img/eth.svg",
 };
+
+export const WST_ETH_TOKEN: Token = {
+  address: "0x703b52F2b28fEbcB60E1372858AF5b18849FE867",
+  l1Address: "0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0",
+  symbol: "wstETH",
+  name: "Wrapped liquid staked Ether 2.0",
+  decimals: 18,
+  iconUrl: "https://assets.coingecko.com/coins/images/18834/large/wstETH.png",
+};
+
+// External non-native bridge addresses:
+export const EXTERNAL_BRIDGES = {
+  [WST_ETH_TOKEN.l1Address!]: "0x41527B2d03844dB6b0945f25702cB958b6d55989",
+  [WST_ETH_TOKEN.address]: "0xE1D6A50E7101c8f8db77352897Ee3f1AC53f782B",
+};

utils/helpers.ts

@@ -1,7 +1,9 @@
 import { BigNumber } from "ethers";
 
+import { EXTERNAL_BRIDGES } from "./constants";
+
 import type { ZkSyncNetwork } from "@/data/networks";
-import type { TokenAmount } from "@/types";
+import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 
 export function isOnlyZeroes(value: string) {
@@ -52,3 +54,7 @@ export async function retry<T>(func: () => Promise<T>, options: RetryOptions = {
     }
   }
 }
+
+export const isExternalBridgeToken = (token: Token) => {
+  return Object.hasOwn(EXTERNAL_BRIDGES, token.address);
+};

utils/mappers.ts

@@ -40,6 +40,12 @@ export const mapApiToken = (token: Api.Response.Token): Token => {
     };
   }
 
+  // TODO: Update the address on the Block explorer API side
+  // Update the old wstETH address with new one
+  if (token.l1Address === WST_ETH_TOKEN.l1Address) {
+    token.l2Address = WST_ETH_TOKEN.address;
+  }
+
   return {
     l1Address: token.l1Address || undefined,
     address: token.l2Address,

views/transactions/Deposit.vue

@@ -461,6 +461,17 @@ const tokenBalance = computed<BigNumberish | undefined>(() => {
   return balance.value?.find((e) => e.address === selectedToken.value?.address)?.amount;
 });
 
+const getContractAddress = async () => {
+  if (selectedToken.value) {
+    const isExternalBridge = isExternalBridgeToken(selectedToken.value);
+    if (isExternalBridge) {
+      return EXTERNAL_BRIDGES[selectedToken.value.address];
+    } else {
+      return (await providerStore.requestProvider().getDefaultBridgeAddresses()).erc20L1;
+    }
+  }
+};
+
 const {
   result: allowance,
   inProgress: allowanceRequestInProgress,
@@ -477,7 +488,7 @@ const {
 } = useAllowance(
   computed(() => account.value.address),
   computed(() => selectedToken.value?.address),
-  async () => (await providerStore.requestProvider().getDefaultBridgeAddresses()).erc20L1
+  getContractAddress
 );
 const enoughAllowance = computed(() => {
   if (!allowance.value || !selectedToken.value) {
@@ -681,7 +692,7 @@ const makeTransaction = async () => {
   const tx = await commitTransaction(
     {
       to: transaction.value!.to.address,
-      tokenAddress: transaction.value!.token.address,
+      token: transaction.value!.token,
       amount: transaction.value!.token.amount,
     },
     feeValues.value!

views/transactions/Transfer.vue

@@ -522,7 +522,7 @@ const estimate = async () => {
     type: props.type,
     from: transaction.value.from.address,
     to: transaction.value.to.address,
-    tokenAddress: selectedToken.value.address,
+    token: selectedToken.value,
   });
 };
 watch(
@@ -606,7 +606,7 @@ const makeTransaction = async () => {
     {
       type: props.type,
       to: transaction.value!.to.address,
-      tokenAddress: transaction.value!.token.address,
+      token: transaction.value!.token,
       amount: transaction.value!.token.amount,
     },
     {