### Run Development Server using Package Managers

Source: https://github.com/coinbase/onchainkit/blob/main/templates/onchainkit-nextjs/README.md

Starts the Next.js development server, allowing you to see live updates as you code. This command can be executed with npm, yarn, pnpm, or bun.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

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

### Complete Migration Steps

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Consolidated migration steps for upgrading to OnchainKit v1.0.0, including updating dependencies, adjusting the provider setup, and changing package references.

```bash
Step 1: Update Dependencies
npm install @coinbase/onchainkit@1.0.0 react@19 react-dom@19 viem@^2.27 wagmi@^2.16

Step 2: Update Provider
Replace MiniKitProvider with OnchainKitProvider and add MiniKit configuration.

Step 3: Update Package References
Change @farcaster/frame-sdk to @farcaster/miniapp-sdk in your package.json.
```

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

### Update Provider Setup (React)

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Compares the 'Before' (v0.x using MiniKitProvider) and 'After' (v1.0 using OnchainKitProvider) configurations for setting up the OnchainKit provider in a React application. Highlights the consolidation of MiniKitProvider into OnchainKitProvider and new configuration options.

```tsx
// Before (v0.x):
import { MiniKitProvider } from "@coinbase/onchainkit/minikit";

export function Providers({ children }) {
  return (
    <MiniKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_API_KEY}
      chain={base}
      config={{
        appearance: { mode: "auto" },
        wallet: { preference: "all" }
      }}
    >
      {children}
    </MiniKitProvider>
  );
}

// After (v1.0):
import { OnchainKitProvider } from "@coinbase/onchainkit";
import "@coinbase/onchainkit/styles.css";

export function RootProvider({ children }) {
  return (
    <OnchainKitProvider
      apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
      chain={base}
      config={{
        appearance: {
          mode: "dark", // or "light" or "auto"
        },
        wallet: {
          display: "modal", // or "dropdown"
          preference: "all",
        },
      }}
      miniKit={{
        enabled: true,
        autoConnect: true,
        notificationProxyUrl: undefined, // optional
      }}
    >
      {children}
    </OnchainKitProvider>
  );
}
```

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

### Install Required Peer Dependencies (npm)

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

This command installs the necessary peer dependencies, `viem` and `wagmi`, for OnchainKit v1.0.0. Ensure these versions are installed to avoid build failures and peer dependency warnings. These libraries are crucial for blockchain interaction within the OnchainKit framework.

```bash
npm install viem@^2.27 wagmi@^2.16
```

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

### Bootstrap New OnchainKit Project

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Command to initialize a new project with OnchainKit v1.0.0@alpha. Supports both traditional and mini web applications.

```bash
npx create-onchain@alpha        // Traditional web app
npx create-onchain@alpha --mini // Mini app
```

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

### Start Development Server with pnpm

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Start the development server for the project using pnpm. This command typically builds the project and launches a local server for development and testing purposes.

```bash
pnpm dev
```

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

### Install Dependencies for OnchainKit

Source: https://github.com/coinbase/onchainkit/blob/main/examples/minikit-example/README.md

Installs project dependencies using various package managers like npm, yarn, pnpm, and bun. Ensure you have the chosen package manager installed.

```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```

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

### Run OnchainKit Development Server

Source: https://github.com/coinbase/onchainkit/blob/main/examples/minikit-example/README.md

Starts the development server for the OnchainKit project, allowing for hot-reloading and immediate feedback during development. This command is compatible with npm, yarn, pnpm, and bun.

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

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

### Clone OnchainKit Repository

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

This command clones the OnchainKit repository from GitHub, allowing you to access the project files and begin the setup process.

```bash
git clone https://github.com/coinbase/onchainkit.git
```

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

### Install Dependencies with pnpm

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

Installs all project dependencies using pnpm, which is required for managing the monorepo structure and its packages. Ensure you have pnpm v10 installed.

```bash
pnpm install
```

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

### Develop and Watch Playground

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

