Skip to content

Commit ba621a8

Browse files
jaybuidljaybuidl
authored
Merge pull request #1866 from kleros/chore/migrate-to-reown
chore(web): migrate-to-reown
2 parents 269b145 + d594c19 commit ba621a8

File tree

16 files changed

+874
-912
lines changed

16 files changed

+874
-912
lines changed

‎kleros-app/README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,17 @@ import { WagmiProvider } from 'wagmi'
2727
import { config } from './config'
2828
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2929
import { AtlasProvider, Products } from "@kleros/kleros-app";
30+
import { useConfig } from 'wagmi'
3031

3132
const queryClient = new QueryClient()
3233

3334
function App() {
35+
const wagmiConfig = useConfig()
36+
3437
return
3538
<WagmiProvider config={config}>
3639
<QueryClientProvider client={queryClient}>
37-
<AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
40+
<AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig: wagmiConfig }}>
3841
...
3942
</AtlasProvider>
4043
</QueryClientProvider>

‎kleros-app/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
"typescript": "^5.6.3",
5050
"vite": "^5.4.11",
5151
"vite-plugin-dts": "^4.3.0",
52-
"vite-plugin-node-polyfills": "^0.22.0"
52+
"vite-plugin-node-polyfills": "^0.22.0",
53+
"wagmi": "^2.14.0"
5354
},
5455
"dependencies": {
5556
"jose": "^5.9.6"
@@ -61,6 +62,6 @@
6162
"react": "^18.3.1",
6263
"react-dom": "^18.3.1",
6364
"viem": "^2.21.42",
64-
"wagmi": "^2.13.5"
65+
"wagmi": "^2.14.0"
6566
}
6667
}

‎kleros-app/src/lib/atlas/providers/AtlasProvider.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo, createContext, useContext, useState, useCallback, useEf
22
import { useQuery, useQueryClient } from "@tanstack/react-query";
33
import { GraphQLClient } from "graphql-request";
44
import { decodeJwt } from "jose";
5-
import { useAccount, useChainId, useSignMessage } from "wagmi";
5+
import { useAccount, useChainId, useSignMessage, type Config } from "wagmi";
66
import {
77
createMessage,
88
getNonce,
@@ -53,11 +53,12 @@ const Context = createContext<IAtlasProvider | undefined>(undefined);
5353
interface AtlasConfig {
5454
uri: string;
5555
product: Products;
56+
wagmiConfig: Config;
5657
}
5758

5859
export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.ReactNode }> = ({ children, config }) => {
59-
const { address } = useAccount();
60-
const chainId = useChainId();
60+
const { address } = useAccount({ config: config.wagmiConfig });
61+
const chainId = useChainId({ config: config.wagmiConfig });
6162
const queryClient = useQueryClient();
6263

6364
const [authToken, setAuthToken] = useSessionStorage<string | undefined>("authToken", undefined);
@@ -66,7 +67,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
6667
const [isUpdatingUser, setIsUpdatingUser] = useState(false);
6768
const [isVerified, setIsVerified] = useState(false);
6869
const [isUploadingFile, setIsUploadingFile] = useState(false);
69-
const { signMessageAsync } = useSignMessage();
70+
const { signMessageAsync } = useSignMessage({ config: config.wagmiConfig });
7071

7172
const atlasGqlClient = useMemo(() => {
7273
const headers = authToken

‎web-devtools/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,11 @@
5050
"@kleros/kleros-sdk": "workspace:^",
5151
"@kleros/kleros-v2-contracts": "workspace:^",
5252
"@kleros/ui-components-library": "^2.20.0",
53+
"@reown/appkit": "^1.6.5",
54+
"@reown/appkit-adapter-wagmi": "^1.6.5",
5355
"@tanstack/react-query": "^5.61.0",
5456
"@wagmi/connectors": "^5.5.0",
55-
"@wagmi/core": "^2.15.0",
56-
"@web3modal/wagmi": "^4.2.3",
57+
"@wagmi/core": "^2.16.3",
5758
"@yornaath/batshit": "^0.9.0",
5859
"graphql": "^16.9.0",
5960
"graphql-request": "^7.1.2",
@@ -69,6 +70,6 @@
6970
"typewriter-effect": "^2.21.0",
7071
"vanilla-jsoneditor": "^0.21.6",
7172
"viem": "^2.21.50",
72-
"wagmi": "^2.13.5"
73+
"wagmi": "^2.14.10"
7374
}
7475
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useState } from "react";
22

3-
import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
3+
import { useAppKit, useAppKitState } from "@reown/appkit/react";
44
import { useAccount, useSwitchChain } from "wagmi";
55

66
import { Button } from "@kleros/ui-components-library";
@@ -33,8 +33,8 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
3333
};
3434

