feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307
There are no files selected for viewing
|
There was a problem hiding this comment. These changes are to adapt Wagmi v2 API changes. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,57 @@ | ||
| import { useAccount, useChains, useConnect, useDisconnect, useSwitchChain } from "wagmi"; | ||
|
|
||
| export const ExternalWallet = () => { | ||
| const { isConnected } = useAccount(); | ||
|
|
||
| return <div>{isConnected ? <Account /> : <Connect />}</div>; | ||
| }; | ||
|
|
||
| function Connect() { | ||
| const { connect, connectors, error } = useConnect(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div> | ||
| {connectors.map((connector) => ( | ||
| <button key={connector.uid} onClick={() => connect({ connector })}> | ||
| Connect {connector.name} | ||
| </button> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div>{error?.message}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function Account() { | ||
| const { error, switchChain } = useSwitchChain(); | ||
| const { address, connector, chain, chainId } = useAccount(); | ||
| const { disconnect } = useDisconnect(); | ||
| const chains = useChains(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div>{address}</div> | ||
| <div> | ||
| Connected to {chain?.name ?? chainId} | ||
| {chainId && !chains.map((x) => x.id).includes(chainId) ? " (unsupported)" : ""} | ||
| </div> | ||
| <div> | ||
| {chains | ||
| .filter((x) => x.id !== chainId) | ||
| .map((x) => ( | ||
| <button key={x.id} onClick={() => switchChain({ chainId: x.id })}> | ||
| Switch to {x.name} | ||
| </button> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div>{error?.message}</div> | ||
|
|
||
| <div> | ||
| <button onClick={() => disconnect()}>Disconnect from {connector?.name}</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { createContext, type ReactNode, useContext } from "react"; | ||
| import { type SetupNetworkResult } from "./setupNetwork"; | ||
|
|
||
| export type MUDNetwork = SetupNetworkResult; | ||
|
|
||
| const MUDNetworkContext = createContext<MUDNetwork | null>(null); | ||
|
|
||
| type Props = { | ||
| children: ReactNode; | ||
| value: MUDNetwork; | ||
| }; | ||
|
|
||
| export const MUDNetworkProvider = ({ children, value }: Props) => { | ||
| const currentValue = useContext(MUDNetworkContext); | ||
| if (currentValue) throw new Error("MUDNetworkProvider can only be used once"); | ||
| return <MUDNetworkContext.Provider value={value}>{children}</MUDNetworkContext.Provider>; | ||
| }; | ||
|
|
||
| export const useMUDNetwork = () => { | ||
| const value = useContext(MUDNetworkContext); | ||
| if (!value) throw new Error("Must be used within a MUDNetworkProvider"); | ||
| return value; | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import type { WriteContractParameters, Chain, Account, WalletActions } from "viem"; | ||
| import { sendTransaction, writeContract } from "viem/actions"; | ||
| import { useAccount, useWalletClient, type UseWalletClientReturnType } from "wagmi"; | ||
| import pRetry from "p-retry"; | ||
| import { getNonceManager } from "@latticexyz/common"; | ||
| import { useMUDNetwork, type MUDNetwork } from "./NetworkContext"; | ||
|
|
||
| export const useMUD = () => { | ||
| const network = useMUDNetwork(); | ||
| const { data: connectorWalletClient } = useWalletClient(); | ||
| const { chainId } = useAccount(); | ||
|
|
||
| let walletClient; | ||
| if (network.publicClient.chain.id === chainId && connectorWalletClient?.chain.id === chainId) { | ||
| // TODO: Should this be memoized? | ||
| // `walletClient = connectorWalletClient.extend(burnerActions);` is unnecessary for an external wallet | ||
| walletClient = connectorWalletClient.extend(setupObserverActions(network.onWrite)); | ||
|
Comment on lines
+16
to
+17
There was a problem hiding this comment. Here is the code for creating the custom client. There was a problem hiding this comment. I think we're still going to ~always have a session wallet as the primary sender of txs (to have ~invisible tx signing) so may make sense to just keep this here. |
||
| } | ||
|
|
||
| return { network, walletClient }; | ||
| }; | ||
|
|
||
| export type WalletClient = NonNullable<UseWalletClientReturnType["data"]>; | ||
|
|
||
| // See @latticexyz/common/src/sendTransaction.ts | ||
| const burnerActions = (client: WalletClient): Pick<WalletActions<Chain, Account>, "sendTransaction"> => { | ||
| // TODO: Use the `debug` library once this function has been moved to the `common` library. | ||
| const debug = console.log; | ||
|
|
||
| return { | ||
| sendTransaction: async (args) => { | ||
|
Comment on lines
+26
to
+31
There was a problem hiding this comment. This functions similarly to |
||
| const nonceManager = await getNonceManager({ | ||
| client, | ||
| address: client.account.address, | ||
| blockTag: "pending", | ||
| }); | ||
|
|
||
| return nonceManager.mempoolQueue.add( | ||
| () => | ||
| pRetry( | ||
| async () => { | ||
| if (!nonceManager.hasNonce()) { | ||
| await nonceManager.resetNonce(); | ||
| } | ||
|
|
||
| const nonce = nonceManager.nextNonce(); | ||
| debug("sending tx with nonce", nonce, "to", args.to); | ||
| return sendTransaction(client, { ...args, nonce } as typeof args); | ||
|
There was a problem hiding this comment. we should prob use There was a problem hiding this comment.
Yes, we should use all custom actions (nonce, retry, write$) for session wallets. In the upcoming burner wallet PR #2309, all these actions are applied to the burner wallet. When using both external and burner wallets, I believe the external wallet doesn't need to be extended. This is because, we don't require nonce management for MetaMask, and dev-tools, which takes a single wallet client, should be used with the burner wallet.
Right, using getAction is better since it accounts for more extensions beforehand. I'll switch to getAction. |
||
| }, | ||
| { | ||
| retries: 3, | ||
| onFailedAttempt: async (error) => { | ||
| // On nonce errors, reset the nonce and retry | ||
| if (nonceManager.shouldResetNonce(error)) { | ||
| debug("got nonce error, retrying", error.message); | ||
| await nonceManager.resetNonce(); | ||
| return; | ||
| } | ||
| // TODO: prepare again if there are gas errors? | ||
| throw error; | ||
| }, | ||
| } | ||
| ), | ||
| { throwOnTimeout: true } | ||
| ); | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| // See @latticexyz/common/src/getContract.ts | ||
| const setupObserverActions = (onWrite: MUDNetwork["onWrite"]) => { | ||
| return (client: WalletClient): Pick<WalletActions<Chain, Account>, "writeContract"> => ({ | ||
| writeContract: async (args) => { | ||
| const result = writeContract(client, args); | ||
|
|
||
| const id = `${client.chain.id}:${client.account.address}`; | ||
| onWrite({ id, request: args as WriteContractParameters, result }); | ||
|
|
||
| return result; | ||
| }, | ||
| }); | ||
| }; | ||
|
There was a problem hiding this comment. can we pull these actions out into a separate, independent PR that adds them to the common package and import them here? |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wagmi v2 needs this
@tanstack/react-queryinstalled alongside.