Core Components

/**
 * Main wallet connection button component
 * @param props - Configuration options for the connect button
 * @returns React component for wallet connection
 */
function ConnectButton(props?: ConnectButtonProps): JSX.Element;

interface ConnectButtonProps {
  /** Account display configuration (responsive) */
  accountStatus?: ResponsiveValue<AccountStatus>;
  /** Balance visibility configuration (responsive) */
  showBalance?: ResponsiveValue<boolean>;
  /** Chain display configuration (responsive) */
  chainStatus?: ResponsiveValue<ChainStatus>;
  /** Custom label for the connect button */
  label?: string;
}

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

import { ConnectButton } from '@rainbow-me/rainbowkit';

// Basic usage
function App() {
  return <ConnectButton />;
}

// Customized button
function CustomApp() {
  return (
    <ConnectButton
      accountStatus="avatar"
      chainStatus={{ largeScreen: 'full', smallScreen: 'icon' }}
      showBalance={{ largeScreen: true, smallScreen: false }}
      label="Connect Wallet"
    />
  );
}

/**
 * Custom render prop version of ConnectButton
 * @param props - Render prop configuration
 * @returns Custom rendered wallet connection UI
 */
function ConnectButton.Custom(props: ConnectButtonRendererProps): JSX.Element;

interface ConnectButtonRendererProps {
  children: (renderProps: ConnectButtonRenderState) => ReactNode;
}

interface ConnectButtonRenderState {
  account?: {
    address: string;
    balanceDecimals?: number;
    balanceFormatted?: string;
    balanceSymbol?: string;
    displayBalance?: string;
    displayName: string;
    ensAvatar?: string;
    ensName?: string;
    hasPendingTransactions: boolean;
  };
  chain?: {
    hasIcon: boolean;
    iconUrl?: string;
    iconBackground?: string;
    id: number;
    name?: string;
    unsupported?: boolean;
  };
  mounted: boolean;
  authenticationStatus?: AuthenticationStatus;
  openAccountModal: () => void;
  openChainModal: () => void;
  openConnectModal: () => void;
  accountModalOpen: boolean;
  chainModalOpen: boolean;
  connectModalOpen: boolean;
}

import { ConnectButton } from '@rainbow-me/rainbowkit';

function CustomConnectButton() {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus || authenticationStatus === 'authenticated');

        return (
          <div {...(!ready && { 'aria-hidden': true, style: { opacity: 0, pointerEvents: 'none', userSelect: 'none' } })}>
            {(() => {
              if (!connected) {
                return (
                  <button onClick={openConnectModal} type="button">
                    Connect Wallet
                  </button>
                );
              }

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  <button onClick={openChainModal} style={{ display: 'flex', alignItems: 'center' }} type="button">
                    {chain.hasIcon && (
                      <div style={{ background: chain.iconBackground, width: 12, height: 12, borderRadius: 999, overflow: 'hidden', marginRight: 4 }}>
                        {chain.iconUrl && <img alt={chain.name ?? 'Chain icon'} src={chain.iconUrl} style={{ width: 12, height: 12 }} />}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance ? ` (${account.displayBalance})` : ''}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
}

/**
 * Button component for connecting to a specific wallet
 * @param props - Wallet button configuration
 * @returns React component for specific wallet connection
 */
function WalletButton(props?: { wallet?: string }): JSX.Element;

/**
 * Custom render prop version of WalletButton
 * @param props - Wallet button render prop configuration
 * @returns Custom rendered wallet connection UI
 */
function WalletButton.Custom(props: WalletButtonRendererProps): JSX.Element;

interface WalletButtonRendererProps {
  wallet?: string;
  children: (renderProps: WalletButtonRenderState) => ReactNode;
}

interface WalletButtonRenderState {
  error: boolean;
  loading: boolean;
  connected: boolean;
  ready: boolean;
  mounted: boolean;
  connector: WalletConnector;
  connect: () => Promise<void>;
}

/**
 * Root provider component for RainbowKit
 * @param props - Provider configuration options
 * @returns React provider component
 */
function RainbowKitProvider(props: RainbowKitProviderProps): JSX.Element;

interface RainbowKitProviderProps {
  /** React children to wrap */
  children: ReactNode;
  /** Theme configuration (light, dark, or custom) */
  theme?: Theme | null;
  /** Whether to show recent transactions in account modal */
  showRecentTransactions?: boolean;
  /** Application information for wallet connection */
  appInfo?: AppInfo;
  /** Enable fun animations and effects */
  coolMode?: boolean;
  /** Custom avatar component */
  avatar?: AvatarComponent;
  /** Modal size configuration */
  modalSize?: ModalSizes;
  /** Localization language */
  locale?: Locale;
  /** Initial chain to connect to */
  initialChain?: Chain | number;
  /** Unique identifier for this provider instance */
  id?: string;
}

interface AppInfo {
  appName?: string;
  learnMoreUrl?: string;
  disclaimer?: DisclaimerComponent;
}

type ModalSizes = 'compact' | 'wide';
type DisclaimerComponent = (props: { Text: ComponentType<{ children: ReactNode }>; Link: ComponentType<{ children: ReactNode; href: string }> }) => ReactNode;
type AvatarComponent = (props: { address: string; ensImage?: string; size: number }) => ReactNode;

import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

// Basic provider setup
function App() {
  return (
    <RainbowKitProvider>
      {/* Your app components */}
    </RainbowKitProvider>
  );
}

// Fully configured provider
function CustomApp() {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3cf0',
        accentColorForeground: 'white',
        borderRadius: 'small',
      })}
      showRecentTransactions={true}
      appInfo={{
        appName: 'My DApp',
        learnMoreUrl: 'https://example.com/learn',
        disclaimer: ({ Text, Link }) => (
          <Text>
            By connecting your wallet, you agree to the{' '}
            <Link href="https://example.com/terms">Terms of Service</Link> and acknowledge you have read and understand the protocol{' '}
            <Link href="https://example.com/disclaimer">disclaimer</Link>
          </Text>
        ),
      }}
      coolMode={true}
      locale="en"
      modalSize="compact"
    >
      {/* Your app components */}
    </RainbowKitProvider>
  );
}