Skip to content

Commit eb603f8

Browse files
joaquim-vergesjoaquim-verges
authored
[Multi] Update dependencies, improve wagmi adapter (#8167)
1 parent e11b0da commit eb603f8

File tree

28 files changed

+4147
-818
lines changed

28 files changed

+4147
-818
lines changed

‎.changeset/grumpy-toes-switch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@thirdweb-dev/wagmi-adapter": patch
3+
---
4+
5+
Update dependencies, better storage management

‎.changeset/quiet-gifts-lead.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Update dependencies

‎apps/wagmi-demo/.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_THIRDWEB_CLIENT_ID=

‎apps/wagmi-demo/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
.env

‎apps/wagmi-demo/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
legacy-peer-deps = true

‎apps/wagmi-demo/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Thirdweb Wagmi Adapter
2+
3+
This is a demo of the [thirdweb Wagmi Adapter](https://github.com/thirdweb-dev/js/tree/main/packages/wagmi-adapter).
4+
5+
It demonstrates how to connect [in-app smart wallets](https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure) to a Wagmi app.
6+
7+
Users connect with google, and obtain a ERC-4337 smart account that can be used to interact with the app without paying for gas.
8+
9+
```ts
10+
// src/wagmi.ts
11+
export const config = createConfig({
12+
chains: [chain],
13+
connectors: [
14+
inAppWalletConnector({
15+
client,
16+
smartAccount: {
17+
chain: thirdwebChain(chain),
18+
sponsorGas: true,
19+
},
20+
}),
21+
],
22+
transports: {
23+
[chain.id]: http(),
24+
},
25+
});
26+
```
27+
28+
## Prerequisites
29+
30+
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).
31+
32+
## How to run
33+
34+
```bash
35+
pnpm install
36+
pnpm dev
37+
```

‎apps/wagmi-demo/biome.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
3+
"extends": "//",
4+
"overrides": [
5+
{
6+
"assist": {
7+
"actions": {
8+
"source": {
9+
"useSortedKeys": "off"
10+
}
11+
}
12+
},
13+
"includes": ["package.json"]
14+
}
15+
]
16+
}

‎apps/wagmi-demo/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Create Wagmi</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎apps/wagmi-demo/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "wagmi-inapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview",
10+
"fix": "biome check ./src --fix",
11+
"format": "biome format ./src --write",
12+
"lint": "biome check ./src"
13+
},
14+
"dependencies": {
15+
"@tanstack/react-query": "5.81.5",
16+
"@thirdweb-dev/wagmi-adapter": "workspace:*",
17+
"react": "19.1.0",
18+
"react-dom": "19.1.0",
19+
"thirdweb": "workspace:*",
20+
"viem": "2.37.9",
21+
"wagmi": "2.17.5"
22+
},
23+
"devDependencies": {
24+
"@biomejs/biome": "2.0.6",
25+
"@types/react": "19.1.8",
26+
"@types/react-dom": "19.1.6",
27+
"@vitejs/plugin-react": "5.0.4",
28+
"@wagmi/cli": "latest",
29+
"buffer": "^6.0.3",
30+
"typescript": "5.8.3",
31+
"vite": "7.1.7"
32+
}
33+
}

‎apps/wagmi-demo/src/App.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import type { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
2+
import { ConnectButton } from "thirdweb/react";
3+
import {
4+
useAccount,
5+
useConnect,
6+
useDisconnect,
7+
useSendTransaction,
8+
} from "wagmi";
9+
import { chain, client } from "./wagmi.js";
10+
11+
function App() {
12+
const account = useAccount();
13+
const { connectors, connect, status, error } = useConnect();
14+
const { disconnect } = useDisconnect();
15+
const {
16+
sendTransaction,
17+
isPending,
18+
isSuccess,
19+
isError,
20+
error: sendTxError,
21+
data: sendTxData,
22+
} = useSendTransaction();
23+
return (
24+
<>
25+
<div>
26+
<h2>Account</h2>
27+
28+
<div>
29+
status: {account.status}
30+
<br />
31+
addresses: {JSON.stringify(account.addresses)}
32+
<br />
33+
chainId: {account.chainId}
34+
</div>
35+
36+
{account.status === "connected" && (
37+
<button type="button" onClick={() => disconnect()}>
38+
Disconnect
39+
</button>
40+
)}
41+
</div>
42+
43+
<div>
44+
<h2>Connect</h2>
45+
<ConnectButton
46+
client={client}
47+
onConnect={(wallet) => {
48+
// auto connect to wagmi on tw connect
49+
const twConnector = connectors.find(
50+
(c) => c.id === "in-app-wallet",
51+
);
52+
if (twConnector) {
53+
const options = {
54+
wallet,
55+
} satisfies ConnectionOptions;
56+
connect({
57+
connector: twConnector,
58+
chainId: chain.id,
59+
...options,
60+
});
61+
}
62+
}}
63+
/>
64+
{connectors.map((connector) => (
65+
<button
66+
key={connector.uid}
67+
onClick={() => {
68+
if (connector.id === "in-app-wallet") {
69+
const connectOptions = {
70+
strategy: "google",
71+
} satisfies ConnectionOptions;
72+
connect({
73+
connector,
74+
chainId: chain.id,
75+
...connectOptions,
76+
});
77+
} else {
78+
connect({ connector, chainId: chain.id });
79+
}
80+
}}
81+
type="button"
82+
>
83+
{connector.name}
84+
</button>
85+
))}
86+
<div>{status}</div>
87+
<div>{error?.message}</div>
88+
</div>
89+
{account && (
90+
<div>
91+
<h2>Transact</h2>
92+
<button
93+
onClick={() => sendTransaction({ to: account.address, value: 0n })}
94+
type="button"
95+
>
96+
Send Tx
97+
</button>
98+
<div>{isPending ? "Sending..." : ""}</div>
99+
<div>
100+
{isSuccess
101+
? `Success: ${sendTxData}`
102+
: isError
103+
? sendTxError?.message
104+
: ""}
105+
</div>
106+
</div>
107+
)}
108+
</>
109+
);
110+
}
111+
112+
export default App;

0 commit comments

Comments
 (0)