3535
const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
36-
const { open } = useWeb3Modal();
37-
const { open: isOpen } = useWeb3ModalState();
36+
const { open } = useAppKit();
37+
const { open: isOpen } = useAppKitState();
3838
return (
3939
<Button
4040
{...{ className }}

‎web-devtools/src/consts/chains.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { type Chain, mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis } from "viem/chains";
1+
import { mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis, type AppKitNetwork } from "@reown/appkit/networks";
22

33
import { isProductionDeployment } from "./index";
44

55
export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;
66

7-
export const SUPPORTED_CHAINS: Record<number, Chain> = {
7+
export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
88
[isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
99
};
1010

11-
export const QUERY_CHAINS: Record<number, Chain> = {
11+
export const QUERY_CHAINS: Record<number, AppKitNetwork> = {
1212
[isProductionDeployment() ? gnosis.id : gnosisChiado.id]: isProductionDeployment() ? gnosis : gnosisChiado,
1313
[mainnet.id]: mainnet,
1414
};

‎web-devtools/src/context/Web3Provider.tsx

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from "react";
22

3-
import { createWeb3Modal } from "@web3modal/wagmi/react";
43
import { type Chain } from "viem";
5-
import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
6-
import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "wagmi/chains";
7-
import { walletConnect } from "wagmi/connectors";
4+
import { fallback, http, WagmiProvider, webSocket } from "wagmi";
5+
import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "@reown/appkit/networks";
86

97
import { configureSDK } from "@kleros/kleros-sdk/src/sdk";
108

119
import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
1210
import { isProductionDeployment } from "consts/index";
13-
11+
import { createAppKit } from "@reown/appkit/react";
12+
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
1413
import { theme } from "styles/Theme";
1514

1615
const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
@@ -74,10 +73,10 @@ if (!projectId) {
7473
throw new Error("WalletConnect project ID is not set in NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID environment variable.");
7574
}
7675

77-
export const wagmiConfig = createConfig({
78-
chains,
76+
export const wagmiAdapter = new WagmiAdapter({
77+
networks: chains,
78+
projectId,
7979
transports,
80-
connectors: [walletConnect({ projectId })],
8180
});
8281

8382
configureSDK({
@@ -87,18 +86,18 @@ configureSDK({
8786
},
8887
});
8988

90-
createWeb3Modal({
91-
wagmiConfig,
89+
createAppKit({
90+
adapters: [wagmiAdapter],
91+
networks: chains,
92+
defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
9293
projectId,
93-
defaultChain: isProduction ? arbitrum : arbitrumSepolia,
9494
themeVariables: {
9595
"--w3m-color-mix": theme.klerosUIComponentsPrimaryPurple,
9696
"--w3m-color-mix-strength": 20,
9797
},
9898
});
99-
10099
const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
101-
return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
100+
return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
102101
};
103102

104103
export default Web3Provider;

‎web-devtools/src/utils/getDisputeRequestParamsFromTxn.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { getPublicClient } from "@wagmi/core";
22
import { type GetTransactionReceiptReturnType, decodeEventLog, getEventSelector } from "viem";
33

4-
import { wagmiConfig } from "context/Web3Provider";
4+
import { wagmiAdapter } from "context/Web3Provider";
55
import { iArbitrableV2Abi } from "hooks/contracts/generated";
66
import { isUndefined } from "utils/isUndefined";
77

88
export const getDisputeRequestParamsFromTxn = async (hash: `0x${string}`, chainId: number) => {
99
try {
10-
const publicClient = getPublicClient(wagmiConfig, { chainId });
10+
const publicClient = getPublicClient(wagmiAdapter.wagmiConfig, { chainId });
1111
if (!publicClient) return;
1212
const txn: GetTransactionReceiptReturnType = await publicClient.getTransactionReceipt({
1313
hash,

‎web/package.json

+8-5
Original file line numberDiff line numberDiff line change
@@ -79,22 +79,25 @@
7979
"vite-tsconfig-paths": "^4.3.2"
8080
},
8181
"dependencies": {
82+
"@bigmi/react": "^0.1.0",
8283
"@cyntler/react-doc-viewer": "^1.17.0",
8384
"@graphql-tools/batch-execute": "^9.0.11",
8485
"@graphql-tools/utils": "^10.7.2",
8586
"@kleros/kleros-app": "workspace:^",
8687
"@kleros/kleros-sdk": "workspace:^",
8788
"@kleros/kleros-v2-contracts": "workspace:^",
8889
"@kleros/ui-components-library": "^2.20.0",
89-
"@lifi/wallet-management": "^3.4.6",
90-
"@lifi/widget": "^3.12.3",
90+
"@lifi/wallet-management": "^3.6.0",
91+
"@lifi/widget": "^3.14.2",
92+
"@reown/appkit": "^1.6.5",
93+
"@reown/appkit-adapter-wagmi": "^1.6.5",
9194
"@sentry/react": "^7.120.0",
9295
"@sentry/tracing": "^7.120.0",
96+
"@solana/wallet-adapter-react": "^0.15.35",
9397
"@tanstack/react-query": "^5.62.2",
9498
"@types/react-modal": "^3.16.3",
9599
"@wagmi/connectors": "^5.5.0",
96-
"@wagmi/core": "^2.15.0",
97-
"@web3modal/wagmi": "^4.2.3",
100+
"@wagmi/core": "^2.16.3",
98101
"@yornaath/batshit": "^0.9.0",
99102
"chart.js": "^3.9.1",
100103
"chartjs-adapter-moment": "^1.0.1",
@@ -123,6 +126,6 @@
123126
"styled-components": "^5.3.3",
124127
"subgraph-status": "^1.2.3",
125128
"viem": "^2.21.54",
126-
"wagmi": "^2.13.5"
129+
"wagmi": "^2.14.10"
127130
}
128131
}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback } from "react";
22

3-
import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
3+
import { useAppKit, useAppKitState } from "@reown/appkit/react";
44
import { useAccount, useSwitchChain } from "wagmi";
55

66
import { Button } from "@kleros/ui-components-library";
@@ -35,8 +35,8 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
3535
};
3636

3737
const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
38-
const { open } = useWeb3Modal();
39-
const { open: isOpen } = useWeb3ModalState();
38+
const { open } = useAppKit();
39+
const { open: isOpen } = useAppKitState();
4040
return (
4141
<Button
4242
{...{ className }}

‎web/src/consts/chains.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { extractChain } from "viem";
2-
import { Chain, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "viem/chains";
1+
import { type AppKitNetwork, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "@reown/appkit/networks";
2+
import { type Chain, extractChain } from "viem";
33

44
import { isProductionDeployment } from "./index";
55

66
export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;
77

88
// Read/Write
9-
export const SUPPORTED_CHAINS: Record<number, Chain> = {
9+
export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
1010
[isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
1111
};
1212

1313
// Read Only
14-
export const QUERY_CHAINS: Record<number, Chain> = {
14+
export const QUERY_CHAINS: Record<number, AppKitNetwork> = {
1515
[isProductionDeployment() ? gnosis.id : gnosisChiado.id]: isProductionDeployment() ? gnosis : gnosisChiado,
1616
[mainnet.id]: mainnet,
1717
};

‎web/src/consts/eip712-messages.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { arbitrumSepolia } from "viem/chains";
21
import { DEFAULT_CHAIN } from "./chains";
32

43
export default {
@@ -23,7 +22,7 @@ export default {
2322
telegram,
2423
nonce,
2524
},
26-
} as const),
25+
}) as const,
2726
signingAccount: (address: `0x${string}`, chainId: number = DEFAULT_CHAIN) =>
2827
({
2928
account: address.toLowerCase() as `0x${string}`,
@@ -42,5 +41,5 @@ export default {
4241
"create a secret key for your account. This key is unrelated from your main Ethereum account and will " +
4342
"not be able to send any transactions.",
4443
},
45-
} as const),
44+
}) as const,
4645
};

‎web/src/context/AtlasProvider.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from "react";
2+
3+
import { useConfig } from "wagmi";
4+
25
import { AtlasProvider as _AtlasProvider, Products } from "@kleros/kleros-app";
36

47
const AtlasProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
8+
const wagmiConfig = useConfig();
59
return (
6-
<_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
10+
<_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig }}>
711
{children}
812
</_AtlasProvider>
913
);

0 commit comments

Comments
 (0)