> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inco.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet Integration

> Set up Solana wallet adapters in your Next.js app

# Wallet Integration

This guide explains how to integrate Solana wallets into your Next.js application using wallet adapters.

## Overview

The template uses the official Solana wallet adapter libraries:

* `@solana/wallet-adapter-react` - React hooks and context
* `@solana/wallet-adapter-react-ui` - Pre-built UI components
* `@solana/wallet-adapter-wallets` - Wallet implementations

## Wallet Provider Setup

Create `wallet/provider.tsx`:

```tsx theme={null}
"use client";

import {
  WalletProvider,
  ConnectionProvider,
} from "@solana/wallet-adapter-react";
import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
  LedgerWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import { useMemo } from "react";
import { clusterApiUrl, Commitment } from "@solana/web3.js";
import dynamic from "next/dynamic";

// Import wallet adapter styles
import "@solana/wallet-adapter-react-ui/styles.css";

// Dynamic import to avoid SSR issues
const WalletModalProvider = dynamic(
  () =>
    import("@solana/wallet-adapter-react-ui").then(
      ({ WalletModalProvider }) => WalletModalProvider
    ),
  { ssr: false }
);

export const Wallet = ({ children }: { children: React.ReactNode }) => {
  // Use environment variable or default to devnet
  const endpoint =
    process.env.NEXT_PUBLIC_SOLANA_RPC_URL || clusterApiUrl("devnet");

  // Connection configuration
  const config: {
    commitment: Commitment;
    wsEndpoint: string;
    confirmTransactionInitialTimeout: number;
  } = {
    commitment: "confirmed",
    wsEndpoint: endpoint.replace("https", "wss"),
    confirmTransactionInitialTimeout: 60000,
  };

  // Initialize wallet adapters
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
      new LedgerWalletAdapter(),
    ],
    []
  );

  return (
    <ConnectionProvider endpoint={endpoint} config={config}>
      <WalletProvider wallets={wallets} autoConnect={true}>
        <WalletModalProvider>
          {children}
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};

export default Wallet;
```

## Key Concepts

### ConnectionProvider

Provides the Solana connection to all child components:

```tsx theme={null}
<ConnectionProvider endpoint={endpoint} config={config}>
  {/* Your app */}
</ConnectionProvider>
```

### WalletProvider

Manages wallet state and provides hooks:

```tsx theme={null}
<WalletProvider wallets={wallets} autoConnect={true}>
  {/* Your app */}
</WalletProvider>
```

Options:

* `wallets` - Array of wallet adapters to support
* `autoConnect` - Automatically reconnect on page load

### WalletModalProvider

Provides the wallet selection modal:

```tsx theme={null}
<WalletModalProvider>
  {/* Your app */}
</WalletModalProvider>
```

## Using Wallet Hooks

### useWallet

Access wallet state and methods:

```tsx theme={null}
import { useWallet } from "@solana/wallet-adapter-react";

function MyComponent() {
  const { 
    publicKey,      // Connected wallet's public key
    connected,      // Boolean: is wallet connected?
    disconnect,     // Function: disconnect wallet
    signMessage,    // Function: sign arbitrary messages
    sendTransaction // Function: send transactions
  } = useWallet();
  
  if (!connected) {
    return <p>Please connect your wallet</p>;
  }
  
  return <p>Connected: {publicKey?.toBase58()}</p>;
}
```

### useConnection

Access the Solana connection:

```tsx theme={null}
import { useConnection } from "@solana/wallet-adapter-react";

function MyComponent() {
  const { connection } = useConnection();
  
  // Use connection for RPC calls
  const balance = await connection.getBalance(publicKey);
}
```

### useAnchorWallet

Get a wallet compatible with Anchor:

```tsx theme={null}
import { useAnchorWallet } from "@solana/wallet-adapter-react";

function MyComponent() {
  const wallet = useAnchorWallet();
  
  if (!wallet) return null;
  
  // Use with Anchor provider
  const provider = new AnchorProvider(connection, wallet, {
    commitment: "confirmed",
  });
}
```

### useWalletModal

Control the wallet selection modal:

```tsx theme={null}
import { useWalletModal } from "@solana/wallet-adapter-react-ui";

function ConnectButton() {
  const { setVisible } = useWalletModal();
  
  return (
    <button onClick={() => setVisible(true)}>
      Connect Wallet
    </button>
  );
}
```

## Header Component with Wallet

Here's the complete header component with wallet connection:

```tsx theme={null}
import { useWalletModal } from "@solana/wallet-adapter-react-ui";
import { useWallet } from "@solana/wallet-adapter-react";

const Header = () => {
  const { publicKey, disconnect } = useWallet();
  const { setVisible } = useWalletModal();

  // Format address for display
  const formatAddress = (address: string) => {
    return `${address.slice(0, 4)}...${address.slice(-4)}`;
  };

  return (
    <div className="flex items-center justify-between">
      <img src="/inco.svg" alt="Inco" width={139} height={40} />
      
      <div className="flex items-center gap-4">
        {publicKey ? (
          <>
            <span className="text-sm font-medium text-gray-700">
              {formatAddress(publicKey.toBase58())}
            </span>
            <button
              onClick={disconnect}
              className="rounded-full bg-gray-200 px-4 py-2 hover:bg-gray-300"
            >
              Disconnect
            </button>
          </>
        ) : (
          <button
            onClick={() => setVisible(true)}
            className="rounded-full bg-blue-500 text-white px-6 py-3 hover:bg-blue-600"
          >
            Connect Wallet
          </button>
        )}
      </div>
    </div>
  );
};

export default Header;
```

## Supported Wallets

The template supports these wallets out of the box:

| Wallet   | Adapter                 |
| -------- | ----------------------- |
| Phantom  | `PhantomWalletAdapter`  |
| Solflare | `SolflareWalletAdapter` |
| Ledger   | `LedgerWalletAdapter`   |

To add more wallets:

```tsx theme={null}
import {
  BackpackWalletAdapter,
  GlowWalletAdapter,
} from "@solana/wallet-adapter-wallets";

const wallets = useMemo(
  () => [
    new PhantomWalletAdapter(),
    new SolflareWalletAdapter(),
    new BackpackWalletAdapter(),
    new GlowWalletAdapter(),
  ],
  []
);
```

## Handling SSR

Next.js renders on the server, but wallets only work in the browser. Use dynamic imports:

```tsx theme={null}
import dynamic from "next/dynamic";

const WalletModalProvider = dynamic(
  () =>
    import("@solana/wallet-adapter-react-ui").then(
      ({ WalletModalProvider }) => WalletModalProvider
    ),
  { ssr: false }
);
```

## Next Steps

Learn how to build the [Components](/svm/tutorials/nextjs-template/components) for encryption and balance display.