### Install dependencies and run examples

Source: https://github.com/rainbow-me/rainbowkit/blob/main/README.md

Commands to install dependencies and start the development server for an example project.

```bash
pnpm install
```

```bash
cd examples/with-next
```

```bash
pnpm run dev
```

--------------------------------

### Run Development Server

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Starts the example application and the documentation site simultaneously. Both will be accessible via localhost.

```bash
pnpm dev                      # Run example app + site (localhost:3000 and :3001)
```

--------------------------------

### Run Library and Example App

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Starts the development server for the library packages and the example application. Does not include the documentation site.

```bash
pnpm dev:example              # Run lib + example app only
```

--------------------------------

### Start Development Servers

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Commands to start the development servers for the example app and the documentation site. Library watch-mode is included.

```bash
pnpm dev:example
```

```bash
pnpm dev:site
```

```bash
pnpm dev
```

--------------------------------

### Run Library and Documentation Site

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Starts the development server for the library packages and the documentation site. Does not include the example application.

```bash
pnpm dev:site                 # Run lib + docs site only
```

--------------------------------

### Install Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Installs all project dependencies and generates type definitions from the root of the monorepo. This is the initial setup command.

```bash
pnpm install  # Install dependencies and generate type definitions from root
```

--------------------------------

### Install dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-react-router/README.md

Run this command to install all required project dependencies.

```bash
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit-siwe-next-auth/README.md

Install the necessary packages for RainbowKit SIWE NextAuth integration and NextAuth v5.

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth next-auth@5.0.0-beta.31
```

--------------------------------

### Custom Wallet Example

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallets.mdx

Example of creating a custom wallet using RainbowKit and WalletConnect.

```APIDOC
## POST /api/custom-wallet

### Description
This endpoint demonstrates how to create and configure a custom wallet for integration with RainbowKit, leveraging WalletConnect for mobile and extension connections.

### Method
POST

### Endpoint
/api/custom-wallet

### Parameters
#### Request Body
- **projectId** (string) - Required - Project ID for WalletConnect

### Request Example
```json
{
  "projectId": "YOUR_PROJECT_ID"
}
```

### Response
#### Success Response (200)
- **wallet** (object) - The configured custom wallet object.
  - **id** (string) - Unique identifier for the wallet.
  - **name** (string) - Display name of the wallet.
  - **iconUrl** (string) - URL for the wallet's icon.
  - **iconBackground** (string) - Background color for the wallet icon.
  - **downloadUrls** (object) - URLs for downloading the wallet on different platforms.
    - **android** (string) - Optional - Google Play URL.
    - **ios** (string) - Optional - Apple App Store URL.
    - **chrome** (string) - Optional - Chrome Web Store URL.
    - **qrCode** (string) - Optional - URL for QR code scanning.
  - **mobile** (object) - Configuration for mobile connections.
    - **getUri** (function) - Function to get the connection URI.
  - **qrCode** (object) - Configuration for QR code connections.
    - **getUri** (function) - Function to get the connection URI.
    - **instructions** (object) - Instructions for QR code connection.
      - **learnMoreUrl** (string) - URL for more information.
      - **steps** (array) - Array of steps for the user.
  - **extension** (object) - Configuration for browser extension connections.
    - **instructions** (object) - Instructions for extension connection.
      - **learnMoreUrl** (string) - URL for more information.
      - **steps** (array) - Array of steps for the user.
  - **createConnector** (function) - Function to create the wallet connector.

#### Response Example
```json
{
  "wallet": {
    "id": "my-wallet",
    "name": "My Wallet",
    "iconUrl": "https://my-image.xyz",
    "iconBackground": "#0c2f78",
    "downloadUrls": {
      "android": "https://play.google.com/store/apps/details?id=my.wallet",
      "ios": "https://apps.apple.com/us/app/my-wallet",
      "chrome": "https://chrome.google.com/webstore/detail/my-wallet",
      "qrCode": "https://my-wallet/qr"
    },
    "mobile": {
      "getUri": "(uri: string) => uri"
    },
    "qrCode": {
      "getUri": "(uri: string) => uri",
      "instructions": {
        "learnMoreUrl": "https://my-wallet/learn-more",
        "steps": [
          {
            "description": "We recommend putting My Wallet on your home screen for faster access to your wallet.",
            "step": "install",
            "title": "Open the My Wallet app"
          },
          {
            "description": "After you scan, a connection prompt will appear for you to connect your wallet.",
            "step": "scan",
            "title": "Tap the scan button"
          }
        ]
      }
    },
    "extension": {
      "instructions": {
        "learnMoreUrl": "https://my-wallet/learn-more",
        "steps": [
          {
            "description": "We recommend pinning My Wallet to your taskbar for quicker access to your wallet.",
            "step": "install",
            "title": "Install the My Wallet extension"
          },
          {
            "description": "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.",
            "step": "create",
            "title": "Create or Import a Wallet"
          },
          {
            "description": "Once you set up your wallet, click below to refresh the browser and load up the extension.",
            "step": "refresh",
            "title": "Refresh your browser"
          }
        ]
      }
    },
    "createConnector": "getWalletConnectConnector({ projectId })"
  }
}
```
```