Builds OnchainKit in watch mode and starts the playground for live component viewing. This command is essential for iterative development of UI components and utilities.

```bash
pnpm f:play dev:watch
```

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

### Create Onchain CLI Help and Version Commands

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Display help information and the current version of the Create Onchain CLI tool. The --help flag shows all available commands and options, while the --version flag displays the installed version number.

```bash
npx create-onchain --help

npx create-onchain --version
```

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

### Apply Scoped Styling

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Example of applying OnchainKit's scoped styling system by setting a data attribute on the HTML element. This ensures styles are isolated and prevents conflicts with consumer app theming.

```tsx
// Themes are applied via data attribute to prevent conflicts
<html data-ock-theme="default-dark">
  {/* Your app content */}
</html>
```

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

### ConnectWallet Component with Render Props

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Demonstrates how to use the render prop pattern with the ConnectWallet component in OnchainKit v1.0.0 for complete customization of the button's appearance and behavior.

```tsx
// ConnectWallet with render prop
<ConnectWallet
  render={({ label, onClick, context, status, isLoading }) => (
    <button 
      onClick={onClick}
      className="my-custom-button"
      disabled={isLoading}
    >
      {status === 'connecting' ? 'Connecting...' : label}
    </button>
  )}
/>
```

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

### Update Project Dependencies

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Commands to update project dependencies to OnchainKit v1.0.0 and required peer dependencies like viem and wagmi. Supports both npm and pnpm package managers.

```bash
npm install @coinbase/onchainkit@1.0.0 viem@^2.27 wagmi@^2.16

pnpm add @coinbase/onchainkit@1.0.0 viem@^2.27 wagmi@^2.16
```

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

### Upgrade React for Compatibility (npm)

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

This command upgrades your project to React 19 and ReactDOM 19. This is a requirement for OnchainKit v1.0.0 to ensure compatibility and avoid potential errors. Ensure your project is set up to use the latest React versions.

```bash
npm install react@19 react-dom@19
```

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

### SignatureButton Component with Render Props

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Illustrates the usage of render props with the SignatureButton component in OnchainKit v1.0.0, allowing for custom rendering and control over the button's presentation.

```tsx
// SignatureButton with render prop
<SignatureButton
  render={({ label, onClick, context }) => (
    <button onClick={onClick} className="my-custom-button">
      {label}
    </button>
  )}
/>
```

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

### Update Farcaster SDK Dependency

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

Shows the change in the Farcaster SDK dependency in package.json from '@farcaster/frame-sdk' in v0.x to '@farcaster/miniapp-sdk' in v1.0.

```json
// Before (v0.x):
{
  "dependencies": {
    "@farcaster/frame-sdk": "^0.1.8"
  }
}

// After (v1.0):
{
  "dependencies": {
    "@farcaster/miniapp-sdk": "^0.1.8"
  }
}
```

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

### Execute Transactions with Raw Calls

Source: https://context7.com/coinbase/onchainkit/llms.txt

This example demonstrates executing blockchain transactions using raw call data, bypassing the need for contract ABIs. The `Transaction` component is used with a chain ID and a list of `Call` objects, where each `Call` specifies the recipient address (`to`), optional data (`data`), and optional value (`value`). This approach is useful for interacting with contracts where ABIs are not readily available or for simpler, direct contract interactions. UI components like `TransactionButton` and `TransactionStatus` are included for user interaction.

```tsx
import {
  Transaction,
  TransactionButton,
  TransactionStatus,
  TransactionStatusLabel,
} from '@coinbase/onchainkit/transaction';
import type { Hex } from 'viem';

type Call = { to: Hex; data?: Hex; value?: bigint };

function RawTransactionComponent() {
  const calls: Call[] = [
    {
      to: '0x1234567890123456789012345678901234567890',
      data: '0x01ffc9a7',
      value: BigInt(0),
    },
  ];

  return (
    <Transaction chainId={8453} calls={calls}>
      <TransactionButton text="Send Transaction" />
      <TransactionStatus>
        <TransactionStatusLabel />
      </TransactionStatus>
    </Transaction>
  );
}

```

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

