Refactor wallets connection

apps/web/.env

@@ -1 +1 @@
-VITE_WALLET_CONNECT_ID=2719448e2ce94fdd269a3c8587123bcc
+VITE_WALLET_CONNECT_PROJECT_ID=d155df487dbbf1140fa0418387f85fe1

apps/web/package.json

@@ -20,9 +20,11 @@
  "@apollo/client": "^3.10.3",
  "@floating-ui/react": "^0.26.14",
  "@helixbridge/helixconf": "1.1.15",
- "@rainbow-me/rainbowkit": "^1.3.7",
+ "@reown/appkit": "^1.0.7",
+ "@reown/appkit-adapter-wagmi": "^1.0.7",
  "@sentry/react": "^8.30.0",
  "@sentry/vite-plugin": "^2.22.4",
+ "@tanstack/react-query": "^5.59.0",
  "date-fns": "^3.6.0",
  "date-fns-tz": "^3.1.3",
  "graphql": "^16.8.1",
@@ -35,8 +37,8 @@
  "react-transition-group": "^4.4.5",
  "rxjs": "^7.8.1",
  "sort-by": "^0.0.2",
- "viem": "^1.21.4",
- "wagmi": "^1.4.13"
+ "viem": "^2.21.19",
+ "wagmi": "^2.12.17"
  },
  "devDependencies": {
  "@types/react": "^18.2.66",

apps/web/src/bridges/base.ts

@@ -12,8 +12,15 @@ import {
  TransferOptions,
 } from "../types";
 import { getBalance } from "../utils";
-import { Address, PublicClient as ViemPublicClient, TransactionReceipt, createPublicClient, http } from "viem";
-import { PublicClient as WagmiPublicClient, WalletClient } from "wagmi";
+import {
+ Address,
+ PublicClient as ViemPublicClient,
+ TransactionReceipt,
+ createPublicClient,
+ http,
+ PublicClient,
+ WalletClient,
+} from "viem";
 import { CONFIRMATION_BLOCKS } from "../config";
 
 export abstract class BaseBridge {
@@ -35,7 +42,7 @@ export abstract class BaseBridge {
 
  protected readonly sourcePublicClient: ViemPublicClient | undefined;
  protected readonly targetPublicClient: ViemPublicClient | undefined;
- protected readonly publicClient?: WagmiPublicClient; // The public client to which the wallet is connected
+ protected readonly publicClient?: PublicClient; // The public client to which the wallet is connected
  protected readonly walletClient?: WalletClient | null;
 
  constructor(args: BridgeConstructorArgs) {

apps/web/src/bridges/lnbridge-v3.ts

@@ -54,7 +54,8 @@ export class LnBridgeV3 extends LnBridgeBase {
  if (askEstimateGas) {
  return this.sourcePublicClient.estimateContractGas(defaultParams);
  } else if (this.walletClient) {
- const hash = await this.walletClient.writeContract(defaultParams);
+ const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
+ const hash = await this.walletClient.writeContract(request);
  return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
@@ -102,16 +103,18 @@ export class LnBridgeV3 extends LnBridgeBase {
 
  async registerLnProvider(baseFee: bigint, feeRate: number, transferLimit: bigint) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
  if (
+ account &&
  this.contract &&
  this.publicClient &&
  this.walletClient &&
  this.targetChain &&
  this.sourceToken &&
  this.targetToken
  ) {
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import("../abi/lnbridge-v3")).default,
  functionName: "registerLnProvider",
@@ -124,37 +127,46 @@ export class LnBridgeV3 extends LnBridgeBase {
  transferLimit,
  ],
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
 
  async depositPenaltyReserve(amount: bigint) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
- if (this.contract && this.publicClient && this.walletClient && this.sourceToken) {
- const hash = await this.walletClient.writeContract({
+ if (account && this.contract && this.publicClient && this.walletClient && this.sourceToken) {
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import("../abi/lnbridge-v3")).default,
  functionName: "depositPenaltyReserve",
  args: [this.sourceToken.address, amount],
  value: this.sourceToken.type === "native" ? amount : undefined,
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
 
  async withdrawPenaltyReserve(amount: bigint) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
- if (this.contract && this.sourceToken && this.publicClient && this.walletClient) {
- const hash = await this.walletClient.writeContract({
+ if (account && this.contract && this.sourceToken && this.publicClient && this.walletClient) {
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import("../abi/lnbridge-v3")).default,
  functionName: "withdrawPenaltyReserve",
  args: [this.sourceToken.address, amount],
+ gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
@@ -197,18 +209,21 @@ export class LnBridgeV3 extends LnBridgeBase {
 
  async requestWithdrawLiquidity(relayer: Address, transferIds: Hex[], messageFee: bigint, extParams: Hex) {
  await this.validateNetwork("target");
+ const account = await this.getSigner();
 
- if (this.contract && this.sourceChain && this.publicClient && this.walletClient) {
+ if (account && this.contract && this.sourceChain && this.publicClient && this.walletClient) {
  const remoteChainId = BigInt(this.sourceChain.id);
 
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.targetAddress,
  abi: (await import("../abi/lnbridge-v3")).default,
  functionName: "requestWithdrawLiquidity",
  args: [remoteChainId, transferIds, relayer, extParams],
  value: messageFee,
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }

apps/web/src/bridges/lnv2-default.ts

@@ -53,61 +53,72 @@ export class LnBridgeV2Default extends LnBridgeBase {
  if (askEstimateGas) {
  return this.sourcePublicClient.estimateContractGas(defaultParams);
  } else if (this.walletClient) {
- const hash = await this.walletClient.writeContract(defaultParams);
+ const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
+ const hash = await this.walletClient.writeContract(request);
  return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
  }
 
  async depositMargin(margin: bigint) {
  await this.validateNetwork("target");
+ const account = await this.getSigner();
 
  if (
+ account &&
  this.contract &&
  this.sourceChain &&
  this.sourceToken &&
  this.targetToken &&
  this.publicClient &&
  this.walletClient
  ) {
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.targetAddress,
  abi: (await import(`../abi/lnv2-default`)).default,
  functionName: "depositProviderMargin",
  args: [BigInt(this.sourceChain.id), this.sourceToken.address, this.targetToken.address, margin],
  value: this.targetToken.type === "native" ? margin : undefined,
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
 
  async setFeeAndRate(baseFee: bigint, feeRate: number) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
  if (
+ account &&
  this.contract &&
  this.targetChain &&
  this.sourceToken &&
  this.targetToken &&
  this.publicClient &&
  this.walletClient
  ) {
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import(`../abi/lnv2-default`)).default,
  functionName: "setProviderFee",
  args: [BigInt(this.targetChain.id), this.sourceToken.address, this.targetToken.address, baseFee, feeRate],
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
 
  async withdrawMargin(recipientOrParams: Address | Hex, amount: bigint, fee: bigint) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
  if (
+ account &&
  this.contract &&
  this.sourceToken &&
  this.targetToken &&
@@ -117,14 +128,16 @@ export class LnBridgeV2Default extends LnBridgeBase {
  ) {
  const remoteChainId = BigInt(this.targetChain.id);
 
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import(`../abi/lnv2-default`)).default,
  functionName: "requestWithdrawMargin",
  args: [remoteChainId, this.sourceToken.address, this.targetToken.address, amount, recipientOrParams],
  gas: this.getTxGasLimit(),
  value: fee,
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }

apps/web/src/bridges/lnv2-opposite.ts

@@ -53,24 +53,27 @@ export class LnBridgeV2Opposite extends LnBridgeBase {
  if (askEstimateGas) {
  return this.sourcePublicClient.estimateContractGas(defaultParams);
  } else if (this.walletClient) {
- const hash = await this.walletClient.writeContract(defaultParams);
+ const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
+ const hash = await this.walletClient.writeContract(request);
  return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }
  }
 
  async updateFeeAndMargin(margin: bigint, baseFee: bigint, feeRate: number) {
  await this.validateNetwork("source");
+ const account = await this.getSigner();
 
  if (
+ account &&
  this.contract &&
  this.targetChain &&
  this.sourceToken &&
  this.targetToken &&
  this.publicClient &&
  this.walletClient
  ) {
- const hash = await this.walletClient.writeContract({
+ const { request } = await this.publicClient.simulateContract({
  address: this.contract.sourceAddress,
  abi: (await import(`../abi/lnv2-opposite`)).default,
  functionName: "updateProviderFeeAndMargin",
@@ -84,7 +87,9 @@ export class LnBridgeV2Opposite extends LnBridgeBase {
  ],
  value: this.sourceToken.type === "native" ? margin : undefined,
  gas: this.getTxGasLimit(),
+ account,
  });
+ const hash = await this.walletClient.writeContract(request);
  return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  }
  }

apps/web/src/components/chain-switch.tsx

@@ -10,7 +10,7 @@ import {
  useTransitionStyles,
 } from "@floating-ui/react";
 import { useMemo, useState } from "react";
-import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
 
 const chainOptions = getChainConfigs();
 
@@ -32,9 +32,8 @@ export default function ChainSwitch({ placement }: { placement?: Placement }) {
  const click = useClick(context);
  const dismiss = useDismiss(context);
  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
- const { switchNetwork } = useSwitchNetwork();
- const { chain } = useNetwork();
- const activeChain = useMemo(() => getChainConfig(chain?.id), [chain?.id]);
+ const { switchChain } = useSwitchChain();
+ const activeChain = useMemo(() => getChainConfig(account.chainId), [account.chainId]);
 
  return account.address ? (
  <>
@@ -80,9 +79,9 @@ export default function ChainSwitch({ placement }: { placement?: Placement }) {
  {chainOptions.map((option) => (
  <button
  className={`gap-medium px-large py-medium flex items-center transition-colors hover:bg-white/5 disabled:bg-white/10`}
- disabled={option.id === chain?.id}
+ disabled={option.id === account.chainId}
  key={option.id}
- onClick={() => switchNetwork?.(option.id)}
+ onClick={() => switchChain({ chainId: option.id })}
  >
  <img alt="Chain" width={22} height={22} src={getChainLogoSrc(option.logo)} className="rounded-full" />
  <span className="text-sm font-bold text-white">{option.name}</span>

apps/web/src/components/faucet.tsx

@@ -1,6 +1,6 @@
 import { formatBalance, getTokenLogoSrc, notifyError, notifyTransaction } from "../utils";
 import { PropsWithChildren, useCallback, useEffect, useState } from "react";
-import { useAccount, useNetwork, usePublicClient, useSwitchNetwork, useWalletClient } from "wagmi";
+import { useAccount, usePublicClient, useSwitchChain, useWalletClient } from "wagmi";
 import { Subscription, forkJoin, from } from "rxjs";
 import { parseUnits } from "viem";
 import { ChainConfig, Token } from "../types";
@@ -25,22 +25,23 @@ export default function Faucet({ sourceChain, sourceToken, onSuccess = () => und
 
  const publicClient = usePublicClient({ chainId: sourceChain.id });
  const { data: walletClient } = useWalletClient();
- const { switchNetwork } = useSwitchNetwork();
- const { address } = useAccount();
- const { chain } = useNetwork();
+ const { switchChain } = useSwitchChain();
+ const { address, chain } = useAccount();
 
  const handleClaim = useCallback(async () => {
  if (chain?.id !== sourceChain.id) {
- switchNetwork?.(sourceChain.id);
+ switchChain({ chainId: sourceChain.id });
  } else if (address && publicClient && walletClient) {
  try {
  setBusy(true);
- const hash = await walletClient.writeContract({
+ const { request } = await publicClient.simulateContract({
  address: sourceToken.address,
  abi,
  functionName: "faucet",
  args: [1n <= allow ? allow - 1n : allow],
+ account: address,
  });
+ const hash = await walletClient.writeContract(request);
  const receipt = await publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
  notifyTransaction(receipt, sourceChain);
  setBusy(false);
@@ -57,7 +58,7 @@ export default function Faucet({ sourceChain, sourceToken, onSuccess = () => und
  setBusy(false);
  }
  }
- }, [allow, chain, address, sourceChain, sourceToken, publicClient, walletClient, onSuccess, switchNetwork]);
+ }, [allow, chain, address, sourceChain, sourceToken, publicClient, walletClient, onSuccess, switchChain]);
 
  useEffect(() => {
  let sub$$: Subscription | undefined;