--------------------------------

### Install Foundry and Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/lib/erc4626-tests/README.md

Commands to install the Foundry toolchain and add the necessary forge-std library to your project.

```bash
$ curl -L https://foundry.paradigm.xyz | bash

$ cd /path/to/your-erc4626-vault
$ forge install foundry-rs/forge-std
```

--------------------------------

### Install RainbowKit and Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/installation.mdx

Install RainbowKit and its peer dependencies, wagmi, viem, and @tanstack/react-query, using npm.

```bash
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
```

--------------------------------

### Install Forge Standard Library

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/forge-std/README.md

Command to install the library via the Forge CLI.

```bash
forge install foundry-rs/forge-std
```

--------------------------------

### Run Development Server with npm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-rainbow-button/README.md

Use this command to start the Next.js development server using npm.

```bash
npm run dev
```

--------------------------------

### Install OpenZeppelin Contracts with npm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/README.md

Use this command to install the OpenZeppelin Contracts library for use with Hardhat.

```bash
$ npm install @openzeppelin/contracts
```

--------------------------------

### Upgrade Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/zh-CN/guides/next-auth-v5.mdx

Install the supported versions of NextAuth v5 and the RainbowKit SIWE NextAuth adapter.

```bash
npm install next-auth@5.0.0-beta.31 @rainbow-me/rainbowkit-siwe-next-auth
```

--------------------------------

### Upgrade dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Install the latest versions of RainbowKit, wagmi, and viem.

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

--------------------------------

### Run Development Servers

Source: https://github.com/rainbow-me/rainbowkit/blob/main/CLAUDE.md

Commands to run the example app and documentation site simultaneously or individually. Use `pnpm dev:lib` to watch and rebuild library packages.

```bash
pnpm dev

```

```bash
pnpm dev:lib
```

```bash
pnpm dev:example
```

```bash
pnpm dev:site
```

```bash
pnpm dev:cli
```

```bash
pnpm dev:template:next-app
```

--------------------------------

### Install Rainbow Button and Dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbow-button/README.md

Install the `@rainbow-me/rainbow-button` package along with its peer dependencies: wagmi, viem, and @tanstack/react-query. Ensure viem is version 2.x.

```bash
npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query
```

--------------------------------

### Scaffold Template and Start Dev Server

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Scaffolds a template application using the CLI and then starts a development server. This is a comprehensive test of the CLI's functionality.

```bash
pnpm test:cli:dev             # Scaffold template + start dev server
```

--------------------------------

### Run Development Server

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-app/README.md

Use npm or yarn to start the development server for the Next.js project. Open the provided URL in your browser to view the application.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Start Local Node with Anvil

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/README.md

Launches a local Ethereum development node.

```shell
$ anvil
```

--------------------------------

### Install RainbowKit with npm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/public/llms-full.txt

Use this command to scaffold a new RainbowKit + wagmi + Next.js app with npm.

```bash
npm init @rainbow-me/rainbowkit@latest
```

--------------------------------

### Initialize New RainbowKit Project

Source: https://github.com/rainbow-me/rainbowkit/blob/main/packages/create-rainbowkit/README.md

Use one of the following commands to scaffold a new RainbowKit project. This command installs the latest version of RainbowKit and sets up a basic project structure.

```bash
npm init @rainbow-me/rainbowkit@latest
```

```bash
pnpm create @rainbow-me/rainbowkit@latest
```

```bash
yarn create @rainbow-me/rainbowkit
```

--------------------------------

### Install viem dependency

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/es-419/docs/migration-guide.mdx

wagmi v1 requires the `viem` dependency. Install it using npm.

```bash
npm i viem
```

