Configure RPC Nodes with Cosmos Libraries

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

const CHAIN_CONFIGS = {
  cosmos: {
    rpc: "https://rpc.cosmos.directory/cosmoshub",
    chainId: "cosmoshub-4"
  },
  osmosis: {
    rpc: "https://rpc.cosmos.directory/osmosis",
    chainId: "osmosis-1"
  },
  celestia: {
    rpc: "https://celestia-rpc.publicnode.com",
    chainId: "celestia"
  },
  dydx: {
    rpc: "https://dydx-dao-rpc.polkachu.com",
    chainId: "dydx-mainnet-1"
  }
};

function MultiChainExample() {
  const { protoSigner, isLoading } = useCosmjsProtoSigner();
  const [heights, setHeights] = useState<Record<string, number>>({});

  const checkChainStatus = async () => {
    const cosmosClient = await StargateClient.connect(CHAIN_CONFIGS.cosmos.rpc);
    const osmosisClient = await StargateClient.connect(CHAIN_CONFIGS.osmosis.rpc);

    const cosmosHeight = await cosmosClient.getHeight();
    const osmosisHeight = await osmosisClient.getHeight();

    setHeights({ cosmos: cosmosHeight, osmosis: osmosisHeight });
    console.log("Cosmos block height:", cosmosHeight);
    console.log("Osmosis block height:", osmosisHeight);
  };

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

  return (
    <div>
      <button onClick={checkChainStatus}>Check Chain Status</button>
      {Object.entries(heights).map(([chain, height]) => (
        <p key={chain}>{chain}: {height}</p>
      ))}
    </div>
  );
}