Wagmi v2 compatibility

bpierre · Feb 15, 2024 · 6901f70 · 6901f70
1 parent 4806b7b
commit 6901f70
Show file tree

Hide file tree

Showing 8 changed files with 5,975 additions and 2,641 deletions.
diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ As with most React components, addreth relies on a CSS foundation in order to wo
   ```tsx
   import { Addreth, AddrethConfig } from "addreth";
   import "addreth/styles.css";
-  
+
   function App() {
     return (
       <AddrethConfig externalCss>
@@ -400,9 +400,9 @@ Yes, both the component and its styles can be prerendered on the server.
 
 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.
 
-### Does it work with Ethers.js or other Ethereum libraries?
+### Does it work with Ethers, Web3.js or other Ethereum libraries?
 
-You can wrap the component and set `icon` and `label` to anything you want, including ENS name and avatar coming from another library.
+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`.
 
 ### I am not using wagmi, but my webpack-based bundler (Next.js, Create React App) says it cannot resolve the dependency.
 

diff --git a/examples/api-demo/package.json b/examples/api-demo/package.json
@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.20.5",
     "addreth": "workspace:*",
-    "next": "14.0.3",
-    "prism-react-renderer": "^2.2.0",
+    "next": "14.1.0",
+    "prism-react-renderer": "^2.3.1",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "^1.4.7"
+    "viem": "^2",
+    "wagmi": "^2"
   },
   "devDependencies": {
-    "@types/node": "^20.9.2",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "14.0.3",
-    "typescript": "^5"
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5.3.3"
   }
 }
diff --git a/examples/api-demo/src/app/page.tsx b/examples/api-demo/src/app/page.tsx
@@ -2,15 +2,26 @@
 
 import type { ReactNode } from "react";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Addreth, AddrethConfig } from "addreth";
 import { Highlight, themes } from "prism-react-renderer";
 import { useState } from "react";
-import { configureChains, createConfig, mainnet, WagmiConfig } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
+import { WagmiProvider } from "wagmi";
+import { createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
 import { commit, figtree } from "../fonts";
 import styles from "./page.module.css";
 import { RainbowAvatar } from "./RainbowAvatar";
 
+const queryClient = new QueryClient();
+
+const config = createConfig({
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
+});
+
 const ADDR1 = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
 
 type Demo = [
@@ -210,50 +221,41 @@ const DEMOS: DemoDeclaration[] = [
 ];
 /* eslint-enable react/jsx-key */
 
-const { publicClient, webSocketPublicClient } = configureChains(
-  [mainnet],
-  [publicProvider()],
-);
-
-const config = createConfig({
-  autoConnect: true,
-  publicClient,
-  webSocketPublicClient,
-});
-
 export default function App() {
   return (
-    <WagmiConfig config={config}>
-      <AddrethConfig
-        font={figtree.style.fontFamily}
-        fontMono={commit.style.fontFamily}
-      >
-        <div className={styles.main}>
-          <div className={styles.header}>
-            <h1>
-              addreth examples
-            </h1>
-            <p>
-              <a
-                href="https://github.com/bpierre/addreth"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                github.com/bpierre/addreth
-              </a>
-            </p>
-          </div>
-          <div className={styles.demos}>
-            {DEMOS.map((demo, index) => (
-              <Demo
-                key={index}
-                demo={demo}
-              />
-            ))}
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <AddrethConfig
+          font={figtree.style.fontFamily}
+          fontMono={commit.style.fontFamily}
+        >
+          <div className={styles.main}>
+            <div className={styles.header}>
+              <h1>
+                addreth examples
+              </h1>
+              <p>
+                <a
+                  href="https://github.com/bpierre/addreth"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  github.com/bpierre/addreth
+                </a>
+              </p>
+            </div>
+            <div className={styles.demos}>
+              {DEMOS.map((demo, index) => (
+                <Demo
+                  key={index}
+                  demo={demo}
+                />
+              ))}
+            </div>
           </div>
-        </div>
-      </AddrethConfig>
-    </WagmiConfig>
+        </AddrethConfig>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.20.5",
     "addreth": "workspace:*",
-    "next": "14.0.3",
+    "next": "14.1.0",
     "rand-seed": "^1.0.2",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "^1.4.7"
+    "viem": "^2",
+    "wagmi": "^2"
   },
   "devDependencies": {
-    "@types/node": "^20.9.2",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "14.0.3",
-    "typescript": "^5"
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5.3.3"
   }
 }
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -1,16 +1,24 @@
 "use client";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Addreth, AddrethConfig } from "addreth";
 import Rand from "rand-seed";
-import { configureChains, createConfig, mainnet, WagmiConfig } from "wagmi";
-import { publicProvider } from "wagmi/providers/public";
+import { createConfig, http, WagmiProvider } from "wagmi";
+import { mainnet } from "wagmi/chains";
 import styles from "./page.module.css";
 
-const rand = new Rand("1234");
+const queryClient = new QueryClient();
 
-const ADDRESSES_COUNT = 60;
+const config = createConfig({
+  chains: [mainnet],
+  transports: {
+    [mainnet.id]: http(),
+  },
+});
+
+const rand = new Rand("1234");
 
-const ADDRESSES = Array.from({ length: ADDRESSES_COUNT }, () => {
+const ADDRESSES = Array.from({ length: 60 }, () => {
   let address = "0x";
   const chars = "abcdef0123456789";
   for (let i = 0; i < 40; i++) {
@@ -19,32 +27,23 @@ const ADDRESSES = Array.from({ length: ADDRESSES_COUNT }, () => {
   return address as `0x${string}`;
 });
 
-const { publicClient, webSocketPublicClient } = configureChains(
-  [mainnet],
-  [publicProvider()],
-);
-
-const config = createConfig({
-  autoConnect: true,
-  publicClient,
-  webSocketPublicClient,
-});
-
 export default function Home() {
   return (
-    <WagmiConfig config={config}>
-      <main className={styles.main}>
-        <AddrethConfig>
-          {ADDRESSES.map((address) => (
-            <Addreth
-              key={address}
-              address={address}
-              theme="dark"
-              fontMono="monospace"
-            />
-          ))}
-        </AddrethConfig>
-      </main>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <main className={styles.main}>
+          <AddrethConfig>
+            {ADDRESSES.map((address) => (
+              <Addreth
+                key={address}
+                address={address}
+                theme="dark"
+                fontMono="monospace"
+              />
+            ))}
+          </AddrethConfig>
+        </main>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
diff --git a/package.json b/package.json
@@ -47,33 +47,28 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "wagmi": ">=1.4.0"
-  },
-  "peerDependenciesMeta": {
-    "wagmi": {
-      "optional": true
-    }
+    "wagmi": ">=2.0.0"
   },
   "devDependencies": {
-    "@compiled/babel-plugin": "^0.25.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "@vanilla-extract/css": "^1.14.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.1",
-    "@vanilla-extract/vite-plugin": "^3.9.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@compiled/babel-plugin": "^0.28.2",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/esbuild-plugin": "^2.3.5",
+    "@vanilla-extract/vite-plugin": "^4.0.4",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "blo": "^1.1.1",
-    "esbuild": "^0.19.5",
-    "eslint": "^8.54.0",
+    "esbuild": "^0.20.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "lightningcss": "^1.22.1",
-    "rollup-plugin-preserve-directives": "^0.2.0",
-    "typescript": "^5.0.2",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.6.3"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "lightningcss": "^1.23.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.2",
+    "vite-plugin-dts": "^3.7.2"
   }
 }