### Update Custom Theming CSS Variables to --ock- Prefix

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-upgrade-guide.md

This snippet demonstrates how to update custom CSS variables for OnchainKit theming. It shows the transition from v0.x to v1.0.0, where a new prefix `--ock-` is required for custom theme variables. Ensure your custom styles adhere to this new naming convention.

```css
/* Before (v0.x) */
:root {
  --text-primary: #000000;
  --bg-primary: #ffffff;
}

/* After (v1.0) */
[data-ock-theme='custom'] {
  --ock-text-foreground: #000000;
  --ock-background: #ffffff;
}
```

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

### Wallet Connection and Management with OnchainKit

Source: https://context7.com/coinbase/onchainkit/llms.txt

Implements wallet connection and account management using OnchainKit's Wallet components. It utilizes Wagmi's `useAccount` hook to get the user's address and displays wallet information within a dropdown menu. Components like `ConnectWallet`, `WalletDropdown`, `Identity`, `Name`, `Address`, `EthBalance`, and `Socials` are used.

```tsx
import {
  ConnectWallet,
  Wallet,
  WalletDropdown,
  WalletDropdownBasename,
  WalletDropdownDisconnect,
  WalletDropdownFundLink,
  WalletDropdownLink,
} from '@coinbase/onchainkit/wallet';
import {
  Address,
  Avatar,
  EthBalance,
  Identity,
  Name,
  Socials,
} from '@coinbase/onchainkit/identity';
import { useAccount } from 'wagmi';

function WalletComponent() {
  const { address } = useAccount();

  return (
    <Wallet>
      <ConnectWallet>
        <Avatar address={address} className="h-6 w-6" />
        <Name />
      </ConnectWallet>
      <WalletDropdown>
        <Identity className="px-4 pt-3 pb-2">
          <Avatar />
          <Name />
          <Address />
          <EthBalance />
          <Socials />
        </Identity>
        <WalletDropdownBasename />
        <WalletDropdownLink
          icon="wallet"
          href="https://keys.coinbase.com"
          target="_blank"
        >
          Wallet
        </WalletDropdownLink>
        <WalletDropdownFundLink />
        <WalletDropdownDisconnect />
      </WalletDropdown>
    </Wallet>
  );
}
```

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

### Create New Project with Create Onchain CLI

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Bootstrap a new project using the Create Onchain CLI. This command initializes a project with predefined templates and configurations. It supports creating a default OnchainKit template, a MiniKit template for Farcaster Mini-Apps, or specific templates using the --template flag.

```bash
npx create-onchain

npx create-onchain --mini

npx create-onchain --template-<template>

Available Templates:
  - onchainkit-nextjs: Create a basic OnchainKit project
  - minikit-nextjs: Create a MiniKit project
```

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

### Filter Commands with Shorthands

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

Utilizes predefined shorthands in the root package.json to easily filter commands for specific packages like '@coinbase/onchainkit', 'playground', 'create-onchain', or 'miniapp-manifest-generator'.

```bash
pnpm f:ock
pnpm f:play
pnpm f:create
pnpm f:manifest
```

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

### Run Tests and Coverage with pnpm

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Execute the project's test suite using pnpm. The `pnpm test` command runs all defined tests, while `pnpm test:coverage` runs tests and generates a code coverage report.

```bash
pnpm test

pnpm test:coverage
```

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

### Build Project with pnpm

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Build the project for production using the pnpm package manager. This command compiles and optimizes the project's code, assets, and dependencies for deployment.

```bash
pnpm build
```

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

### Generate Mini-App Manifest with Create Onchain CLI

Source: https://github.com/coinbase/onchainkit/blob/main/packages/create-onchain/README.md

