@txkit/react

@txkit/react

React components for Web3 - connect, transact, display.

v0.1.0-alpha - core primitives and transaction flow are stable. v0.2 adds <TxApproval /> (review-before-sign), <AllowanceGrant />, and <TxHistory />.

Features

• Works with RainbowKit, AppKit, ConnectKit, or built-in ConnectWallet
• TokenBalance - native + ERC-20 with fiat pricing and auto-formatting
• TransactionButton - multi-step transaction flow with simulation + anti-phishing
• FlowSteps / FlowProgress / FlowToast - compound UI for active transaction flows
• Three customization levels: zero-config, custom render, headless hooks
• Built on wagmi + viem - no vendor lock-in
• CSS custom properties for full style control
• WCAG 2.1 AA - focus traps, keyboard navigation, 44px touch targets

Install

npm install @txkit/react @txkit/themes

Peer dependencies: react >= 18, wagmi >= 3, viem >= 2, @tanstack/react-query >= 5.

Quick Start

import { TxKitProvider, ConnectWallet } from '@txkit/react'
import '@txkit/themes'
import { mainnet } from 'viem/chains'
import { http } from 'viem'

function App() {
  return (
    <TxKitProvider
      config={{
        chains: [ mainnet ],
        transports: { [mainnet.id]: http() },
      }}
    >
      <ConnectWallet />
    </TxKitProvider>
  )
}

Add to Existing dApp

Already using RainbowKit, AppKit, or another wagmi-based connector? Use embedded mode - no need to replace your wallet connection:

import { TxKitProvider, TransactionButton, txStep } from '@txkit/react'
import { parseEther } from 'viem'
import '@txkit/themes'

// Inside your existing WagmiProvider
function MyComponent() {
  return (
    <TxKitProvider embedded>
      <TransactionButton
        steps={[
          txStep('send', 'Send ETH', { to: '0x...', value: parseEther('0.01') }),
        ]}
        label="Send 0.01 ETH"
      />
    </TxKitProvider>
  )
}

Components

Component	Description
ConnectWallet	Multi-wallet connection with ENS, balance, chain switching
TokenBalance	Native + ERC-20 balance display with fiat pricing
TransactionButton	Multi-step transaction flow with simulation and approval
FlowSteps / FlowProgress / FlowToast	Compound components for transaction flow UI

Headless Hooks

Every component has a corresponding headless hook for full control:

import {
  useWalletState,
  useTokenBalance,
  useTokenBalances,
  useTokenPrice,
  useTransactionFlow,
  useFlowState,
} from '@txkit/react'

Transaction Flow

Multi-step flows compose from txStep, approveAndExecute, signAndSubmit helpers:

import { TransactionButton, FlowSteps, FlowToast, approveAndExecute } from '@txkit/react'
import { parseUnits } from 'viem'

const USDC = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'

function SwapButton() {
  return (
    <>
      <TransactionButton
        steps={approveAndExecute({
          token: USDC,
          spender: '0xRouter...',
          amount: parseUnits('100', 6),
          tx: { to: '0xRouter...', data: '0x...' },
        })}
      />
      <FlowSteps />
      <FlowToast />
    </>
  )
}

Documentation

Visit txkit.dev for full documentation, guides, and examples.

License

Apache-2.0