--------------------------------

### Run Development Server with Yarn

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-rainbow-button/README.md

Use this command to start the Next.js development server using yarn.

```bash
yarn dev
```

--------------------------------

### Install Dependencies for RainbowKit v2

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/guides/rainbowkit-wagmi-v2.mdx

Use npm to install the latest versions of RainbowKit, wagmi, and viem v2.x.

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

--------------------------------

### Install Dependencies for Wagmi v1

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Commands to upgrade RainbowKit and Wagmi, and install the required viem peer dependency.

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

```bash
npm i viem
```

--------------------------------

### Install RainbowKit with pnpm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/public/llms-full.txt

Use this command to scaffold a new RainbowKit + wagmi + Next.js app with pnpm.

```bash
pnpm create @rainbow-me/rainbowkit@latest
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/CLAUDE.md

Use this command to install all project dependencies and generate type definitions from the root of the monorepo.

```bash
pnpm install
```

--------------------------------

### Install OpenZeppelin Contracts with Forge

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/README.md

Use this command to install the OpenZeppelin Contracts library for use with Foundry. Ensure you use a tagged release and not the master branch. Add the remapping in remappings.txt.

```bash
$ forge install OpenZeppelin/openzeppelin-contracts
Add @openzeppelin/contracts/=lib/openzeppelin-contracts/contracts/ in remappings.txt.
```

--------------------------------

### Install Halmos Cheatcodes with Foundry

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/lib/halmos-cheatcodes/README.md

Use this command to install the Halmos cheatcodes library using Foundry.

```bash
forge install a16z/halmos-cheatcodes
```

--------------------------------

### Start Remix Production Server

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix/README.md

After building for production, use this command to run your Remix application in production mode.

```sh
npm start
```

--------------------------------

### Create New RainbowKit Project

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/public/llms-full.txt

Use this command to generate a new boilerplate project with RainbowKit pre-configured. It prompts for a project name and installs dependencies.

```bash
yarn create @rainbow-me/rainbowkit
```

--------------------------------

### Remix Build Tooling Setup

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/installation.mdx

Configure Remix to polyfill buffer, events, and http modules for compatibility with RainbowKit and other Node.js built-ins.

```ts
/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};
```

--------------------------------

### Upgrade RainbowKit and Wagmi dependencies

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/guides/walletconnect-v2.mdx

Install the latest versions of RainbowKit and Wagmi to enable WalletConnect v2 support.

```bash
npm i @rainbow-me/rainbowkit@^1.0.2 wagmi@^1.2
```

--------------------------------

### Import RainbowKit and Wagmi Components

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/installation.mdx

Import necessary styles and components from RainbowKit, wagmi, and @tanstack/react-query for application setup.

```tsx
import '@rainbow-me/rainbowkit/styles.css';

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

--------------------------------

### Next.js Build Tooling Setup

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/installation.mdx

Configure Next.js scripts to use the webpack bundler by adding the --webpack flag, necessary for certain plugins.

```json
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}
```

--------------------------------

### Scaffold a new RainbowKit project

Source: https://github.com/rainbow-me/rainbowkit/blob/main/README.md

Initialize a new project using the preferred package manager.

```bash
npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit
```

--------------------------------

### Install TanStack Query Peer Dependency

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/guides/rainbowkit-wagmi-v2.mdx

Install `@tanstack/react-query` as it is now a required peer dependency for Wagmi v2.

```bash
npm i @tanstack/react-query
```

--------------------------------

### Set up Node.js Version with NVM

Source: https://github.com/rainbow-me/rainbowkit/blob/main/CLAUDE.md

Sources NVM and selects Node.js version 24, required for development within the repository.

```bash
export NVM_DIR="$HOME/.nvm" && source "$NVM_DIR/nvm.sh"
nvm use 24
```

--------------------------------

### Create New Remix Project and Copy App Folder

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-remix/README.md

This sequence of commands demonstrates how to create a new Remix project, potentially with pre-configured hosting, and then replace its default 'app' folder with your existing project's 'app' folder.

```sh
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app
```

--------------------------------

### Access Help Documentation

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/README.md

Displays help information for Foundry CLI tools.

```shell
$ forge --help
$ anvil --help
$ cast --help
```

--------------------------------

### View Certora Make Help

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/certora/README.md

Display available make commands for the Certora verification process.

```bash
make -C certora help
```

--------------------------------