Generate a Farcaster Mini-App manifest for an existing project using the Create Onchain CLI. This process involves connecting a Farcaster custody wallet, generating, signing, and saving the manifest details to the project's .env file.

```bash
npx create-onchain --manifest
```

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

### Configure OnchainKitProvider with Wagmi and React Query

Source: https://context7.com/coinbase/onchainkit/llms.txt

Sets up the root configuration for OnchainKit, including chain, API keys, and appearance settings. This requires Wagmi for blockchain interactions and React Query for state management. It accepts chain configuration, an API key, and an optional config object for appearance and wallet settings.

```tsx
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { base } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, createConfig, http } from 'wagmi';

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [base],
  transports: {
    [base.id]: http(),
  },
});

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <OnchainKitProvider
          apiKey="YOUR_API_KEY"
          chain={base}
          config={{
            appearance: {
              name: 'My Dapp',
              logo: 'https://example.com/logo.png',
              mode: 'auto', // 'auto' | 'light' | 'dark'
              theme: 'default', // 'default' | 'base' | 'cyberpunk'
            },
            paymaster: 'https://api.developer.coinbase.com/rpc/v1/base/YOUR_API_KEY',
            wallet: {
              display: 'modal',
              termsUrl: 'https://example.com/terms',
              privacyUrl: 'https://example.com/privacy',
            },
          }}
        >
          <YourApp />
        </OnchainKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

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

### Implement Token Swap Interface with Swap Component

Source: https://context7.com/coinbase/onchainkit/llms.txt

Provides a complete token swap interface, including slippage settings and transaction lifecycle management. It utilizes various components from '@coinbase/onchainkit/swap' and requires token definitions. The component handles swap status, success, and error events.

```typescript
import {
  Swap,
  SwapAmountInput,
  SwapButton,
  SwapMessage,
  SwapSettings,
  SwapSettingsSlippageDescription,
  SwapSettingsSlippageInput,
  SwapSettingsSlippageTitle,
  SwapToast,
  SwapToggleButton,
} from '@coinbase/onchainkit/swap';
import type { Token } from '@coinbase/onchainkit/token';
import { base } from 'viem/chains';

function SwapComponent() {
  const ETH: Token = {
    name: 'ETH',
    address: '',
    symbol: 'ETH',
    decimals: 18,
    image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
    chainId: base.id,
  };

  const USDC: Token = {
    name: 'USDC',
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    symbol: 'USDC',
    decimals: 6,
    image: 'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
    chainId: base.id,
  };

  const handleOnStatus = (status) => {
    console.log('Swap status:', status);
  };

  const handleOnSuccess = (txReceipt) => {
    console.log('Swap successful:', txReceipt);
  };

  const handleOnError = (error) => {
    console.error('Swap failed:', error);
  };

  return (
    <Swap
      onStatus={handleOnStatus}
      onSuccess={handleOnSuccess}
      onError={handleOnError}
      config={{ maxSlippage: 3 }}
      isSponsored={false}
    >
      <div className="bg-white rounded-lg p-6">
        <SwapSettings>
          <SwapSettingsSlippageTitle>Max. slippage</SwapSettingsSlippageTitle>
          <SwapSettingsSlippageDescription>
            Your swap will revert if the prices change by more than the selected percentage.
          </SwapSettingsSlippageDescription>
          <SwapSettingsSlippageInput />
        </SwapSettings>
        <SwapAmountInput
          label="Sell"
          swappableTokens={[ETH, USDC]}
          token={ETH}
          type="from"
        />
        <SwapToggleButton />
        <SwapAmountInput
          label="Buy"
          swappableTokens={[ETH, USDC]}
          token={USDC}
          type="to"
        />
        <SwapButton />
        <SwapMessage />
        <SwapToast />
      </div>
    </Swap>
  );
}
```

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

### Run Script in All Packages

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

Executes a specified script across all packages within the monorepo. This is convenient for tasks like building all components or running tests universally.

```bash
pnpm run <script-name>
```

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

### Implement Render Props for ConnectWallet and SignatureButton

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-api-changes.md

This snippet illustrates the new render prop pattern for `ConnectWallet` and `SignatureButton` components in OnchainKit v1.0. This allows for custom rendering of buttons within these components, providing greater flexibility in UI design.

```tsx
// ConnectWallet render prop (NEW)
<ConnectWallet
  render={({ label, onClick, context, status, isLoading }) => (
    <CustomButton onClick={onClick} loading={isLoading}>
      {label}
    </CustomButton>
  )}
