feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307

tash-2s · 2024-02-23T23:29:39Z

This PR is created with the exact same commits as #2294, but now the source branch is within this latticexyz/mud repository.

This PR targets #2306, which implements external wallet support using Wagmi v1 in the example project. In this PR, I've updated the code to use Wagmi v2 and the viem custom client. This code doesn't use the mud_getContract wrapper, allowing the viem client to be used more straightforwardly. As a result, the structure of the React components has been improved as well.

``` WARN Issues with peer dependencies found packages/client-react-external-wallet └─┬ wagmi 2.5.7 └─┬ @wagmi/connectors 4.1.14 └─┬ @metamask/sdk 0.14.3 ├─┬ @metamask/sdk-communication-layer 0.14.3 │ └─┬ socket.io-client 4.7.4 │ └─┬ engine.io-client 6.5.3 │ └─┬ ws 8.11.0 │ └── ✕ unmet peer utf-8-validate@^5.0.2: found 6.0.3 in @metamask/sdk-communication-layer ├─┬ @metamask/sdk-install-modal-web 0.14.1 │ └─┬ react-i18next 13.5.0 │ └── ✕ unmet peer i18next@">= 23.2.3": found 22.5.1 in @metamask/sdk-install-modal-web └─┬ react-i18next 13.5.0 └── ✕ unmet peer i18next@">= 23.2.3": found 22.5.1 in @metamask/sdk ```

changeset-bot · 2024-02-23T23:29:43Z

⚠️ No Changeset found

Latest commit: 583ae77

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

tash-2s · 2024-02-25T21:32:59Z

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

@@ -14,12 +14,14 @@
    "@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",


Wagmi v2 needs this @tanstack/react-query installed alongside.

tash-2s · 2024-02-25T21:38:52Z

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

    "contracts": "workspace:*",
+    "p-retry": "^5.1.2",


To adapt the transaction sending extension in this example, p-retry, which is utilized in the common library, has been installed here. If the direction of this implementation proves to be suitable, I plan to move the custom client implementation to the common library later. Then, I can remove p-retry from here.

tash-2s · 2024-02-25T21:40:23Z

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

These changes are to adapt Wagmi v2 API changes.

tash-2s · 2024-02-25T21:43:49Z

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

