Hooks

React hooks for authentication, wallet, and payment functionality.

useAuth

Authentication state and actions.

import { useAuth } from '@agentfish/react';

function MyComponent() {
  const { 
    isAuthenticated,  // boolean - is user logged in
    isLoading,        // boolean - auth state loading
    user,             // User | null
    signOut,          // () => Promise<void>
  } = useAuth();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      {isAuthenticated ? (
        <>
          <p>Welcome, {user?.email}</p>
          <button onClick={signOut}>Sign Out</button>
        </>
      ) : (
        <p>Please sign in</p>
      )}
    </div>
  );
}

Return Values

Value	Type	Description
isAuthenticated	boolean	Whether user is logged in
isLoading	boolean	Auth state is loading
user	User | null	Current user object
signOut	() => Promise<void>	Sign out function

useWallet

Wallet information and actions.

import { useWallet } from '@agentfish/react';

function WalletInfo() {
  const { 
    wallet,           // Wallet | null
    balance,          // number (USDC)
    address,          // string | null
    refreshWallet,    // () => Promise<void>
  } = useWallet();

  return (
    <div>
      <p>Address: {address}</p>
      <p>Balance: ${balance?.toFixed(2)} USDC</p>
      <button onClick={refreshWallet}>Refresh</button>
    </div>
  );
}

Return Values

Value	Type	Description
wallet	Wallet | null	Full wallet object
balance	number	Balance in USDC
address	string | null	Wallet address
refreshWallet	() => Promise<void>	Refresh wallet data

useAgentFish

Full context access including x402 payment functions.

import { useAgentFish } from '@agentfish/react';

function PaymentExample() {
  const { 
    // Auth
    isAuthenticated,
    user,
    wallet,
    
    // Payments
    fetch,            // x402-aware fetch wrapper
    pay,              // Manual payment function
    
    // Wallet
    balance,
    refreshWallet,
    getPayments,
  } = useAgentFish();

  const handleRequest = async () => {
    // x402-aware fetch - automatically handles 402 Payment Required
    const response = await fetch('https://ai-api.com/chat', {
      method: 'POST',
      body: JSON.stringify({ message: 'Hello' }),
      maxPayment: 1.00, // Max $1 USDC
    });
    
    const data = await response.json();
    console.log(data);
  };

  const handleManualPayment = async () => {
    // Manual payment
    const { signature } = await pay(
      0.50,                    // Amount
      'https://merchant.com',  // Merchant
      'merchant-address'       // Address
    );
    console.log('Payment signature:', signature);
  };

  return (
    <div>
      <p>Balance: ${balance} USDC</p>
      <button onClick={handleRequest}>Make API Request</button>
      <button onClick={handleManualPayment}>Send Payment</button>
    </div>
  );
}

Return Values

Value	Type	Description
isAuthenticated	boolean	Whether user is logged in
user	User | null	Current user object
wallet	Wallet | null	Full wallet object
balance	number	Balance in USDC
fetch	function	x402-aware fetch wrapper
pay	function	Manual payment function
refreshWallet	function	Refresh wallet data
getPayments	function	Get payment history

TypeScript Types

import type {
  User,
  Wallet,
  Payment,
} from '@agentfish/react';