### Install and Run React Example

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Commands to install dependencies and run the ConnectorKit React example application locally. This will set up the project and start a development server.

```bash
pnpm install

cd examples/react
pnpm dev
```

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

### Install Dependencies and Add shadcn/ui Components

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Commands to install the necessary dependencies, initialize shadcn/ui, and add specific UI components to your project. These are prerequisites for using the ConnectorKit components.

```bash
npm install @solana/connector
npx shadcn@latest init
npx shadcn@latest add button dialog dropdown-menu avatar badge card
```

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

### Run the Next.js Example Application

Source: https://github.com/solana-foundation/connectorkit/blob/main/CONTRIBUTING.md

Starts the development server for the example Next.js application. This is useful for testing features in a real-world context. Navigate to the example directory first.

```bash
cd examples/next-js
pnpm dev
```

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

### Install Project Dependencies

Source: https://github.com/solana-foundation/connectorkit/blob/main/CONTRIBUTING.md

Installs all necessary project dependencies using the pnpm package manager. This command should be run after cloning the repository.

```bash
pnpm install
```

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

### Install ConnectorKit Package

Source: https://github.com/solana-foundation/connectorkit/blob/main/README.md

Installs the core ConnectorKit package using npm. This package provides the main functionality for connecting to Solana wallets.

```bash
npm install @solana/connector
```

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

### Copy Connector Components to Project

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Command to copy the ConnectorKit component files from the example project into your own project directory. This is the recommended method for integrating the components.

```bash
cp -r components/connector your-project/components/
```

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

### Using Copied ConnectButton Component

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example of importing and using the ConnectButton component after it has been copied into your project. This assumes the components are placed in a 'components/connector' directory.

```tsx
import { ConnectButton } from '@/components/connector';
```

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

### Customizing ConnectButton Styling

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example demonstrating how to customize the styling of the ConnectButton component using Tailwind CSS classes. This allows for easy theme adaptation.

```tsx
// Change button colors
<ConnectButton className="bg-purple-500 hover:bg-purple-600" />

// Adjust dropdown position
<AccountSwitcher className="ml-auto" />
```

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

### Example Instruction Decoding Output

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Demonstrates how instructions are decoded, showing the instruction type and the associated program ID.

```text
#1: Transfer (Token Program)
    TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA

#2: Create Account (System Program)
    11111111111111111111111111111111
```

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

### Example Transaction Size Analysis Output

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Presents transaction size analysis results, categorizing transactions by size and indicating optimization opportunities.

```text
✅ Transfer SOL
   234 bytes ✅ Optimal

⚠️ Token Swap
   892 bytes ⚠️ Could optimize -40%
   💡 -40% optimization available

❌ Bundle Purchase
   1,536 bytes ❌ Exceeds limit (will fail)
   💡 Use ALT to reduce to ~871 bytes
```

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

### Install @solana/connector-debugger

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Installs the @solana/connector-debugger package using npm, pnpm, or yarn.

```bash
npm install @solana/connector-debugger
# or
pnpm add @solana/connector-debugger
# or
yarn add @solana/connector-debugger
```

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

### Headless Export Example (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Demonstrates importing only the headless core utilities from '@solana/connector/headless', excluding React-specific components.

```typescript
import { ConnectorClient, getDefaultConfig } from '@solana/connector/headless';
```

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

### WalletModal Component Usage

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example of how to import and use the WalletModal component in a React application. This modal allows users to select and connect to a Solana wallet.

```tsx
import { WalletModal } from "@/components/connector"
import { useState } from "react"

const [open, setOpen] = useState(false)

<WalletModal open={open} onOpenChange={setOpen} />
```

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

### Install @solana/connector via npm, pnpm, yarn, or bun

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

This snippet shows how to install the @solana/connector package using various package managers available for Node.js environments. Ensure you have Node.js and your preferred package manager installed.

```bash
npm install @solana/connector
# or
pnpm add @solana/connector
# or
yarn add @solana/connector
# or 
bun add @solana/connector
```

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

### Setup AppProvider for ConnectorKit in React

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

This TypeScript code demonstrates how to set up the `AppProvider` component from `@solana/connector/react` in your application's root. It configures the wallet connector with application details, cluster information (including custom RPC URLs), and mobile support. This setup is essential for enabling wallet connectivity throughout your React application.

