Query Wallet Balances with Cosmos Libraries

import { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { useParaCosmjsProtoSigner } from '@getpara/react-native-wallet/cosmos';
import { StargateClient } from '@cosmjs/stargate';

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

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

  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 <Text>Loading...</Text>;

  return (
    <View>
      <Text>Address: {address}</Text>
      <Button title="Query Balances" onPress={queryBalances} />
      {balances.map(balance => (
        <Text key={balance.denom}>
          {balance.amount} {balance.denom}
        </Text>
      ))}
    </View>
  );
}