chore(web-devtools): migrate-to-reown

Author: tractorss

web-devtools/package.json

@@ -50,10 +50,11 @@
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
     "@kleros/ui-components-library": "^2.20.0",
+    "@reown/appkit": "^1.6.5",
+    "@reown/appkit-adapter-wagmi": "^1.6.5",
     "@tanstack/react-query": "^5.61.0",
     "@wagmi/connectors": "^5.5.0",
     "@wagmi/core": "^2.15.0",
-    "@web3modal/wagmi": "^4.2.3",
     "@yornaath/batshit": "^0.9.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -69,6 +70,6 @@
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.6",
     "viem": "^2.21.50",
-    "wagmi": "^2.14.0"
+    "wagmi": "^2.14.10"
   }
 }

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 
-import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
+import { useAppKit, useAppKitState } from "@reown/appkit/react";
 import { useAccount, useSwitchChain } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
@@ -33,8 +33,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-devtools/src/consts/chains.ts

@@ -1,14 +1,14 @@
-import { type Chain, mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis } from "viem/chains";
+import { mainnet, arbitrumSepolia, gnosisChiado, arbitrum, gnosis, type AppKitNetwork } from "@reown/appkit/networks";
 
 import { isProductionDeployment } from "./index";
 
 export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;
 
-export const SUPPORTED_CHAINS: Record<number, Chain> = {
+export const SUPPORTED_CHAINS: Record<number, AppKitNetwork> = {
   [isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
 };
 
-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-devtools/src/context/Web3Provider.tsx

@@ -1,16 +1,15 @@
 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, gnosisChiado, sepolia, gnosis } from "wagmi/chains";
-import { walletConnect } from "wagmi/connectors";
+import { fallback, http, WagmiProvider, webSocket } from "wagmi";
+import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado, sepolia, gnosis } from "@reown/appkit/networks";
 
 import { configureSDK } from "@kleros/kleros-sdk/src/sdk";
 
 import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import { isProductionDeployment } from "consts/index";
-
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { theme } from "styles/Theme";
 
 const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY;
@@ -74,10 +73,10 @@ if (!projectId) {
   throw new Error("WalletConnect project ID is not set in NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID environment variable.");
 }
 
-export const wagmiConfig = createConfig({
-  chains,
+const wagmiAdapter = new WagmiAdapter({
+  networks: chains,
+  projectId,
   transports,
-  connectors: [walletConnect({ projectId })],
 });
 
 configureSDK({
@@ -87,18 +86,18 @@ configureSDK({
   },
 });
 
-createWeb3Modal({
-  wagmiConfig,
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: chains,
+  defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
   projectId,
-  defaultChain: isProduction ? arbitrum : arbitrumSepolia,
   themeVariables: {
     "--w3m-color-mix": theme.klerosUIComponentsPrimaryPurple,
     "--w3m-color-mix-strength": 20,
   },
 });
-
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
+  return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
 };
 
 export default Web3Provider;