@rainbow-me/rainbow-button

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 chains list and your WalletConnect v2 projectId. You can obtain a projectId from [WalletConnect Cloud]https://cloud.reown.com/sign-in). 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.