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:

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