```typescript
'use client';

import { useMemo } from 'react';
import { AppProvider } from '@solana/connector/react';
import { getDefaultConfig, getDefaultMobileConfig } from '@solana/connector/headless';

export function Providers({ children }: { children: React.ReactNode }) {
    const connectorConfig = useMemo(() => {
        // Optional: Get custom RPC URL from environment variable
        const customRpcUrl = process.env.SOLANA_RPC_URL;

        // Optional: Create custom cluster configuration
        const clusters = customRpcUrl
            ? [
                  {
                      id: 'solana:mainnet' as const,
                      label: 'Mainnet (Custom RPC)',
                      name: 'mainnet-beta' as const,
                      url: customRpcUrl,
                  },
                  {
                      id: 'solana:devnet' as const,
                      label: 'Devnet',
                      name: 'devnet' as const,
                      url: 'https://api.devnet.solana.com',
                  },
              ]
            : undefined;

        return getDefaultConfig({
            appName: 'My App',
            appUrl: 'https://myapp.com',
            autoConnect: true,
            enableMobile: true,
            clusters,
        });
    }, []);

    const mobile = useMemo(
        () =>
            getDefaultMobileConfig({
                appName: 'My App',
                appUrl: 'https://myapp.com',
            }),
        [],
    );

    return (
        <AppProvider connectorConfig={connectorConfig} mobile={mobile}>
            {children}
        </AppProvider>
    );
}
```

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

### AccountSwitcher Component Usage

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example of how to import and use the AccountSwitcher component in a React application. This component allows users to switch between multiple connected wallet accounts.

```tsx
import { AccountSwitcher } from '@/components/connector';

export default function Header() {
    return <AccountSwitcher />;
}
```

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

### Example Program Logs Output

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Illustrates the format of program logs displayed in the debugger, including compute units, program details, and success status.

```text
✅ Instruction #1 (Token Program)              2,452 CU
   > Program invoked: Token Program
   > Program logged: "Transfer 1000000"
   > Program returned success
```

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

### Main Package Export Example (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Illustrates importing all exports from the main '@solana/connector' package, which includes React components and headless utilities.

```typescript
import { ConnectorProvider, useConnector, useAccount } from '@solana/connector';
```

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

### ConnectorKit Development Commands

Source: https://github.com/solana-foundation/connectorkit/blob/main/README.md

Common commands for developing with ConnectorKit, including installing dependencies, building packages, running in development mode, and performing type checking and linting.

```bash
# Install dependencies
pnpm install

# Build all packages
pnpm build

# Development mode
pnpm dev

# Type checking
pnpm type-check

# Linting
pnpm lint
```

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

### ConnectButton Component Usage

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example of how to import and use the ConnectButton component in a React application. This button handles wallet connections and displays connection status.

```tsx
import { ConnectButton } from '@/components/connector';

export default function Header() {
    return <ConnectButton />;
}
```

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

### Compute Unit Tracking Example

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Illustrates the format for displaying compute unit consumption per instruction within a transaction. This helps in identifying and optimizing costly instructions.

```plaintext
Total: 2,602 CU

Instruction #1: 2,452 CU
Instruction #2: 150 CU

```

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

### Automatic Pre-Flight Simulation for Transaction Signing

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This TypeScript example shows how to integrate Connectorkit's automatic pre-flight simulation without modifying existing transaction signing code. The debugger captures, simulates, and displays results for transactions before they are sent to the wallet, allowing for early optimization suggestions.

```tsx
// Your code stays exactly the same
const { signer } = useTransactionSigner();
await signer.signAndSendTransaction(tx);

// Debugger automatically:
// 1. Captures transaction before wallet popup
// 2. Simulates it instantly (500ms)
// 3. Shows results in Live tab
// 4. Suggests optimizations
// 5. Tracks through completion
```

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

### Live Tab Monitoring Example

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Demonstrates how to integrate Live tab monitoring into a dApp without requiring code changes. The Connector automatically detects transaction signing and initiates monitoring.

```tsx
// Just use the connector normally
const { signer } = useTransactionSigner();

// This automatically triggers Live tab monitoring
await signer.signAndSendTransaction(transaction);

```

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

