Cosmos Kit
Hooks
- useChains

Hook - useChains

  • required provider: ChainProvider from either @cosmos-kit/react or @cosmos-kit/react-lite

To use useChains with ChainProvider from @cosmos-kit/react-lite, property walletModal must be provided. Or you can choose ChainProvider from @cosmos-kit/react, which provides DefaultModal. Or you can use useChainWallet instead.

  • parameters:
    • chainNames: ChainName[]
    • sync: boolean = true

parameter sync means whether to synchronize connection and disconnection to all other activated chainWallets.

Usage

export default function () {
  const chains = useChains(['cosmoshub', 'osmosis', 'stargaze', 'juno', 'akash']);
  const connected = Object.values(chains).every(chain => chain.isWalletConnected);
  const { connect, openView } = chains.cosmoshub;
  
  // Notice: calling chains.chainName.connect() will connect to all 5 chains above.
 
  return <div className="space-y-4">
    <Button onClick={() => connected ? openView() : connect() }>
      { connected ? 'Disconnect' : 'Connect' }
    </Button>
    <table className="table-fixed font-mono">
      <thead>
        <tr>
          <th className="w-80">Code</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>chains.cosmoshub.address</td>
          <td>{chains.cosmoshub.address}</td>
        </tr>
        <tr>
          <td>chains.osmosis.address</td>
          <td>{chains.osmosis.address}</td>
        </tr>
        <tr>
          <td>chains.stargaze.address</td>
          <td>{chains.stargaze.address}</td>
        </tr>
        <tr>
          <td>chains.juno.address</td>
          <td>{chains.juno.address}</td>
        </tr>
        <tr>
          <td>chains.akash.address</td>
          <td>{chains.akash.address}</td>
        </tr>
      </tbody>
    </table>
  </div>;
}
- useChain- useChainWallet