WagmiProvider needs to be root component as no rerender allowed

templates/react/packages/client/src/index.tsx

@@ -1,5 +1,7 @@
 import ReactDOM from "react-dom/client";
-import { setupNetwork } from "./mud/setupNetwork";
+import { setup } from "./mud/setup";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { NetworkProvider } from "./mud/NetworkContext";
 import { StoreSync } from "./mud/StoreSync";
 import { WalletAdapter } from "./mud/wallet/WalletAdapter";
@@ -10,16 +12,22 @@ const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
 const root = ReactDOM.createRoot(rootElement);
 
+const queryClient = new QueryClient();
+
 // TODO: figure out if we actually want this to be async or if we should render something else in the meantime
-setupNetwork().then((network) => {
+setup().then(({ network, wagmiConfig }) => {
   root.render(
-    <NetworkProvider network={network}>
-      <StoreSync>
-        <WalletAdapter>
-          <App />
-          {import.meta.env.DEV && <DevTools />}
-        </WalletAdapter>
-      </StoreSync>
-    </NetworkProvider>,
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <NetworkProvider network={network}>
+          <StoreSync>
+            <WalletAdapter>
+              <App />
+              {import.meta.env.DEV && <DevTools />}
+            </WalletAdapter>
+          </StoreSync>
+        </NetworkProvider>
+      </QueryClientProvider>
+    </WagmiProvider>,
   );
 });

templates/react/packages/client/src/mud/setup.ts

@@ -0,0 +1,13 @@
+import { createConfig } from "wagmi";
+import { setupNetwork } from "./setupNetwork";
+
+export async function setup() {
+  const network = await setupNetwork();
+
+  const wagmiConfig = createConfig({
+    chains: [network.publicClient.chain],
+    client: () => network.publicClient,
+  });
+
+  return { network, wagmiConfig };
+}

templates/react/packages/client/src/mud/wallet/WalletAdapter/External.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useEffect } from "react";
-import { WagmiProvider, createConfig, useAccount, useWalletClient } from "wagmi";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useAccount, useWalletClient } from "wagmi";
 import type { WalletClient, Transport, Chain, Account, Hex } from "viem";
 import { useNetwork } from "../../NetworkContext";
 import { ExternalConnector } from "../ExternalConnector";
@@ -9,26 +8,11 @@ import { createBurner, getBurnerAddress } from "../burner";
 import { type SetBurnerProps } from "./types";
 
 export function External(props: SetBurnerProps) {
-  const { publicClient } = useNetwork();
-
-  const [wagmiConfig, queryClient] = useMemo(
-    () => [
-      createConfig({
-        chains: [publicClient.chain],
-        client: () => publicClient,
-      }),
-      new QueryClient(),
-    ],
-    [publicClient],
-  );
-
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <ExternalConnector />
-        <Connection setBurner={props.setBurner} />
-      </QueryClientProvider>
-    </WagmiProvider>
+    <>
+      <ExternalConnector />
+      <Connection setBurner={props.setBurner} />
+    </>
   );
 }