Skip to content

Commit 3acdc26

Browse files
ShubhamParkhiShubhamParkhi
committed
feat(web): migrate to wagmi v2
1 parent 6cacf67 commit 3acdc26

File tree

32 files changed

+1542
-859
lines changed

32 files changed

+1542
-859
lines changed

‎contracts/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@types/chai": "^4.2.0",
6464
"@types/mocha": "^10.0.0",
6565
"@types/node": "^16.0.0",
66-
"@wagmi/cli": "^1.5.2",
66+
"@wagmi/cli": "^2.0.3",
6767
"abitype": "^0.10.3",
6868
"chai": "^4.2.0",
6969
"dotenv": "^16.3.1",

‎web/package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"@typescript-eslint/eslint-plugin": "^5.62.0",
5757
"@typescript-eslint/parser": "^5.62.0",
5858
"@typescript-eslint/utils": "^5.62.0",
59-
"@wagmi/cli": "^1.5.2",
59+
"@wagmi/cli": "^2.0.3",
6060
"eslint": "^8.56.0",
6161
"eslint-config-prettier": "^8.10.0",
6262
"eslint-plugin-react": "^7.33.2",
@@ -77,9 +77,8 @@
7777
"@sentry/react": "^7.93.0",
7878
"@sentry/tracing": "^7.93.0",
7979
"@supabase/supabase-js": "^2.39.3",
80-
"@tanstack/react-query": "^4.28.0",
81-
"@web3modal/ethereum": "^2.7.1",
82-
"@web3modal/react": "^2.2.2",
80+
"@tanstack/react-query": "^5.40.1",
81+
"@web3modal/wagmi": "^4.1.10",
8382
"@yornaath/batshit": "^0.9.0",
8483
"alchemy-sdk": "^3.3.1",
8584
"amqplib": "^0.10.4",
@@ -108,8 +107,8 @@
108107
"react-use": "^17.4.3",
109108
"siwe": "^2.3.2",
110109
"styled-components": "^5.3.11",
111-
"viem": "^1.21.4",
110+
"viem": "^2.1.0",
112111
"vite": "^5.2.10",
113-
"wagmi": "^1.4.13"
112+
"wagmi": "^2.2.1"
114113
}
115114
}

