feat: add native wsteth support (#246)

Co-authored-by: Jack Hamer <[email protected]>

Author: tx-nikola

components/common/input/InputLine.vue

@@ -27,8 +27,11 @@ const inputted = computed({
 <style lang="scss" scoped>
 .input-line {
   @apply block w-full overflow-hidden rounded-none border-b-2 bg-transparent leading-snug outline-none transition placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
-  @apply border-neutral-200 hover:border-neutral-300 focus:border-neutral-950;
-  @apply dark:border-neutral-800 dark:hover:border-neutral-600 dark:focus:border-white;
+  @apply border-neutral-200 dark:border-neutral-800;
+  &:not(.has-error) {
+    @apply hover:border-neutral-300 focus:border-neutral-950;
+    @apply dark:hover:border-neutral-600 dark:focus:border-white;
+  }
   &.has-error {
     @apply border-error-300;
   }

components/token/TokenSelectModal.vue

@@ -27,7 +27,7 @@
           <CommonLineButtonsGroup class="category" :gap="false" :margin-y="false">
             <TokenLine
               v-for="item in displayedTokens"
-              :key="item.address"
+              :key="item.l2Address ? `${item.address}-${item.l2Address}` : item.address"
               class="token-line"
               v-bind="item"
               @click="selectedToken = item"
@@ -43,7 +43,7 @@
               <TokenBalance
                 v-for="item in group.balances"
                 v-bind="item"
-                :key="item.address"
+                :key="item.l2Address ? `${item.address}-${item.l2Address}` : item.address"
                 variant="light"
                 @click="selectedToken = item"
               />
@@ -137,7 +137,11 @@ const selectedToken = computed({
   },
   set: (value) => {
     if (value) {
-      selectedTokenAddress.value = value.address;
+      // Handle special case for L1 tokens with multiple L2 counterparts (native and bridged) - create unique identifier
+      const hasMultipleTokens =
+        props.tokens.filter((e) => e.address === value.address).length > 1 ||
+        props.balances.filter((e) => e.address === value.address).length > 1;
+      selectedTokenAddress.value = hasMultipleTokens ? `${value.address}-${value.l2Address}` : value.address;
     } else {
       selectedTokenAddress.value = undefined;
     }

composables/transaction/useAllowance.ts

@@ -108,7 +108,6 @@ export default (
           error: err as Error,
           parentFunctionName: "executeSetAllowance",
           parentFunctionParams: [],
-          accountAddress: accountAddress.value || "",
           filePath: "composables/transaction/useAllowance.ts",
         });
         throw err;

composables/zksync/deposit/useTransaction.ts

@@ -1,23 +1,109 @@
+import { readContract, writeContract } from "@wagmi/core";
+import { zeroAddress, type Address, type Hash } from "viem";
+import { L1Signer } from "zksync-ethers";
+import { getERC20DefaultBridgeData, REQUIRED_L1_TO_L2_GAS_PER_PUBDATA_LIMIT } from "zksync-ethers/build/utils";
+
 import { useSentryLogger } from "@/composables/useSentryLogger";
+import { L1_BRIDGE_ABI } from "@/data/abis/l1BridgeAbi";
+import { wagmiConfig } from "@/data/wagmi";
 
 import type { DepositFeeValues } from "@/composables/zksync/deposit/useFee";
 import type { BigNumberish } from "ethers";
-import type { L1Signer } from "zksync-ethers";
 
 export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
   const status = ref<"not-started" | "processing" | "waiting-for-signature" | "done">("not-started");
   const error = ref<Error | undefined>();
-  const ethTransactionHash = ref<string | undefined>();
+  const ethTransactionHash = ref<Hash | undefined>();
   const eraWalletStore = useZkSyncWalletStore();
   const { captureException } = useSentryLogger();
 
   const { validateAddress } = useScreening();
 
+  const handleCustomBridgeDeposit = async (
+    transaction: {
+      to: Address;
+      tokenAddress: Address;
+      amount: BigNumberish;
+      bridgeAddress: Address;
+      gasPerPubdata?: bigint;
+      l2GasLimit?: bigint;
+      refundRecipient?: Address;
+    },
+    fee: DepositFeeValues
+  ) => {
+    const l1Signer = await getL1Signer();
+    if (!l1Signer) throw new Error("L1 signer is not available");
+
+    const l2BridgeAddress = await readContract(wagmiConfig, {
+      address: transaction.bridgeAddress as Address,
+      abi: L1_BRIDGE_ABI,
+      functionName: "l2Bridge",
+    });
+    const bridgeData = await getERC20DefaultBridgeData(transaction.tokenAddress, l1Signer.provider);
+
+    const gasPerPubdata = transaction.gasPerPubdata ?? BigInt(REQUIRED_L1_TO_L2_GAS_PER_PUBDATA_LIMIT);
+    const l2Value = 0n; // L2 value is not used in this context
+    const l2GasLimit = await l1Signer.providerL2.estimateCustomBridgeDepositL2Gas(
+      transaction.bridgeAddress,
+      l2BridgeAddress,
+      transaction.tokenAddress,
+      transaction.amount.toString(),
+      transaction.to,
+      bridgeData,
+      l1Signer.address,
+      gasPerPubdata,
+      l2Value
+    );
+
+    const baseCost = await l1Signer.getBaseCost({
+      gasLimit: l2GasLimit,
+      gasPerPubdataByte: gasPerPubdata,
+    });
+
+    const overrides = {
+      gasPrice: fee.gasPrice,
+      gasLimit: fee.l1GasLimit,
+      maxFeePerGas: fee.maxFeePerGas,
+      maxPriorityFeePerGas: fee.maxPriorityFeePerGas,
+    };
+    if (overrides.gasPrice && overrides.maxFeePerGas) {
+      overrides.gasPrice = undefined;
+    }
+
+    const hash = await writeContract(wagmiConfig, {
+      address: transaction.bridgeAddress as Address,
+      abi: L1_BRIDGE_ABI,
+      functionName: "deposit",
+      args: [
+        transaction.to,
+        transaction.tokenAddress,
+        BigInt(transaction.amount.toString()),
+        transaction.l2GasLimit ?? 400000n,
+        gasPerPubdata,
+        transaction.refundRecipient ?? zeroAddress,
+      ],
+      value: baseCost + (overrides.maxPriorityFeePerGas ? BigInt(overrides.maxPriorityFeePerGas) : 0n),
+    });
+
+    return {
+      from: l1Signer.address,
+      to: transaction.to,
+      hash,
+      // eslint-disable-next-line require-await
+      wait: async () => ({
+        from: l1Signer.address,
+        to: transaction.to,
+        hash,
+      }),
+    };
+  };
+
   const commitTransaction = async (
     transaction: {
-      to: string;
-      tokenAddress: string;
+      to: Address;
+      tokenAddress: Address;
       amount: BigNumberish;
+      bridgeAddress?: Address;
     },
     fee: DepositFeeValues
   ) => {
@@ -42,18 +128,29 @@ export default (getL1Signer: () => Promise<L1Signer | undefined>) => {
       }
 
       status.value = "waiting-for-signature";
-      const depositResponse = await wallet.deposit({
-        to: transaction.to,
-        token: transaction.tokenAddress,
-        amount: transaction.amount,
-        l2GasLimit: fee.l2GasLimit,
-        approveBaseERC20: true,
-        overrides,
-      });
 
-      ethTransactionHash.value = depositResponse.hash;
-      status.value = "done";
-      return depositResponse;
+      if (transaction.bridgeAddress) {
+        const depositResponse = await handleCustomBridgeDeposit(
+          { ...transaction, bridgeAddress: transaction.bridgeAddress },
+          fee
+        );
+        ethTransactionHash.value = depositResponse.hash;
+        status.value = "done";
+        return depositResponse;
+      } else {
+        const depositResponse = await wallet.deposit({
+          to: transaction.to,
+          token: transaction.tokenAddress,
+          amount: transaction.amount,
+          l2GasLimit: fee.l2GasLimit,
+          approveBaseERC20: true,
+          overrides,
+        });
+
+        ethTransactionHash.value = depositResponse.hash as Hash;
+        status.value = "done";
+        return depositResponse;
+      }
     } catch (err) {
       error.value = formatError(err as Error);
       status.value = "not-started";

composables/zksync/useFee.ts

@@ -1,6 +1,9 @@
-import { type Provider } from "zksync-ethers";
+import { EIP712_TX_TYPE } from "zksync-ethers/build/utils";
 
 import type { Token, TokenAmount } from "@/types";
+import type { BigNumberish, ethers } from "ethers";
+import type { Provider } from "zksync-ethers";
+import type { Address, PaymasterParams } from "zksync-ethers/build/types";
 
 export type FeeEstimationParams = {
   type: "transfer" | "withdrawal";
@@ -33,12 +36,48 @@ 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;
   });
 
+  // We need to calculate gas limit with custom function since the new version of the SDK fails
+  const getCustomGasLimit = async (transaction: {
+    token: Address;
+    amount: BigNumberish;
+    from?: Address;
+    to?: Address;
+    bridgeAddress?: Address;
+    paymasterParams?: PaymasterParams;
+    overrides?: ethers.Overrides;
+  }): Promise<bigint> => {
+    const { ...tx } = transaction;
+    if ((tx.to === null || tx.to === undefined) && (tx.from === null || tx.from === undefined)) {
+      throw new Error("Withdrawal target address is undefined!");
+    }
+    tx.to ??= tx.from;
+    tx.overrides ??= {};
+    tx.overrides.from ??= tx.from;
+    tx.overrides.type ??= EIP712_TX_TYPE;
+
+    const provider = getProvider();
+    const bridge = await provider.connectL2Bridge(tx.bridgeAddress!);
+    let populatedTx = await bridge.withdraw.populateTransaction(tx.to!, tx.token, tx.amount, tx.overrides);
+    if (tx.paymasterParams) {
+      populatedTx = {
+        ...populatedTx,
+        customData: {
+          paymasterParams: tx.paymasterParams,
+        },
+      };
+    }
+
+    const gasLimit = await provider.estimateGas(populatedTx);
+
+    return gasLimit;
+  };
+
   const {
     inProgress,
     error,
@@ -50,17 +89,31 @@ export default (
 
       const provider = getProvider();
       const tokenBalance = balances.value.find((e) => e.address === params!.tokenAddress)?.amount || "1";
+      const token = balances.value.find((e) => e.address === params!.tokenAddress);
+      const isCustomBridgeToken = !!token?.l2BridgeAddress;
+
       const [price, limit] = await Promise.all([
         retry(() => provider.getGasPrice()),
         retry(() => {
-          return provider[params!.type === "transfer" ? "estimateGasTransfer" : "estimateGasWithdraw"]({
-            from: params!.from,
-            to: params!.to,
-            token: params!.tokenAddress,
-            amount: tokenBalance,
-          });
+          if (isCustomBridgeToken) {
+            return getCustomGasLimit({
+              from: params!.from,
+              to: params!.to,
+              token: params!.tokenAddress,
+              amount: tokenBalance,
+              bridgeAddress: token?.l2BridgeAddress,
+            });
+          } else {
+            return provider[params!.type === "transfer" ? "estimateGasTransfer" : "estimateGasWithdraw"]({
+              from: params!.from,
+              to: params!.to,
+              token: params!.tokenAddress,
+              amount: tokenBalance,
+            });
+          }
         }),
       ]);
+
       gasPrice.value = price;
       gasLimit.value = limit;
     },