> ## 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.

# Solana Wallet Adapter

> Set up native Solana wallet connection with Phantom and Solflare

## Scaffold

<CodeGroup>
  ```bash npm theme={null}
  npx create-inco-app@latest my-app --wallet solana-wallet-adapter --framework anchor --chain svm --yes
  ```

  ```bash pnpm theme={null}
  pnpm create inco-app@latest my-app --wallet solana-wallet-adapter --framework anchor --chain svm --yes
  ```

  ```bash yarn theme={null}
  yarn create inco-app my-app --wallet solana-wallet-adapter --framework anchor --chain svm --yes
  ```

  ```bash bun theme={null}
  bunx create-inco-app@latest my-app --wallet solana-wallet-adapter --framework anchor --chain svm --yes
  ```
</CodeGroup>

## Provider Setup

The Solana Wallet Adapter uses `@solana/wallet-adapter-react` with Phantom and Solflare wallets, connected to Solana devnet.

```tsx components/Providers.tsx theme={null}
"use client";

import { ReactNode, useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
import { clusterApiUrl } from "@solana/web3.js";
import { ThemeProvider } from "next-themes";

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

const Providers = ({ children }: { children: ReactNode }) => {
  const endpoint = useMemo(() => clusterApiUrl("devnet"), []);
  const wallets = useMemo(
    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
    []
  );

  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
          <WalletModalProvider>{children}</WalletModalProvider>
        </WalletProvider>
      </ConnectionProvider>
    </ThemeProvider>
  );
};

export { Providers };
```

## Inco SDK Integration

The hook uses `useWallet` from the wallet adapter for signing transactions, and `@inco/solana-sdk` for client-side encryption:

```tsx hooks/useConfPool.ts theme={null}
import { useWallet } from "@solana/wallet-adapter-react";
import { PublicKey, SystemProgram, Connection } from "@solana/web3.js";
import * as anchor from "@coral-xyz/anchor";
import { encryptValue } from "@inco/solana-sdk/encryption";
import { hexToBuffer } from "@inco/solana-sdk/utils";

const INCO_LIGHTNING_PROGRAM_ID = new PublicKey(
  "5sjEbPiqgZrYwR31ahR6Uk9wf5awoX61YGg7jExQSwaj"
);

export function useConfPool() {
  const { publicKey, sendTransaction } = useWallet();

  const deposit = async (amount: string) => {
    // 1. Encrypt the deposit amount client-side
    const amountBn = BigInt(Math.floor(parseFloat(amount) * 1e9));
    const encryptedHex = await encryptValue(amountBn);

    // 2. Build the Anchor transaction
    const tx = await program.methods
      .deposit(hexToBuffer(encryptedHex), 0)
      .accounts({
        pool: poolPda,
        participant: participantPda,
        depositor: publicKey,
        systemProgram: SystemProgram.programId,
        incoLightningProgram: INCO_LIGHTNING_PROGRAM_ID,
      })
      .transaction();

    // 3. Sign and send via wallet adapter
    const sig = await sendTransaction(tx, connection);
    await connection.confirmTransaction(sig, "confirmed");
  };
}
```

## Dependencies

| Package                           | Purpose                     |
| --------------------------------- | --------------------------- |
| `@solana/wallet-adapter-react`    | Wallet connection hooks     |
| `@solana/wallet-adapter-react-ui` | Wallet modal UI             |
| `@solana/wallet-adapter-wallets`  | Phantom, Solflare adapters  |
| `@solana/web3.js`                 | Solana RPC and transactions |
| `@coral-xyz/anchor`               | Anchor program interaction  |
| `@inco/solana-sdk`                | Client-side encryption      |