/>

// SignatureButton render prop (NEW)
<SignatureButton
  render={({ label, onClick, context }) => (
    <CustomButton onClick={onClick}>
      {label}
    </CustomButton>
  )}
/>
```

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

### Build Swap Transaction with buildSwapTransaction

Source: https://context7.com/coinbase/onchainkit/llms.txt

Constructs an unsigned swap transaction ready for signing and execution. It requires the user's address, details of the tokens involved in the swap (from and to), the amount to swap, a reference for the amount (e.g., 'from'), and the maximum acceptable slippage. The function returns transaction details, potential approval transactions, fees, and quotes, or an error if the transaction cannot be built.

```tsx
import { buildSwapTransaction } from '@coinbase/onchainkit/api';
import type { Token } from '@coinbase/onchainkit/token';

async function createSwapTransaction(userAddress: `0x${string}`) {
  const ETH: Token = {
    address: '',
    chainId: 8453,
    decimals: 18,
    name: 'Ethereum',
    symbol: 'ETH',
    image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
  };

  const USDC: Token = {
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    chainId: 8453,
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    image: 'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
  };

  const swapTransaction = await buildSwapTransaction({
    fromAddress: userAddress,
    from: ETH,
    to: USDC,
    amount: '0.1',
    amountReference: 'from',
    maxSlippage: '3',
  });

  if ('error' in swapTransaction) {
    console.error('Build transaction error:', swapTransaction.error);
    return;
  }

  console.log('Swap transaction:', swapTransaction.transaction);
  console.log('Approve transaction:', swapTransaction.approveTransaction);
  console.log('Fee:', swapTransaction.fee);
  console.log('Quote:', swapTransaction.quote);
}
```

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

### v1.0 Theme Application (React)

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-api-changes.md

Illustrates the new method for applying themes in v1.0.0 of OnchainKit, utilizing data attributes on the HTML element. This allows for more granular control and specific theme selection, such as 'default-dark'.

```tsx
```tsx
// Applied via data attributes
<html data-ock-theme="default-dark">
```
```

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

### v0.x Theme Application (React)

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-api-changes.md

Demonstrates how themes were applied globally in v0.x of OnchainKit by adding a 'dark' class to the HTML element. This was the standard method for enabling dark mode or specific theme variations.

```tsx
```tsx
// Applied globally
<html className="dark">
```
```

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

### Run Script in Specific Package

Source: https://github.com/coinbase/onchainkit/blob/main/README.md

Executes a specified script within a particular package in the monorepo. This is useful for targeting development or testing for individual components or utilities.

```bash
pnpm [-F | --filter] <package-name> <script-name>
```

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

### Update Provider Configuration: OnchainKitProvider

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-api-changes.md

This snippet demonstrates the change in provider configuration from v0.x to v1.0. The `MiniKitProvider` has been removed, and its configuration is now integrated into `OnchainKitProvider` using the `miniKit` prop.

```tsx
<MiniKitProvider apiKey="..." chain={base} config={{...}}>
```

**v1.0:**
```tsx
<OnchainKitProvider 
  apiKey="..." 
  chain={base} 
  config={{...}}
  miniKit={{ enabled: true, autoConnect: true }}
>
```

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

### Onramp Funding with FundButton

Source: https://context7.com/coinbase/onchainkit/llms.txt

The `FundButton` component provides a straightforward way to initiate fiat-to-crypto onramp flows directly from a dApp. It requires the user's wallet address and can be configured with desired assets, a preset fiat amount, and the default network. Clicking the button opens a Coinbase-hosted onramp interface, simplifying the process for users to fund their wallets.

```tsx
import { FundButton } from '@coinbase/onchainkit/fund';
import { useAccount } from 'wagmi';

