Rainbow Button

The simplest way to add support for Rainbow Wallet to dApps built on wagmi.

This package is designed to be installed independent of RainbowKit.

Usage

Install

Install the @rainbow-me/rainbow-button package and its peer dependencies, wagmi, viem, and @tanstack/react-query.

npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query

Import

Import Rainbow Button and wagmi.

import '@rainbow-me/rainbow-button/styles.css';
import {
  rainbowConnector,
  RainbowButtonProvider,
} from '@rainbow-me/rainbow-button';
...
import { createConfig, WagmiConfig } from 'wagmi';

Adopt the connector

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 WalletConnect v2 projectId and your application name. You can obtain a projectId from WalletConnect Cloud. This is absolutely free and only takes a few minutes.

const config = createConfig({
  connectors: [rainbowConnector({ projectId, appName: 'Your App' })],
  publicClient
});

Wrap providers

Wrap your application with RainbowButtonProvider, WagmiProvider, and QueryClientProvider.

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          {/* Your App */}
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Add the Rainbow button

Then, in your app, import and render the RainbowButton component.

import { RainbowButton } from '@rainbow-me/rainbow-button';

export const YourApp = () => {
  return <RainbowButton/>;
};

If you'd like to trigger the Rainbow connect modal from anywhere in your app, the useRainbowConnectModal hook provides a connect function that launches the same compact modal flow used by the RainbowButton.

import { useRainbowConnectModal } from '@rainbow-me/rainbow-button';

export const CustomConnect = () => {
  const { connect } = useRainbowConnectModal();
  return <button onClick={connect}>Connect Rainbow</button>;
};

Documentation

You can reference the Adoption Guide for more information.

Custom Rainbow button

The RainbowButton.Custom component is available for custom button implementations and styling.

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

Try it out

You can use the CodeSandbox links below try out the Rainbow Button:

with Next.js

Contributing

Please follow our contributing guidelines.

License

See LICENSE for more information.

@rainbow-me/rainbow-button

Package Exports

Readme