Query Validator Information

import { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useParaCosmos } from './hooks/useParaCosmos';
import { setupStakingExtension, QueryClient } from '@cosmjs/stargate';
import { Tendermint37Client } from '@cosmjs/tendermint-rpc';

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

interface ValidatorInfo {
  name: string;
  operatorAddress: string;
  tokens: string;
  commission: string;
}

function ValidatorList() {
  const { protoSigner, address, isLoading } = useParaCosmos();
  const [validators, setValidators] = useState<ValidatorInfo[]>([]);

  const queryValidators = async () => {
    const tmClient = await Tendermint37Client.connect(RPC_URL);
    const queryClient = QueryClient.withExtensions(tmClient, setupStakingExtension);

    try {
      const { validators: activeValidators } = await queryClient.staking.validators('BOND_STATUS_BONDED');

      const validatorInfo = activeValidators.slice(0, 10).map(validator => ({
        name: validator.description?.moniker || 'Unknown',
        operatorAddress: validator.operatorAddress,
        tokens: validator.tokens,
        commission: validator.commission?.commissionRates?.rate || '0',
      }));

      setValidators(validatorInfo);

      if (address) {
        const delegations = await queryClient.staking.delegatorDelegations(address);
        console.log('Your delegations:', delegations);
      }
    } catch (error) {
      console.error('Failed to query validators:', error);
    }
  };

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

  return (
    <View>
      <Text>Address: {address}</Text>
      <Button title="Query Top Validators" onPress={queryValidators} />
      {validators.map(v => (
        <Text key={v.operatorAddress}>
          {v.name} - Commission: {v.commission}
        </Text>
      ))}
    </View>
  );
}