function FundingComponent() {
  const { address } = useAccount();

  return (
    <FundButton
      fundingUrl={getCoinbaseSmartWalletFundUrl({
        address: address,
        assets: ['ETH', 'USDC'],
        presetFiatAmount: 20,
        defaultNetwork: 'base',
      })}
    />
  );
}

```

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

### useWalletContext Hook

Source: https://context7.com/coinbase/onchainkit/llms.txt

A React hook to access and manage wallet-related state and functions within Wallet components. It provides functions like setIsOpen to control the wallet UI's visibility.

```tsx
import { useWalletContext } from '@coinbase/onchainkit/wallet';

function CustomWalletComponent() {
  const { isOpen, setIsOpen } = useWalletContext();

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? 'Close' : 'Open'} Wallet
    </button>
  );
}
```

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

### useSwapContext Hook

Source: https://context7.com/coinbase/onchainkit/llms.txt

A React hook for accessing swap-related state and functions within Swap components. It provides access to the current 'from' and 'to' tokens, loading status, and any encountered errors.

```tsx
import { useSwapContext } from '@coinbase/onchainkit/swap';

function CustomSwapComponent() {
  const { from, to, loading, error } = useSwapContext();

  return (
    <div>
      <div>From: {from?.token?.symbol}</div>
      <div>To: {to?.token?.symbol}</div>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error.error}</div>}
    </div>
  );
}
```

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

### Advanced Funding Interface with FundCard

Source: https://context7.com/coinbase/onchainkit/llms.txt

The `FundCard` component offers a comprehensive user interface for funding a wallet, including options for amount input, payment method selection, and preset amounts. It is designed as a self-contained module that can be customized with various child components like `FundCardHeader`, `FundCardAmountInput`, `FundCardPresetAmountInputList`, `FundCardPaymentMethodDropdown`, and `FundCardSubmitButton` to create a flexible and user-friendly funding experience.

```tsx
import {
  FundCard,
  FundCardAmountInput,
  FundCardAmountInputTypeSwitch,
  FundCardHeader,
  FundCardPaymentMethodDropdown,
  FundCardPresetAmountInputList,
  FundCardSubmitButton,
} from '@coinbase/onchainkit/fund';

function FundCardComponent() {
  return (
    <FundCard>
      <FundCardHeader />
      <FundCardAmountInput />
      <FundCardAmountInputTypeSwitch />
      <FundCardPresetAmountInputList />
      <FundCardPaymentMethodDropdown />
      <FundCardSubmitButton />
    </FundCard>
  );
}

```

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

### NFT View and Mint Components

Source: https://context7.com/coinbase/onchainkit/llms.txt

Components for displaying Non-Fungible Token (NFT) details and enabling minting functionality. It includes NFTCard for viewing and NFTMintCard for minting, both requiring contract address and token ID.

```tsx
import { NFTCard } from '@coinbase/onchainkit/nft/view';
import { NFTMintCard } from '@coinbase/onchainkit/nft/mint';

function NFTComponent() {
  return (
    <div>
      {/* View NFT */}
      <NFTCard
        contractAddress="0x1234567890123456789012345678901234567890"
        tokenId="1"
      />

      {/* Mint NFT */}
      <NFTMintCard
        contractAddress="0x1234567890123456789012345678901234567890"
        tokenId="1"
      />
    </div>
  );
}
```

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

### Fetch Token List

Source: https://context7.com/coinbase/onchainkit/llms.txt

An asynchronous function to retrieve a list of tokens available for trading on a specified blockchain chain. It takes chainId, page, and limit as parameters. It handles potential errors during the API call and logs the available tokens.

```tsx
import { getTokens } from '@coinbase/onchainkit/api';

