chore(web): migrate-to-reown

kleros-app/README.md

@@ -27,14 +27,17 @@ import { WagmiProvider } from 'wagmi'
 import { config } from './config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AtlasProvider, Products } from "@kleros/kleros-app";
+import { useConfig } from 'wagmi'
 
 const queryClient = new QueryClient()
 
 function App() {
+  const wagmiConfig = useConfig()
+
   return
     <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
-            <AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
+            <AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig: wagmiConfig }}>
             ...
             </AtlasProvider>
         </QueryClientProvider>

kleros-app/package.json

@@ -49,7 +49,8 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "wagmi": "^2.14.0"
   },
   "dependencies": {
     "jose": "^5.9.6"
@@ -61,6 +62,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "viem": "^2.21.42",
-    "wagmi": "^2.13.5"
+    "wagmi": "^2.14.0"
   }
 }

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

@@ -2,7 +2,7 @@ import React, { useMemo, createContext, useContext, useState, useCallback, useEf
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { GraphQLClient } from "graphql-request";
 import { decodeJwt } from "jose";
-import { useAccount, useChainId, useSignMessage } from "wagmi";
+import { useAccount, useChainId, useSignMessage, type Config } from "wagmi";
 import {
   createMessage,
   getNonce,
@@ -53,11 +53,12 @@ const Context = createContext<IAtlasProvider | undefined>(undefined);
 interface AtlasConfig {
   uri: string;
   product: Products;
+  wagmiConfig: Config;
 }
 
 export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.ReactNode }> = ({ children, config }) => {
-  const { address } = useAccount();
-  const chainId = useChainId();
+  const { address } = useAccount({ config: config.wagmiConfig });
+  const chainId = useChainId({ config: config.wagmiConfig });
   const queryClient = useQueryClient();
 
   const [authToken, setAuthToken] = useSessionStorage<string | undefined>("authToken", undefined);
@@ -66,7 +67,7 @@ export const AtlasProvider: React.FC<{ config: AtlasConfig; children?: React.Rea
   const [isUpdatingUser, setIsUpdatingUser] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
   const [isUploadingFile, setIsUploadingFile] = useState(false);
-  const { signMessageAsync } = useSignMessage();
+  const { signMessageAsync } = useSignMessage({ config: config.wagmiConfig });
 
   const atlasGqlClient = useMemo(() => {
     const headers = authToken

web-devtools/package.json

@@ -69,6 +69,6 @@
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.6",
     "viem": "^2.21.50",
-    "wagmi": "^2.13.5"
+    "wagmi": "^2.14.0"
   }
 }

web/package.json

@@ -79,22 +79,25 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
+    "@bigmi/react": "^0.1.0",
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@graphql-tools/batch-execute": "^9.0.11",
     "@graphql-tools/utils": "^10.7.2",
     "@kleros/kleros-app": "workspace:^",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
     "@kleros/ui-components-library": "^2.20.0",
-    "@lifi/wallet-management": "^3.4.6",
-    "@lifi/widget": "^3.12.3",
+    "@lifi/wallet-management": "^3.6.0",
+    "@lifi/widget": "^3.14.2",
+    "@reown/appkit": "^1.6.5",
+    "@reown/appkit-adapter-wagmi": "^1.6.5",
     "@sentry/react": "^7.120.0",
     "@sentry/tracing": "^7.120.0",
+    "@solana/wallet-adapter-react": "^0.15.35",
     "@tanstack/react-query": "^5.62.2",
     "@types/react-modal": "^3.16.3",
     "@wagmi/connectors": "^5.5.0",
     "@wagmi/core": "^2.15.0",
-    "@web3modal/wagmi": "^4.2.3",
     "@yornaath/batshit": "^0.9.0",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
@@ -123,6 +126,6 @@
     "styled-components": "^5.3.3",
     "subgraph-status": "^1.2.3",
     "viem": "^2.21.54",
-    "wagmi": "^2.13.5"
+    "wagmi": "^2.14.0"
   }
 }

web/src/components/ConnectWallet/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } 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";
@@ -35,8 +35,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 AppKitNetwork, arbitrum, mainnet, arbitrumSepolia, gnosis, gnosisChiado } from "@reown/appkit/networks";
+import { type Chain, extractChain } from "viem";
 
 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/consts/eip712-messages.ts

@@ -1,4 +1,3 @@
-import { arbitrumSepolia } from "viem/chains";
 import { DEFAULT_CHAIN } from "./chains";
 
 export default {
@@ -23,7 +22,7 @@ export default {
         telegram,
         nonce,
       },
-    } as const),
+    }) as const,
   signingAccount: (address: `0x${string}`, chainId: number = DEFAULT_CHAIN) =>
     ({
       account: address.toLowerCase() as `0x${string}`,
@@ -42,5 +41,5 @@ export default {
           "create a secret key for your account. This key is unrelated from your main Ethereum account and will " +
           "not be able to send any transactions.",
       },
-    } as const),
+    }) as const,
 };

