DOCSEARCHbyAlgolia
Submit Docs

RainbowKit Documentation

repository·main·Indexed 25 days ago

https://github.com/rainbow-me/rainbowkit

A React library designed to simplify wallet connection in decentralized applications (dapps). RainbowKit provides out-of-the-box wallet management and is built on top of wagmi and viem.

Tokens
71.9K
Snippets
193
Records
312
Agent score
82%

What's inside RainbowKit

  3. Explore OpenZeppelin Utilities

    main

    OpenZeppelin provides a variety of miscellaneous contracts and libraries to improve security, manage new data types, and safely use low-level primitives in Solidity. Key categories include:

    • Math: Arithmetic functions (Math, SignedMath) and checked downcasting (SafeCast).
    • Cryptography: Signature handling (ECDSA, P256, RSA, SignatureChecker), hashing (Hashes, MerkleProof), and typed data (EIP712).
    • Security: Reentrancy protection (ReentrancyGuard, ReentrancyGuardTransient), emergency pausing (Pausable), and nonce management (Nonces, NoncesKeyed).
    • Introspection: Interface inspection via ERC165 and ERC165Checker.
    • Data Structures: Efficient storage and management using BitMaps, EnumerableMap, EnumerableSet, DoubleEndedQueue, CircularBuffer, Checkpoints, Heap, and MerkleTree.
    • Low-level & Formatting: Utilities for Address, Arrays, Base64, Bytes, Calldata, Strings, ShortStrings, SlotDerivation, StorageSlot, TransientSlot, Multicall, Context, Packing, Panic, Comparators, CAIP2, and CAIP10.

  4. Understand ERC-20 Core Contracts and Interfaces

    main

    The ERC-20 standard implementation includes several core components for token functionality:

    • IERC20: The base interface that all ERC-20 implementations must conform to.
    • IERC20Metadata: An extended interface that includes optional metadata functions: name(), symbol(), and decimals().
    • ERC20: The standard implementation of the IERC20 interface, which includes the optional metadata extensions (name, symbol, and decimals).

    These contracts are designed to be unopinionated, allowing developers to access internal functions (like _mint) and expose them via custom external functions.

  5. Key features of RainbowKit

    main

    Wallet Management

    RainbowKit provides out-of-the-box management for wallet connections and disconnections. It supports numerous wallets, handles chain switching, resolves addresses to ENS, and displays wallet balances.

    Customization

    The UI can be adjusted to match your brand. Options include:

    • Selecting predefined accent colors and border radius configurations.
    • Providing a completely custom theme.
    • Rendering your own custom button.
    • Omitting specific features.
    • Built-in dark mode support.

    Industry Standards

    RainbowKit is built on top of viem and wagmi, ensuring interoperability with the most common libraries in the ecosystem. It supports wallet standards such as EIP-1193 and EIP-6963 for seamless browser-based wallet connections.

  6. Understand the ERC-1155 Multi Token Standard interfaces

    main

    The ERC-1155 standard is implemented through three primary interfaces that fulfill different roles in a multi-token ecosystem:

    • IERC1155: The mandatory core interface for the standard.
    • IERC1155MetadataURI: An optional extension interface for handling metadata.
    • IERC1155Receiver: An interface used to allow contracts to receive ERC-1155 tokens.

    The ERC1155 contract implements both IERC1155 and the optional IERC1155MetadataURI by using a substitution mechanism that applies the same URI to all token types, which helps reduce gas costs.

  7. RainbowKit Key Features

    main

    Wallet Management

    RainbowKit handles connecting and disconnecting wallets, supports numerous wallet providers, manages network switching, converts addresses to ENS, and displays wallet balances.

    Customization

    • Branding: Match the UI to your brand using predefined accent colors and border radius configurations.
    • Advanced Customization: Provide a fully custom theme, use your own custom button, or omit specific features.
    • Dark Mode: Built-in support for dark mode.

    Industry Standards

    • Core Dependencies: Built on top of viem and wagmi for maximum compatibility.
    • Wallet Standards: Supports EIP-1193 and EIP-6963 out of the box, ensuring seamless integration with browser wallets.

  8. Choose an Access Control mechanism

    main

    OpenZeppelin provides several patterns for restricting function access in smart contracts depending on the complexity of your requirements:

    • AccessManager: A full-fledged solution for complex systems. It supports multiple hierarchical roles and execution delays for accounts across various contracts.
    • AccessManaged: A pattern where a contract delegates its access control to an external authority (which can be an AccessManager).
    • AccessControl: A per-contract mechanism for managing multiple hierarchical roles and assigning them to multiple accounts within a single contract instance.
    • Ownable: A simple mechanism with a single owner. Best for quick tests or very simple projects, but generally insufficient for production-grade security requirements.
    • Ownable2Step: A safer version of Ownable that requires a two-step process to transfer ownership, preventing accidental loss of ownership.

  9. Use ERC2981 for NFT Royalties

    main

    The ERC2981 standard provides a common way to implement NFT royalties that is compatible with both ERC-721 and ERC-1155 token standards. This allows marketplaces and other applications to consistently query royalty information across different token types.

    Note for ERC-721 users: If you are using ERC-721, consider using ERC721Royalty instead, as it includes functionality to clear royalty information from storage when a token is burned.

  11. Extend a built-in theme

    main

    Instead of redefining the entire theme, you can extend a built-in theme (like darkTheme or lightTheme) by overriding specific tokens. This is useful for applying brand colors or specific adjustments while keeping the rest of the theme intact.

    1. Install lodash.merge to combine the objects.
    2. Import the built-in theme and the Theme type.
    3. Merge the built-in theme function call with your custom overrides.
    4. Pass the resulting object to RainbowKitProvider.
    npm install lodash.merge
    import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';

const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);

const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};