### Prefix Interface Names with I

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/GUIDELINES.md

All interface definitions must start with a capital I.

```solidity
interface IERC777 {
```

--------------------------------

### Defining Struct Depth for stdStorage

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/forge-std/README.md

Example of struct field depth mapping for use with stdStorage.

```solidity
struct T {
    // depth 0
    uint256 a;
    // depth 1
    uint256 b;
}
```

--------------------------------

### Extend ERC4626Test Contract

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/lib/erc4626-tests/README.md

Example implementation of the abstract ERC4626Test contract to configure vault parameters for testing.

```solidity
// SPDX-License-Identifier: AGPL-3.0
pragma solidity >=0.8.0 <0.9.0;

import "erc4626-tests/ERC4626.test.sol";

import { ERC20Mock   } from "/path/to/mocks/ERC20Mock.sol";
import { ERC4626Mock } from "/path/to/mocks/ERC4626Mock.sol";

contract ERC4626StdTest is ERC4626Test {
    function setUp() public override {
        _underlying_ = address(new ERC20Mock("Mock ERC20", "MERC20", 18));
        _vault_ = address(new ERC4626Mock(ERC20Mock(__underlying__), "Mock ERC4626", "MERC4626"));
        _delta_ = 0;
        _vaultMayBeEmpty = false;
        _unlimitedAmount = false;
    }
}
```

--------------------------------

### Build for production

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-react-router/README.md

Generates a production-ready build of the application.

```bash
npm run build
```

--------------------------------

### Source NVM and Enable pnpm

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Commands to set up the Node.js environment using nvm and enable pnpm. This is crucial for Cursor Cloud specific instructions.

```bash
export NVM_DIR="$HOME/.nvm" && source "$NVM_DIR/nvm.sh"
```

```bash
corepack enable pnpm
```

--------------------------------

### Install ERC4626 Test Suite

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/lib/erc4626-tests/README.md

Command to add the a16z ERC4626 test suite as a dependency to your vault repository.

```bash
$ cd /path/to/your-erc4626-vault
$ forge install a16z/erc4626-tests
```

--------------------------------

### Wrap Application with Providers

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/public/llms-full.txt

Wrap your application's root component with WagmiProvider, QueryClientProvider, and RainbowKitProvider to enable wallet connection functionality.

```javascript
const queryClient = new QueryClient();

const App = () => {

  return (

    <WagmiProvider config={config}>

      <QueryClientProvider client={queryClient}>

        <RainbowKitProvider>

          {/* Your App */}

        </RainbowKitProvider>

      </QueryClientProvider>

    </WagmiProvider>

  );

};
```

--------------------------------

### Build and run with Docker

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-react-router/README.md

Commands to build container images using different package managers and run the resulting container.

```bash
# For npm
docker build -t my-app .

# For pnpm
docker build -f Dockerfile.pnpm -t my-app .

# For bun
docker build -f Dockerfile.bun -t my-app .

# Run the container
docker run -p 3000:3000 my-app
```

--------------------------------

### App Router Route Handlers

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/zh-CN/guides/next-auth-v5.mdx

For App Router applications, export the `GET` and `POST` handlers returned by `NextAuth`.

```typescript
export const { GET, POST } = handlers;
```

--------------------------------

### Import Bitget Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `bitgetWallet` from the RainbowKit wallets library.

