Adopting the Rainbow Button in your dApp

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 [email protected] @tanstack/react-query

2. Configure with Wagmi and install the RainbowButton

Pass an instance of the rainbowConnector to Wagmi's createConfig with projectId and appName, and wrap your app in the RainbowButtonProvider. Then drop-in the RainbowButton component.

import '@rainbow-me/rainbow-button/styles.css';
import {
  RainbowButtonProvider,
  RainbowButton,
  rainbowConnector,
} from '@rainbow-me/rainbow-button';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'viem/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = createConfig({
  connectors: [
    rainbowConnector({
      appName: 'RainbowKit demo',
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          <RainbowButton />
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

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.