### Install Connector Debugger Package

Source: https://github.com/solana-foundation/connectorkit/blob/main/README.md

Installs the ConnectorKit debugger package using npm. This package is intended for development use and provides a debug panel for transaction analysis.

```bash
npm install @solana/connector-debugger
```

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

### React Export Example (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Shows importing only the React-specific hooks and components from '@solana/connector/react'.

```typescript
import { useConnector, useAccount } from '@solana/connector/react';
```

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

### Catching Transaction Errors with Simulation

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This example demonstrates how the Connectorkit's pre-flight simulation helps catch errors before a transaction is signed. It shows a 'SIMULATION FAILED' message with details about insufficient funds, preventing users from losing transaction fees.

```text
❌ SIMULATION FAILED

Would fail: insufficient funds

Current balance: 0.05 SOL
Required: 0.1 SOL

→ Add SOL before signing
→ Saves transaction fee
```

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

### ClusterSelector Component Usage

Source: https://github.com/solana-foundation/connectorkit/blob/main/examples/next-js/README.md

Example of how to import and use the ClusterSelector component in a React application. This component allows users to switch between different Solana networks (e.g., Mainnet, Devnet).

```tsx
import { ClusterSelector } from '@/components/connector';

export default function Header() {
    return <ClusterSelector />;
}
```

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

### Solana ConnectorKit Mobile Wallet Adapter Setup (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Provides the code snippet for configuring the mobile wallet adapter for the Solana ConnectorKit using `getDefaultMobileConfig`. This configuration is then passed along with the main connector config to the `AppProvider` component to enable mobile wallet connections.

```typescript
import { getDefaultMobileConfig } from '@solana/connector/headless';

const mobile = getDefaultMobileConfig({
    appName: 'My App',
    appUrl: 'https://myapp.com',
});

<AppProvider connectorConfig={config} mobile={mobile}>
    {children}
</AppProvider>
```

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

### Headless Client Initialization and Usage (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Demonstrates how to initialize and use the ConnectorClient for non-React frameworks. It covers getting the current state, connecting to a wallet, subscribing to state changes, disconnecting, and cleaning up the client. This client is framework-agnostic.

```typescript
import { ConnectorClient, getDefaultConfig } from '@solana/connector/headless';

// Create client
const client = new ConnectorClient(getDefaultConfig({ appName: 'My App' }));

// Get state
const state = client.getSnapshot();
console.log('Wallets:', state.wallets);

// Connect
await client.select('Phantom');

// Subscribe to changes
const unsubscribe = client.subscribe(state => {
    console.log('State updated:', state);
});

// Disconnect
await client.disconnect();

// Cleanup
client.destroy();
```

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

### Nested Program Call Example

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Shows how nested program calls are represented with proper indentation, reflecting the call hierarchy. This aids in understanding complex transaction flows involving multiple programs.

```plaintext
> Program invoked: Token Program
  > Program invoked: Associated Token Program
  > Program returned success
> Program returned success

```

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

### Development Commands (Bash)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

A collection of bash commands for managing the ConnectorKit project, including installing dependencies, building, running in development mode, type checking, linting, testing, and checking bundle size.

```bash
# Install dependencies
pnpm install

# Build package
pnpm build

# Development mode with watch
pnpm dev

# Type checking
pnpm type-check

# Linting
pnpm lint

# Run tests
pnpm test

# Test in watch mode
pnpm test:watch

# Coverage report
pnpm test:coverage

# Check bundle size
pnpm size
```

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

### ConnectorKit Type Imports (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

An example of importing various types from the '@solana/connector' package, covering configuration, state, wallet standards, clusters, and hook return types.

```typescript
import type {
    // Configuration
    ConnectorConfig,
    DefaultConfigOptions,
    UnifiedConfig,

    // State & Info
    ConnectorState,
    ConnectorSnapshot,
    WalletInfo,
    AccountInfo,

    // Wallet Standard
    Wallet,
    WalletAccount,

    // Clusters
    SolanaCluster,
    SolanaClusterId,

    // Hook Returns
    UseClusterReturn,
    UseAccountReturn,
    UseWalletInfoReturn,
    UseTransactionSignerReturn,
    UseKitTransactionSignerReturn,
} from '@solana/connector';
```

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

