Configure RPC Nodes with Cosmos Libraries

import { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useParaCosmjsProtoSigner } from '@getpara/react-native-wallet/cosmos';
import { StargateClient } 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 } = useParaCosmjsProtoSigner();
  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 <Text>Loading...</Text>;

  return (
    <View>
      <Button title="Check Chain Status" onPress={checkChainStatus} />
      {Object.entries(heights).map(([chain, height]) => (
        <Text key={chain}>{chain}: {height}</Text>
      ))}
    </View>
  );
}