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 {