@txflow/sdk-react

React Provider and Hooks for TxFlow SDK - enabling gasless transactions in React/Next.js apps.

Installation

npm install @txflow/sdk @txflow/sdk-react
# or
bun add @txflow/sdk @txflow/sdk-react

Quick Start

1. Wrap your app with TxFlowProvider

// app/providers.tsx (Next.js App Router)
"use client"

import { TxFlowProvider } from '@txflow/sdk-react';

export function Providers({ children }) {
  return (
    <TxFlowProvider 
      config={{ 
        apiKey: process.env.NEXT_PUBLIC_TXFLOW_API_KEY!,
        relayUrl: 'https://api.txflow.dev/v1/relay'
      }}
    >
      {children}
    </TxFlowProvider>
  );
}

2. Use Hooks in Components

TxFlow React SDK provides dedicated hooks for common gasless operations.

Generic Gasless Transaction

Execute any smart contract function (e.g. Mint NFT) without gas.

import { useSendTransactionGasless } from '@txflow/sdk-react';
import { encodeFunctionData, parseAbi } from 'viem';

function MintButton() {
  const { sendTransaction, isLoading, txHash } = useSendTransactionGasless();

  const handleMint = async () => {
    // 1. Encode Data
    const data = encodeFunctionData({
        abi: parseAbi(['function mint(address to)']),
        functionName: 'mint',
        args: ['0xUser...']
    });

    // 2. Send Gasless
    await sendTransaction({
        to: '0xNFTContract...',
        data
    });
  };

  return <button disabled={isLoading} onClick={handleMint}>Mint NFT (Gasless)</button>;
}

Send ERC-20 Tokens (Gasless - Standard)

Use for tokens that require approve first (like USDT).

import { useSendTokenGasless } from '@txflow/sdk-react';
import { parseUnits } from 'viem';

function SendUSDT() {
  const { sendToken, isLoading } = useSendTokenGasless();

  const handleSend = async () => {
    await sendToken(
        '0xUSDTAddress...',
        '0xRecipient...',
        parseUnits('10', 6)
    );
  };
}

Send ERC-20 Tokens (Gasless - Permit) 💸

Use for tokens supporting EIP-2612 (USDC, DAI). No prior approval needed!

import { useSendTokenGaslessPermit, useCheckPermitSupport } from '@txflow/sdk-react';
import { parseUnits } from 'viem';

function SendUSDC() {
  const { sendTokenPermit, isLoading } = useSendTokenGaslessPermit();
  const { checkSupport } = useCheckPermitSupport();

  const handleSend = async () => {
    const token = '0xUSDC...';
    
    // Optional: Check support first
    const isSupported = await checkSupport(token);
    if (!isSupported) return alert('Token does not support Permit');

    await sendTokenPermit(
        token,
        '0xRecipient...',
        parseUnits('10', 6),
        undefined, // deadline
        '2' // Version (USDC on Base is version '2')
    );
  };
}

3. Session Keys (Zero Popup)

For gaming/social apps, use Session Keys to sign once and execute many times without popups.

import { useTxFlow } from '@txflow/sdk-react';

function GameActions() {
  const { isConnected, createSessionKey, executeWithSessionKey } = useTxFlow();

  const attack = async () => {
     if (!isConnected) await connect();
     
     // 1. Create Key (Sign once)
     await createSessionKey(); 

     // 2. Execute Action (No popup!)
     await executeWithSessionKey({
       to: '0xGame...',
       data: '0x...'
     });
  };
}

API Reference

4. Connect to Wallet

You can use the useWallet hook to manage the wallet connection state.

import { useWallet, useChainId } from '@txflow/sdk-react';

function Header() {
  const { address, isConnected, connect, disconnect } = useWallet();
  const chainId = useChainId();

  if (isConnected) {
    return (
      <div className="flex gap-4">
        <span>Chain: {chainId}</span>
        <span>{address}</span>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={() => connect()}>Connect Wallet</button>;
}

API Reference

TxFlowProvider

| Prop | Type | Description | |------|------|-------------| | config.apiKey | string | Your TxFlow API key | | config.chainId | number? | Chain ID (default: Base Sepolia) | | config.relayUrl | string? | Custom TxFlow Relay URL | | config.relayAddress | 0x${string}? | Custom Relay/Worker Contract Address | | config.account | Account or Address | Custom account (e.g. from privateKey) | | config.transport | Transport | Custom transport (default: http()) |

Server-side / Bot Usage

You can use the provider with a private key instead of a browser wallet:

import { TxFlowProvider } from '@txflow/sdk-react';
import { privateKeyToAccount } from 'viem/accounts';
import { http } from 'viem';

const account = privateKeyToAccount('0x...');

<TxFlowProvider config={{ 
    apiKey: '...', 
    account,
    transport: http('https://mainnet.base.org') 
}}>
    <BotApp />
</TxFlowProvider>

Hooks

| Hook | Return Values | Description | |------|---------------|-------------| | useTxFlow() | txflow, chainId, connect... | Main hook for connection & session keys | | useWallet() | address, isConnected, chainId, connect, disconnect | Convenience hook for wallet details | | useChainId() | chainId | Returns current Chain ID (number) | | useSendTransactionGasless() | sendTransaction, isLoading, error, txHash | Generic gasless transaction | | useSendTokenGasless() | sendToken, isLoading, error | Standard token transfer (requires approval) | | useSendTokenGaslessPermit() | sendTokenPermit, isLoading, error | Permit token transfer (No gas/approve) | | useCheckPermitSupport() | checkSupport, isSupported | Check if token supports EIP-2612 |

License

MIT