@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 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/>;
};

Use the connect modal hook

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

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

See LICENSE for more information.