Skip to content

Commit 6901f70

Browse files
bpierrebpierre
committed
Wagmi v2 compatibility
1 parent 4806b7b commit 6901f70

File tree

8 files changed

+5975
-2641
lines changed

8 files changed

+5975
-2641
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ As with most React components, addreth relies on a CSS foundation in order to wo
8585
```tsx
8686
import { Addreth, AddrethConfig } from "addreth";
8787
import "addreth/styles.css";
88-
88+
8989
function App() {
9090
return (
9191
<AddrethConfig externalCss>
@@ -400,9 +400,9 @@ Yes, both the component and its styles can be prerendered on the server.
400400

401401
Yes, Addreth is declared as a Client Component in this context. Check out this [excellent article by Josh Comeau](https://www.joshwcomeau.com/react/server-components/) to learn more about how it works.
402402

403-
### Does it work with Ethers.js or other Ethereum libraries?
403+
### Does it work with Ethers, Web3.js or other Ethereum libraries?
404404

405-
You can wrap the component and set `icon` and `label` to anything you want, including ENS name and avatar coming from another library.
405+
Yes, wagmi is only used for ENS related features if present, but the component works without. For example, you could wrap Addreth and use another library to fetch the ENS name and avatar corresponding to the address, and set these as `icon` and `label`.
406406

407407
### I am not using wagmi, but my webpack-based bundler (Next.js, Create React App) says it cannot resolve the dependency.
408408

‎examples/api-demo/package.json

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@tanstack/react-query": "^5.20.5",
1213
"addreth": "workspace:*",
13-
"next": "14.0.3",
14-
"prism-react-renderer": "^2.2.0",
14+
"next": "14.1.0",
15+
"prism-react-renderer": "^2.3.1",
1516
"react": "^18",
1617
"react-dom": "^18",
17-
"wagmi": "^1.4.7"
18+
"viem": "^2",
19+
"wagmi": "^2"
1820
},
1921
"devDependencies": {
20-
"@types/node": "^20.9.2",
21-
"@types/react": "^18",
22-
"@types/react-dom": "^18",
23-
"eslint": "^8.54.0",
24-
"eslint-config-next": "14.0.3",
25-
"typescript": "^5"
22+
"@types/node": "^20.11.17",
23+
"@types/react": "^18.2.55",
24+
"@types/react-dom": "^18.2.19",
25+
"eslint": "^8.56.0",
26+
"eslint-config-next": "14.1.0",
27+
"typescript": "^5.3.3"
2628
}
2729
}

‎examples/api-demo/src/app/page.tsx

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,26 @@
22

33
import type { ReactNode } from "react";
44

5+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
56
import { Addreth, AddrethConfig } from "addreth";
67
import { Highlight, themes } from "prism-react-renderer";
78
import { useState } from "react";
8-
import { configureChains, createConfig, mainnet, WagmiConfig } from "wagmi";
9-
import { publicProvider } from "wagmi/providers/public";
9+
import { WagmiProvider } from "wagmi";
10+
import { createConfig, http } from "wagmi";
11+
import { mainnet } from "wagmi/chains";
1012
import { commit, figtree } from "../fonts";
1113
import styles from "./page.module.css";
1214
import { RainbowAvatar } from "./RainbowAvatar";
1315

16+
const queryClient = new QueryClient();
17+
18+
const config = createConfig({
19+
chains: [mainnet],
20+
transports: {
21+
[mainnet.id]: http(),
22+
},
23+
});
24+
1425
const ADDR1 = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
1526

1627
type Demo = [
@@ -210,50 +221,41 @@ const DEMOS: DemoDeclaration[] = [
210221
];
211222
/* eslint-enable react/jsx-key */
212223

213-
const { publicClient, webSocketPublicClient } = configureChains(
214-
[mainnet],
215-
[publicProvider()],
216-
);
217-
218-
const config = createConfig({
219-
autoConnect: true,
220-
publicClient,
221-
webSocketPublicClient,
222-
});
223-
224224
export default function App() {
225225
return (
226-
<WagmiConfig config={config}>
227-
<AddrethConfig
228-
font={figtree.style.fontFamily}
229-
fontMono={commit.style.fontFamily}
230-
>
231-
<div className={styles.main}>
232-
<div className={styles.header}>
233-
<h1>
234-
addreth examples
235-
</h1>
236-
<p>
237-
<a
238-
href="https://github.com/bpierre/addreth"
239-
rel="noopener noreferrer"
240-
target="_blank"
241-
>
242-
github.com/bpierre/addreth
243-
</a>
244-
</p>
245-
</div>
246-
<div className={styles.demos}>
247-
{DEMOS.map((demo, index) => (
248-
<Demo
249-
key={index}
250-
demo={demo}
251-
/>
252-
))}
226+
<WagmiProvider config={config}>
227+
<QueryClientProvider client={queryClient}>
228+
<AddrethConfig
229+
font={figtree.style.fontFamily}
230+
fontMono={commit.style.fontFamily}
231+
>
232+
<div className={styles.main}>
233+
<div className={styles.header}>
234+
<h1>
235+
addreth examples
236+
</h1>
237+
<p>
238+
<a
239+
href="https://github.com/bpierre/addreth"
240+
rel="noopener noreferrer"
241+
target="_blank"
242+
>
243+
github.com/bpierre/addreth
244+
</a>
245+
</p>
246+
</div>
247+
<div className={styles.demos}>
248+
{DEMOS.map((demo, index) => (
249+
<Demo
250+
key={index}
251+
demo={demo}
252+
/>
253+
))}
254+
</div>
253255
</div>
254-
</div>
255-
</AddrethConfig>
256-
</WagmiConfig>
256+
</AddrethConfig>
257+
</QueryClientProvider>
258+
</WagmiProvider>
257259
);
258260
}
259261

‎examples/nextjs/package.json

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,21 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@tanstack/react-query": "^5.20.5",
1213
"addreth": "workspace:*",
13-
"next": "14.0.3",
14+
"next": "14.1.0",
1415
"rand-seed": "^1.0.2",
1516
"react": "^18",
1617
"react-dom": "^18",
17-
"wagmi": "^1.4.7"
18+
"viem": "^2",
19+
"wagmi": "^2"
1820
},
1921
"devDependencies": {
20-
"@types/node": "^20.9.2",
21-
"@types/react": "^18",
22-
"@types/react-dom": "^18",
23-
"eslint": "^8.54.0",
24-
"eslint-config-next": "14.0.3",
25-
"typescript": "^5"
22+
"@types/node": "^20.11.17",
23+
"@types/react": "^18.2.55",
24+
"@types/react-dom": "^18.2.19",
25+
"eslint": "^8.56.0",
26+
"eslint-config-next": "14.1.0",
27+
"typescript": "^5.3.3"
2628
}
2729
}

‎examples/nextjs/src/app/page.tsx

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
"use client";
22

3+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
34
import { Addreth, AddrethConfig } from "addreth";
45
import Rand from "rand-seed";
5-
import { configureChains, createConfig, mainnet, WagmiConfig } from "wagmi";
6-
import { publicProvider } from "wagmi/providers/public";
6+
import { createConfig, http, WagmiProvider } from "wagmi";
7+
import { mainnet } from "wagmi/chains";
78
import styles from "./page.module.css";
89

9-
const rand = new Rand("1234");
10+
const queryClient = new QueryClient();
1011

11-
const ADDRESSES_COUNT = 60;
12+
const config = createConfig({
13+
chains: [mainnet],
14+
transports: {
15+
[mainnet.id]: http(),
16+
},
17+
});
18+
19+
const rand = new Rand("1234");
1220

13-
const ADDRESSES = Array.from({ length: ADDRESSES_COUNT }, () => {
21+
const ADDRESSES = Array.from({ length: 60 }, () => {
1422
let address = "0x";
1523
const chars = "abcdef0123456789";
1624
for (let i = 0; i < 40; i++) {
@@ -19,32 +27,23 @@ const ADDRESSES = Array.from({ length: ADDRESSES_COUNT }, () => {
1927
return address as `0x${string}`;
2028
});
2129

22-
const { publicClient, webSocketPublicClient } = configureChains(
23-
[mainnet],
24-
[publicProvider()],
25-
);
26-
27-
const config = createConfig({
28-
autoConnect: true,
29-
publicClient,
30-
webSocketPublicClient,
31-
});
32-
3330
export default function Home() {
3431
return (
35-
<WagmiConfig config={config}>
36-
<main className={styles.main}>
37-
<AddrethConfig>
38-
{ADDRESSES.map((address) => (
39-
<Addreth
40-
key={address}
41-
address={address}
42-
theme="dark"
43-
fontMono="monospace"
44-
/>
45-
))}
46-
</AddrethConfig>
47-
</main>
48-
</WagmiConfig>
32+
<WagmiProvider config={config}>
33+
<QueryClientProvider client={queryClient}>
34+
<main className={styles.main}>
35+
<AddrethConfig>
36+
{ADDRESSES.map((address) => (
37+
<Addreth
38+
key={address}
39+
address={address}
40+
theme="dark"
41+
fontMono="monospace"
42+
/>
43+
))}
44+
</AddrethConfig>
45+
</main>
46+
</QueryClientProvider>
47+
</WagmiProvider>
4948
);
5049
}

‎package.json

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -47,33 +47,28 @@
4747
"peerDependencies": {
4848
"react": ">=18.0.0",
4949
"react-dom": ">=18.0.0",
50-
"wagmi": ">=1.4.0"
51-
},
52-
"peerDependenciesMeta": {
53-
"wagmi": {
54-
"optional": true
55-
}
50+
"wagmi": ">=2.0.0"
5651
},
5752
"devDependencies": {
58-
"@compiled/babel-plugin": "^0.25.0",
59-
"@types/react": "^18.2.37",
60-
"@types/react-dom": "^18.2.15",
61-
"@typescript-eslint/eslint-plugin": "^6.11.0",
62-
"@typescript-eslint/parser": "^6.11.0",
63-
"@vanilla-extract/css": "^1.14.0",
64-
"@vanilla-extract/esbuild-plugin": "^2.3.1",
65-
"@vanilla-extract/vite-plugin": "^3.9.1",
66-
"@vitejs/plugin-react-swc": "^3.5.0",
53+
"@compiled/babel-plugin": "^0.28.2",
54+
"@types/react": "^18.2.55",
55+
"@types/react-dom": "^18.2.19",
56+
"@typescript-eslint/eslint-plugin": "^7.0.1",
57+
"@typescript-eslint/parser": "^7.0.1",
58+
"@vanilla-extract/css": "^1.14.1",
59+
"@vanilla-extract/esbuild-plugin": "^2.3.5",
60+
"@vanilla-extract/vite-plugin": "^4.0.4",
61+
"@vitejs/plugin-react-swc": "^3.6.0",
6762
"blo": "^1.1.1",
68-
"esbuild": "^0.19.5",
69-
"eslint": "^8.54.0",
63+
"esbuild": "^0.20.0",
64+
"eslint": "^8.56.0",
7065
"eslint-plugin-react": "^7.33.2",
7166
"eslint-plugin-react-hooks": "^4.6.0",
72-
"eslint-plugin-react-refresh": "^0.4.4",
73-
"lightningcss": "^1.22.1",
74-
"rollup-plugin-preserve-directives": "^0.2.0",
75-
"typescript": "^5.0.2",
76-
"vite": "^5.0.0",
77-
"vite-plugin-dts": "^3.6.3"
67+
"eslint-plugin-react-refresh": "^0.4.5",
68+
"lightningcss": "^1.23.0",
69+
"rollup-plugin-preserve-directives": "^0.4.0",
70+
"typescript": "^5.3.3",
71+
"vite": "^5.1.2",
72+
"vite-plugin-dts": "^3.7.2"
7873
}
7974
}

0 commit comments

Comments
 (0)