feat: wagmi v2 migration, eip-6963 wallet support

package.json

@@ -43,11 +43,10 @@
   "devDependencies": {
     "@biomejs/biome": "1.4.1",
     "@changesets/cli": "2.27.1",
+    "@tanstack/react-query": "^5.17.9",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@lavamoat/preinstall-always-fail": "^2.0.0",
-    "@tanstack/query-core": "^4.28.0",
-    "@tanstack/react-query": "^4.28.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
@@ -72,14 +71,14 @@
     "react-dom": "^18.2.0",
     "recursive-readdir-files": "^2.3.1",
     "typescript": "^5.0.4",
-    "viem": "~1.21.4",
+    "viem": "^2.0.3",
     "vitest": "^0.33.0",
-    "wagmi": "~1.4.13"
+    "wagmi": "^2.0.3"
   },
   "packageManager": "pnpm@8.14.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild"
     ]
   }
-}
+}

packages/create-rainbowkit/generated-test-app/package.json

@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
+    "@tanstack/react-query": "^5.17.9",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "~1.21.4",
-    "wagmi": "~1.4.13"
+    "viem": "^2.0.3",
+    "wagmi": "^2.0.3"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
@@ -23,4 +24,4 @@
     "eslint-config-next": "^14.0.4",
     "typescript": "^5.0.4"
   }
-}
+}

packages/create-rainbowkit/generated-test-app/pages/_app.tsx

@@ -2,8 +2,8 @@ import '../styles/globals.css';
 import '@rainbow-me/rainbowkit/styles.css';
 import type { AppProps } from 'next/app';
 
-import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { WagmiConfig } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiProvider, http } from 'wagmi';
 import {
   arbitrum,
   base,
@@ -12,9 +12,11 @@ import {
   polygon,
   sepolia,
   zora,
+  Chain,
 } from 'wagmi/chains';
+import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit';
 
-const chains = [
+const chains: readonly [Chain, ...Chain[]] = [
   mainnet,
   polygon,
   optimism,
@@ -24,19 +26,34 @@ const chains = [
   ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
 ];
 
-const wagmiConfig = getDefaultConfig({
+const config = getDefaultConfig({
   appName: 'RainbowKit App',
   projectId: 'YOUR_PROJECT_ID',
+  appDescription: 'RainobwKit Demo App',
+  appUrl: 'https://www.rainbowkit.com',
   chains,
+  transports: {
+    [mainnet.id]: http(),
+    [polygon.id]: http(),
+    [optimism.id]: http(),
+    [arbitrum.id]: http(),
+    [base.id]: http(),
+    [zora.id]: http(),
+    [sepolia.id]: http(),
+  },
 });
 
+const client = new QueryClient();
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider chains={chains}>
-        <Component {...pageProps} />
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={client}>
+        <RainbowKitProvider chains={chains}>
+          <Component {...pageProps} />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

packages/create-rainbowkit/templates/next-app/package.json

@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
+    "@tanstack/react-query": "^5.17.9",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "~1.21.4",
-    "wagmi": "~1.4.13"
+    "viem": "^2.0.3",
+    "wagmi": "^2.0.3"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",
@@ -23,4 +24,4 @@
     "eslint-config-next": "^14.0.4",
     "typescript": "^5.0.4"
   }
-}
+}

packages/create-rainbowkit/templates/next-app/pages/_app.tsx

@@ -2,8 +2,8 @@ import '../styles/globals.css';
 import '@rainbow-me/rainbowkit/styles.css';
 import type { AppProps } from 'next/app';
 
-import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { WagmiConfig } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { http, WagmiProvider } from 'wagmi';
 import {
   arbitrum,
   base,
@@ -12,9 +12,11 @@ import {
   polygon,
   sepolia,
   zora,
+  Chain,
 } from 'wagmi/chains';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 
-const chains = [
+const chains: readonly [Chain, ...Chain[]] = [
   mainnet,
   polygon,
   optimism,
@@ -24,19 +26,34 @@ const chains = [
   ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
 ];
 
-const wagmiConfig = getDefaultConfig({
+const config = getDefaultConfig({
   appName: 'RainbowKit App',
   projectId: 'YOUR_PROJECT_ID',
+  appDescription: 'RainobwKit Demo App',
+  appUrl: 'https://www.rainbowkit.com',
   chains,
+  transports: {
+    [mainnet.id]: http(),
+    [polygon.id]: http(),
+    [optimism.id]: http(),
+    [arbitrum.id]: http(),
+    [base.id]: http(),
+    [zora.id]: http(),
+    [sepolia.id]: http(),
+  },
 });
 
+const client = new QueryClient();
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider chains={chains}>
-        <Component {...pageProps} />
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={client}>
+        <RainbowKitProvider chains={chains}>
+          <Component {...pageProps} />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

packages/create-rainbowkit/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "preserveSymlinks": true,
     "target": "ES2020",
+    "preserveSymlinks": false,
     "outDir": "dist"
   },
   "include": ["src", "templates"],
   "exclude": ["node_modules"],
-}
+}

packages/example/package.json

@@ -8,14 +8,15 @@
     "@rainbow-me/rainbowkit": "workspace:*",
     "@rainbow-me/rainbowkit-siwe-next-auth": "workspace:*",
     "@rainbow-me/rainbow-button": "workspace:*",
+    "@tanstack/react-query": "^5.17.9",
     "ethers": "^5.6.8",
     "next": "^14.0.4",
     "next-auth": "4.24.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "siwe": "^2.1.4",
-    "viem": "~1.21.4",
-    "wagmi": "~1.4.13"
+    "viem": "^2.0.3",
+    "wagmi": "^2.0.3"
   },
   "scripts": {
     "dev": "next dev",
@@ -25,4 +26,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
+}