### Example Enhanced Error Message

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

Shows a human-readable error message for a failed instruction, replacing raw error objects with clear explanations.

```text
❌ Instruction #0: insufficient funds for instruction
```

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

### Tracking Simulation Accuracy

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This example illustrates how the Connectorkit tracks the accuracy of its simulations by comparing simulated results with actual transaction outcomes. It provides metrics for compute units and overall status, building confidence in the simulation's reliability.

```text
Simulated vs Actual Results:
Compute: 2,802 CU vs 2,801 CU (99.96% match)
Status: Both succeeded ✅

→ Builds confidence in simulation accuracy
```

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

### Initialize and Manage Headless Connector Client in TypeScript

Source: https://context7.com/solana-foundation/connectorkit/llms.txt

Demonstrates how to initialize a headless ConnectorClient for non-React frameworks like Vue or Svelte. It covers getting the current state, subscribing to state changes, connecting/disconnecting wallets, switching networks, listening to events, performing health checks, and cleaning up resources.

```typescript
import { ConnectorClient, getDefaultConfig } from '@solana/connector/headless';

// Create headless client
const client = new ConnectorClient(
    getDefaultConfig({
        appName: 'My Vue App',
        autoConnect: true,
        network: 'mainnet-beta',
    })
);

// Get current state
const state = client.getSnapshot();
console.log('Available wallets:', state.wallets);
console.log('Connected:', state.connected);

// Subscribe to state changes
const unsubscribe = client.subscribe(newState => {
    console.log('State updated:', newState);

    if (newState.connected) {
        console.log('Connected to:', newState.selectedWallet?.name);
        console.log('Account:', newState.selectedAccount);
    }
});

// Connect to wallet
async function connectWallet(walletName: string) {
    try {
        await client.select(walletName);
        console.log('Connected successfully');
    } catch (error) {
        console.error('Connection failed:', error);
    }
}

// Switch network
async function switchNetwork(clusterId: string) {
    try {
        await client.setCluster(clusterId as any);
        const cluster = client.getCluster();
        console.log('Switched to:', cluster?.label);
        console.log('RPC URL:', client.getRpcUrl());
    } catch (error) {
        console.error('Network switch failed:', error);
    }
}

// Disconnect wallet
async function disconnectWallet() {
    try {
        await client.disconnect();
        console.log('Disconnected');
    } catch (error) {
        console.error('Disconnect failed:', error);
    }
}

// Listen to events
const unsubscribeEvents = client.on(event => {
    switch (event.type) {
        case 'wallet:connected':
            console.log('Wallet connected event:', event);
            break;
        case 'wallet:disconnected':
            console.log('Wallet disconnected event:', event);
            break;
        case 'account:changed':
            console.log('Account changed event:', event);
            break;
        case 'cluster:changed':
            console.log('Network changed event:', event);
            break;
    }
});

// Health check
const health = client.getHealth();
console.log('Storage health:', health.storage);
console.log('Overall status:', health.status);

// Cleanup when done
function cleanup() {
    unsubscribe();
    unsubscribeEvents();
    client.destroy();
}

```

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

### Address Lookup Table (ALT) Usage Detection Example

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This snippet demonstrates how the debugger displays information when transactions are already using Address Lookup Tables. It shows the number of addresses from the ALT, bytes saved, compression ratio, and the lookup table identifier, helping to verify optimization effectiveness.

```text
🔧 Using Address Lookup Table
   - 12 addresses from ALT
   - ~372 bytes saved
   - 1.87:1 compression achieved
   - Lookup table: E4b5B9C...19DXyL
```

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

### Wallet UI Components with Render Props in TypeScript

Source: https://context7.com/solana-foundation/connectorkit/llms.txt

This TypeScript code demonstrates using various UI components from the '@solana/connector/react' library to build a functional wallet dropdown. It utilizes render props to customize the display of account details, SOL balance, cluster selection, token lists, transaction history, and the disconnect button. Ensure '@solana/connector/react' is installed.

