From 5c57e28648987012fc43de0f0e99b86a20ab1743 Mon Sep 17 00:00:00 2001
From: tash-2s <81064017+tash-2s@users.noreply.github.com>
Date: Thu, 22 Feb 2024 22:21:47 -0600
Subject: [PATCH] wip: upgrading wagmi
---
.../src/ExternalWallet.tsx | 28 +++++++++----------
.../src/index.tsx | 25 ++++++++++-------
.../src/mud/setup.ts | 12 +++-----
3 files changed, 32 insertions(+), 33 deletions(-)
diff --git a/examples/minimal/packages/client-react-external-wallet/src/ExternalWallet.tsx b/examples/minimal/packages/client-react-external-wallet/src/ExternalWallet.tsx
index 5e95e22ea2..ed94e55fb5 100644
--- a/examples/minimal/packages/client-react-external-wallet/src/ExternalWallet.tsx
+++ b/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,26 +14,24 @@ 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 (
- {isConnected && }
+ {account.status === "connected" && }
- {connectors
- .filter((x) => x.ready && x.id !== connector?.id)
- .map((x) => (
-
- ))}
+ {connectors.map((x) => (
+
+ ))}
- {error &&
{(error as BaseError).shortMessage}
}
+
{status}
+ {error &&
{error.message}
}
);
}
@@ -41,7 +39,7 @@ function Connect() {
// 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);
diff --git a/examples/minimal/packages/client-react-external-wallet/src/index.tsx b/examples/minimal/packages/client-react-external-wallet/src/index.tsx
index ffedd718d9..e4aeb3ee6b 100644
--- a/examples/minimal/packages/client-react-external-wallet/src/index.tsx
+++ b/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(
-
-
-
-
-
- {import.meta.env.DEV && }
-
-
-
+
+
+
+
+
+
+ {import.meta.env.DEV && }
+
+
+
+
);
});
diff --git a/examples/minimal/packages/client-react-external-wallet/src/mud/setup.ts b/examples/minimal/packages/client-react-external-wallet/src/mud/setup.ts
index c410d7a20f..e0579b69b3 100644
--- a/examples/minimal/packages/client-react-external-wallet/src/mud/setup.ts
+++ b/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 {