web/src/context/AtlasProvider.tsx

@@ -1,9 +1,13 @@
 import React from "react";
+
+import { useConfig } from "wagmi";
+
 import { AtlasProvider as _AtlasProvider, Products } from "@kleros/kleros-app";
 
 const AtlasProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const wagmiConfig = useConfig();
   return (
-    <_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
+    <_AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2, wagmiConfig }}>
       {children}
     </_AtlasProvider>
   );

web/src/context/Web3Provider.tsx

@@ -1,10 +1,17 @@
 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 {
+  mainnet,
+  arbitrumSepolia,
+  arbitrum,
+  gnosisChiado,
+  sepolia,
+  gnosis,
+  type AppKitNetwork,
+} from "@reown/appkit/networks";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { fallback, http, WagmiProvider, webSocket } from "wagmi";
 
 import { configureSDK } from "@kleros/kleros-sdk/src/sdk";
 
@@ -66,18 +73,18 @@ 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;
 if (!projectId) {
   throw new Error("WalletConnect project ID is not set in WALLETCONNECT_PROJECT_ID environment variable.");
 }
 
-const wagmiConfig = createConfig({
-  chains,
+const wagmiAdapter = new WagmiAdapter({
+  networks: chains,
+  projectId,
   transports,
-  connectors: [walletConnect({ projectId, showQrModal: false })],
 });
 
 configureSDK({
@@ -87,18 +94,28 @@ configureSDK({
   },
 });
 
-createWeb3Modal({
-  wagmiConfig,
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: chains,
+  defaultNetwork: isProduction ? arbitrum : arbitrumSepolia,
   projectId,
-  defaultChain: isProduction ? arbitrum : arbitrumSepolia,
+  allowUnsupportedChain: true,
   themeVariables: {
     "--w3m-color-mix": lightTheme.primaryPurple,
     "--w3m-color-mix-strength": 20,
+    // overlay portal is at 9999
+    "--w3m-z-index": 10000,
+  },
+  features: {
+    // adding these here to toggle in futute if needed
+    // email: false,
+    // socials: false,
+    // onramp:false,
+    // swap: false
   },
 });
-
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
+  return <WagmiProvider config={wagmiAdapter.wagmiConfig}> {children} </WagmiProvider>;
 };
 
 export default Web3Provider;

web/src/pages/GetPnk/WalletProvider.tsx

@@ -2,12 +2,12 @@ import React, { useRef, type FC, type PropsWithChildren } from "react";
 
 import { useSyncWagmiConfig } from "@lifi/wallet-management";
 import { useAvailableChains } from "@lifi/widget";
+import { mainnet, arbitrumSepolia, arbitrum } from "@reown/appkit/networks";
+import { createAppKit } from "@reown/appkit/react";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { injected, walletConnect } from "@wagmi/connectors";
-import { createWeb3Modal } from "@web3modal/wagmi";
 import { createClient, http } from "viem";
-import { arbitrum, arbitrumSepolia, mainnet } from "viem/chains";
-import type { Config } from "wagmi";
-import { createConfig, WagmiProvider } from "wagmi";
+import { WagmiProvider } from "wagmi";
 
 import { isProductionDeployment } from "consts/index";
 
@@ -19,32 +19,36 @@ const connectors = [injected(), walletConnect({ projectId })];
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   const { chains } = useAvailableChains();
-  const wagmi = useRef<Config>();
+  const adapter = useRef<WagmiAdapter>();
 
-  if (!wagmi.current) {
-    wagmi.current = createConfig({
-      chains: [mainnet],
+  if (!adapter.current) {
+    adapter.current = new WagmiAdapter({
+      networks: [mainnet],
+      projectId,
       client({ chain }) {
         return createClient({ chain, transport: http() });
       },
-      ssr: true,
     });
   }
 
-  useSyncWagmiConfig(wagmi.current, connectors, chains);
+  useSyncWagmiConfig(adapter.current.wagmiConfig, connectors, chains);
 
-  createWeb3Modal({
-    wagmiConfig: wagmi.current,
-    projectId,
-    defaultChain: isProductionDeployment() ? arbitrum : arbitrumSepolia,
+  createAppKit({
+    adapters: [adapter.current],
+    networks: [mainnet],
+    defaultNetwork: isProductionDeployment() ? arbitrum : arbitrumSepolia,
     allowUnsupportedChain: true,
+    projectId,
     themeVariables: {
       "--w3m-color-mix": lightTheme.primaryPurple,
       "--w3m-color-mix-strength": 20,
+      // overlay portal is at 9999
+      "--w3m-z-index": 10000,
     },
   });
+
   return (
-    <WagmiProvider config={wagmi.current} reconnectOnMount={false}>
+    <WagmiProvider config={adapter.current.wagmiConfig} reconnectOnMount={false}>
       {children}
     </WagmiProvider>
   );