Query Validator Information

import { useCosmosClient } from "./useCosmosClient";
import { setupStakingExtension, QueryClient } from "@cosmjs/stargate";

function ValidatorInfo() {
  const { publicClient, signingClient } = useCosmosClient("https://rpc.cosmos.network");
  const [validators, setValidators] = useState([]);

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

    const queryClient = QueryClient.withExtensions(
      client.getTmClient(),
      setupStakingExtension
    );

    try {
      const { validators: activeValidators } = await queryClient.staking.validators("BOND_STATUS_BONDED");
      
      const validatorInfo = activeValidators.slice(0, 10).map(validator => ({
        name: validator.description.moniker,
        operatorAddress: validator.operatorAddress,
        tokens: validator.tokens,
        commission: validator.commission.commissionRates.rate,
        jailed: validator.jailed,
        status: validator.status
      }));
      
      setValidators(validatorInfo);
      
      if (signingClient) {
        const accounts = await signingClient.signer.getAccounts();
        const delegations = await queryClient.staking.delegatorDelegations(accounts[0].address);
        console.log("Your delegations:", delegations);
      }
    } catch (error) {
      console.error("Failed to query validators:", error);
    }
  };

  return (
    <div>
      <button onClick={queryValidators}>Query Top Validators</button>
      {validators.map(v => (
        <div key={v.operatorAddress}>
          {v.name} - Commission: {v.commission}
        </div>
      ))}
    </div>
  );
}