```typescript
'use client';

import {
    BalanceElement,
    ClusterElement,
    TokenListElement,
    TransactionHistoryElement,
    DisconnectElement,
    AccountElement,
} from '@solana/connector/react';

export function WalletDropdown() {
    return (
        <div className="wallet-dropdown">
            <AccountElement
                render={({ address, formatted, copy, copied }) => (
                    <button onClick={copy} className="account-button">
                        {copied ? 'Copied!' : formatted}
                    </button>
                )} />

            <BalanceElement
                render={({ solBalance, isLoading, refetch }) => (
                    <div className="balance-section">
                        <div className="balance">
                            {isLoading ? '...' : `${solBalance?.toFixed(4)} SOL`}
                        </div>
                        <button onClick={refetch}>↻</button>
                    </div>
                )} />

            <ClusterElement
                render={({ cluster, clusters, setCluster }) => (
                    <select
                        value={cluster?.id || ''}
                        onChange={e => setCluster(e.target.value as any)}>
                        {clusters.map(c => (
                            <option key={c.id} value={c.id}>
                                {c.label}
                            </option>
                        ))}
                    </select>
                )} />

            <TokenListElement
                limit={5}
                render={({ tokens, isLoading }) => (
                    <div className="tokens">
                        {isLoading ? (
                            <div>Loading tokens...</div>
                        ) : (
                            tokens.map(token => (
                                <div key={token.mint} className="token">
                                    <span>{token.symbol}</span>
                                    <span>{token.formatted}</span>
                                </div>
                            ))
                        )}
                    </div>
                )} />

            <TransactionHistoryElement
                limit={5}
                render={({ transactions, isLoading }) => (
                    <div className="transactions">
                        {isLoading ? (
                            <div>Loading...</div>
                        ) : (
                            transactions.map(tx => (
                                <a
                                    key={tx.signature}
                                    href={tx.explorerUrl}
                                    target="_blank"
                                    rel="noopener">
                                    {tx.type} - {tx.formattedTime}
                                </a>
                            ))
                        )}
                    </div>
                )} />

            <DisconnectElement
                render={({ disconnect, disconnecting }) => (
                    <button
                        onClick={disconnect}
                        disabled={disconnecting}
                        className="disconnect-button">
                        {disconnecting ? 'Disconnecting...' : 'Disconnect'}
                    </button>
                )} />
        </div>
    );
}

```

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

### Session Statistics Integration with Live and Optimization Tabs

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This snippet shows how the Live tab integrates with the Optimization tab to display session-wide simulation statistics. It includes success rates, average compute units, and savings achieved with ALT optimizations.

```text
🔍 Simulation Statistics
   Success Rate: 94.7% (18/19)
   Avg Compute Units: 2.3K CU

   With ALT Avg: 2.1K CU (19 simulations)
   Compute Savings: -200 CU (8.7% reduction)
```

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

### Clone ConnectorKit Repository

Source: https://github.com/solana-foundation/connectorkit/blob/main/CONTRIBUTING.md

Instructions to clone the ConnectorKit repository and navigate into the project directory. This is the first step after forking the repository.

```bash
git clone https://github.com/your-username/connectorkit.git
cd connectorkit
```

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

### Solana ConnectorKit Basic Configuration (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Demonstrates the basic configuration for the Solana ConnectorKit using `getDefaultConfig`. This includes setting the application name, URL, auto-connect behavior, initial network, and mobile adapter enablement. It's essential for initializing the connector.

```typescript
import { getDefaultConfig } from '@solana/connector';

const config = getDefaultConfig({
    appName: 'My App', // Required
    appUrl: 'https://myapp.com', // Optional: for mobile wallet adapter
    autoConnect: true, // Auto-reconnect (default: true)
    network: 'mainnet-beta', // Initial network (default: 'mainnet-beta')
    enableMobile: true, // Mobile Wallet Adapter (default: true)
    debug: false, // Debug logging
});
```

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

### Initialize AppProvider with Default Configuration

Source: https://github.com/solana-foundation/connectorkit/blob/main/README.md

Sets up the ConnectorKit's AppProvider with default configuration for a React application. It requires a default config object, typically created using `getDefaultConfig`, which takes an `appName` as a parameter.

