Merge pull request #103 from kleros/chore/migrate-to-reown

chore(web): migrate-to-reown

Author: jaybuidl

web/package.json

@@ -68,10 +68,11 @@
     "@cyntler/react-doc-viewer": "^1.16.3",
     "@kleros/kleros-app": "^2.0.2",
     "@kleros/ui-components-library": "^2.19.0",
+    "@reown/appkit": "^1.6.6",
+    "@reown/appkit-adapter-wagmi": "^1.6.6",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
-    "@tanstack/react-query": "^5.61.5",
-    "@web3modal/wagmi": "^5.1.4",
+    "@tanstack/react-query": "^5.66.0",
     "@yornaath/batshit": "^0.9.0",
     "alchemy-sdk": "^3.3.1",
     "chart.js": "^3.9.1",
@@ -98,7 +99,7 @@
     "react-use": "^17.4.3",
     "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.3",
-    "viem": "^2.21.51",
-    "wagmi": "^2.13.2"
+    "viem": "^2.22.22",
+    "wagmi": "^2.14.10"
   }
 }

web/src/components/ConnectWallet/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
-import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import AccountDisplay from "./AccountDisplay";
@@ -30,8 +30,8 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
 };
 
 const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
-  const { open } = useWeb3Modal();
-  const { open: isOpen } = useWeb3ModalState();
+  const { open } = useAppKit();
+  const { open: isOpen } = useAppKitState();
   return (
     <Button
       {...{ className }}

web/src/consts/chains.ts

@@ -1,17 +1,17 @@
-import { extractChain } from "viem";
-import { Chain, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "viem/chains";
+import { type Chain, extractChain } from "viem";
+import { arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado, type AppKitNetwork } from "@reown/appkit/networks";
 
 import { isProductionDeployment } from "./index";
 
 export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;
 
 // Read/Write
-export const SUPPORTED_CHAINS: Record<number, Chain> = {
+export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
   [isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
 };
 
 // Read Only
-export const QUERY_CHAINS: Record<number, Chain> = {
+export const QUERY_CHAINS: Record<number, AppKitNetwork> = {
   [isProductionDeployment() ? gnosis.id : gnosisChiado.id]: isProductionDeployment() ? gnosis : gnosisChiado,
   [mainnet.id]: mainnet,
 };

web/src/context/Web3Provider.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 
-import { createWeb3Modal } from "@web3modal/wagmi/react";
-import { type Chain } from "viem";
-import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
-import { mainnet, arbitrumSepolia, gnosisChiado } from "wagmi/chains";
-import { walletConnect } from "wagmi/connectors";
-
+import { fallback, http, WagmiProvider, webSocket } from "wagmi";
+import { mainnet, arbitrumSepolia, gnosisChiado, type AppKitNetwork } from "@reown/appkit/networks";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { lightTheme } from "styles/themes";
 
 export const alchemyApiKey = import.meta.env.ALCHEMY_API_KEY ?? "";
@@ -17,11 +15,11 @@ const alchemyToViemChain = {
 
 type AlchemyProtocol = "https" | "wss";
 
-const alchemyURL = (protocol: AlchemyProtocol, chainId: number) =>
+const alchemyURL = (protocol: AlchemyProtocol, chainId: number | string) =>
   `${protocol}://${alchemyToViemChain[chainId]}.g.alchemy.com/v2/${alchemyApiKey}`;
 
 const getTransports = () => {
-  const alchemyTransport = (chain: Chain) =>
+  const alchemyTransport = (chain: AppKitNetwork) =>
     fallback([http(alchemyURL("https", chain.id)), webSocket(alchemyURL("wss", chain.id))]);
   const chiadoTransport = () =>
     fallback([http("https://rpc.chiadochain.net"), webSocket("wss://rpc.chiadochain.net/wss")]);
@@ -33,26 +31,30 @@ const getTransports = () => {
   };
 };
 
-const chains = [arbitrumSepolia, mainnet, gnosisChiado] as [Chain, ...Chain[]];
+const chains = [arbitrumSepolia, mainnet, gnosisChiado] as [AppKitNetwork, ...AppKitNetwork[]];
 const transports = getTransports();
 const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
-const wagmiConfig = createConfig({
-  chains,
+
+const wagmiAdapter = new WagmiAdapter({
+  networks: chains,
+  projectId,
   transports,
-  connectors: [walletConnect({ projectId, showQrModal: false })],
 });
 
-createWeb3Modal({
-  wagmiConfig,
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: chains,
+  defaultNetwork: arbitrumSepolia,
   projectId,
   themeVariables: {
     "--w3m-color-mix": lightTheme.primaryPurple,
     "--w3m-color-mix-strength": 20,
+    // overlay portal is at 9999
+    "--w3m-z-index": 10000,
   },
 });
-
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
+  return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
 };
 
 export default Web3Provider;