Query Wallet Balances with Cosmos Libraries

import { useCosmosClient } from "./useCosmosClient";
import { coins } from "@cosmjs/stargate";

function BalanceDisplay() {
  const { publicClient, signingClient } = useCosmosClient("https://rpc.cosmos.network");
  const [balances, setBalances] = useState([]);

  const queryBalances = async () => {
    const client = signingClient || publicClient;
    if (!client) return;

    const address = signingClient 
      ? await signingClient.signer.getAccounts().then(accs => accs[0]?.address)
      : "cosmos1..."; // Replace with any address to query
    
    if (!address) return;

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

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

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