```typescript
import { AppProvider } from '@solana/connector/react';
import { getDefaultConfig } from '@solana/connector/headless';

function App() {
  const config = getDefaultConfig({ appName: 'My App' });
  
  return (
    <AppProvider connectorConfig={config}>
      <YourApp />
    </AppProvider>
  );
}
```

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

### Solana ConnectorKit Network Selection (TypeScript)

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

Shows how to configure the Solana ConnectorKit to use a specific network, such as 'devnet'. This is a simplified version of the `getDefaultConfig` focusing solely on the network parameter. Supported networks include 'mainnet-beta', 'devnet', 'testnet', and 'localnet'.

```typescript
const config = getDefaultConfig({
    appName: 'My App',
    network: 'devnet', // 'mainnet-beta' | 'devnet' | 'testnet' | 'localnet'
});
```

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

### Use ConnectorKit hooks for wallet connection in React

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/connector/README.md

This React TypeScript code snippet illustrates how to use the `useConnector` and `useAccount` hooks from `@solana/connector` to manage wallet connections within a component. It provides a basic connect/disconnect button that displays wallet status, available wallets, and the user's account address. This is a fundamental example for integrating wallet functionality into a React application.

```typescript
'use client';

import { useConnector, useAccount } from '@solana/connector';

export function ConnectButton() {
    const { wallets, select, disconnect, connected, connecting, selectedWallet, selectedAccount } = useConnector();
    const { address, formatted, copy } = useAccount();

    if (connecting) {
        return <button disabled>Connecting...</button>;
    }

    if (!connected) {
        return (
            <div>
                {wallets.map(w => (
                    <button key={w.wallet.name} onClick={() => select(w.wallet.name)}>
                        Connect {w.wallet.name}
                    </button>
                ))}
            </div>
        );
    }

    return (
        <div>
            <button onClick={copy}>{formatted}</button>
            <button onClick={disconnect}>Disconnect</button>
        </div>
    );
}
```

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

### Live Transaction Monitoring Real-Time Flow Visualization

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This visual representation outlines the real-time flow of a transaction through the Connectorkit's Live tab. It details the stages from simulation to confirmation, including status updates, size, compute units, fee estimates, and optimization suggestions.

```text
🔴 Live Tab (activates automatically):

┌─────────────────────────────────┐
│ 🔍 SIMULATING TRANSACTION       │
│                                 │
│ Status: Analyzing...            │
│ Size: 892 bytes ⚠️ (72%)        │
│ ⚡ Running simulation...        │
└─────────────────────────────────┘

↓ After ~500ms

┌─────────────────────────────────┐
│ ✅ SIMULATION PASSED             │
│                                 │
│ Size: 892 bytes ⚠️              │
│ Compute: 2,802 CU ✅            │
│ Fee: 0.000005 SOL ✅            │
│                                 │
│ 💡 Could optimize with ALT:     │
│    → 534 bytes (-40%)           │
│    → 2,452 CU (-12%)            │
│                                 │
│ Status: ⏳ Waiting for sig...   │
└─────────────────────────────────┘

↓ User signs in wallet

┌─────────────────────────────────┐
│ 📤 SENDING TRANSACTION           │
│                                 │
│ Signature: 5Gv8yU...x3kF        │
│ Status: Confirming...           │
└─────────────────────────────────┘

↓ After confirmation

┌─────────────────────────────────┐
│ ✅ TRANSACTION CONFIRMED         │
│                                 │
│ Simulated: 2,802 CU             │
│ Actual: 2,801 CU                │
│ Accuracy: 99.96% ✅             │
│                                 │
│ [View Details] [Clear]          │
└─────────────────────────────────┘

(Auto-clears after 5 seconds)
```

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

### Transaction Lifecycle Progress Visualization

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This snippet illustrates the lifecycle progress visualization for a transaction within the Connectorkit. It uses checkmarks and animated dots to show the status of each stage: Prepare, Simulate, Sign, Send, and Confirm.

```text
Prepare → Simulate → Sign → Send → Confirm
   ✓        ✓        ✓      ⏳      ⏳
```

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

### Validating ALT Optimizations Before Signing

Source: https://github.com/solana-foundation/connectorkit/blob/main/packages/debugger/README.md

