docs: v2 migration guides, docs, changesets (#1697)

* chore: changsets and docs from #1601

* merge: @daniel/migration-guide-v2

* chore: update docs

* chore: update docs with new APIs and wagmi v2 changes

* chore: update changesets

* chore: update changesets

* chore: update changesets

* chore: update 2.x.x wagmi version

* fix: use single quote instead of double quote

* fix: use single quote instead of double quote #2

* fix: refactor custom-wallets.mdx

* chore: small tweak

* chore: update introduction video

* fix: remove chains prop from migration guide

* chore: update custom wallets, chains and installation sections

* chore: update custom chains

* chore: update custom wallet list

* chore: tweak

* chore: update custom chains and tweak stuff

* chore: tweak changeset and migration

* chore: update rainbow button guide

* chore: update docs and tweak changesets

* chore: rainbowkit to major version 2.x.x changeset change

* chore: update sitemap

* fix: missing tanstack/react-query installs

* fix: missing @tanstack/react-query imports

* fix: create-rainbowkit minor bump

* fix: simplify changeset and migration guide

* fix: rainbow button changeset

* fix: removed beta link from changeset

* fix: removed beta callout

* fix: peer references

* fix: remove incorrect file

* fix: tweak

* fix: chains docs

* fix: latest reference

* fix: tanstack, injectedWallet references

* fix: intro

* fix: duplicate tanstack install reference

* fix: rainbow button readme

* fix: wallet connectors reference

* fix: queryclientprovider reference

* fix: imports for connectorsforwallets

* fix: favor viem@2.x

* fix: migrate migration guide to guide article

* chore: update sitemap

---------

Co-authored-by: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com>

.changeset/clean-yaks-bake.md

@@ -0,0 +1,7 @@
+---
+"@rainbow-me/rainbowkit-siwe-next-auth": minor
+---
+
+RainbowKit has reached v2 alongside [wagmi](https://wagmi.sh), which includes [breaking changes](https://wagmi.sh/react/guides/migrate-from-v1-to-v2).
+
+`0.4.x` now requires `@rainbow-me/rainbowkit` v2, specifically: `2.x.x`.

.changeset/loud-carrots-check.md

@@ -0,0 +1,97 @@
+---
+"@rainbow-me/rainbowkit": major
+---
+
+**Breaking:**
+
+The [wagmi](https://wagmi.sh) and [viem](https://viem.sh) peer dependencies have reached `2.x.x` with breaking changes.
+
+Follow the steps below to migrate.
+
+**1. Upgrade RainbowKit, `wagmi`, and `viem` to their latest versions**
+
+```bash
+npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
+```
+
+**2. Install `@tanstack/react-query` peer dependency**
+
+With Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) is now a required peer dependency.
+
+Install it with the following command:
+
+```bash
+npm i @tanstack/react-query
+```
+
+**3. Upgrade your RainbowKit and Wagmi configurations**
+
+```diff
+  import '@rainbow-me/rainbowkit/styles.css'
+
++ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+- import { createPublicClient, http } from 'viem'
+- import { WagmiConfig } from 'wagmi'
++ import { WagmiProvider, http } from 'wagmi'
+- import { configureChains, createConfig } from 'wagmi'
+  import { mainnet } from 'wagmi/chains'
+  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
+- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
++ import { getDefaultConfig } from '@rainbow-me/rainbowkit'
+
+  /* getDefaultWallets is now optional */
+- const { wallets } = getDefaultWallets({
+-   appName: 'RainbowKit demo',
+-   projectId: 'YOUR_PROJECT_ID',
+-   chains,
+- })
+
+  /* connectorsForWallets is now optional */
+- const connectors = connectorsForWallets([...wallets])
+
+- const { chains, publicClient } = configureChains( 
+-   [mainnet, sepolia], 
+-   [publicProvider(), publicProvider()],
+- )
+
+- const config = createConfig({
+-   autoConnect: true,
+-   publicClient,
+- })
+
+  /* New API that includes Wagmi's createConfig and bundles getDefaultWallets and connectorsForWallets */
++ const config = getDefaultConfig({
++   appName: 'RainbowKit demo',
++   projectId: 'YOUR_PROJECT_ID',
++   chains: [mainnet],
++   transports: {
++     [mainnet.id]: http(),
++   },
++ })
+
++ const queryClient = new QueryClient()
+
+  const App = () => {
+    return (
+-     <WagmiConfig config={config}>
++     <WagmiProvider config={config}>
++       <QueryClientProvider client={queryClient}>
+-         <RainbowKitProvider chains={chains}>
++         <RainbowKitProvider>
+            {/* Your App */}
+          </RainbowKitProvider>
++       </QueryClientProvider>
+-     </WagmiConfig>
++     </WagmiProvider>
+    )
+  }
+```
+
+[You can read an in-depth migration guide here](https://rainbowkit.com/guides/rainbowkit-wagmi-v2).
+
+**4. Check for breaking changes in `wagmi` and `viem`**
+
+If you use `wagmi` hooks and `viem` actions in your dApp, you will need to follow the migration guides for v2:
+
+- [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
+- [Viem v2 Breaking Changes](https://viem.sh/docs/migration-guide.html#_2-x-x-breaking-changes)

.changeset/silent-maps-kneel.md

@@ -0,0 +1,54 @@
+---
+"@rainbow-me/rainbow-button": minor
+---
+
+**Breaking:**
+
+The [wagmi](https://wagmi.sh) and [viem](https://viem.sh) peer dependencies have reached `2.x.x` with breaking changes.
+
+Follow the steps below to migrate.
+
+**1. Upgrade Rainbow Button, `wagmi`, and `viem` to their latest versions****
+
+```bash
+npm i @rainbow-me/rainbow-button@2 wagmi@2 viem@2.x
+```
+
+**2. Install `@tanstack/react-query` peer dependency**
+
+With Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) is now a required peer dependency.
+
+Install it with the following command:
+
+```bash
+npm i @tanstack/react-query
+```
+
+**3. Upgrade your Rainbow Button and Wagmi configurations**
+
+`RainbowConnector` is now `rainbowConnector`, and requires `appName` and no longer accepts the `chains` parameter.
+
+```diff
+- import { RainbowConnector } from '@rainbow-me/rainbow-button'
++ import { rainbowConnector } from '@rainbow-me/rainbow-button'
+  import { createConfig } from 'wagmi'
+
+  const config = createConfig({
+-   connectors: [new RainbowConnector({ chains, projectId })],
++   connectors: [
++     rainbowConnector({
++       appName: "RainbowKit demo",
++       projectId: "YOUR_PROJECT_ID",
++     }),
++   ],
+  })
+```
+
+Follow the [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2) for additional configuration changes.
+
+**4. Check for breaking changes in `wagmi` and `viem`**
+
+If you use `wagmi` hooks and `viem` actions in your dApp, you will need to follow the full migration guides for v2:
+
+- [Wagmi v2 Migration Guide](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
+- [Viem v2 Breaking Changes](https://viem.sh/docs/migration-guide.html#_2-x-x-breaking-changes)

.changeset/soft-hotels-joke.md

@@ -0,0 +1,9 @@
+---
+"@rainbow-me/create-rainbowkit": minor
+---
+
+Migrated template to Wagmi v2 with the following package changes:
+
+- updated `wagmi` from `1.4.x` to `^2.0.0`
+- updated `viem` from `1.21.x` to `^2.0.0`
+- added `@tanstack/react-query` dependency with version `^5`

.changeset/stale-ears-rescue.md

@@ -0,0 +1,7 @@
+---
+"site": patch
+---
+
+- Added migration guide for `@rainbow-me/rainbowkit` `2.x.x` breaking changes.
+- Updated all documentation section to include the latest Wagmi, Viem and TanStack Query usage
+- Added migration guide for `2.x.x` breaking changes

packages/rainbow-button/README.md

@@ -12,10 +12,10 @@ This package is designed to be installed independent of [RainbowKit](https://www
 
 ### Install
 
-Install the `@rainbow-me/rainbow-button` package and its peer dependencies, [wagmi](https://wagmi.sh/) and [viem](https://viem.sh/).
+Install the `@rainbow-me/rainbow-button` package and its peer dependencies, [wagmi](https://wagmi.sh/), [viem](https://viem.sh/), and [@tanstack/react-query](https://tanstack.com/query/v5).
 
 ```bash
-npm install @rainbow-me/rainbow-button wagmi viem
+npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query
 ```
 
 ### Import
@@ -34,7 +34,7 @@ import { createConfig, WagmiConfig } from 'wagmi';
 
 ### Adopt the connector
 
-The `RainbowConnector` supports connecting with Rainbow just like wagmi's native `MetaMaskConnector` from `wagmi/connectors/metaMask`.
+The `RainbowConnector` supports connecting with Rainbow just like Wagmi's native `MetaMaskConnector` from `wagmi/connectors/metaMask`.
 
 Create an instance of the `RainbowConnector` and provide it in your wagmi config `connectors` list. Supply your `chains` list and your WalletConnect v2 `projectId`. You can obtain a `projectId` from [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in). This is absolutely free and only takes a few minutes.
 
@@ -47,16 +47,18 @@ const config = createConfig({
 
 ### Wrap providers
 
-Wrap your application with `RainbowButtonProvider` and `WagmiConfig`.
+Wrap your application with `RainbowButtonProvider`, [`WagmiProvider`](https://wagmi.sh/react/api/WagmiProvider#wagmiprovider), and [`QueryClientProvider`](https://tanstack.com/query/v4/docs/framework/react/reference/QueryClientProvider).
 
 ```tsx
 const App = () => {
   return (
-    <WagmiConfig config={config}>
-      <RainbowButtonProvider>
-        {/* Your App */}
-      </RainbowButtonProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowButtonProvider>
+          {/* Your App */}
+        </RainbowButtonProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 };
 ```

site/data/en-US/docs/authentication.mdx

@@ -41,7 +41,13 @@ import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { SessionProvider } from 'next-auth/react';
 import type { Session } from 'next-auth';
 import { AppProps } from 'next/app';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
+import {
+  QueryClientProvider,
+  QueryClient,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 export default function App({
   Component,
@@ -50,15 +56,17 @@ export default function App({
   session: Session;
 }>) {
   return (
-    <WagmiConfig {...etc}>
+    <WagmiProvider {...etc}>
       <SessionProvider refetchInterval={0} session={pageProps.session}>
-        <RainbowKitSiweNextAuthProvider>
-          <RainbowKitProvider {...etc}>
-            <Component {...pageProps} />
-          </RainbowKitProvider>
-        </RainbowKitSiweNextAuthProvider>
+        <QueryClientProvider client={queryClient}>
+          <RainbowKitSiweNextAuthProvider>
+            <RainbowKitProvider {...etc}>
+              <Component {...pageProps} />
+            </RainbowKitProvider>
+          </RainbowKitSiweNextAuthProvider>
+        </QueryClientProvider>
       </SessionProvider>
-    </WagmiConfig>
+    </WagmiProvider>;
   );
 }
 ```

site/data/en-US/docs/chains.mdx

@@ -7,74 +7,69 @@ description: Customizing chains
 
 ## Customizing chains
 
-The `chains` prop on `RainbowKitProvider` defines which chains are available for the user to select.
-
 RainbowKit is designed to integrate with [wagmi’s `chain` object](https://wagmi.sh/react/chains). Check out the list of supported chains [here](https://wagmi.sh/react/chains#supported-chains).
 
-> For more detail about the `chain` object, or to see examples when creating a custom chain definition, see the [source code for wagmi’s `chain` object](https://github.com/wagmi-dev/references/blob/main/packages/chains/src/types.ts).
-
-Your chain config can be defined in a single array provided to [`configureChains`](https://wagmi.sh/react/providers/configuring-chains).
-
-```tsx
-import { RainbowKitProvider, Chain } from '@rainbow-me/rainbowkit';
-import { configureChains } from 'wagmi';
-import { mainnet, optimism, zora } from 'wagmi/chains';
-import { alchemyProvider } from 'wagmi/providers/alchemy';
-import { publicProvider } from 'wagmi/providers/public';
-
-const { chains } = configureChains(
-  [mainnet, optimism, zora],
-  [
-    alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
-    publicProvider(),
-  ]
-);
-
-const App = () => {
-  return (
-    <RainbowKitProvider chains={chains} {...etc}>
-      {/* ... */}
-    </RainbowKitProvider>
-  );
-};
-```
-
 ### Customizing the initial chain
 
-By default, RainbowKit will connect to the first chain in your `chains` array to ensure users aren't immediately presented with the "Wrong network" state. This behavior can be customized via the `initialChain` prop.
+By default, RainbowKit will connect to the first chain supplied to Wagmi. This behavior can be customized via the `initialChain` prop.
 
 The initial chain can be configured using a chain ID.
 
 ```tsx
-<RainbowKitProvider chains={chains} initialChain={1}>
+<RainbowKitProvider initialChain={1}>
 ```
 
 As a convenience, you can also pass a chain object.
 
 ```tsx
-<RainbowKitProvider chains={chains} initialChain={mainnet}>
+<RainbowKitProvider initialChain={mainnet}>
 ```
 
-### Custom chain icons
+### Custom chain metadata
+
+Several chain icons and backgrounds are provided by default, but you can customize the icon and background for each chain using the `iconUrl` and `iconBackground` properties.
+
+Example with `getDefaultConfig`
+
+```tsx
+import { mainnet, optimism } from 'wagmi/chains';
+
+const config = getDefaultConfig({
+  chains: [
+    {
+      ...mainnet,
+      iconBackground: '#000',
+      iconUrl: 'https://example.com/icons/ethereum.png',
+    },
+    {
+      ...optimism,
+      iconBackground: '#ff0000',
+      iconUrl: 'https://example.com/icons/optimism.png',
+    },
+  ],
+});
+```
 
-Several chain icons are provided by default, but you can customize the icon for each chain using the iconUrl property.
+Example with `createConfig`
 
 ```tsx
-import { Chain, mainnet, optimism } from 'wagmi/chains';
+import { mainnet, optimism } from 'wagmi/chains';
+import { Chain } from '@rainbow-me/rainbowkit';
 
-const defaultChains: Chain[] = [
+const chains: readonly [Chain, ...Chain[]] = [
   {
     ...mainnet,
+    iconBackground: '#000',
     iconUrl: 'https://example.com/icons/ethereum.png',
   },
   {
     ...optimism,
+    iconBackground: '#ff0000',
     iconUrl: 'https://example.com/icons/optimism.png',
   },
 ];
 
-const { chains } = configureChains(defaultChains, [
-  alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
-  publicProvider(),
-]);
+const config = createConfig({
+  chains,
+});
 ```