async function fetchTokenList() {
  const tokens = await getTokens({
    chainId: 8453, // Base
    page: 1,
    limit: 50,
  });

  if ('error' in tokens) {
    console.error('Error fetching tokens:', tokens.error);
    return;
  }

  console.log('Available tokens:', tokens.tokens);
  tokens.tokens.forEach(token => {
    console.log(`${token.symbol}: ${token.name} (${token.address})`);
  });
}
```

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

### Fetch Token Swap Quote using getSwapQuote API

Source: https://context7.com/coinbase/onchainkit/llms.txt

An API function to retrieve a quote for token swaps, including pricing and fee details. It requires the 'from' and 'to' token objects, the amount to swap, and the slippage tolerance. The function returns either a quote object with swap details or an error object.

```typescript
import { getSwapQuote } from '@coinbase/onchainkit/api';
import type { Token } from '@coinbase/onchainkit/token';

async function fetchQuote() {
  const ETH: Token = {
    address: '',
    chainId: 8453,
    decimals: 18,
    name: 'Ethereum',
    symbol: 'ETH',
    image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
  };

  const USDC: Token = {
    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
    chainId: 8453,
    decimals: 6,
    name: 'USDC',
    symbol: 'USDC',
    image: 'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
  };

  const quote = await getSwapQuote({
    from: ETH,
    to: USDC,
    amount: '1',
    amountReference: 'from',
    maxSlippage: '3',
  });

  if ('error' in quote) {
    console.error('Quote error:', quote.error);
    return;
  }

  console.log('Quote:', {
    fromAmount: quote.from.amount,
    toAmount: quote.to.amount,
    toAmountUSD: quote.to.amountUSD,
    priceImpact: quote.priceImpact,
    slippage: quote.slippage,
  });
}
```

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

### Resolve Address to ENS/Basename using getName

Source: https://context7.com/coinbase/onchainkit/llms.txt

Fetches the ENS name for an Ethereum address on mainnet or a Basename on the Base chain. It requires the address and the chain object as input. The function returns the resolved name as a string or null if not found.

```typescript
import { getName } from '@coinbase/onchainkit/identity';
import { base, mainnet } from 'viem/chains';

// Get ENS name on Ethereum mainnet
async function getEthereumName() {
  const name = await getName({
    address: '0x1234567890abcdef1234567890abcdef12345678',
    chain: mainnet,
  });
  // Returns: 'vitalik.eth' or null
  console.log('ENS Name:', name);
}

// Get Basename on Base
async function getBasename() {
  const name = await getName({
    address: '0x1234567890abcdef1234567890abcdef12345678',
    chain: base,
  });
  // Returns: 'username.base.eth' or null
  console.log('Basename:', name);
}
```

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

### Display User Identity with ENS and Basename

Source: https://context7.com/coinbase/onchainkit/llms.txt

Renders user identity information, including ENS (Ethereum Name Service) and Basename (Coinbase's identity solution), avatars, and social links. This component supports different chains, specifically Ethereum Mainnet for ENS and Base for Basename. It uses components like `Identity`, `Avatar`, `Name`, `Badge`, `Address`, and `Socials`.

```tsx
import {
  Address,
  Avatar,
  Badge,
  Identity,
  Name,
  Socials,
} from '@coinbase/onchainkit/identity';
import { base, mainnet } from 'viem/chains';

function IdentityComponent() {
  const address = '0x1234...5678';

  return (
    <div>
      {/* Ethereum Mainnet - ENS */}
      <Identity address={address} chain={mainnet}>
        <Avatar />
        <Name>
          <Badge />
        </Name>
        <Address />
        <Socials />
      </Identity>

      {/* Base - Basename */}
      <Identity address={address} chain={base}>
        <Avatar />
        <Name>
          <Badge />
        </Name>
        <Address />
        <Socials />
      </Identity>
    </div>
  );
}
```

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

### Checkout Component for Payments

Source: https://context7.com/coinbase/onchainkit/llms.txt

Provides a React component for processing payments using product or charge IDs. It utilizes the Checkout, CheckoutButton, and CheckoutStatus components from the library. The onStatus prop allows for handling checkout status updates.

```tsx
import {
  Checkout,
  CheckoutButton,
  CheckoutStatus,
} from '@coinbase/onchainkit/checkout';

