Remove dynamic import of wagmi (#7)

This strategy was causing too many issues with Next.js. Consumers that are not using wagmi can import from `addreth/no-wagmi`. Also: - Move to [oxlint](https://oxc.rs/docs/guide/usage/linter). - Upgrade dependencies.
bpierre · Jul 21, 2024 · 32c6ae7 · 32c6ae7
1 parent 968cd25
commit 32c6ae7
Show file tree

Hide file tree

Showing 13 changed files with 3,116 additions and 4,729 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 - 👁 Display addresses in a compact way, while retaining the ability to see them in full.
 - 📋 Copy the address to the clipboard with a single click.
 - 👉 Check the address on the block explorer of your choice.
-- 🏷 **ENS resolution** works out of the box if [wagmi](https://wagmi.sh/) is present.
+- 🏷 **ENS resolution** works out of the box with [wagmi](https://wagmi.sh/) (optional).
 - 🌈 **Six themes** to choose from or to customize as desired.
 - 🎹 **Accessible**: keyboard navigation and focus states work as expected.
 - 💆‍♀️ **Zero configuration**: just import and drop `<Addreth />` in your app.
@@ -43,6 +43,9 @@ Import `Addreth` and add it to your app:
 ```tsx
 import { Addreth } from "addreth";
 
+// If you are not using wagmi, import from "addreth/no-wagmi":
+// import { Addreth } from "addreth/no-wagmi";
+
 function App() {
   return (
     <main>
@@ -400,27 +403,24 @@ 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, Web3.js or other Ethereum libraries?
-
-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.
+### I am not using wagmi, can I still use Addreth?
 
-Webpack attempts to resolve all imports including the optional dependencies imported via [`import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import), which addreth uses to detect the presence of [wagmi](https://wagmi.sh/).
+Yes, wagmi is only used for ENS related features if present, but the component can work without by importing `"addreth/no-wagmi"`:
 
-With Next.js, a solution to ignore this dependency by adding this to your next.config.js:
-
-```js
-webpack(conf) {
-  conf.resolve.fallback = { wagmi: false };
-  return conf;
-}
+```tsx
+import { Addreth } from "addreth/no-wagmi";
 ```
 
-With other webpack-based bundlers, you can use the `addreth/no-wagmi` import path:
+You can also use the mechanism of your choice to resolve the ENS name and avatar, and set these as `icon` and `label`:
 
 ```tsx
 import { Addreth } from "addreth/no-wagmi";
+import { useENS } from "my-ens-library";
+
+function App() {
+  const { name, avatar } = useENS("0x…");
+  return <Addreth address="0x…" icon={avatar} label={name} />;
+}
 ```
 
 ## License

diff --git a/examples/api-demo/next.config.js b/examples/api-demo/next.config.js
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/api-demo/package.json b/examples/api-demo/package.json
@@ -6,24 +6,23 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "pnpm oxlint ./src --import-plugin --react-perf-plugin --jsx-a11y-plugin --allow pedantic"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.20.5",
+    "@tanstack/react-query": "^5.51.11",
     "addreth": "workspace:*",
-    "next": "14.1.0",
+    "next": "14",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2",
-    "wagmi": "^2"
+    "react": "18",
+    "react-dom": "18",
+    "viem": "2",
+    "wagmi": "2"
   },
   "devDependencies": {
-    "@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"
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "oxlint": "^0.6.1",
+    "typescript": "^5.5.3"
   }
 }
diff --git a/examples/api-demo/src/app/page.tsx b/examples/api-demo/src/app/page.tsx
@@ -6,8 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Addreth, AddrethConfig } from "addreth";
 import { Highlight, themes } from "prism-react-renderer";
 import { useState } from "react";
-import { WagmiProvider } from "wagmi";
-import { createConfig, http } from "wagmi";
+import { createConfig, http, WagmiProvider } from "wagmi";
 import { mainnet } from "wagmi/chains";
 import { commit, figtree } from "../fonts";
 import styles from "./page.module.css";

diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -6,24 +6,23 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "pnpm oxlint ./src --import-plugin --react-perf-plugin --jsx-a11y-plugin --allow pedantic"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.20.5",
+    "@tanstack/react-query": "^5.51.11",
     "addreth": "workspace:*",
-    "next": "14.1.0",
+    "next": "14",
     "rand-seed": "^1.0.2",
-    "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2",
-    "wagmi": "^2"
+    "react": "18",
+    "react-dom": "18",
+    "viem": "2",
+    "wagmi": "2"
   },
   "devDependencies": {
-    "@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"
+    "@types/node": "20",
+    "@types/react": "18",
+    "@types/react-dom": "18",
+    "oxlint": "^0.6.1",
+    "typescript": "^5.5.3"
   }
 }
diff --git a/package.json b/package.json
@@ -19,9 +19,8 @@
   "bugs": "https://github.com/bpierre/addreth/issues",
   "repository": "github:bpierre/addreth",
   "scripts": {
-    "demo": "cd demo && pnpm dev",
     "build": "pnpm tsc && node ./build.js",
-    "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "pnpm oxlint ./src --import-plugin --react-perf-plugin --jsx-a11y-plugin --allow pedantic"
   },
   "type": "module",
   "sideEffects": false,
@@ -45,30 +44,25 @@
     "/dist"
   ],
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "wagmi": ">=2.0.0"
+    "react": "18",
+    "react-dom": "18",
+    "wagmi": "2"
   },
   "devDependencies": {
-    "@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.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.5",
-    "lightningcss": "^1.23.0",
+    "@compiled/babel-plugin": "^0.29.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/esbuild-plugin": "^2.3.8",
+    "@vanilla-extract/vite-plugin": "^4.0.13",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "blo": "^1.2.0",
+    "esbuild": "^0.23.0",
+    "lightningcss": "^1.25.1",
+    "oxlint": "^0.6.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.2",
-    "vite-plugin-dts": "^3.7.2"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "vite-plugin-dts": "^3.9.1"
   }
 }