TransactionButton

import { TransactionButton, txStep } from '@txkit/react'
import { parseEther } from 'viem'
 
// Simple ETH transfer
<TransactionButton
  steps={[ txStep('send', 'Send ETH', { to: '0x...', value: parseEther('1') }) ]}
  label="Send 1 ETH"
  onFlowComplete={(results) => console.log('Done!', results)}
/>

import { TransactionButton, approveAndExecute } from '@txkit/react'
import { parseUnits } from 'viem'
 
<TransactionButton
  steps={approveAndExecute({
    token: USDC_ADDRESS,
    spender: ROUTER_ADDRESS,
    amount: parseUnits('100', 6),
    tx: {
      address: ROUTER_ADDRESS,
      abi: routerAbi,
      functionName: 'swap',
      args: [ USDC_ADDRESS, WETH_ADDRESS, parseUnits('100', 6), minOut ],
    },
  })}
  label="Swap 100 USDC"
/>

<TransactionButton
  steps={[ txStep('send', 'Send', { to: '0x...', value: parseEther('1') }) ]}
/>

<TransactionButton
  steps={[ txStep('send', 'Send', { to: '0x...', value: parseEther('1') }) ]}
>
  {({ flow, currentStep, start, retry, reset, explorerUrl }) => (
    <div>
      <p>Status: {flow.status}</p>
      {flow.status === 'idle' && <button onClick={start}>Send</button>}
      {flow.status === 'error' && <button onClick={retry}>Retry</button>}
      {flow.status === 'completed' && <button onClick={reset}>Done</button>}
      {explorerUrl && <a href={explorerUrl}>View on Explorer</a>}
    </div>
  )}
</TransactionButton>

import { useTransactionFlow, txStep } from '@txkit/react'
import { parseEther } from 'viem'
 
const { flow, start, retry, reset } = useTransactionFlow({
  steps: [ txStep('send', 'Send', { to: '0x...', value: parseEther('1') }) ],
  onFlowComplete: (results) => console.log('All steps done!', results),
  onStepError: (error, stepId) => console.error(`Step ${stepId} failed:`, error.message),
})

txStep('approve', 'Approve USDC', {
  address: USDC_ADDRESS,
  abi: erc20Abi,
  functionName: 'approve',
  args: [ SPENDER, amount ],
})

const SwapButton = () => {
  const [ steps, setSteps ] = useState<FlowStep[] | null>(null)
 
  const prepareSwap = async () => {
    const quote = await fetchQuote({ tokenIn: USDC, tokenOut: WETH, amount })
    setSteps([
      txStep('swap', 'Swap', {
        to: SWAP_ROUTER,
        data: quote.calldata,
        value: quote.value,
      }),
    ])
  }
 
  if (!steps) {
    return <button onClick={prepareSwap}>Get quote</button>
  }
  return <TransactionButton steps={steps} label="Swap" />
}

txStep('swap', 'Swap', (ctx) => ({
  to: SWAP_ROUTER,
  data: encodeSwapCalldata({
    approveBlock: ctx.results['approve'].receipt.blockNumber,
    minOut: computeMinOut(ctx.results['approve']),
  }),
  value: 0n,
}))

txStep('claim', 'Claim rewards', async (ctx) => {
  const pending = await ctx.publicClient.readContract({
    address: REWARDS_VAULT,
    abi: rewardsAbi,
    functionName: 'pendingRewards',
    args: [ ctx.address ],
  })
  return {
    address: REWARDS_VAULT,
    abi: rewardsAbi,
    functionName: 'claim',
    args: [ pending ],
  }
})

txStep('stake', 'Stake', async (ctx) => buildStakeTx(ctx), {
  shouldSkip: (ctx) => !autoStake,
})

import { signAndSubmit } from '@txkit/react'
 
