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

chore(web): migrate-to-reown

Author: jaybuidl

web/package.json

@@ -72,11 +72,12 @@
     "@kleros/curate-v2-templates": "workspace:^",
     "@kleros/kleros-app": "^2.0.2",
     "@kleros/ui-components-library": "^2.20.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.59.20",
+    "@tanstack/react-query": "^5.66.0",
     "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/react": "^2.2.2",
     "@web3modal/wagmi": "^5.1.6",
     "@yornaath/batshit": "^0.9.0",
     "chart.js": "^3.9.1",
@@ -105,7 +106,7 @@
     "react-use": "^17.4.3",
     "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.3",
-    "viem": "^2.21.51",
-    "wagmi": "^2.13.0"
+    "viem": "^2.22.22",
+    "wagmi": "^2.14.10"
   }
 }

web/src/components/ConnectWallet/index.tsx

@@ -3,7 +3,7 @@ import { useAccount, useSwitchChain } from "wagmi";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import AccountDisplay from "./AccountDisplay";
-import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 
 export const SwitchChainButton: React.FC = () => {
   const { switchChain, isLoading } = useSwitchChain();
@@ -30,8 +30,8 @@ export const SwitchChainButton: React.FC = () => {
 };
 
 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/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, arbitrum, sepolia } from "wagmi/chains";
-import { walletConnect } from "wagmi/connectors";
-
+import { fallback, http, WagmiProvider, webSocket } from "wagmi";
+import { mainnet, arbitrumSepolia, arbitrum, sepolia, type AppKitNetwork } from "@reown/appkit/networks";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import { isProductionDeployment } from "consts/index";
 
@@ -25,10 +23,10 @@ const alchemyToViemChain = {
 type AlchemyProtocol = "https" | "wss";
 
 // https://github.com/alchemyplatform/alchemy-sdk-js/blob/96b3f62/src/util/const.ts#L16-L18
-const alchemyURL = (protocol: AlchemyProtocol, chainId: number) =>
+const alchemyURL = (protocol: AlchemyProtocol, chainId: number | string) =>
   `${protocol}://${alchemyToViemChain[chainId]}.g.alchemy.com/v2/${alchemyApiKey}`;
 
-export const getChainRpcUrl = (protocol: AlchemyProtocol, chainId: number) => {
+export const getChainRpcUrl = (protocol: AlchemyProtocol, chainId: number | string) => {
   return alchemyURL(protocol, chainId);
 };
 
@@ -37,7 +35,7 @@ export const getDefaultChainRpcUrl = (protocol: AlchemyProtocol) => {
 };
 
 export const getTransports = () => {
-  const alchemyTransport = (chain: Chain) =>
+  const alchemyTransport = (chain: AppKitNetwork) =>
     fallback([http(alchemyURL("https", chain.id)), webSocket(alchemyURL("wss", chain.id))]);
 
   return {
@@ -48,28 +46,29 @@ export const getTransports = () => {
   };
 };
 
-const chains = ALL_CHAINS as [Chain, ...Chain[]];
+const chains = ALL_CHAINS 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: isProduction ? arbitrum : arbitrumSepolia,
   projectId,
-  defaultChain: isProductionDeployment() ? arbitrum : arbitrumSepolia,
   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;