Skip to main content

Scaffold

npx create-inco-app@latest my-app --wallet solana-wallet-adapter --framework anchor --chain svm --yes

Provider Setup

The Solana Wallet Adapter uses @solana/wallet-adapter-react with Phantom and Solflare wallets, connected to Solana devnet.
components/Providers.tsx
"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:
hooks/useConfPool.ts
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

PackagePurpose
@solana/wallet-adapter-reactWallet connection hooks
@solana/wallet-adapter-react-uiWallet modal UI
@solana/wallet-adapter-walletsPhantom, Solflare adapters
@solana/web3.jsSolana RPC and transactions
@coral-xyz/anchorAnchor program interaction
@inco/solana-sdkClient-side encryption