signAndSubmit({
  id: 'place-order',
  label: 'Place Order',
  signData: {
    method: 'eth_signTypedData_v4',
    domain: orderDomain,
    types: orderTypes,
    value: orderData,
  },
  onSign: async (signature, ctx) => {
    const orderId = await submitOrder(signature)
    return { data: { orderId } }
  },
  waitForCondition: async (ctx, signal) => {
    await pollUntil(() => checkOrderFilled(orderId), { signal })
  },
})

<TxKitProvider config={config}>
  <header>
    <FlowProgress showSummary />
  </header>
 
  <main>
    <FlowSteps orientation="vertical" />
    <TransactionButton
      steps={approveAndExecute({ token: USDC, spender: ROUTER, amount, tx: swapTx })}
      label="Swap"
      description="Approve USDC, then swap for WETH on Uniswap v4"
    />
  </main>
 
  <FlowToast position="bottom-right" autoDismiss={5000} />
</TxKitProvider>

<TransactionButton flowId="swap" steps={swapSteps} />
<FlowSteps flowId="swap" />
 
<TransactionButton flowId="stake" steps={stakeSteps} />
<FlowSteps flowId="stake" />

import { TransactionButton, FlowSteps } from '@txkit/react'
 
const ApproveAndSwap = () => (
  <>
    <TransactionButton flowId="approve" steps={approveSteps} />
    <TransactionButton flowId="swap" steps={swapSteps} />
 
    <FlowSteps flowId="approve" />
    <FlowSteps flowId="swap" />
  </>
)

type StepContext = {
  results: Record<string, StepResult>
  previousResult: StepResult | undefined
  address: `0x${string}`
  chainId: number
  publicClient: PublicClient
}
 
type StepResult =
  | { type: 'tx'; hash: `0x${string}`; receipt: TransactionReceipt }
  | { type: 'sign'; signature: `0x${string}` }

<TransactionButton
  steps={approveAndExecute({
    token: USDT_ADDRESS,
    spender: ROUTER_ADDRESS,
    amount: parseUnits('100', 6),
    tx: { address: ROUTER_ADDRESS, abi: routerAbi, functionName: 'swap', args },
  })}
  label="Swap 100 USDT"
/>

<TransactionButton
  steps={[ txStep('send', 'Send', { to: recipient, value: parseEther('10') }) ]}
  safety={{ delayMs: 5000 }}
  label="Send 10 ETH"
/>

<TransactionButton
  steps={[ txStep('send', 'Send', { to, value }) ]}
  onError={(error, stepId) => {
    if (error.code === 'USER_REJECTED') {
      // Soft toast - the user closed the wallet, not a failure
      toast.info('Cancelled')
      return
    }
    if (error.code === 'INSUFFICIENT_FUNDS') {
      toast.error('Not enough balance to cover gas')
      return
    }
    if (error.code === 'EXECUTION_REVERTED') {
      toast.error(`Transaction reverted: ${error.reason ?? 'unknown'}`)
      return
    }
    captureException(error, { extra: { stepId } })
  }}
/>

pending → simulating → confirming-risk → (confirm) → signing/tx-pending → waiting → completed
                     → simulation-failed → (retry) → simulating
                                         → (force) → signing/tx-pending
         signing → tx-pending → waiting → completed
                             → error → (retry) → simulating
         → rejected → (retry) → simulating
         → skipped (via shouldSkip)
         → canceled (cascade from failed step)

type TransactionRiskProvider = {
  assess: (params: {
    to: `0x${string}`
    data?: `0x${string}`
    value?: bigint
    chainId: number
    from: `0x${string}`
  }) => Promise<RiskResult>
}
 
type RiskResult = {
  level: 'safe' | 'low' | 'medium' | 'high'
  warnings?: string[]
  blocked?: boolean
}

<TransactionButton
  steps={steps}
  safety={{
    delayMs: 5000,
    riskProvider: {
      assess: async ({ to, data, value, chainId, from }) => {
        const result = await blowfishApi.scan({ to, data, value, chainId, from })
        return {
          level: result.riskLevel,
          warnings: result.warnings,
          blocked: result.action === 'BLOCK',
        }
      },
    },
  }}
/>