‎web/src/app.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Web3Provider from "context/Web3Provider";
77
import IsListProvider from "context/IsListProvider";
88
import QueryClientProvider from "context/QueryClientProvider";
99
import StyledComponentsProvider from "context/StyledComponentsProvider";
10-
import RefetchOnBlock from "context/RefetchOnBlock";
1110
import GraphqlBatcherProvider from "context/GraphqlBatcher";
1211
import Layout from "layout/index";
1312
import NewTransaction from "./pages/NewTransaction";
@@ -19,7 +18,6 @@ const App: React.FC = () => {
1918
return (
2019
<StyledComponentsProvider>
2120
<QueryClientProvider>
22-
<RefetchOnBlock />
2321
<GraphqlBatcherProvider>
2422
<Web3Provider>
2523
<IsListProvider>

‎web/src/components/ConnectWallet/AccountDisplay.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
4-
import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
3+
54
import Identicon from "react-identicons";
5+
import { isAddress } from "viem";
6+
import { normalize } from "viem/ens";
7+
import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
8+
9+
import { getChain } from "consts/chains";
610
import { shortenAddress } from "utils/shortenAddress";
711

12+
import { landscapeStyle } from "styles/landscapeStyle";
13+
814
const Container = styled.div`
915
display: flex;
1016
flex-direction: column;
@@ -110,7 +116,7 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
110116
chainId: 1,
111117
});
112118
const { data: avatar } = useEnsAvatar({
113-
name,
119+
name: normalize(name ?? ""),
114120
chainId: 1,
115121
});
116122

@@ -134,11 +140,12 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
134140
chainId: 1,
135141
});
136142

137-
return <label>{data ?? (address && shortenAddress(address))}</label>;
143+
return <label>{data ?? (isAddress(address!) ? shortenAddress(address) : address)}</label>;
138144
};
139145

140146
export const ChainDisplay: React.FC = () => {
141147
const chainId = useChainId();
148+
const chain = getChain(chainId);
142149
return <label>{chain?.name}</label>;
143150
};
144151

‎web/src/components/ConnectWallet/index.tsx‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,57 @@
1-
import React from "react";
2-
import { useAccount, useChainId, useSwitchNetwork } from "wagmi";
3-
import { useWeb3Modal } from "@web3modal/react";
1+
import React, { useCallback } from "react";
2+
import { useAccount, useChainId, useSwitchChain } from "wagmi";
3+
import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
44
import { Button } from "@kleros/ui-components-library";
55
import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
66
import AccountDisplay from "./AccountDisplay";
77

8-
export const SwitchChainButton: React.FC = () => {
9-
const { switchNetwork, isLoading } = useSwitchNetwork();
10-
const handleSwitch = () => {
11-
if (!switchNetwork) {
8+
export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => {
9+
const { switchChain, isPending } = useSwitchChain();
10+
const handleSwitch = useCallback(() => {
11+
if (!switchChain) {
1212
console.error("Cannot switch network. Please do it manually.");
1313
return;
1414
}
1515
try {
16-
switchNetwork(DEFAULT_CHAIN);
16+
switchChain({ chainId: DEFAULT_CHAIN });
1717
} catch (err) {
1818
console.error(err);
1919
}
20-
};
20+
}, [switchChain]);
2121
return (
2222
<Button
23-
isLoading={isLoading}
24-
disabled={isLoading}
23+
{...{ className }}
24+
isLoading={isPending}
25+
disabled={isPending}
2526
text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
2627
onClick={handleSwitch}
2728
/>
2829
);
2930
};
3031

31-
const ConnectButton: React.FC = () => {
32-
const { open, isOpen } = useWeb3Modal();
33-
return <Button disabled={isOpen} small text={"Connect"} onClick={async () => open({ route: "ConnectWallet" })} />;
32+
33+
const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
34+
const { open } = useWeb3Modal();
35+
const { open: isOpen } = useWeb3ModalState();
36+
return (
37+
<Button
38+
{...{ className }}
39+
disabled={isOpen}
40+
small
41+
text={"Connect"}
42+
onClick={async () => open({ view: "Connect" })}
43+
/>
44+
);
3445
};
3546

36-
const ConnectWallet: React.FC = () => {
47+
const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
3748
const chainId = useChainId();
3849
const { isConnected } = useAccount();
3950
if (isConnected) {
4051
if (chainId !== DEFAULT_CHAIN) {
41-
return <SwitchChainButton />;
52+
return <SwitchChainButton {...{ className }} />;
4253
} else return <AccountDisplay />;
43-
} else return <ConnectButton />;
54+
} else return <ConnectButton {...{ className }} />;
4455
};
4556

4657
export default ConnectWallet;

‎web/src/components/EnsureAuth.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React, { useMemo, useState } from "react";
2-
32
import * as jwt from "jose";
43
import { SiweMessage } from "siwe";
54
import { useAccount, useChainId, useSignMessage } from "wagmi";
6-
75
import { Button } from "@kleros/ui-components-library";
8-
96
import { DEFAULT_CHAIN } from "consts/chains";
107
import { useSessionStorage } from "hooks/useSessionStorage";
118
import { authoriseUser, getNonce } from "utils/authoriseUser";
@@ -116,4 +113,4 @@ async function createSiweMessage(address: `0x${string}`, statement: string, chai
116113
expirationTime,
117114
});
118115
return message.prepareMessage();
119-
}
116+
}

‎web/src/components/EnsureChain.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from "react";
22
import { DEFAULT_CHAIN } from "consts/chains";
3-
import { useChainId } from "wagmi";
3+
import { useAccount } from "wagmi";
44
import ConnectWallet from "components/ConnectWallet";
55

66
interface IEnsureChain {
77
children: React.ReactElement;
88
}
99

1010
export const EnsureChain: React.FC<IEnsureChain> = ({ children }) => {
11-
const chainId = useChainId();
11+
const { chainId } = useAccount();
1212

13-
return chainId && chainId === DEFAULT_CHAIN ? children : <ConnectWallet />;
13+
return chainId === DEFAULT_CHAIN ? children : <ConnectWallet />;
1414
};

‎web/src/components/PreviewCard/Terms/Description.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,17 @@ const Description: React.FC<IDescription> = ({
7070
deadline,
7171
assetSymbol,
7272
}) => {
73-
const buyerEns = useEnsName({ address: buyerAddress, chainId: 1 });
74-
const sellerEns = useEnsName({ address: sellerAddress, chainId: 1 });
73+
const { data: buyerEns } = useEnsName({
74+
address: buyerAddress as `0x${string}`,
75+
chainId: 1
76+
});
77+
const { data: sellerEns } = useEnsName({
78+
address: sellerAddress as `0x${string}`,
79+
chainId: 1
80+
});
7581

76-
const displayBuyerAddress = buyerEns.data || shortenAddress(buyerAddress);
77-
const displaySellerAddress = sellerEns.data || shortenAddress(sellerAddress);
82+
const displayBuyerAddress = buyerEns || shortenAddress(buyerAddress);
83+
const displaySellerAddress = sellerEns || shortenAddress(sellerAddress);
7884

7985
const generalEscrowSummary = (
8086
<>
@@ -143,4 +149,4 @@ const Description: React.FC<IDescription> = ({
143149
);
144150
};
145151

146-
export default Description;
152+
export default Description;

‎web/src/components/TransactionInfo/index.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,17 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
105105
const { isList } = useIsList();
106106
const displayAsList = isList && !overrideIsList;
107107

108-
const buyerEns = useEnsName({ address: buyerAddress, chainId: 1 });
109-
const sellerEns = useEnsName({ address: sellerAddress, chainId: 1 });
108+
const { data: buyerEns } = useEnsName({
109+
address: buyerAddress as `0x${string}`,
110+
chainId: 1
111+
});
112+
const { data: sellerEns } = useEnsName({
113+
address: sellerAddress as `0x${string}`,
114+
chainId: 1
115+
});
110116

111-
const displayBuyerAddress = buyerEns.data || shortenAddress(buyerAddress);
112-
const displaySellerAddress = sellerEns.data || shortenAddress(sellerAddress);
117+
const displayBuyerAddress = buyerEns || shortenAddress(buyerAddress);
118+
const displaySellerAddress = sellerEns || shortenAddress(sellerAddress);
113119

114120
return (
115121
<Container isList={displayAsList} isPreview={isPreview}>
@@ -187,4 +193,4 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
187193
);
188194
};
189195

190-
export default TransactionInfo;
196+
export default TransactionInfo;

‎web/src/consts/chains.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { extractChain } from "viem";
12
import { Chain, arbitrumSepolia, gnosisChiado } from "wagmi/chains";
23

34
export const DEFAULT_CHAIN = arbitrumSepolia.id;
@@ -10,4 +11,13 @@ export const SUPPORTED_CHAIN_IDS = Object.keys(SUPPORTED_CHAINS);
1011
export const QUERY_CHAINS: Record<number, Chain> = {
1112
[gnosisChiado.id]: gnosisChiado,
1213
};
14+
15+
export const ALL_CHAINS = [...Object.values(SUPPORTED_CHAINS), ...Object.values(QUERY_CHAINS)];
16+
1317
export const QUERY_CHAIN_IDS = Object.keys(QUERY_CHAINS);
18+
19+
export const getChain = (chainId: number): Chain | null =>
20+
extractChain({
21+
chains: ALL_CHAINS,
22+
id: chainId,
23+
});

0 commit comments

Comments
 (0)