> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Ge0frey/nullgraph/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend SDK Overview

> Learn how to integrate the NullGraph React SDK with Anchor and Solana wallet adapters

## Introduction

The NullGraph Frontend SDK is a React-based library built on top of Anchor Framework that provides hooks and utilities for interacting with the NullGraph Solana program. It handles wallet connections, transaction signing, and account fetching through a clean, type-safe API.

## Architecture

The SDK is structured around:

* **React Hooks**: Custom hooks for reading and writing on-chain data
* **Anchor Integration**: Uses `@coral-xyz/anchor` for program interaction
* **Wallet Adapter**: Integrates with `@solana/wallet-adapter-react`
* **PDA Derivation**: Utilities for deriving Program Derived Addresses
* **TypeScript Types**: Fully typed interfaces for all accounts and transactions

## Installation

Install the required dependencies:

```bash theme={null}
npm install @coral-xyz/anchor @solana/wallet-adapter-react @solana/wallet-adapter-wallets @solana/web3.js @solana/spl-token
```

## Provider Setup

Wrap your application with the required providers:

```tsx App.tsx theme={null}
import { useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';
import { ProgramProvider } from './context/ProgramContext';
import { RPC_URL } from './lib/constants';

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

function App() {
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
    ],
    []
  );

  return (
    <ConnectionProvider endpoint={RPC_URL}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <ProgramProvider>
            {/* Your app components */}
          </ProgramProvider>
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default App;
```

## Program Context

The `ProgramProvider` creates an Anchor `Program` instance that all hooks use internally:

```tsx context/ProgramContext.tsx theme={null}
import { createContext, useContext, useMemo } from 'react';
import { AnchorProvider } from '@coral-xyz/anchor';
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { getProgram, type NullGraphProgram } from '../lib/program';
import type { AnchorWallet } from '@solana/wallet-adapter-react';

interface ProgramContextState {
  program: NullGraphProgram | null;
  provider: AnchorProvider | null;
}

const ProgramContext = createContext<ProgramContextState>({
  program: null,
  provider: null,
});

export function ProgramProvider({ children }: { children: React.ReactNode }) {
  const { connection } = useConnection();
  const wallet = useWallet();

  const provider = useMemo(() => {
    if (!wallet.publicKey || !wallet.signTransaction || !wallet.signAllTransactions) return null;
    return new AnchorProvider(
      connection,
      wallet as AnchorWallet,
      { commitment: 'confirmed' }
    );
  }, [connection, wallet]);

  const program = useMemo(() => {
    if (!provider) return null;
    return getProgram(provider);
  }, [provider]);

  return (
    <ProgramContext.Provider value={{ program, provider }}>
      {children}
    </ProgramContext.Provider>
  );
}

export function useProgram() {
  return useContext(ProgramContext);
}
```

## Constants

The SDK uses environment variables for configuration:

```typescript lib/constants.ts theme={null}
import { PublicKey } from '@solana/web3.js';

export const PROGRAM_ID = new PublicKey(
  import.meta.env.VITE_PROGRAM_ID ||
    '2u3DXQq9A6UgMryeVSWCNdYLy3Fjh391R5hcfWYkCgZK'
);

export const BIO_MINT = new PublicKey(
  'GkjGV1ZF5BsMs6oAvk8jZiuXM8KwuygFCHLBpqR5Q14j'
);

export const RPC_URL =
  import.meta.env.VITE_RPC_URL || 'https://api.devnet.solana.com';
```

## Connection to Devnet

The SDK is configured to connect to Solana devnet by default through the `RPC_URL` constant. The connection is established via the `ConnectionProvider`:

<ParamField path="endpoint" type="string" required>
  The RPC endpoint URL. Defaults to `https://api.devnet.solana.com`
</ParamField>

<ParamField path="commitment" type="Commitment">
  Transaction confirmation level. Defaults to `confirmed`
</ParamField>

## Environment Variables

Create a `.env` file in your project root:

```bash .env theme={null}
VITE_PROGRAM_ID=2u3DXQq9A6UgMryeVSWCNdYLy3Fjh391R5hcfWYkCgZK
VITE_RPC_URL=https://api.devnet.solana.com
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Hooks" icon="hook" href="/sdk/hooks">
    Learn about all available React hooks for interacting with NullGraph
  </Card>

  <Card title="PDA Derivation" icon="key" href="/sdk/pda-derivation">
    Understand how to derive Program Derived Addresses
  </Card>

  <Card title="Types" icon="code" href="/sdk/types">
    Explore TypeScript interfaces for accounts and transactions
  </Card>
</CardGroup>