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 [email protected] @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 chains list and your WalletConnect v2 projectId. You can obtain a projectId from WalletConnect Cloud. This is absolutely free and only takes a few minutes.

const config = createConfig({
  connectors: [new RainbowConnector({ chains, projectId })],
  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/>;
};

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

Licensed under the MIT License, Copyright © 2022-present Rainbow.

See LICENSE for more information.