Update dependencies, improve wagmi adapter

joaquim-verges · joaquim-verges · commit 17e93ddef815 · 2025-10-01T21:31:08.000+13:00
diff --git a/.changeset/grumpy-toes-switch.md b/.changeset/grumpy-toes-switch.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/wagmi-adapter": patch
+---
+
+Update dependencies, better storage management
diff --git a/.changeset/quiet-gifts-lead.md b/.changeset/quiet-gifts-lead.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update dependencies
diff --git a/apps/wagmi-demo/.env.example b/apps/wagmi-demo/.env.example
@@ -0,0 +1 @@
+VITE_THIRDWEB_CLIENT_ID=
diff --git a/apps/wagmi-demo/.gitignore b/apps/wagmi-demo/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
diff --git a/apps/wagmi-demo/.npmrc b/apps/wagmi-demo/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps = true
diff --git a/apps/wagmi-demo/README.md b/apps/wagmi-demo/README.md
@@ -0,0 +1,37 @@
+# Thirdweb Wagmi Adapter
+
+This is a demo of the [thirdweb Wagmi Adapter](https://github.com/thirdweb-dev/js/tree/main/packages/wagmi-adapter).
+
+It demonstrates how to connect [in-app smart wallets](https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure) to a Wagmi app.
+
+Users connect with google, and obtain a ERC-4337 smart account that can be used to interact with the app without paying for gas.
+
+```ts
+// src/wagmi.ts
+export const config = createConfig({
+  chains: [chain],
+  connectors: [
+    inAppWalletConnector({
+      client,
+      smartAccount: {
+        chain: thirdwebChain(chain),
+        sponsorGas: true,
+      },
+    }),
+  ],
+  transports: {
+    [chain.id]: http(),
+  },
+});
+```
+
+## Prerequisites
+
+Copy the `.env.example` file to `.env` and set your Thirdweb client ID. You can get your client ID from the [thirdweb dashboard](https://thirdweb.com).
+
+## How to run
+
+```bash
+pnpm install
+pnpm dev
+```
diff --git a/apps/wagmi-demo/biome.json b/apps/wagmi-demo/biome.json
@@ -0,0 +1,13 @@
+{
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 120
+  },
+  "linter": {
+    "enabled": true
+  },
+  "organizeImports": {
+    "enabled": true
+  }
+}
diff --git a/apps/wagmi-demo/index.html b/apps/wagmi-demo/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Create Wagmi</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/wagmi-demo/package.json b/apps/wagmi-demo/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "wagmi-inapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "biome check .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "5.90.2",
+    "@thirdweb-dev/wagmi-adapter": "workspace:*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "thirdweb": "workspace:*",
+    "viem": "2.37.9",
+    "wagmi": "2.17.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.0.6",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
+    "@vitejs/plugin-react": "5.0.4",
+    "@wagmi/cli": "latest",
+    "buffer": "^6.0.3",
+    "typescript": "5.8.3",
+    "vite": "7.1.7"
+  }
+}
diff --git a/apps/wagmi-demo/src/App.tsx b/apps/wagmi-demo/src/App.tsx
@@ -0,0 +1,70 @@
+import {useConnectedWallets} from "thirdweb/react"
+import { useAccount, useConnect, useDisconnect, useSendTransaction } from "wagmi";
+import { chain } from "./wagmi.js";
+
+function App() {
+  const account = useAccount();
+  const { connectors, connect, status, error } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { sendTransaction, isPending, isSuccess, isError, error: sendTxError, data: sendTxData } = useSendTransaction();
+  const wallets = useConnectedWallets();
+  console.log(wallets);
+  return (
+    <>
+      <div>
+        <h2>Account</h2>
+
+        <div>
+          status: {account.status}
+          <br />
+          addresses: {JSON.stringify(account.addresses)}
+          <br />
+          chainId: {account.chainId}
+        </div>
+
+        {account.status === "connected" && (
+          <button type="button" onClick={() => disconnect()}>
+            Disconnect
+          </button>
+        )}
+      </div>
+
+      <div>
+        <h2>Connect</h2>
+        {connectors.map((connector) => (
+          <button
+            key={connector.uid}
+            onClick={() => {
+              if (connector.id === "in-app-wallet") {
+                connect({
+                  connector,
+                  chainId: chain.id,
+                  strategy: "google",
+                });
+              } else {
+                connect({ connector, chainId: chain.id });
+              }
+            }}
+            type="button"
+          >
+            {connector.name}
+          </button>
+        ))}
+        <div>{status}</div>
+        <div>{error?.message}</div>
+      </div>
+      {account && (
+        <div>
+          <h2>Transact</h2>
+          <button onClick={() => sendTransaction({ to: account.address, value: 0n })} type="button">
+            Send Tx
+          </button>
+          <div>{isPending ? "Sending..." : ""}</div>
+          <div>{isSuccess ? `Success: ${sendTxData}` : isError ? sendTxError?.message : ""}</div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default App;
diff --git a/apps/wagmi-demo/src/index.css b/apps/wagmi-demo/src/index.css
@@ -0,0 +1,21 @@
+:root {
+  background-color: #181818;
+  color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #f8f8f8;
+    color: #181818;
+  }
+}
diff --git a/apps/wagmi-demo/src/main.tsx b/apps/wagmi-demo/src/main.tsx
@@ -0,0 +1,28 @@
+import { Buffer } from "buffer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { WagmiProvider } from "wagmi";
+
+import App from "./App.js";
+import { config } from "./wagmi.js";
+
+import "./index.css";
+import { ThirdwebProvider } from "thirdweb/react";
+
+globalThis.Buffer = Buffer;
+
+const queryClient = new QueryClient();
+
+// biome-ignore lint/style/noNonNullAssertion: always exists
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ThirdwebProvider>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </WagmiProvider>
+    </ThirdwebProvider>
+  </React.StrictMode>,
+);
diff --git a/apps/wagmi-demo/src/vite-env.d.ts b/apps/wagmi-demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/wagmi-demo/src/wagmi.ts b/apps/wagmi-demo/src/wagmi.ts
@@ -0,0 +1,39 @@
+import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
+import { createThirdwebClient, defineChain as thirdwebChain } from "thirdweb";
+import { http, createConfig } from "wagmi";
+import { baseSepolia } from "wagmi/chains";
+
+const clientId = import.meta.env.VITE_THIRDWEB_CLIENT_ID;
+
+if (!clientId) {
+  throw new Error("VITE_THIRDWEB_CLIENT_ID is not set. Get your client ID from https://thirdweb.com");
+}
+
+export const client = createThirdwebClient({
+  clientId,
+});
+
+export const chain = baseSepolia;
+export const thirdwebChainForWallet = thirdwebChain(baseSepolia.id);
+
+export const config = createConfig({
+  chains: [chain],
+  connectors: [
+    inAppWalletConnector({
+      client,
+      smartAccount: {
+        chain: thirdwebChain(chain.id),
+        sponsorGas: true,
+      },
+    }),
+  ],
+  transports: {
+    [chain.id]: http(),
+  },
+});
+
+declare module "wagmi" {
+  interface Register {
+    config: typeof config;
+  }
+}
diff --git a/apps/wagmi-demo/tsconfig.base.json b/apps/wagmi-demo/tsconfig.base.json
@@ -0,0 +1,47 @@
+{
+  // This tsconfig file contains the shared config for the build (tsconfig.build.json) and type checking (tsconfig.json) config.
+  "include": [],
+  "compilerOptions": {
+    // Incremental builds
+    // NOTE: Enabling incremental builds speeds up `tsc`. Keep in mind though that it does not reliably bust the cache when the `tsconfig.json` file changes.
+    "incremental": false,
+
+    // Type checking
+    "strict": true,
+    "useDefineForClassFields": true, // Not enabled by default in `strict` mode unless we bump `target` to ES2022.
+    "noFallthroughCasesInSwitch": true, // Not enabled by default in `strict` mode.
+    "noImplicitReturns": true, // Not enabled by default in `strict` mode.
+    "useUnknownInCatchVariables": true, // TODO: This would normally be enabled in `strict` mode but would require some adjustments to the codebase.
+    "noImplicitOverride": true, // Not enabled by default in `strict` mode.
+    "noUnusedLocals": true, // Not enabled by default in `strict` mode.
+    "noUnusedParameters": true, // Not enabled by default in `strict` mode.
+    "exactOptionalPropertyTypes": false, // Not enabled by default in `strict` mode.
+    "noUncheckedIndexedAccess": true, // Not enabled by default in `strict` mode.
+
+    // JavaScript support
+    "allowJs": false,
+    "checkJs": false,
+
+    // Interop constraints
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
+    "importHelpers": true, // This is only used for build validation. Since we do not have `tslib` installed, this will fail if we accidentally make use of anything that'd require injection of helpers.
+
+    // Language and environment
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
+    "target": "ES2021", // Setting this to `ES2021` enables native support for `Node v16+`: https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping.
+    "lib": [
+      "ES2022", // By using ES2022 we get access to the `.cause` property on `Error` instances.
+      "DOM" // We are adding `DOM` here to get the `fetch`, etc. types. This should be removed once these types are available via DefinitelyTyped.
+    ],
+
+    // Skip type checking for node modules
+    "skipLibCheck": true,
+
+    // jsx for "/react" portion
+    "jsx": "react-jsx"
+  }
+}
diff --git a/apps/wagmi-demo/tsconfig.json b/apps/wagmi-demo/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  // This configuration is used for local development and type checking.
+  "extends": "./tsconfig.base.json",
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  // "references": [{ "path": "./scripts/tsconfig.json" }],
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}
diff --git a/apps/wagmi-demo/vite.config.ts b/apps/wagmi-demo/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+/** @type {import('vite').UserConfig} */
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+});
diff --git a/packages/thirdweb/package.json b/packages/thirdweb/package.json
@@ -39,7 +39,7 @@
     "qrcode": "1.5.3",
     "toml": "3.0.0",
     "uqr": "0.1.2",
-    "viem": "2.33.2",
+    "viem": "2.37.9",
     "x402": "0.6.1",
     "zod": "3.25.75"
   },
diff --git a/packages/thirdweb/src/adapters/viem.ts b/packages/thirdweb/src/adapters/viem.ts
diff --git a/packages/thirdweb/src/event/actions/get-events.ts b/packages/thirdweb/src/event/actions/get-events.ts
diff --git a/packages/thirdweb/src/exports/react.native.ts b/packages/thirdweb/src/exports/react.native.ts
diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
diff --git a/packages/thirdweb/src/transaction/actions/estimate-gas.ts b/packages/thirdweb/src/transaction/actions/estimate-gas.ts
diff --git a/packages/wagmi-adapter/package.json b/packages/wagmi-adapter/package.json
diff --git a/packages/wagmi-adapter/src/connector.ts b/packages/wagmi-adapter/src/connector.ts
diff --git a/packages/wagmi-adapter/src/exports/thirdweb.ts b/packages/wagmi-adapter/src/exports/thirdweb.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@thirdweb-dev/wagmi-adapter": patch
 +---
++
 +Update dependencies, better storage management