function CheckoutComponent() {
  const handleOnStatus = (status) => {
    console.log('Checkout status:', status);
  };

  return (
    <Checkout
      productId="your-product-id"
      onStatus={handleOnStatus}
    >
      <CheckoutButton />
      <CheckoutStatus />
    </Checkout>
  );
}
```

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

### Resolve ENS/Basename to Address using getAddress

Source: https://context7.com/coinbase/onchainkit/llms.txt

Resolves an ENS name or Basename to its corresponding Ethereum address. The function takes the name as input and returns the address as a string or null if the name is not found. No specific chain is required for resolution.

```typescript
import { getAddress } from '@coinbase/onchainkit/identity';

async function resolveNames() {
  // Resolve ENS name
  const ethAddress = await getAddress({ name: 'vitalik.eth' });
  console.log('Address:', ethAddress);
  // Returns: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'

  // Resolve Basename
  const baseAddress = await getAddress({ name: 'username.base.eth' });
  console.log('Address:', baseAddress);
  // Returns address or null if not found
}
```

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

### Update CSS Variables for Scoped Styling System

Source: https://github.com/coinbase/onchainkit/blob/main/alpha-api-changes.md

This CSS snippet shows the change in CSS variable scoping for custom styling in OnchainKit v1.0. Global CSS variables have been replaced with scoped variables prefixed with `--ock-`, applied via `data-ock-theme` attributes.

```css
/* v0.x - Global CSS variables */
:root {
  --text-primary: #000000;
  --bg-primary: #ffffff;
}

/* v1.0 - Scoped CSS variables */
[data-ock-theme='default-light'] {
  --ock-text-foreground: #000000;
  --ock-background: #ffffff;
}
```

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

### Execute Blockchain Transactions with Transaction Component

Source: https://context7.com/coinbase/onchainkit/llms.txt

The `Transaction` component facilitates the execution of contract calls or transactions with built-in lifecycle management and support for transaction sponsorship. It requires a chain ID, sponsorship status, and a callback function for status updates. It accepts contract call details, including address, ABI, function name, and arguments, to perform the transaction. Associated components like `TransactionButton`, `TransactionStatus`, and `TransactionToast` provide UI elements for user interaction and feedback.

```tsx
import {
  Transaction,
  TransactionButton,
  TransactionSponsor,
  TransactionStatus,
  TransactionStatusAction,
  TransactionStatusLabel,
  TransactionToast,
  TransactionToastIcon,
  TransactionToastLabel,
  TransactionToastAction,
} from '@coinbase/onchainkit/transaction';
import type { ContractFunctionParameters } from 'viem';

function TransactionComponent() {
  const contracts = [
    {
      address: '0x1234567890123456789012345678901234567890',
      abi: [
        {
          name: 'click',
          type: 'function',
          stateMutability: 'nonpayable',
          inputs: [],
          outputs: [],
        },
      ],
      functionName: 'click',
      args: [],
    },
  ] as ContractFunctionParameters[];

  const handleOnStatus = (status) => {
    console.log('Transaction status:', status);
  };

  return (
    <Transaction
      chainId={8453}
      isSponsored={true}
      onStatus={handleOnStatus}
      calls={contracts}
    >
      <TransactionButton text="Execute Transaction" />
      <TransactionSponsor />
      <TransactionStatus>
        <TransactionStatusLabel />
        <TransactionStatusAction />
      </TransactionStatus>
      <TransactionToast>
        <TransactionToastIcon />
        <TransactionToastLabel />
        <TransactionToastAction />
      </TransactionToast>
    </Transaction>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.