```tsx
import { bitgetWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Import Best Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `bestWallet` from the RainbowKit wallets library.

```tsx
import { bestWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Import Binance Web3 Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `binanceWallet` from the RainbowKit wallets library.

```tsx
import { binanceWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Upgrade Dependencies for NextAuth v5

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/guides/next-auth-v5.mdx

Update your npm packages to install the NextAuth v5 compatible version and the RainbowKit SIWE adapter.

```bash
- npm install next-auth@^4 @rainbow-me/rainbowkit-siwe-next-auth
+ npm install next-auth@5.0.0-beta.31 @rainbow-me/rainbowkit-siwe-next-auth
```

--------------------------------

### Applying Built-in Themes

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/theming.mdx

Demonstrates how to apply the default light theme, dark theme, or midnight theme to the RainbowKitProvider.

```APIDOC
## Applying Built-in Themes

### Description
This section shows how to use the `lightTheme`, `darkTheme`, and `midnightTheme` functions provided by RainbowKit to style the UI.

### Method
N/A (Configuration within `RainbowKitProvider`)

### Endpoint
N/A (Configuration within `RainbowKitProvider`)

### Parameters
#### Request Body
- **theme** (object) - Required - The theme object returned by a theme function.

### Request Example
```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

### Response
N/A (Configuration)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Link create-rainbowkit CLI Globally

Source: https://github.com/rainbow-me/rainbowkit/blob/main/CLAUDE.md

Makes the create-rainbowkit CLI command available system-wide for testing purposes.

```bash
pnpm link:cli  # Makes `create-rainbowkit` available system-wide
```

--------------------------------

### Responsive ConnectButton Show Balance

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/connect-button.mdx

Control balance visibility responsively. This example hides the balance on small screens and shows it on large screens.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```

--------------------------------

### Import and Use ERC721 Contract

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/README.md

Example of importing the ERC721 contract from OpenZeppelin and using it in a custom contract. Ensure your Solidity version is compatible.

```solidity
pragma solidity ^0.8.20;

import {ERC721} from "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract MyCollectible is ERC721 {
    constructor() ERC721("MyCollectible", "MCO") {
    }
}
```

--------------------------------

### Utils

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/contracts/proxy/README.adoc

Utility contracts for initialization and upgradeability.

```APIDOC
## Initializable

### Description
Provides functionality for initializing contracts.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

```APIDOC
## UUPSUpgradeable

### Description
Implementation of the UUPS (Universal Upgradeable Proxy Standard) upgradeability pattern.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Buggy Token Contract Example

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/openzeppelin-contracts/lib/halmos-cheatcodes/README.md

This is a sample buggy token contract. It is not intended for production use. The contract includes a basic transfer function that can be exploited.

```solidity
/// @notice This is a buggy token contract. DO NOT use it in production.
contract Token {
    mapping(address => uint) public balanceOf;

    constructor() public {
        balanceOf[msg.sender] = 1e27;
    }

    function transfer(address to, uint amount) public {
        _transfer(msg.sender, to, amount);
    }

    function _transfer(address from, address to, uint amount) public {
        balanceOf[from] -= amount;
        balanceOf[to] += amount;
    }
}
```

--------------------------------

### Upgrade RainbowKit and wagmi to v0.8.x

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Use this command to upgrade both RainbowKit and wagmi to version 0.8.x. Refer to wagmi's migration guide for any breaking changes.

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

--------------------------------

### Import Bifrost Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `bifrostWallet` from the RainbowKit wallets library.

```tsx
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Upgrade RainbowKit and wagmi to v0.10.x

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Use this command to upgrade both RainbowKit and wagmi to version 0.10.x. Review wagmi's migration guide for any breaking changes.

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

--------------------------------

### View build output structure

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-react-router/README.md

Displays the expected directory structure after running a production build.

```text
├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code
```

--------------------------------

### Build with Specific Solidity Compiler Versions

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/lib/forge-std/CONTRIBUTING.md

These commands ensure your code is compatible with various Solidity compiler versions. They build the project while skipping tests and specifying the compiler.

```sh
forge build --skip test --use solc:0.6.2
```

```sh
forge build --skip test --use solc:0.6.12
```

```sh
forge build --skip test --use solc:0.7.0
```

```sh
forge build --skip test --use solc:0.7.6
```

```sh
forge build --skip test --use solc:0.8.0
```

--------------------------------

### Server-Side Message Creation

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-authentication.mdx

This example demonstrates creating EIP-4361 messages on the server for enhanced security. The server endpoint should handle security-critical fields like domain and nonce.

```tsx
  createMessage: async ({ address, chainId }) => {
    const response = await fetch('/api/siwe/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ address, chainId }),
    });

    if (!response.ok) {
      throw new Error('Failed to create message');
    }

    return await response.text();
  },
```

--------------------------------

### Responsive ConnectButton Account Status

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/connect-button.mdx

Customize `accountStatus` for different screen sizes. This example shows the avatar on small screens and the full account details on large screens.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

--------------------------------

### Build Project with Forge

Source: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-mint-nft/contract/README.md

Compiles the smart contracts in the project.

```shell
$ forge build
```

--------------------------------

### Run Tests in Watch Mode

Source: https://github.com/rainbow-me/rainbowkit/blob/main/AGENTS.md

Starts the test runner in watch mode, automatically re-running tests when file changes are detected. Ideal for continuous testing during development.

```bash
pnpm test:watch               # Watch mode for tests
```

--------------------------------

### Create a custom wallet with WalletConnect

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallets.mdx

Defines a custom wallet configuration including download URLs, mobile/QR code instructions, and extension setup using the WalletConnect connector.

```tsx
import { Wallet, getWalletConnectConnector } from '@rainbow-me/rainbowkit';

