WIP: viem custom client within external wallet example

examples/minimal/packages/client-react-external-wallet/package.json

@@ -14,12 +14,13 @@
     "@latticexyz/common": "link:../../../../packages/common",
     "@latticexyz/dev-tools": "link:../../../../packages/dev-tools",
     "@latticexyz/store-sync": "link:../../../../packages/store-sync",
+    "@tanstack/react-query": "5.22.2",
     "contracts": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs": "7.5.5",
-    "viem": "1.14.0",
-    "wagmi": "1.4.13"
+    "viem": "2.7.12",
+    "wagmi": "2.5.7"
   },
   "devDependencies": {
     "@types/react": "18.2.22",

examples/minimal/packages/client-react-external-wallet/src/ExternalWallet.tsx

@@ -1,5 +1,5 @@
-import { BaseError } from "viem";
-import { useAccount, useConnect, useDisconnect, useNetwork, useSwitchNetwork } from "wagmi";
+import { type BaseError } from "viem";
+import { useAccount, useConnect, useDisconnect, useNetwork, useSwitchChain, useSwitchNetwork } from "wagmi";
 
 export const ExternalWallet = () => {
   const { isConnected } = useAccount();
@@ -14,34 +14,32 @@ export const ExternalWallet = () => {
 
 // Based on https://github.com/wevm/create-wagmi/blob/create-wagmi%401.0.5/templates/vite-react/default/src/components/Connect.tsx
 function Connect() {
-  const { connector, isConnected } = useAccount();
-  const { connect, connectors, error, isLoading, pendingConnector } = useConnect();
+  const account = useAccount();
+  const { connect, connectors, status, error } = useConnect();
   const { disconnect } = useDisconnect();
 
   return (
     <div>
       <div>
-        {isConnected && <button onClick={() => disconnect()}>Disconnect from {connector?.name}</button>}
+        {account.status === "connected" && <button onClick={() => disconnect()}>Disconnect</button>}
 
-        {connectors
-          .filter((x) => x.ready && x.id !== connector?.id)
-          .map((x) => (
-            <button key={x.id} onClick={() => connect({ connector: x })}>
-              Connect {x.name}
-              {isLoading && x.id === pendingConnector?.id && " (connecting)"}
-            </button>
-          ))}
+        {connectors.map((x) => (
+          <button key={x.uid} onClick={() => connect({ connector: x })}>
+            Connect {x.name}
+          </button>
+        ))}
       </div>
 
-      {error && <div>{(error as BaseError).shortMessage}</div>}
+      <div>{status}</div>
+      {error && <div>{error.message}</div>}
     </div>
   );
 }
 
 // Based on https://github.com/wevm/create-wagmi/blob/create-wagmi%401.0.5/templates/vite-react/default/src/components/NetworkSwitcher.tsx
 function Network() {
   const { chain } = useNetwork();
-  const { chains, error, isLoading, pendingChainId, switchNetwork } = useSwitchNetwork();
+  const { chains, error, status, switchChain } = useSwitchChain();
   const { address } = useAccount();
 
   const otherChains = chains.filter((x) => x.id !== chain?.id);

examples/minimal/packages/client-react-external-wallet/src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client";
-import { WagmiConfig } from "wagmi";
+import { WagmiProvider } from "wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ExternalWallet } from "./ExternalWallet";
 import { MUDReadProvider } from "./mud/read";
 import { MUDWriteProvider } from "./mud/write";
@@ -11,17 +12,21 @@ 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
 setup().then(({ mud, wagmiConfig }) => {
   root.render(
-    <WagmiConfig config={wagmiConfig}>
-      <ExternalWallet />
-      <MUDReadProvider value={mud}>
-        <MUDWriteProvider>
-          <App />
-          {import.meta.env.DEV && <DevTools />}
-        </MUDWriteProvider>
-      </MUDReadProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ExternalWallet />
+        <MUDReadProvider value={mud}>
+          <MUDWriteProvider>
+            <App />
+            {import.meta.env.DEV && <DevTools />}
+          </MUDWriteProvider>
+        </MUDReadProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 });

examples/minimal/packages/client-react-external-wallet/src/mud/setup.ts

@@ -1,18 +1,14 @@
 import { createConfig } from "wagmi";
-import { InjectedConnector } from "wagmi/connectors/injected";
+import { injected } from "wagmi/connectors";
 import { setupNetwork } from "./setupNetwork";
 
 export async function setup() {
   const mud = await setupNetwork();
 
   const wagmiConfig = createConfig({
-    autoConnect: true,
-    connectors: [
-      new InjectedConnector({
-        chains: [mud.publicClient.chain],
-      }),
-    ],
-    publicClient: mud.publicClient,
+    chains: [mud.publicClient.chain],
+    connectors: [injected()],
+    client: () => mud.publicClient,
   });
 
   return {