Query Wallet Balances with Cosmos Libraries

import { useState, useEffect } from "react";
import { useParaCosmjsProtoSigner } from "@getpara/react-sdk/cosmos";
import { StargateClient } from "@cosmjs/stargate";

const RPC_URL = "https://rpc.cosmos.directory/cosmoshub";

function BalanceDisplay() {
  const { protoSigner, isLoading } = useParaCosmjsProtoSigner();
  const [balances, setBalances] = useState<{ denom: string; amount: string }[]>([]);

  const address = protoSigner?.address;

  const queryBalances = async () => {
    if (!address) return;

    const client = await StargateClient.connect(RPC_URL);
    const allBalances = await client.getAllBalances(address);
    setBalances(allBalances);

    const atomBalance = await client.getBalance(address, "uatom");
    console.log("ATOM balance:", atomBalance.amount, atomBalance.denom);
  };

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <p>Address: {address}</p>
      <button onClick={queryBalances}>Query Balances</button>
      {balances.map(balance => (
        <div key={balance.denom}>
          {balance.amount} {balance.denom}
        </div>
      ))}
    </div>
  );
}