-setup().then(({ mud, wagmiConfig }) => {
+setup().then(({ network, wagmiConfig }) => {
  root.render(
-    <WagmiConfig config={wagmiConfig}>
-      <ExternalWallet />
-      <MUDReadProvider value={mud}>
-        <MUDWriteProvider>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ExternalWallet />
+        <MUDNetworkProvider value={network}>
          <App />
          {import.meta.env.DEV && <DevTools />}
-        </MUDWriteProvider>
-      </MUDReadProvider>
-    </WagmiConfig>
+        </MUDNetworkProvider>
+      </QueryClientProvider>
+    </WagmiProvider>


The write context has been removed since we don't have states to hold for that.

tash-2s · 2024-02-25T21:52:09Z

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

+    // `walletClient = connectorWalletClient.extend(burnerActions);` is unnecessary for an external wallet
+    walletClient = connectorWalletClient.extend(setupObserverActions(network.onWrite));


Here is the code for creating the custom client.
I've realized that nonce management and retry functionality are unnecessary (though they work) for external wallets. This is because MetaMask ignores the nonce value, and the retry behavior might not be desirable for external wallets.

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.

tash-2s · 2024-02-25T21:59:36Z

examples/minimal/packages/client-react-external-wallet/src/mud/customWalletClient.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) => {


This functions similarly to mud_writeContract and mud_sendTransaction through the viem client interactions, with the exception of transaction simulation. This approach is consistent with the standard viem action behavior, which requires users to initiate the simulation separately when needed.

tash-2s · 2024-02-25T22:07:23Z

This PR is ready for review! 👐 @holic Could you review this when you have time?

holic

there's a bunch going on here that we can just upstream into mud directly as improvements that we know we need to make, which will help to simplify the diff of this PR

holic · 2024-02-27T14:03:13Z

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

+    // `walletClient = connectorWalletClient.extend(burnerActions);` is unnecessary for an external wallet
+    walletClient = connectorWalletClient.extend(setupObserverActions(network.onWrite));


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.

holic · 2024-02-27T14:04:21Z

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

+
+              const nonce = nonceManager.nextNonce();
+              debug("sending tx with nonce", nonce, "to", args.to);
+              return sendTransaction(client, { ...args, nonce } as typeof args);


we should prob use getAction('sendTransaction') here instead of importing from viem, in case the client has overridden this method already

session wallet

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.

getAction

Right, using getAction is better since it accounts for more extensions beforehand. I'll switch to getAction.

holic · 2024-02-27T14:05:33Z

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

+      return result;
+    },
+  });
+};


can we pull these actions out into a separate, independent PR that adds them to the common package and import them here?

will do! 💪

holic · 2024-02-27T14:06:37Z

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

    tables,
    useStore,
    publicClient,
    latestBlock$,
    storedBlockLogs$,
    waitForTransaction,
+    onWrite,
+    write$: write$.asObservable().pipe(share()),


this data flow feels a little weird now, curious if you have ideas for improving this

Is it weird? 🤔 I think the app requires a single write$ for the dev-tool, which can be used for any wallet clients. Hence, it made sense to me to include this in the setup.

holic · 2024-02-27T14:07:58Z

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

+export const supportedChains: MUDChain[] = [
+  {
+    ...mudFoundry,
+    // This is not an actual explorer URL; however, Wagmi requires a URL here. Wagmi uses the `blockExplorers` config of this chain to determine the `blockExplorerUrls` value for `wallet_addEthereumChain`. The `blockExplorerUrls` must be either null or an array containing at least one URL; however, Wagmi exclusively employs the array format. Thus, we need to include at least one URL here.


can we pull this out and fix it in the common package instead of here?

will do in a separate PR!

holic · 2024-02-27T14:09:09Z

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

+    account: client.account,
+  });
+  const tx = await client.writeContract(request);
+  network.waitForTransaction(tx);


would be neat if this was a custom client action too, which means we could simplify the args to potentially just the public client + wallet client

there's a bit of a chicken-and-egg problem though, where functions like syncToZustand require the public client and return waitForTransaction, which we'd need to extend the public client

maybe we just pass in the plain public client to set up the sync then extend it before returning it to the rest of the app?

const publicClient = createPublicClient(...); const syncResult = syncToZustand({ publicClient, ... }) return { publicClient: publicClient.extend(syncActions(syncResult)), ... }

thoughts?

Having waitForTransaction as a viem client action makes sense. I'll look into this.

holic · 2024-08-15T08:50:35Z

closing as we're taking a different approach for onboarding

tash-2s added 2 commits February 23, 2024 11:23

wip: upgrading wagmi

59960ad

This was referenced Feb 23, 2024

WIP: viem custom client within external wallet example #2294

Closed

Better wallet support #2256

Closed

feat(examples): add external wallet support example #2306

Closed

tash-2s added 5 commits February 25, 2024 14:16

upgrade wagmi to v2 to use viem v2

999720c

use custom client

b658666

restructure react components

51c0e25

type walletclient

baa581a

lint & fix

583ae77

vercel bot deployed to Preview February 25, 2024 20:23 View deployment

tash-2s changed the title ~~WIP: viem custom client within external wallet example~~ feat(examples): upgrade wagmi to v2 and implement viem custom client within example Feb 25, 2024

tash-2s commented Feb 25, 2024

View reviewed changes

tash-2s marked this pull request as ready for review February 25, 2024 22:01

tash-2s requested review from alvrs, holic and yonadaa as code owners February 25, 2024 22:01

tash-2s mentioned this pull request Feb 25, 2024

feat(examples): support external wallet delegating to burner wallet within example #2309

Closed

holic reviewed Feb 27, 2024

View reviewed changes

tash-2s mentioned this pull request Mar 11, 2024

feat(templates): integrate external wallet into React template #2314

Closed

holic closed this Aug 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307

feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307

tash-2s commented Feb 23, 2024 •

edited

Loading

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

tash-2s Feb 25, 2024

tash-2s Feb 25, 2024

tash-2s Feb 25, 2024

tash-2s Feb 25, 2024

tash-2s Feb 25, 2024

holic Feb 27, 2024

tash-2s Feb 25, 2024

tash-2s commented Feb 25, 2024

holic left a comment

holic Feb 27, 2024

holic Feb 27, 2024

tash-2s Feb 27, 2024

holic Feb 27, 2024

tash-2s Feb 27, 2024

holic Feb 27, 2024

tash-2s Feb 27, 2024

holic Feb 27, 2024

tash-2s Feb 27, 2024 •

edited

Loading

holic Feb 27, 2024

tash-2s Feb 27, 2024 •

edited

Loading

holic commented Aug 15, 2024

		// `walletClient = connectorWalletClient.extend(burnerActions);` is unnecessary for an external wallet
		walletClient = connectorWalletClient.extend(setupObserverActions(network.onWrite));

feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307

feat(examples): upgrade wagmi to v2 and implement viem custom client within example #2307

Conversation

tash-2s commented Feb 23, 2024 • edited Loading

changeset-bot bot commented Feb 23, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tash-2s commented Feb 25, 2024

holic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tash-2s Feb 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tash-2s Feb 27, 2024 • edited Loading

Choose a reason for hiding this comment

holic commented Aug 15, 2024

tash-2s commented Feb 23, 2024 •

edited

Loading

changeset-bot bot commented Feb 23, 2024 •

edited

Loading

tash-2s Feb 27, 2024 •

edited

Loading

tash-2s Feb 27, 2024 •

edited

Loading