@ton-staking-sdk/react-kit

React hooks and components for TON staking contracts.

Installation

We recommend using pnpm for installation to ensure consistent dependencies across the monorepo:

pnpm add @ton-staking-sdk/react-kit

Alternatively, you can use npm or yarn:

npm install @ton-staking-sdk/react-kit
or
yarn add @ton-staking-sdk/react-kit

Usage

Provider Setup

First, wrap your app with TONStakingProvider:

import { TONStakingProvider } from '@ton-staking-sdk/react-kit';
import { createWalletClient, http } from 'viem';
import { privateKeyToAccount } from 'viem/accounts';
import { sepolia } from 'viem/chains';

// Optional: Setup wallet client for write operations
const account = privateKeyToAccount('YOUR_PRIVATE_KEY');
const wallet = createWalletClient({
  account,
  chain: sepolia,
  transport: http(),
});

function App() {
  return (
    <TONStakingProvider
      rpcUrl="YOUR_RPC_URL"
      chainId={11155111}
      walletClient={wallet} // Optional: Include for write operations
    >
      <YourComponents />
    </TONStakingProvider>
  );
}

Read Operations

import {
  useAllOperatorsTotalStaked,
  useOperatorStake,
} from '@ton-staking-sdk/react-kit';

// Get total staked amount
function TotalStaked() {
  const { data, isLoading, error } = useAllOperatorsTotalStaked();
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Total Staked: {formatEther(data)} TON</div>;
}

// Get operator stake
function OperatorStake({ candidateAddress }) {
  const { data, isLoading, error } = useOperatorStake({ candidateAddress });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Operator Stake: {formatEther(data)} TON</div>;
}

Write Operations

import { useStakeTON, useStakeWTON } from '@ton-staking-sdk/react-kit';
// Stake TON
function StakeTONButton({ candidateAddress, amount }) {
  const { stakeTON, isLoading, isPending, error, hash } = useStakeTON();
  const handleStake = async () => {
    try {
      const { hash } = await stakeTON({
        args: [candidateAddress, amount],
      });
      console.log('Transaction hash:', hash);
    } catch (err) {
      console.error('Staking failed:', err);
    }
  };
  return (
    <button onClick={handleStake} disabled={isLoading || isPending}>
      {isPending ? 'Confirming...' : isLoading ? 'Staking...' : 'Stake TON'}
    </button>
  );
}

// Stake WTON
function StakeWTONButton({ candidateAddress, amount }) {
  const { stakeWTON, isLoading, isPending, error, hash } = useStakeWTON();
  const handleStake = async () => {
    try {
      const { hash } = await stakeWTON({
        args: [candidateAddress, amount],
      });
      console.log('Transaction hash:', hash);
    } catch (err) {
      console.error('Staking failed:', err);
    }
  };
  return (
    <button onClick={handleStake} disabled={isLoading || isPending}>
      {isPending ? 'Confirming...' : isLoading ? 'Staking...' : 'Stake WTON'}
    </button>
  );
}

Available Hooks

Read Hooks

• useAllCandidatesTotalStaked() - Get total staked amount across all operators
• useCandidateStake({ candidateAddress }) - Get stake amount for specific operator
• useUserStakeAmount({ candidateAddress, accountAddress }) - Get user's stake amount
• useTONBalance({ account }) - Get TON balance of an account
• useTONTotalSupply() - Get total supply of TON tokens
• useExpectedSeig(candidateAddress, stakedAmount, account) - Calculate expected seigniorage rewards for a staked amount

Candidate Hooks

• useAllCandidates() - Get list of all candidate addresses
• useAllCandidatesNums() - Get total number of candidates
• useCandidateByIndex(index) - Get candidate address by index
• useClaimableL2Seigniorage({ candidateAddress }) - Get claimable seigniorage amount for a Layer2
• useCheckCandidateType({ candidateAddress }) - Check the type of a candidate

CadnidateAddOn Hooks

• useIsCandidateAddOn({ candidateAddress }) - Check if a candidate is an CandidateAddon
• useOperatorManager({ candidateAddress }) - Get operator manager information
• useRollupConfig({ operatorManagerAddress }) - Get rollup configuration for a candidate
• useCheckL1BridgeDetail({ operatorManagerAddress }) - Get details of an L1 bridge
• useL2SequencerAddress({ operatorManagerAddress }) - Get the L2 sequencer address for a candidate
• useLayer2RewardInfo({ candidateAddress }) - Get Layer2 reward information from SeigManager
• useTONBridgeTVL({operatorManagerAddress}) - Get the Total TON Value Locked (TVL) in the Bridge

Write Hooks

• useStakeTON() - Stake TON/WTON tokens to an Candidate
• useWithdrawTON() - Request and Withdraw staked TON/WTON tokens
• useSeigniorageUpdate({ candidateAddress }) - Update seigniorage for an candidate
• useClaimSeigniorage({ operatorManagerAddress }) - Claim seigniorage for a Sequencer

SDK Utility Hooks

• useBlockNumber({ watch, pollingInterval }) - Get current block number with optional polling
• useAccount() - Get connected account information without wagmi dependency
• useClient() - Get publicClient and walletClient from SDK

Development

bash Build package pnpm build Run tests pnpm test Watch mode pnpm dev

License

MIT License