feat: wagmi v2 migration, eip-6963 wallet support (#1601)

* rainbowkit-wagmi-v2

* fix: remove "installed" and "createConnector" because of EIP6963 support

* fix: use latest wagmi hooks and replace the old ones

* fix: add latest changes to add URI with wagmi alpha

* fix: remove outdated wagmi values and use new hooks

* fix: update wallets back to normal

* fix: all wallet connectors to use "createConnector" with their own provier

* fix: setup connectorsForWallets properly

* fix: refactor tests

* fix: use wallet connectors

* fix: refactor wallets

* fix: use onQrCode when listening to the wallet connect provider

* fix: integrate connect wallet on mobile

* fix: connectors should be using installed true or false as a sign for connector.ready in wagmiv2

* fix: merge EIP6963

* fix: make sure every project is integrated with wagmiv2

* fix: linting

* fix: lint errors

* feat: latest changes for eip6963 / wagmiv2

* fix: chain modal

* fix: prettify code

* fix: refactor test file to be matched with wagmiv2

* fix: linting issues

* fix: styles

* fix: cleanup code

* fix: cleanup connectors and code

* fix: @ts-expect-error touch callout

* fix: update to latest wagmi@beta / viem@beta version alongside with react tanstack query

* fix: inject "rkDetails" into connector instead of running through some conflicts

* fix: QueryClientProvider

* fix: cleanup

* fix: cleanup

* fix: tsc errors

* fix: preserve symlink

* fix: prettify

* fix: prettify

* fix: prettify

* fix: prettify

* fix: rainbowkit chains

* fix: types

* fix: cleanup <Provider /> and docs

* fix: update peer dependencies

* fix: add readonly tuple type for rainbowkit chains

* fix: chain tuple types with Chain and RainbowKitChain

* fix: merge conflicts

* fix: rainbow wallet and wallet button example lint issues

* fix: minor stuff

* fix: cleanup

* fix: linting issues with i18n

* fix: cleanup to only use goerli if testnet is provided

* fix: goerli

* fix: put wagmi before <QueryClientProvider />

* fix: create-react-app cleanup

* fix: with-remix example cleanup

* fix: filter out to only use rainbowkit connectors for <WalletButtonRendered />

* fix: cleanup code to use Chain from wagmi/chains

* fix: cleanup addLatestWalletId on mobile and desktop

* chore: dependency upgrade

* feat: combine eip6963 connectors with eip1193 connectors

* fix: refactor eip6963 connectors with mobile version

* chore: upgrade wagmi, viem to rc

* chore: merge conflicts

* chore: rename 'combineEIP6963WithRkConnectors' with 'mergeEIP6963WithRkConnectors' and add changeset

* chore: add rainbow button and wallet button updates to changeset

* fix: merge conflicts

* fix: useTransactionStore typing

* chore: upgrade to viem 2.0.0

* chore: upgrade @tanstack/react-query

* revert: rainbow button CHANGELOG.MD

* refactor: rename 'wagmiConfig' to 'config'

* revert: add back removed items from rainbowkit index.ts file

* chore: upgrade from [email protected] to [email protected]

* refactor: use 'import type' for types and interfaces

* chore: add rpc calls to the transporter as environment variables

* refactor: update changeset

* chore: update viem and wagmi v2 to latest version

* chore: upgradde viem to 2.0.0

* chore: upgrade wagmi to v2

* chore: tanstack minor version flex

* fix: merge conflicts

* chore: remove testnets from tests

* chore: changeset tweaks for prod release

* chore: add migration guide and updated docs to match latest wagmi v2 and rainbowkit beta versions

* fix: update changeset to include latest wagmi@rc version

* refactor: use ^15.17.1 version of @tanstack/react-query and update pnpm-lock.yaml

* fix: link to migration guide page

* fix: incorrect wagmi rc version, should use prod

fix: incorrect wagmi rc version, should use prod

* chore: changeset for rainbowkit-siwe-next-auth

* chore: fix create-rainbowkit template with minor bump

* chore: tweak new wagmi branding

* chore: migration guide changes for simplicity

* fix: chain object docs

* fix: wagmi capitalization

* fix: cra example consistency

* revert: locale file changes for review simplicity

* refactor: rename walletOptions to walletDetails

* refactor: add back WalletConnect options and refactor wallet connect singleton instance

* refactor: change WalletConnect id variable and bring back walletConnectWallet.test.ts file

* fix: chain modal test typos

* chore: adding comments and using 'wcId' as the default wallet connect id for custom logic

* refactor: remove exmples/*/**

* refactor: remove examples changeset

* chore: add sepolia networks

* fix: remove unused 'bsc' chain

* refactor: remove custom 'useChainId' hook and use wagmi's 'useChainId'

* refactor: test files & chain modal

* fix: small typo

* fix: remove console log

* refactor: remove locales

* fix: typo

* chore: improve comments with walletConnect merging

* chore: remove 'hidden' explanation comments due to 'injectedWallet' deprecation

* chore: update 'migration-guide'

* chore: expose  type for wallet creation purposes

* chore: add 'RainbowKitWalletConnectParameters' type

* chore: refactor 'getWalletConnectConnector' to use new 'RainbowKitWalletConnectParameters' type

* chore: replace 'WalletConnectParameters' with 'RainbowKitWalletConnectParameters' for custom wallets

* fix: docs updates

* chore: cleanup docs

* revert: migrate docs, changesets to @mago/v2-docs-changesets

* chore: standardize preserveSymlinks

* chore: upgrade wagmi, viem, tanstack/react-query

* refactor: remove 'wcId' and cleanup test / connectors

* fix: remove 'false' for multiInjectedDiscovery

* fix: format document

* fix: update 'getDefaultConfig' to force some properties

* fix: remove declare global window

* fix: upgrade viem and wagmi dependencies

* revert: upgrade viem and wagmi dependencies

* refactor: 'getDefaultConfig' and packages

* refactor: remove 'chains' from <RainbowKitProvider />

* refactor: remove const with readonly [Chain, ...Chain[] type

* refactor: 'connectorsForWallets' to use wallet functions and cleanup connectors

* refactor: 'getDefaultConfig'

* refactor: 'getDefaultWallets'

* fix: remove mewWallet

* fix: use 'Chain' for initialChain prop

* refactor: browserWallet to injectedWallet

* revert: temporarily remove generated-test-app

* fix: remove transports definitions in examples

* chore: update wagmi, viem

* refactor: 'getDefaultWallets' and 'connectorsForWallets'

* fix: wagmi / viem typescript errors

* fix: bring back generated-test-app to keep pnpm lock file upto date

* chore: add beta tag to release script

* revert: use `wallets` prop instead of `walletList`

* fix: add 'useAsImage' to avoid EIP6963 internal image bugs with 'background' urls

* fix: push a change for connector emitters

* fix: don't call connectors on server side to not expose unlimited event emitters

* fix: make sure WalletButtonRendered is mounted before throwing error

* fix: add back example project id for examples

* fix: missing connector_group.installed string

* revert: wagmi, viem peer drift

* fix: amend peer specifier

* fix: connector emitter cleanup

* chore: upgrade to wagmi 2.2.0

chore: upgrade to wagmi 2.2.0

chore: upgrade to wagmi 2.2.0

* fix: amend peer specifier

* chore: deprecate example projectId warning

* chore: bump beta version

* fix: mock connectors on locale tests

* chore: fix lockfile after merge issue

* fix: mock connector for <ConnectModal /> test

* fix: update mock to true

* chore: upgrade wagmi, viem (#1708)

* chore: update wagmi to 2.2.1

* chore: update viem to 2.0.10

* fix: handle unhandled rejection silent

* chore: update viem to 2.1.1

* chore: fixed peer version

* Revert "fix: handle unhandled rejection silent"

This reverts commit 6a609e0.

---------

Co-authored-by: Magomed Khamidov <[email protected]>

* fix: cleanup as readonly chains array

* fix: emitter not found (#1712)

* chore: update wagmi, viem

* chore: bump beta version

---------

Co-authored-by: Daniel Sinclair <[email protected]>

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.4.1",
     "vitest": "^0.33.0",
-    "wagmi": "~1.4.13"
+    "wagmi": "^2.3.1"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "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.4.1",
+    "wagmi": "^2.3.1"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",

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 } from 'wagmi';
 import {
   arbitrum,
   base,
@@ -13,30 +13,33 @@ import {
   sepolia,
   zora,
 } from 'wagmi/chains';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 
-const chains = [
-  mainnet,
-  polygon,
-  optimism,
-  arbitrum,
-  base,
-  zora,
-  ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
-];
-
-const wagmiConfig = getDefaultConfig({
+const config = getDefaultConfig({
   appName: 'RainbowKit App',
   projectId: 'YOUR_PROJECT_ID',
-  chains,
+  chains: [
+    mainnet,
+    polygon,
+    optimism,
+    arbitrum,
+    base,
+    zora,
+    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
+  ]
 });
 
+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>
+          <Component {...pageProps} />
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

packages/create-rainbowkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rainbow-me/create-rainbowkit",
   "description": "Scaffold a new RainbowKit project",
-  "version": "0.3.0-beta.0",
+  "version": "0.3.0-beta.2",
   "files": [
     "dist",
     "templates"

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.4.1",
+    "wagmi": "^2.3.1"
   },
   "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 { WagmiProvider } from 'wagmi';
 import {
   arbitrum,
   base,
@@ -13,30 +13,33 @@ import {
   sepolia,
   zora,
 } from 'wagmi/chains';
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
 
-const chains = [
-  mainnet,
-  polygon,
-  optimism,
-  arbitrum,
-  base,
-  zora,
-  ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
-];
-
-const wagmiConfig = getDefaultConfig({
+const config = getDefaultConfig({
   appName: 'RainbowKit App',
   projectId: 'YOUR_PROJECT_ID',
-  chains,
+  chains: [
+    mainnet,
+    polygon,
+    optimism,
+    arbitrum,
+    base,
+    zora,
+    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [sepolia] : []),
+  ]
 });
 
+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>
+          <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.4.1",
+    "wagmi": "^2.3.1"
   },
   "scripts": {
     "dev": "next dev",
@@ -25,4 +26,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
+}