CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rainbow-me--rainbowkit

A comprehensive React library that simplifies wallet connection functionality for decentralized applications with support for 66 wallets and extensive customization options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

RainbowKit

RainbowKit is a comprehensive React library that simplifies wallet connection functionality for decentralized applications (dApps). Built on top of wagmi and viem, it provides out-of-the-box wallet management with extensive customization options, supporting 66 wallet connectors and connection methods.

Package Information

  • Package Name: @rainbow-me/rainbowkit
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @rainbow-me/rainbowkit

Core Imports

import { RainbowKitProvider, ConnectButton, getDefaultConfig } from '@rainbow-me/rainbowkit';
import { metaMaskWallet, coinbaseWallet } from '@rainbow-me/rainbowkit/wallets';

For CommonJS:

const { RainbowKitProvider, ConnectButton, getDefaultConfig } = require('@rainbow-me/rainbowkit');

Basic Usage

import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultConfig, RainbowKitProvider, ConnectButton } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, base } from 'wagmi/chains';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
});

const queryClient = new QueryClient();

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Architecture

RainbowKit is built around several key components:

  • Provider System: RainbowKitProvider wraps your app and manages global state, theming, and localization
  • Connection Components: ConnectButton and WalletButton provide pre-built UI for wallet connections
  • Configuration API: getDefaultConfig and wallet connector functions simplify setup
  • Modal System: Built-in modals for account management, chain switching, and wallet selection with customizable triggers
  • Wallet Ecosystem: 66 supported wallets with standardized connector interface
  • Theme Engine: Flexible theming system with built-in themes and custom theme creation
  • Type Safety: Full TypeScript integration with comprehensive type definitions

Capabilities

Core Components

Primary React components for wallet connection UI and state management.

function ConnectButton(props?: ConnectButtonProps): JSX.Element;

function WalletButton(props?: WalletButtonProps): JSX.Element;

function RainbowKitProvider(props: RainbowKitProviderProps): JSX.Element;

interface ConnectButtonProps {
  accountStatus?: ResponsiveValue<AccountStatus>;
  showBalance?: ResponsiveValue<boolean>;
  chainStatus?: ResponsiveValue<ChainStatus>;
  label?: string;
}

interface WalletButtonProps {
  wallet?: string;
}

interface RainbowKitProviderProps {
  children: ReactNode;
  initialChain?: Chain | number;
  id?: string;
  theme?: Theme | null;
  showRecentTransactions?: boolean;
  appInfo?: {
    appName?: string;
    learnMoreUrl?: string;
    disclaimer?: DisclaimerComponent;
  };
  coolMode?: boolean;
  avatar?: AvatarComponent;
  modalSize?: ModalSizes;
  locale?: Locale;
}

Core Components

Configuration

Setup and configuration functions for integrating RainbowKit with wagmi and custom wallet selections.

function getDefaultConfig<T extends readonly [Chain, ...Chain[]]>(
  parameters: GetDefaultConfigParameters<T>
): Config;

function connectorsForWallets(
  walletList: WalletList,
  parameters: ConnectorsForWalletsParameters
): CreateConnectorFn[];

function getWalletConnectConnector(
  parameters: WalletConnectConnectorParameters
): CreateConnectorFn;

interface GetDefaultConfigParameters<T extends readonly [Chain, ...Chain[]]> {
  appName: string;
  projectId: string;
  chains: T;
  appDescription?: string;
  appUrl?: string;
  appIcon?: string;
  wallets?: WalletList;
  ssr?: boolean;
}

Configuration

Wallet Connectors

Comprehensive collection of 66 wallet connectors for different wallet providers, exchanges, and hardware wallets.

function metaMaskWallet(options?: WalletOptions): Wallet;
function coinbaseWallet(options?: WalletOptions): Wallet;
function rainbowWallet(options?: WalletOptions): Wallet;
function walletConnectWallet(options?: WalletOptions): Wallet;
// ... 62 additional wallet connectors

interface Wallet {
  id: string;
  name: string;
  iconUrl: string | (() => Promise<string>);
  iconBackground: string;
  createConnector: (walletDetails: WalletDetailsParams) => CreateConnectorFn;
}

Wallet Connectors

Modal Controls

React hooks for programmatically controlling wallet connection, account, and chain selection modals.

function useConnectModal(): {
  connectModalOpen: boolean;
  openConnectModal?: () => void;
};

function useAccountModal(): {
  accountModalOpen: boolean;
  openAccountModal?: () => void;
};

function useChainModal(): {
  chainModalOpen: boolean;
  openChainModal?: () => void;
};

Modal Controls

Theming

Built-in themes and customization system for styling RainbowKit components.

function lightTheme(options?: ThemeOptions): ThemeVars;
function darkTheme(options?: ThemeOptions): ThemeVars;
function midnightTheme(options?: ThemeOptions): ThemeVars;

function cssStringFromTheme(
  theme: ThemeVars | (() => ThemeVars),
  options?: { extends?: ThemeVars | (() => ThemeVars) }
): string;

interface ThemeOptions {
  accentColor?: string;
  accentColorForeground?: string;
  borderRadius?: 'large' | 'medium' | 'small' | 'none';
  fontStack?: 'system' | 'rounded';
  overlayBlur?: 'large' | 'small' | 'none';
}

Theming

Authentication

SIWE (Sign-In with Ethereum) authentication integration for secure user authentication.

function RainbowKitAuthenticationProvider<T>(
  props: RainbowKitAuthenticationProviderProps<T>
): JSX.Element;

function createAuthenticationAdapter<T>(
  adapter: AuthenticationAdapter<T>
): AuthenticationAdapter<T>;

interface AuthenticationAdapter<T> {
  getNonce: () => Promise<string>;
  createMessage: (args: CreateMessageArgs) => T;
  verify: (args: VerifyArgs<T>) => Promise<boolean>;
  signOut: () => Promise<void>;
}

Authentication

Types

Core Types

type ResponsiveValue<T> = T | { largeScreen: T; smallScreen: T };
type AccountStatus = 'full' | 'avatar' | 'address';
type ChainStatus = 'full' | 'icon' | 'name' | 'none';
type ModalSizes = 'compact' | 'wide';

type Locale =
  | 'ar' | 'ar-AR' | 'de' | 'de-DE' | 'en' | 'en-US' | 'es' | 'es-419'
  | 'fr' | 'fr-FR' | 'hi' | 'hi-IN' | 'id' | 'id-ID' | 'ja' | 'ja-JP'
  | 'ko' | 'ko-KR' | 'ms' | 'ms-MY' | 'pt' | 'pt-BR' | 'ru' | 'ru-RU'
  | 'th' | 'th-TH' | 'tr' | 'tr-TR' | 'ua' | 'uk-UA' | 'vi' | 'vi-VN'
  | 'zh' | 'zh-CN' | 'zh-HK' | 'zh-TW' | 'zh-Hans' | 'zh-Hant';

type WalletList = {
  groupName: string;
  wallets: CreateWalletFn[];
}[];

type AuthenticationStatus = 'loading' | 'unauthenticated' | 'authenticated';

interface RainbowKitChain extends Chain {
  iconUrl?: string | (() => Promise<string>);
  iconBackground?: string;
}

Install with Tessl CLI

npx tessl i tessl/npm-rainbow-me--rainbowkit
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@rainbow-me/rainbowkit@2.2.x
Publish Source
CLI
Badge
tessl/npm-rainbow-me--rainbowkit badge