@torvainchain/react

React hooks and provider components for TorvainChain. Quickly bootstrap dApp state, render beautiful cüzdan connect states, query balances, and integrate with CosmWasm gaming asset modules.

Installation

npm install @torvainchain/react

Setup Provider

Wrap your application root with TorvainProvider to expose the global connection context:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { TorvainProvider } from '@torvainchain/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <TorvainProvider>
      <App />
    </TorvainProvider>
  </React.StrictMode>
);

Quick Start

1. Connecting a Wallet

import React from 'react';
import { useTorvainConnect } from '@torvainchain/react';

export const ConnectWidget = () => {
  const { connect, disconnect, connected, address, activeWallet } = useTorvainConnect();

  if (connected) {
    return (
      <div>
        <p>Wallet: {activeWallet} ({address})</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => connect('keplr')}>Connect Torvain Hub (Keplr)</button>
      <button onClick={() => connect('torvainkeeper')}>Connect TorvainKeeper (Sandbox)</button>
    </div>
  );
};

2. Querying Balances with React Hooks

import { useBalance } from '@torvainchain/react';

export const WalletBalance = ({ address }: { address: string }) => {
  const { balance, loading, error } = useBalance(address, 'utvn');

  if (loading) return <span>Loading balance…</span>;
  if (error) return <span>Error loading balance</span>;

  return (
    <div>
      <span>TVN Tokens: {Number(balance?.amount || 0) / 1e6} TVN</span>
    </div>
  );
};

License

Licensed under the Apache License, Version 2.0.