export interface MyWalletOptions {
  projectId: string;
}

export const rainbow = ({ projectId }: MyWalletOptions): Wallet => ({
  id: 'my-wallet',
  name: 'My Wallet',
  iconUrl: 'https://my-image.xyz',
  iconBackground: '#0c2f78',
  downloadUrls: {
    android: 'https://play.google.com/store/apps/details?id=my.wallet',
    ios: 'https://apps.apple.com/us/app/my-wallet',
    chrome: 'https://chrome.google.com/webstore/detail/my-wallet',
    qrCode: 'https://my-wallet/qr',
  },
  mobile: {
    getUri: (uri: string) => uri,
  },
  qrCode: {
    getUri: (uri: string) => uri,
    instructions: {
      learnMoreUrl: 'https://my-wallet/learn-more',
      steps: [
        {
          description:
            'We recommend putting My Wallet on your home screen for faster access to your wallet.',
          step: 'install',
          title: 'Open the My Wallet app',
        },
        {
          description:
            'After you scan, a connection prompt will appear for you to connect your wallet.',
          step: 'scan',
          title: 'Tap the scan button',
        },
      ],
    },
  },
  extension: {
    instructions: {
      learnMoreUrl: 'https://my-wallet/learn-more',
      steps: [
        {
          description:
            'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.',
          step: 'install',
          title: 'Install the My Wallet extension',
        },
        {
          description:
            'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
          step: 'create',
          title: 'Create or Import a Wallet',
        },
        {
          description:
            'Once you set up your wallet, click below to refresh the browser and load up the extension.',
          step: 'refresh',
          title: 'Refresh your browser',
        },
      ],
    },
  },
  createConnector: getWalletConnectConnector({ projectId }),
});
```

--------------------------------

### Build Custom Wallet List

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Use `connectorsForWallets` to create a custom list of wallets, including specific ones like Rainbow and WalletConnect, along with their necessary connectors.

```tsx
import {
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import {
  rainbowWallet,
  walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);
```

--------------------------------

### Upgrade RainbowKit and wagmi to v0.9.x

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Use this command to upgrade both RainbowKit and wagmi to version 0.9.x. Consult wagmi's migration guide for potential breaking changes.

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

--------------------------------

### Upgrade RainbowKit and wagmi to v0.11.x

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Use this command to upgrade both RainbowKit and wagmi to version 0.11.x. Check wagmi's migration guide for potential breaking changes.

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

--------------------------------

### Import Backpack Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `backpackWallet` from the RainbowKit wallets library.

```tsx
import { backpackWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Import Ready Wallet Connector

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the Ready wallet connector for use with RainbowKit.

```tsx
import { readyWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Update RainbowKit and wagmi to v1

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/es-419/docs/migration-guide.mdx

Use this command to update RainbowKit and wagmi to their latest v1 versions. Ensure you have also installed the `viem` dependency as required by wagmi v1.

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

--------------------------------

### Import 1inch Wallet

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/custom-wallet-list.mdx

Import the `oneInchWallet` from the RainbowKit wallets library.

```tsx
import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
```

--------------------------------

### Access Session Server-Side with getServerSideProps

Source: https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit-siwe-next-auth/README.md

Retrieve the user's session and address on the server using the auth function. This example demonstrates how to pass session data to the page component.

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { auth } from '../auth';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await auth(context.req, context.res);

  const address = session?.address ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({ address }: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

--------------------------------

### Update configuration and providers

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/migration-guide.mdx

Migrate from WagmiConfig to WagmiProvider and integrate QueryClientProvider.

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

--------------------------------

### Customize Dark Theme with Accent Color and Border Radius

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/docs/theming.mdx

Customize the `darkTheme` by specifying `accentColor` and `borderRadius`. This example sets a custom purple accent color and a medium border radius.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

--------------------------------

### Configure Chains for createConfig with Metadata Overrides

Source: https://github.com/rainbow-me/rainbowkit/blob/main/site/data/en-US/guides/rainbowkit-wagmi-v2.mdx

When using `createConfig`, define custom chains with metadata overrides, such as `iconBackground` and `iconUrl`, for existing networks like mainnet.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```