Query Wallet Balances with Solana Libraries

import { useParaSolana } from './hooks/useParaSolana';
import { LAMPORTS_PER_SOL, PublicKey } from '@solana/web3.js';
import { TOKEN_PROGRAM_ID, getAccount, getAssociatedTokenAddress } from '@solana/spl-token';

function WalletBalance() {
  const { connection, signer } = useParaSolana();
  const [solBalance, setSolBalance] = useState(0);
  const [tokenBalance, setTokenBalance] = useState(0);
  
  const fetchBalances = async () => {
    try {
      // Get SOL balance
      const balance = await connection.getBalance(signer.sender);
      setSolBalance(balance / LAMPORTS_PER_SOL);
      
      // Get SPL token balance (example: USDC)
      const usdcMint = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v");
      const tokenAccount = await getAssociatedTokenAddress(
        usdcMint,
        signer.sender
      );
      
      try {
        const accountInfo = await getAccount(connection, tokenAccount);
        setTokenBalance(Number(accountInfo.amount) / 1e6); // USDC has 6 decimals
      } catch (error) {
        console.log("Token account not found");
        setTokenBalance(0);
      }
    } catch (error) {
      console.error("Error fetching balances:", error);
    }
  };
  
  return (
    <div>
      <button onClick={fetchBalances}>Refresh Balances</button>
      <p>SOL Balance: {solBalance}</p>
      <p>USDC Balance: {tokenBalance}</p>
    </div>
  );
}