Add spl-token balance to wallet balance context provider

Question

I'm trying to add a balance of USDC in a connected wallet that updates on a nextjs typescript website. I want to add it to my SOL balance context provider or do I need to make a completely separate context for the USDC balance?

import { useWallet } from '@solana/wallet-adapter-react';
import { LAMPORTS_PER_SOL } from '@solana/web3.js';
import { createContext, useContext, useEffect, useState, useMemo } from 'react';
import * as anchor from '@project-serum/anchor';


const BalanceContext = createContext(null);

const rpcHost = process.env.NEXT_PUBLIC_SOLANA_RPC_HOST;
const connection = new anchor.web3.Connection(rpcHost);

export default function useWalletBalance() {
  const { balance, walletPubKey, walletAddress } = useContext(BalanceContext);
  return { balance, walletPubKey, walletAddress };
}


export const WalletBalanceProvider = ({ children }) => {
  const wallet = useWallet();
  const [balance, setBalance] = useState(0);
  const [walletPubKey, setWalletPubKey] = useState({});
  const [walletAddress, setWalletAddress] = useState('');

  const anchorWallet = useMemo(() => {
    if (
      !wallet ||
      !wallet.publicKey ||
      !wallet.signAllTransactions ||
      !wallet.signTransaction
    ) {
      return;
    }

    return {
      publicKey: wallet.publicKey,
      signAllTransactions: wallet.signAllTransactions,
      signTransaction: wallet.signTransaction,
    };
  }, [wallet]);

  const refreshWallet = async () => {
    if (!anchorWallet) {
      setBalance(0);
      setWalletAddress('');
      setWalletPubKey({});
      return;
    }

    try {
      const balance = await connection.getBalance(anchorWallet.publicKey);
      setBalance(balance / LAMPORTS_PER_SOL);
      setWalletPubKey(anchorWallet.publicKey);
      setWalletAddress(anchorWallet.publicKey.toBase58());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    refreshWallet();
  }, [anchorWallet, balance, walletAddress]);

  return (
    <BalanceContext.Provider value={{ balance, walletPubKey, walletAddress }}>
      {children}
    </BalanceContext.Provider>
  );
};

Not sure the best way to include it in refresh async function.

Answer 1

You can easily add any token to your existing context. There are various ways to do this. I am using the most basic (using spl-token library):

First import spl-token library:

import * as token from "@solana/spl-token"

I have added //new comment in every new line I added:

export const WalletBalanceProvider = ({ children }) => {
  const wallet = useWallet();
  const [balance, setBalance] = useState(0);
  const [walletPubKey, setWalletPubKey] = useState({});
  const [walletAddress, setWalletAddress] = useState('');
  const [usdcBalance, setUsdcBalance] = useState(0); //new

  const anchorWallet = useMemo(() => {
    if (
      !wallet ||
      !wallet.publicKey ||
      !wallet.signAllTransactions ||
      !wallet.signTransaction
    ) {
      return;
    }
    
    return {
      publicKey: wallet.publicKey,
      signAllTransactions: wallet.signAllTransactions,
      signTransaction: wallet.signTransaction,
    };
  }, [wallet]);

  const refreshWallet = async () => {
    if (!anchorWallet) {
      setBalance(0);
      setUsdcBalance(0); //new
      setWalletAddress('');
      setWalletPubKey({});
      return;
    }

    try {
      const balance = await connection.getBalance(anchorWallet.publicKey);
      const usdcMint = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"); //new
      const usdcAddress = await token.getAssociatedTokenAddress(usdcMint, anchorWallet.publicKey); //new

      try {
        const usdcDetails = await token.getAccount(connection, usdcAddress); //new
        const usdcDecimals = 6; //new
        const usdcBalance = Number(usdcDetails.amount) / Math.pow(10, usdcDecimals); //new
        setUsdcBalance(usdcBalance); //new
      } catch {
        console.log("USDC Account doesn't exist for the given address"); //new
      }

      setBalance(balance / LAMPORTS_PER_SOL);
      setWalletPubKey(anchorWallet.publicKey);
      setWalletAddress(anchorWallet.publicKey.toBase58());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    refreshWallet();
  }, [anchorWallet, balance, walletAddress, usdcBalance]);

  return (
    <BalanceContext.Provider value={{ balance, walletPubKey, walletAddress, usdcBalance }}>
      {children}
    </BalanceContext.Provider>
  );
};

Answer 2

If you want to update the USDC constantly you can use accountSubscribe to listen to the account and like this you will get the changes pushed to he client via a websocket connection. https://docs.solana.com/de/api/websocket This would look something like this:

const subscriptionID = connection.onAccountChange(
      tokenAccount,
      (account) => {
                const usdcDecimals = 6; //new
        const usdcBalance = Number(usdcDetails.amount) / Math.pow(10, usdcDecimals); //new
        setUsdcBalance(usdcBalance);
      }
    )

Answer 3

Here is the updated syntax for newer versions of Solana packages.

import { useWallet } from '@solana/wallet-adapter-react';
import { LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js';
import { createContext, useContext, useEffect, useState, useMemo } from 'react';
import * as anchor from '@project-serum/anchor';
import { getAssociatedTokenAddress, getAccount } from '@solana/spl-token';


const BalanceContext = createContext(null);

const rpcHost = process.env.NEXT_PUBLIC_SOLANA_RPC_HOST;
const connection = new anchor.web3.Connection(rpcHost);

export default function useWalletBalance() {
  const { balance, walletPubKey, walletAddress, usdcBalance } = useContext(BalanceContext);
  return { balance, walletPubKey, walletAddress, usdcBalance };
}


export const WalletBalanceProvider = ({ children }) => {
  const wallet = useWallet();
  const [balance, setBalance] = useState(0);
  const [walletPubKey, setWalletPubKey] = useState({});
  const [walletAddress, setWalletAddress] = useState('');
  const [usdcBalance, setUsdcBalance] = useState(0); //new

  const anchorWallet = useMemo(() => {
    if (
      !wallet ||
      !wallet.publicKey ||
      !wallet.signAllTransactions ||
      !wallet.signTransaction
    ) {
      return;
    }
    
    return {
      publicKey: wallet.publicKey,
      signAllTransactions: wallet.signAllTransactions,
      signTransaction: wallet.signTransaction,
    };
  }, [wallet]);

  const refreshWallet = async () => {
    if (!anchorWallet) {
      setBalance(0);
      setUsdcBalance(0); //new
      setWalletAddress('');
      setWalletPubKey({});
      return;
    }

    try {
      const balance = await connection.getBalance(anchorWallet.publicKey);
      const usdcMint = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"); //new
      const usdcAddress = await getAssociatedTokenAddress(usdcMint, anchorWallet.publicKey); //new

      try {
        const usdcDetails = await getAccount(connection, usdcAddress); //new
        const usdcDecimals = 6; //new
        const usdcBalance = Number(usdcDetails.amount) / Math.pow(10, usdcDecimals); //new
        setUsdcBalance(usdcBalance); //new
      } catch {
        console.log("USDC Account doesn't exist for the given address"); //new
      }

      setBalance(balance / LAMPORTS_PER_SOL);
      setWalletPubKey(anchorWallet.publicKey);
      setWalletAddress(anchorWallet.publicKey.toBase58());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    refreshWallet();
  }, [anchorWallet, balance, walletAddress, usdcBalance]);

  return (
    <BalanceContext.Provider value={{ balance, walletPubKey, walletAddress, usdcBalance }}>
      {children}
    </BalanceContext.Provider>
  );
};

Thanks for the help!!!