This snippet shows how the Connectorkit validates Address Lookup Table (ALT) optimizations before a transaction is signed. It compares the transaction size with and without ALT, demonstrating that the optimized version will succeed while the original would fail.

```text
Without ALT: 1,536 bytes (would fail)
With ALT: 871 bytes (will succeed)

✅ Optimization validated before signing
```

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

### Run Pre-submission Checks

Source: https://github.com/solana-foundation/connectorkit/blob/main/CONTRIBUTING.md

Executes a series of checks including linting, type checking, building all packages, and running tests. These should be run before submitting a pull request to ensure code quality and correctness.

```bash
pnpm lint
pnpm type-check
pnpm build
pnpm test
```

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

### Manage Wallet Connection State with React Hooks

Source: https://context7.com/solana-foundation/connectorkit/llms.txt

Demonstrates how to use `@solana/connector` hooks in a React component to manage wallet connection state. It displays connection status, wallet information, and provides buttons for connecting, copying account addresses, and disconnecting.

```typescript
'use client';

import { useConnector, useAccount } from '@solana/connector';
import { useState } from 'react';

export function WalletConnection() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const {
        wallets,
        selectedWallet,
        selectedAccount,
        connected,
        connecting,
        select,
        disconnect
    } = useConnector();
    const { formatted, copy, copied } = useAccount();

    if (connecting) {
        return <button disabled>Connecting...</button>;
    }

    if (connected && selectedAccount && selectedWallet) {
        return (
            <div className="wallet-connected">
                <button onClick={copy}>
                    {copied ? 'Copied!' : formatted}
                </button>
                <span>Connected to {selectedWallet.name}</span>
                <button onClick={disconnect}>Disconnect</button>
            </div>
        );
    }

    return (
        <>
            <button onClick={() => setIsModalOpen(true)}>
                Connect Wallet
            </button>

            {isModalOpen && (
                <div className="wallet-modal">
                    <h2>Select Wallet</h2>
                    {wallets.map(w => (
                        <button
                            key={w.wallet.name}
                            onClick={async () => {
                                await select(w.wallet.name);
                                setIsModalOpen(false);
                            }}
                        >
                            {w.wallet.icon && <img src={w.wallet.icon} alt={w.wallet.name} />}
                            <span>{w.wallet.name}</span>
                        </button>
                    ))}
                    <button onClick={() => setIsModalOpen(false)}>Cancel</button>
                </div>
            )}
        </>
    );
}

```

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

### Configure React AppProvider with ConnectorKit

Source: https://context7.com/solana-foundation/connectorkit/llms.txt

Sets up the ConnectorKit `AppProvider` in a React application. It configures default settings, custom RPC URLs, and mobile support using `getDefaultConfig` and `getDefaultMobileConfig`. This provider enables the wallet connection functionality across the application.

```typescript
'use client';

import { useMemo } from 'react';
import { AppProvider } from '@solana/connector/react';
import { getDefaultConfig, getDefaultMobileConfig } from '@solana/connector/headless';

export function Providers({ children }: { children: React.ReactNode }) {
    const connectorConfig = useMemo(() => {
        const customRpcUrl = process.env.SOLANA_RPC_URL;

        const clusters = customRpcUrl
            ? [
                  {
                      id: 'solana:mainnet' as const,
                      label: 'Mainnet (Custom RPC)',
                      name: 'mainnet-beta' as const,
                      url: customRpcUrl,
                  },
                  {
                      id: 'solana:devnet' as const,
                      label: 'Devnet',
                      name: 'devnet' as const,
                      url: 'https://api.devnet.solana.com',
                  },
              ]
            : undefined;

        return getDefaultConfig({
            appName: 'My Solana App',
            appUrl: 'https://myapp.com',
            autoConnect: true,
            enableMobile: true,
            network: 'mainnet-beta',
            clusters,
            debug: process.env.NODE_ENV === 'development',
        });
    }, []);

    const mobile = useMemo(
        () =>
            getDefaultMobileConfig({
                appName: 'My Solana App',
                appUrl: 'https://myapp.com',
            }),
        [],
    );

    return (
        <AppProvider connectorConfig={connectorConfig} mobile={mobile}>
            {children}
        </AppProvider>
    );
}

```