Skip to main content

​
useWallet

Access wallet connection state and actions from any component within SpiceFlowProvider.

​
Usage

import { useWallet } from "@spicenet-io/spiceflow";

function MyComponent() {
  const { address, isConnected, isAuthenticated, actions } = useWallet();

  return (
    <div>
      {isConnected ? (
        <p>Connected: {address}</p>
      ) : (
        <button onClick={() => actions.login()}>Connect</button>
      )}
    </div>
  );
}

​
Return Value

interface UseWalletReturn {
  // State
  isReady: boolean;
  isAuthenticated: boolean;
  isConnected: boolean;
  address: string | undefined;
  provider: 'privy' | 'dynamic' | null;
  
  // Actions
  actions: {
    login: () => Promise<void>;
    logout: () => Promise<void>;
    signMessage: (message: string | { raw: Hex }) => Promise<{ signature: string }>;
    signAuthorization: (params: {
      contractAddress: Address;
      chainId: number;
      nonce: number;
    }) => Promise<Authorization>;
  };
}

​
useSpiceBalance

Fetch and manage Spice vault balances for a user. Returns structured balance data.

​
Usage

import { useSpiceBalance } from "@spicenet-io/spiceflow";

function BalanceDisplay() {
  const { address } = useWallet();
  const { balanceData, loading, hasBalance, refetch } = useSpiceBalance({
    address,
    enabled: true,
    refetchInterval: 30000, // 30 seconds
  });

  if (loading) return <p>Loading...</p>;
  if (!hasBalance) return <p>No deposits found</p>;

  return (
    <div>
      <p>Total Balance: ${balanceData?.totalBalance.toFixed(2)}</p>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

​
Config

interface UseSpiceBalanceConfig {
  address?: Address | string;  // Wallet address to fetch balance for
  enabled?: boolean;           // Enable/disable fetching (default: true)
  refetchInterval?: number;    // Auto-refetch interval in ms
}

​
Return Value

interface UseSpiceBalanceReturn {
  balanceData: BalanceData | null;  // Structured balance data
  loading: boolean;                  // Initial loading state
  error: string | null;              // Error message if failed
  hasBalance: boolean;               // Whether user has any balance
  refetch: () => Promise<void>;      // Manual refetch function
}

​
useSpiceAssets

Fetch deposited assets as an array. Useful for building custom asset selectors.

​
Usage

import { useSpiceAssets } from "@spicenet-io/spiceflow";

function AssetList() {
  const { address } = useWallet();
  const { assets, loading, getAssetsByChain } = useSpiceAssets({
    address,
    supportedChains: [11155111, 421614],
  });

  if (loading) return <p>Loading assets...</p>;

  return (
    <ul>
      {assets.map(asset => (
        <li key={`${asset.chainId}-${asset.address}`}>
          {asset.symbol}: {asset.balanceFormatted} on Chain {asset.chainId}
        </li>
      ))}
    </ul>
  );
}

​
Config

interface UseSpiceAssetsConfig {
  address?: Address | string;   // Wallet address
  supportedChains?: number[];   // Filter by chain IDs
  enabled?: boolean;            // Enable/disable (default: true)
  refetchInterval?: number;     // Auto-refetch interval in ms
}

​
Return Value

interface UseSpiceAssetsReturn {
  assets: Asset[];                           // Array of deposited assets
  loading: boolean;                          // Loading state
  error: string | null;                      // Error message
  hasBalance: boolean;                       // Has any assets
  refetch: () => Promise<void>;              // Manual refetch
  getAssetsByChain: (chainId: number) => Asset[];  // Filter by chain
}

​
useAssets

Fetch and manage user assets across multiple chains from external wallets.

​
Usage

import { useAssets, fetchBalances } from "@spicenet-io/spiceflow";

function ExternalAssetList() {
  const { address } = useWallet();
  const { assets, loading, refreshAssets } = useAssets({
    address,
    supportedChains: [11155111, 421614],
    fetchBalances
  });

  if (loading) return <p>Loading assets...</p>;

  return (
    <div>
      <button onClick={refreshAssets}>Refresh</button>
      <ul>
        {assets.map(asset => (
          <li key={`${asset.chainId}-${asset.address}`}>
            {asset.symbol}: {asset.balanceFormatted}
          </li>
        ))}
      </ul>
    </div>
  );
}

​
Config

interface UseAssetsConfig {
  address: string | undefined;
  supportedChains: number[];
  fetchBalances: (address: string, chainIds: number[]) => Promise<Asset[]>;
}

​
Return Value

interface UseAssetsReturn {
  assets: Asset[];
  loading: boolean;
  error: string | null;
  refreshAssets: () => Promise<void>;
}

interface Asset {
  address: string;
  symbol: string;
  name: string;
  decimals: number;
  chainId: number;
  balance: bigint;
  balanceFormatted: number;
  isNative: boolean;
  logoURI?: string;
}

​
useStatus

Track the status of cross-chain transaction execution.

​
Usage

import { useStatus } from "@spicenet-io/spiceflow";

function TransactionStatus() {
  const { intentStatus, startStatusPolling, clearStatus } = useStatus({
    checkStepStatus
  });

  if (!intentStatus) return null;

  return (
    <div>
      <h3>Transaction Status</h3>
      {intentStatus.steps.map((step, index) => (
        <div key={index}>
          Step {index}: {step.status}
          {step.transactionHash && (
            <a href={`https://etherscan.io/tx/${step.transactionHash}`}>
              View
            </a>
          )}
        </div>
      ))}
      <button onClick={clearStatus}>Close</button>
    </div>
  );
}

​
Return Value

interface UseStatusReturn {
  intentStatus: IntentStatus | null;
  startStatusPolling: (intentId: string, initialSteps: IntentStep[]) => void;
  clearStatus: () => void;
}

interface IntentStatus {
  intentId: string;
  steps: IntentStep[];
  currentStepIndex: number;
  isComplete: boolean;
  hasError: boolean;
}

interface IntentStep {
  stepId: number;
  chainId: number;
  chainName: string;
  status: 'created' | 'executing' | 'success' | 'error' | 'reverted';
  transactionHash?: string;
  error?: string;
}

​
useFromInput

Control the “from” asset input in swap UIs.

​
Usage

import { useFromInput } from "@spicenet-io/spiceflow";

function CustomSwapInput() {
  const { fromAmount, setFromAmount } = useFromInput('');

  return (
    <input
      type="text"
      value={fromAmount}
      onChange={(e) => setFromAmount(e.target.value)}
      placeholder="Enter amount"
    />
  );
}

​
Return Value

interface UseFromInputReturn {
  fromAmount: string;
  setFromAmount: (amount: string) => void;
}

​
useToInputUpdate

Control the “to” asset input in swap UIs.

​
Usage

import { useToInputUpdate } from "@spicenet-io/spiceflow";

function CustomSwapOutput() {
  const { toAmount, setToAmount } = useToInputUpdate('');

  return (
    <input
      type="text"
      value={toAmount}
      readOnly
      placeholder="Receive amount"
    />
  );
}

​
Return Value

interface UseToInputUpdateReturn {
  toAmount: string;
  setToAmount: (amount: string) => void;
}

​
useDepositInput

Control deposit amount input state.

​
Usage

import { useDepositInput } from "@spicenet-io/spiceflow";

function DepositInput() {
  const { amount, setAmount } = useDepositInput('');

  return (
    <input
      type="text"
      value={amount}
      onChange={(e) => setAmount(e.target.value)}
      placeholder="Deposit amount"
    />
  );
}

​
Return Value

interface UseDepositInputReturn {
  amount: string;
  setAmount: (amount: string) => void;
}

​
useEmbeddedWalletAddress

Get the Privy embedded wallet address.

​
Usage

import { useEmbeddedWalletAddress } from "@spicenet-io/spiceflow";

function EmbeddedWallet() {
  const embeddedAddress = useEmbeddedWalletAddress();

  if (!embeddedAddress) return <p>No embedded wallet</p>;

  return <p>Embedded wallet: {embeddedAddress}</p>;
}

​
Return Value

Returns string | undefined — the embedded wallet address if available.

​
Next Steps

Components

Learn about pre-built components

Examples

See complete implementation examples

API Reference

Explore the REST API

Configuration

Configure chains and providers