Skip to content

Commit 619adf5

Browse files
JayJay1024JayJay1024
committed
Refactor wallets connection
1 parent 6ea0dc4 commit 619adf5

23 files changed

+1598
-937
lines changed

‎apps/web/.env

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
VITE_WALLET_CONNECT_ID=2719448e2ce94fdd269a3c8587123bcc
1+
VITE_WALLET_CONNECT_PROJECT_ID=d155df487dbbf1140fa0418387f85fe1

‎apps/web/package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@
2020
"@apollo/client": "^3.10.3",
2121
"@floating-ui/react": "^0.26.14",
2222
"@helixbridge/helixconf": "1.1.15",
23-
"@rainbow-me/rainbowkit": "^1.3.7",
23+
"@reown/appkit": "^1.0.7",
24+
"@reown/appkit-adapter-wagmi": "^1.0.7",
2425
"@sentry/react": "^8.30.0",
2526
"@sentry/vite-plugin": "^2.22.4",
27+
"@tanstack/react-query": "^5.59.0",
2628
"date-fns": "^3.6.0",
2729
"date-fns-tz": "^3.1.3",
2830
"graphql": "^16.8.1",
@@ -35,8 +37,8 @@
3537
"react-transition-group": "^4.4.5",
3638
"rxjs": "^7.8.1",
3739
"sort-by": "^0.0.2",
38-
"viem": "^1.21.4",
39-
"wagmi": "^1.4.13"
40+
"viem": "^2.21.19",
41+
"wagmi": "^2.12.17"
4042
},
4143
"devDependencies": {
4244
"@types/react": "^18.2.66",

‎apps/web/src/bridges/base.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,15 @@ import {
1212
TransferOptions,
1313
} from "../types";
1414
import { getBalance } from "../utils";
15-
import { Address, PublicClient as ViemPublicClient, TransactionReceipt, createPublicClient, http } from "viem";
16-
import { PublicClient as WagmiPublicClient, WalletClient } from "wagmi";
15+
import {
16+
Address,
17+
PublicClient as ViemPublicClient,
18+
TransactionReceipt,
19+
createPublicClient,
20+
http,
21+
PublicClient,
22+
WalletClient,
23+
} from "viem";
1724
import { CONFIRMATION_BLOCKS } from "../config";
1825

1926
export abstract class BaseBridge {
@@ -35,7 +42,7 @@ export abstract class BaseBridge {
3542

3643
protected readonly sourcePublicClient: ViemPublicClient | undefined;
3744
protected readonly targetPublicClient: ViemPublicClient | undefined;
38-
protected readonly publicClient?: WagmiPublicClient; // The public client to which the wallet is connected
45+
protected readonly publicClient?: PublicClient; // The public client to which the wallet is connected
3946
protected readonly walletClient?: WalletClient | null;
4047

4148
constructor(args: BridgeConstructorArgs) {

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export class LnBridgeV3 extends LnBridgeBase {
5454
if (askEstimateGas) {
5555
return this.sourcePublicClient.estimateContractGas(defaultParams);
5656
} else if (this.walletClient) {
57-
const hash = await this.walletClient.writeContract(defaultParams);
57+
const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
58+
const hash = await this.walletClient.writeContract(request);
5859
return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
5960
}
6061
}
@@ -102,16 +103,18 @@ export class LnBridgeV3 extends LnBridgeBase {
102103

103104
async registerLnProvider(baseFee: bigint, feeRate: number, transferLimit: bigint) {
104105
await this.validateNetwork("source");
106+
const account = await this.getSigner();
105107

106108
if (
109+
account &&
107110
this.contract &&
108111
this.publicClient &&
109112
this.walletClient &&
110113
this.targetChain &&
111114
this.sourceToken &&
112115
this.targetToken
113116
) {
114-
const hash = await this.walletClient.writeContract({
117+
const { request } = await this.publicClient.simulateContract({
115118
address: this.contract.sourceAddress,
116119
abi: (await import("../abi/lnbridge-v3")).default,
117120
functionName: "registerLnProvider",
@@ -124,37 +127,46 @@ export class LnBridgeV3 extends LnBridgeBase {
124127
transferLimit,
125128
],
126129
gas: this.getTxGasLimit(),
130+
account,
127131
});
132+
const hash = await this.walletClient.writeContract(request);
128133
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
129134
}
130135
}
131136

132137
async depositPenaltyReserve(amount: bigint) {
133138
await this.validateNetwork("source");
139+
const account = await this.getSigner();
134140

135-
if (this.contract && this.publicClient && this.walletClient && this.sourceToken) {
136-
const hash = await this.walletClient.writeContract({
141+
if (account && this.contract && this.publicClient && this.walletClient && this.sourceToken) {
142+
const { request } = await this.publicClient.simulateContract({
137143
address: this.contract.sourceAddress,
138144
abi: (await import("../abi/lnbridge-v3")).default,
139145
functionName: "depositPenaltyReserve",
140146
args: [this.sourceToken.address, amount],
141147
value: this.sourceToken.type === "native" ? amount : undefined,
142148
gas: this.getTxGasLimit(),
149+
account,
143150
});
151+
const hash = await this.walletClient.writeContract(request);
144152
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
145153
}
146154
}
147155

148156
async withdrawPenaltyReserve(amount: bigint) {
149157
await this.validateNetwork("source");
158+
const account = await this.getSigner();
150159

151-
if (this.contract && this.sourceToken && this.publicClient && this.walletClient) {
152-
const hash = await this.walletClient.writeContract({
160+
if (account && this.contract && this.sourceToken && this.publicClient && this.walletClient) {
161+
const { request } = await this.publicClient.simulateContract({
153162
address: this.contract.sourceAddress,
154163
abi: (await import("../abi/lnbridge-v3")).default,
155164
functionName: "withdrawPenaltyReserve",
156165
args: [this.sourceToken.address, amount],
166+
gas: this.getTxGasLimit(),
167+
account,
157168
});
169+
const hash = await this.walletClient.writeContract(request);
158170
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
159171
}
160172
}
@@ -197,18 +209,21 @@ export class LnBridgeV3 extends LnBridgeBase {
197209

198210
async requestWithdrawLiquidity(relayer: Address, transferIds: Hex[], messageFee: bigint, extParams: Hex) {
199211
await this.validateNetwork("target");
212+
const account = await this.getSigner();
200213

201-
if (this.contract && this.sourceChain && this.publicClient && this.walletClient) {
214+
if (account && this.contract && this.sourceChain && this.publicClient && this.walletClient) {
202215
const remoteChainId = BigInt(this.sourceChain.id);
203216

204-
const hash = await this.walletClient.writeContract({
217+
const { request } = await this.publicClient.simulateContract({
205218
address: this.contract.targetAddress,
206219
abi: (await import("../abi/lnbridge-v3")).default,
207220
functionName: "requestWithdrawLiquidity",
208221
args: [remoteChainId, transferIds, relayer, extParams],
209222
value: messageFee,
210223
gas: this.getTxGasLimit(),
224+
account,
211225
});
226+
const hash = await this.walletClient.writeContract(request);
212227
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
213228
}
214229
}

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,61 +53,72 @@ export class LnBridgeV2Default extends LnBridgeBase {
5353
if (askEstimateGas) {
5454
return this.sourcePublicClient.estimateContractGas(defaultParams);
5555
} else if (this.walletClient) {
56-
const hash = await this.walletClient.writeContract(defaultParams);
56+
const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
57+
const hash = await this.walletClient.writeContract(request);
5758
return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
5859
}
5960
}
6061
}
6162

6263
async depositMargin(margin: bigint) {
6364
await this.validateNetwork("target");
65+
const account = await this.getSigner();
6466

6567
if (
68+
account &&
6669
this.contract &&
6770
this.sourceChain &&
6871
this.sourceToken &&
6972
this.targetToken &&
7073
this.publicClient &&
7174
this.walletClient
7275
) {
73-
const hash = await this.walletClient.writeContract({
76+
const { request } = await this.publicClient.simulateContract({
7477
address: this.contract.targetAddress,
7578
abi: (await import(`../abi/lnv2-default`)).default,
7679
functionName: "depositProviderMargin",
7780
args: [BigInt(this.sourceChain.id), this.sourceToken.address, this.targetToken.address, margin],
7881
value: this.targetToken.type === "native" ? margin : undefined,
7982
gas: this.getTxGasLimit(),
83+
account,
8084
});
85+
const hash = await this.walletClient.writeContract(request);
8186
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
8287
}
8388
}
8489

8590
async setFeeAndRate(baseFee: bigint, feeRate: number) {
8691
await this.validateNetwork("source");
92+
const account = await this.getSigner();
8793

8894
if (
95+
account &&
8996
this.contract &&
9097
this.targetChain &&
9198
this.sourceToken &&
9299
this.targetToken &&
93100
this.publicClient &&
94101
this.walletClient
95102
) {
96-
const hash = await this.walletClient.writeContract({
103+
const { request } = await this.publicClient.simulateContract({
97104
address: this.contract.sourceAddress,
98105
abi: (await import(`../abi/lnv2-default`)).default,
99106
functionName: "setProviderFee",
100107
args: [BigInt(this.targetChain.id), this.sourceToken.address, this.targetToken.address, baseFee, feeRate],
101108
gas: this.getTxGasLimit(),
109+
account,
102110
});
111+
const hash = await this.walletClient.writeContract(request);
103112
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
104113
}
105114
}
106115

107116
async withdrawMargin(recipientOrParams: Address | Hex, amount: bigint, fee: bigint) {
108117
await this.validateNetwork("source");
118+
const account = await this.getSigner();
109119

110120
if (
121+
account &&
111122
this.contract &&
112123
this.sourceToken &&
113124
this.targetToken &&
@@ -117,14 +128,16 @@ export class LnBridgeV2Default extends LnBridgeBase {
117128
) {
118129
const remoteChainId = BigInt(this.targetChain.id);
119130

120-
const hash = await this.walletClient.writeContract({
131+
const { request } = await this.publicClient.simulateContract({
121132
address: this.contract.sourceAddress,
122133
abi: (await import(`../abi/lnv2-default`)).default,
123134
functionName: "requestWithdrawMargin",
124135
args: [remoteChainId, this.sourceToken.address, this.targetToken.address, amount, recipientOrParams],
125136
gas: this.getTxGasLimit(),
126137
value: fee,
138+
account,
127139
});
140+
const hash = await this.walletClient.writeContract(request);
128141
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
129142
}
130143
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,27 @@ export class LnBridgeV2Opposite extends LnBridgeBase {
5353
if (askEstimateGas) {
5454
return this.sourcePublicClient.estimateContractGas(defaultParams);
5555
} else if (this.walletClient) {
56-
const hash = await this.walletClient.writeContract(defaultParams);
56+
const { request } = await this.sourcePublicClient.simulateContract(defaultParams);
57+
const hash = await this.walletClient.writeContract(request);
5758
return this.sourcePublicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
5859
}
5960
}
6061
}
6162

6263
async updateFeeAndMargin(margin: bigint, baseFee: bigint, feeRate: number) {
6364
await this.validateNetwork("source");
65+
const account = await this.getSigner();
6466

6567
if (
68+
account &&
6669
this.contract &&
6770
this.targetChain &&
6871
this.sourceToken &&
6972
this.targetToken &&
7073
this.publicClient &&
7174
this.walletClient
7275
) {
73-
const hash = await this.walletClient.writeContract({
76+
const { request } = await this.publicClient.simulateContract({
7477
address: this.contract.sourceAddress,
7578
abi: (await import(`../abi/lnv2-opposite`)).default,
7679
functionName: "updateProviderFeeAndMargin",
@@ -84,7 +87,9 @@ export class LnBridgeV2Opposite extends LnBridgeBase {
8487
],
8588
value: this.sourceToken.type === "native" ? margin : undefined,
8689
gas: this.getTxGasLimit(),
90+
account,
8791
});
92+
const hash = await this.walletClient.writeContract(request);
8893
return this.publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
8994
}
9095
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
useTransitionStyles,
1111
} from "@floating-ui/react";
1212
import { useMemo, useState } from "react";
13-
import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
13+
import { useAccount, useSwitchChain } from "wagmi";
1414

1515
const chainOptions = getChainConfigs();
1616

@@ -32,9 +32,8 @@ export default function ChainSwitch({ placement }: { placement?: Placement }) {
3232
const click = useClick(context);
3333
const dismiss = useDismiss(context);
3434
const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
35-
const { switchNetwork } = useSwitchNetwork();
36-
const { chain } = useNetwork();
37-
const activeChain = useMemo(() => getChainConfig(chain?.id), [chain?.id]);
35+
const { switchChain } = useSwitchChain();
36+
const activeChain = useMemo(() => getChainConfig(account.chainId), [account.chainId]);
3837

3938
return account.address ? (
4039
<>
@@ -80,9 +79,9 @@ export default function ChainSwitch({ placement }: { placement?: Placement }) {
8079
{chainOptions.map((option) => (
8180
<button
8281
className={`gap-medium px-large py-medium flex items-center transition-colors hover:bg-white/5 disabled:bg-white/10`}
83-
disabled={option.id === chain?.id}
82+
disabled={option.id === account.chainId}
8483
key={option.id}
85-
onClick={() => switchNetwork?.(option.id)}
84+
onClick={() => switchChain({ chainId: option.id })}
8685
>
8786
<img alt="Chain" width={22} height={22} src={getChainLogoSrc(option.logo)} className="rounded-full" />
8887
<span className="text-sm font-bold text-white">{option.name}</span>

‎apps/web/src/components/faucet.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { formatBalance, getTokenLogoSrc, notifyError, notifyTransaction } from "../utils";
22
import { PropsWithChildren, useCallback, useEffect, useState } from "react";
3-
import { useAccount, useNetwork, usePublicClient, useSwitchNetwork, useWalletClient } from "wagmi";
3+
import { useAccount, usePublicClient, useSwitchChain, useWalletClient } from "wagmi";
44
import { Subscription, forkJoin, from } from "rxjs";
55
import { parseUnits } from "viem";
66
import { ChainConfig, Token } from "../types";
@@ -25,22 +25,23 @@ export default function Faucet({ sourceChain, sourceToken, onSuccess = () => und
2525

2626
const publicClient = usePublicClient({ chainId: sourceChain.id });
2727
const { data: walletClient } = useWalletClient();
28-
const { switchNetwork } = useSwitchNetwork();
29-
const { address } = useAccount();
30-
const { chain } = useNetwork();
28+
const { switchChain } = useSwitchChain();
29+
const { address, chain } = useAccount();
3130

3231
const handleClaim = useCallback(async () => {
3332
if (chain?.id !== sourceChain.id) {
34-
switchNetwork?.(sourceChain.id);
33+
switchChain({ chainId: sourceChain.id });
3534
} else if (address && publicClient && walletClient) {
3635
try {
3736
setBusy(true);
38-
const hash = await walletClient.writeContract({
37+
const { request } = await publicClient.simulateContract({
3938
address: sourceToken.address,
4039
abi,
4140
functionName: "faucet",
4241
args: [1n <= allow ? allow - 1n : allow],
42+
account: address,
4343
});
44+
const hash = await walletClient.writeContract(request);
4445
const receipt = await publicClient.waitForTransactionReceipt({ hash, confirmations: CONFIRMATION_BLOCKS });
4546
notifyTransaction(receipt, sourceChain);
4647
setBusy(false);
@@ -57,7 +58,7 @@ export default function Faucet({ sourceChain, sourceToken, onSuccess = () => und
5758
setBusy(false);
5859
}
5960
}
60-
}, [allow, chain, address, sourceChain, sourceToken, publicClient, walletClient, onSuccess, switchNetwork]);
61+
}, [allow, chain, address, sourceChain, sourceToken, publicClient, walletClient, onSuccess, switchChain]);
6162

6263
useEffect(() => {
6364
let sub$$: Subscription | undefined;

0 commit comments

Comments
 (0)