@rainbow-me/[email protected]

Minor Changes

• aa0269e: RainbowKit has reached v2 alongside wagmi, which includes breaking changes.

  0.4.x now requires @rainbow-me/rainbowkit v2, specifically: 2.x.x.

@rainbow-me/[email protected]

Minor 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 Rainbow Button, wagmi, and viem to their latest versions**

  npm i @rainbow-me/rainbow-button@2 wagmi@2 [email protected]

  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 Rainbow Button and Wagmi configurations

  RainbowConnector is now rainbowConnector, and requires appName and no longer accepts the chains parameter.

  - 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 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
  • Viem v2 Breaking Changes

@rainbow-me/[email protected]

Patch Changes

• 2b0c7b3: Added missing i18n translations for Wrong network errors

@rainbow-me/[email protected]

Patch Changes

• c0a644a: Fixed an issue that caused components to re-render on every window resize event. Now components will only re-render once the user has finished resizing their window.
• 41616b9: Fixed a bug where the connectModalOpen state incorrectly remained true after a successful siwe authentication. This fix ensures that connectModalOpen shows the correct state.
• cf4955f: Fixed a bug where the back button wasn't showing on compact size modal when selecting DownloadOptions wallet step.
• cf4955f: Removed back button for wide size modal entirely when selecting DownloadOptions wallet step to prevent incorrect wallet step switching.
• e5f5f03: Removed external i18n-js dependency to reduce RainbowKit bundle sizes.
• c0bd68e: Fixed a bug in the account modal transactions section where transactions that were not found or cancelled were incorrectly shown as 'pending' instead of 'failed'.
• a79609b: Fixed a bug that allowed users to hold-press or cursor select wallet icons on iOS, which interrupted the connection experience.

@rainbow-me/[email protected]

Patch Changes

• 7565fb2: Added uk-UA and ua locale support for the Ukranian language.

  Reference our guide to learn more about Localization.

• 24b5a88: Improved support for NodeNext module resolution to resolve "@rainbow-me/rainbowkit"' has no exported member 'RainbowKitProvider' TypeScript warnings

• 5a184e9: Fixed a bug where eth_getBalance would be called when showBalance was set to false. Optimized additional provider calls to fetch wallet balances only when a user interacts with the Account modal.

@rainbow-me/[email protected]

Patch Changes

• 7ba94f4: Optimized bundle size for localization feature

@rainbow-me/[email protected]

Patch Changes

3feab0e: Support for Wagmi 1.4.12 to mitigate a supply-chain attack on the @ledgerhq/connect-kit package. RainbowKit dApp's were not directly impacted, but dApps that used the LedgerConnector connector in earlier versions of Wagmi could have been. This issue has since been resolved by Ledger but the wagmi team is encouraging developers to upgrade Wagmi and RainbowKit out of an abundance of caution.
c9a8e46: Improved Korean localization. Thanks @Hyun2!
dba5177: Added support for arbitrumSepolia, baseSepolia, optimismSepolia, zoraSepolia testnet chains

@rainbow-me/[email protected]

Minor Changes

• 9ce75a6: The new WalletButton component helps dApps with custom wallet list implementations adopt RainbowKit and all of it's maintenance-free benefits.

  import { WalletButton } from '@rainbow-me/rainbowkit';
  
  <WalletButton wallet="rainbow" />
  <WalletButton wallet="metamask" />
  <WalletButton wallet="coinbase" />

  Like the ConnectButton, the WalletButton.Custom component is available for custom implementations and styling.

  <WalletButton.Custom wallet="rainbow">
    {({ ready, connect }) => {
      return (
        <button type="button" disabled={!ready} onClick={connect}>
          Connect Rainbow
        </button>
      );
    }}
  </WalletButton.Custom>

  Most dApps are best served by the ConnectButton. Reference the docs here for more information about WalletButton adoption and usecases.

@rainbow-me/[email protected]

Patch Changes

• 2f56ab2: Adopted 'use client' directive for safe App Router usage
• 9dfe053: Added strict peer incompatibility with next-auth@5. RainbowKit will support next-auth v5 in a future release with improved App Router support.

@rainbow-me/[email protected]

Minor Changes

• 9ce75a6: The RainbowButton component is the simplest way to add support for Rainbow Wallet to dApps that use wagmi and prefer a more custom connector experience over RainbowKit.

  1. Install @rainbow-me/rainbow-button and its peer dependencies

  The package is compatible with Next.js, React, and Vite. Ensure that you follow peer dependency warnings.

  npm install @rainbow-me/rainbow-button wagmi viem

  2. Configure with Wagmi and install the RainbowButton

  Pass an instance of the RainbowConnector to your Wagmi connector list, and wrap your app in the RainbowButtonProvider. Then drop-in the RainbowButton component into your wallet list.

  import "@rainbow-me/rainbow-button/styles.css";
  import {
    RainbowButtonProvider,
    RainbowConnector,
  } from "@rainbow-me/rainbow-button";
  
  const wagmiClient = createConfig({
    connectors: [new RainbowConnector({ chains, projectId })],
    publicClient,
  });
  
  function MyApp({ Component, pageProps }: AppProps) {
    return (
      <WagmiConfig config={wagmiClient}>
        <RainbowButtonProvider>{/* Your App */}</RainbowButtonProvider>
      </WagmiConfig>
    );
  }
  
  export const YourApp = () => {
    return <RainbowButton />;
  };

  You can also use the RainbowButton.Custom component for custom implementations and styling.

  <RainbowButton.Custom>
    {({ ready, connect }) => {
      return (
        <button type="button" disabled={!ready} onClick={connect}>
          Connect Rainbow
        </button>
      );
    }}
  </RainbowButton.Custom>

  3. And that's it!

  Now your users can enjoy a seamless connection experience for Rainbow — without any maintenance or headaches.

  A WalletButton component is also available in RainbowKit if you'd like to adopt support for additional wallets.