4of7. Setup The Solana Program Object Instance Context and Provider

Introduction:

In this lesson, we will create a program context with the program object instance and provider similar to how we did the wallet provider context in the previous lesson.

Remember, watching the lesson video will offer a deeper understanding of this topic.

Learning Objectives:

By the end of this lesson, you will be able to:

1. Understand how to create Solana program context and provider in your dApp frontend.

Lesson Video:

How To Setup The Solana Program Object Instance Context and Provider?

Use the IDL in Step 2of7 of the previous lesson to recreate the Solana program object instance and provider in your frontend to make it accessible for frontend components to interact with the program functions and features as structured in the IDL types file.

STEP 1: Install essential package (Anchor) with:

pnpm i @solana/web3.js @coral-xyz/anchor

STEP 2: Create it in /app/contexts/MinterProgramContextProvider.tsx by importing the packages and program context.

Let’s see what that will look like when done below:

Example Codes for Practical Application:

Your /app/contexts/MinterProgramContextProvider.tsx will look like this:

import { useAnchorWallet, useConnection } from "@solana/wallet-adapter-react";
import { AnchorProvider, Program, setProvider } from "@coral-xyz/anchor";
import { SplTokenMinter, IDL as MinterIDL } from "../idl/spl_token_minter";
import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { PublicKey } from "@solana/web3.js";

// Define the type for the context
type MinterProgramContextType = {
    minterProgram: Program<SplTokenMinter> | null;
}

// Create the context with a default null value
const MinterProgramContext = createContext<MinterProgramContextType>({
    minterProgram: null,
});

// Custom hook to use the MinterProgram context
export const useMinterProgram = () => useContext(MinterProgramContext);

// Provider component to wrap around components to access the `minterProgram` instance
export const MinterProgramProvider = ({
    children,
  }: {
    children: React.ReactNode
  }) => {
    // Use the wallet and connection from the Solana wallet adapter
    const wallet = useAnchorWallet();
    const { connection } = useConnection();

    // State variable to hold the minter program instance
    const [minterProgram, setMinterProgram] = useState<Program<SplTokenMinter> | null>(null);

    // Setup function for the minter program
    const anchorSetupMinterProgram = useCallback(async () => {
        // If there's no wallet or connection, return early
        if (!wallet || !connection) return;

        // Set up AnchorProvider using the connected wallet
        const provider = new AnchorProvider(connection, wallet, {});
        setProvider(provider);

        // Program Id from MinterIDL
        const programId = MinterIDL.metadata.address as unknown as PublicKey;

        // Create the minter program instance using the MinterIDL, program ID, and provider
        const minterProgram = new Program<SplTokenMinter>(MinterIDL, programId, provider);

        // Set the minter program instance in state
        setMinterProgram(minterProgram);
    }, [connection, wallet]);

    // Run the setup function when the wallet or connection changes
    useEffect(() => {
        anchorSetupMinterProgram();
    }, [anchorSetupMinterProgram]);

    // Provide the minter program instance to child components
    return (
        <MinterProgramContext.Provider value={{ minterProgram }}>
            {children}
        </MinterProgramContext.Provider>
    );
};

NOTE: The codes are well commented on enough for you to have a detailed understanding of what each code does. Also, you can watch me explain them in the lesson video above.

Conclusion:

Understanding how to create a Solana program context and provider in your dApp frontend is non-negotiable to be able to successfully interact with any Solana program deployed either on the Solana Mainnet or Devnet.

Support:

If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).

NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.

Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.

Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.