Skip to main content

Hooks Reference

Complete reference for all Volr SDK hooks.

useVolrPay​

Hook for initiating payments with UI.

Returns​

interface UseVolrPayReturn {
  pay: (options: PaymentModalOptions) => void;
  isPaying: boolean;
}

PaymentModalOptions​

interface PaymentModalOptions {
  amount: string;
  currency: string;
  item?: {
    name: string;
    description?: string;
    image?: string;
  };
  onSuccess?: (result: PaymentResult) => void;
  onError?: (error: Error) => void;
  onCancel?: () => void;
}

Usage​

const { pay } = useVolrPay();

pay({
  amount: '10.00',
  currency: 'USDC',
  onSuccess: (result) => {
    console.log('Payment successful:', result);
  },
  onError: (error) => {
    console.error('Payment failed:', error);
  },
});

useVolrModal​

Hook for opening modals programmatically.

Returns​

interface UseVolrModalReturn {
  open: (options: OpenModalOptions) => void;
  close: () => void;
  isOpen: boolean;
  mode: ModalMode | null;
}

OpenModalOptions​

interface OpenModalOptions {
  mode?: 'account' | 'deposit' | 'payment';
  asset?: {
    chainId: number;
    symbol: string;
  };
}

Usage​

const { open } = useVolrModal();

// Open account modal
open({ mode: 'account' });

// Open deposit modal
open({ mode: 'deposit' });

// Open deposit modal with asset
open({
  mode: 'deposit',
  asset: { chainId: 8453, symbol: 'USDC' },
});

useVolr​

Main hook for accessing Volr SDK functionality.

Returns​

interface VolrClient {
  // User state
  user: VolrUser | null;
  isLoggedIn: boolean;
  
  // Wallet
  evm: {
    address: string | null;
    chainId: number;
  };
  
  // Actions
  logout: () => Promise<void>;
  
  // Status
  isLoading: boolean;
  error: Error | null;
}

Usage​

const { user, isLoggedIn, evm, logout } = useVolr();

if (!isLoggedIn) {
  return <div>Not logged in</div>;
}

return (
  <div>
    <p>Wallet: {evm.address}</p>
    <button onClick={logout}>Logout</button>
  </div>
);

useVolrSession​

Hook for BYO Auth session management.

Returns​

interface UseVolrSessionReturn {
  setSession: (session: SetSessionParams) => Promise<VolrUser>;
  clearSession: () => Promise<void>;
  exchangeOidc: (idToken: string) => Promise<OidcExchangeResult>;
}

SetSessionParams​

interface SetSessionParams {
  accessToken: string;
  refreshToken: string;
}

Usage​

const { setSession } = useVolrSession();

// After getting tokens from your backend
await setSession({
  accessToken: '...',
  refreshToken: '...',
});

useUserBalances​

Hook for fetching user balances.

Returns​

interface UseUserBalancesReturn {
  balances: Balance[];
  totalUsd: number;
  isLoading: boolean;
  paymentEnabled: boolean;
  refresh: () => Promise<void>;
}

Balance​

interface Balance {
  tokenId: string;
  symbol: string;
  balance: string;
  usdValue: number;
  chainId: number;
}

Usage​

const { balances, totalUsd, isLoading } = useUserBalances();

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

return (
  <div>
    <p>Total: ${totalUsd}</p>
    {balances.map((balance) => (
      <p key={balance.tokenId}>
        {balance.symbol}: {balance.balance}
      </p>
    ))}
  </div>
);

Next Steps​