refactor(kleros-app): explicit-wagmi-config

Author: tractorss

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/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/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>
   );