Skip to content

@rainbow-me/rainbowkit@2.0.0
Compare
Choose a tag to compare
@DanielSinclair DanielSinclair released this 11 Feb 07:39
· 155 commits to main since this release
@rainbow-me/rainbowkit@2.0.0
9a10276
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Major Changes

  • aa0269e: Breaking:

    The wagmi and viem 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

    npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x

    2. Install @tanstack/react-query peer dependency

    With Wagmi v2, TanStack Query is now a required peer dependency.

    Install it with the following command:

    npm i @tanstack/react-query

    3. Upgrade your RainbowKit and Wagmi configurations

      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.

    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:

Assets 2
Loading