Skip to main content

​
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: 
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:
App.tsx
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:
context/ProgramContext.tsx
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:
lib/constants.ts
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:
​
endpoint
string
required
The RPC endpoint URL. Defaults to https://api.devnet.solana.com
​
commitment
Commitment
Transaction confirmation level. Defaults to confirmed

​
Environment Variables

Create a .env file in your project root:
.env
VITE_PROGRAM_ID=2u3DXQq9A6UgMryeVSWCNdYLy3Fjh391R5hcfWYkCgZK
VITE_RPC_URL=https://api.devnet.solana.com

​
Next Steps

Hooks

Learn about all available React hooks for interacting with NullGraph

PDA Derivation

Understand how to derive Program Derived Addresses

Types

Explore TypeScript interfaces for accounts and transactions

Build docs developers (and LLMs) love

Get started for freeTalk to us