Account Management

Manage user accounts, balances, and wallet information using AccountModal and related components.

AccountModal Component

The AccountModal provides a complete account management UI:

• View account balance
• View asset balances
• Deposit funds
• Withdraw funds
• View payment history
• Manage account settings

Basic Usage

Using useVolrModal Hook

import { useVolrModal } from '@volr/react-ui';

function AccountButton() {
  const { open } = useVolrModal();

  return (
    <button onClick={() => open({ mode: 'account' })}>
      My Account
    </button>
  );
}

Direct Component Usage

import { AccountModal } from '@volr/react-ui';
import { useState } from 'react';

function App() {
  const [showAccount, setShowAccount] = useState(false);

  return (
    <>
      <button onClick={() => setShowAccount(true)}>Account</button>
      <AccountModal
        isOpen={showAccount}
        onClose={() => setShowAccount(false)}
      />
    </>
  );
}

AccountModal Props

Prop	Type	Required	Description
isOpen	boolean	Yes	Controls modal visibility
onClose	() => void	Yes	Called when modal should close
onError	(error: Error) => void	No	Called when errors occur

Account Views

AccountModal includes several views:

Main View

Shows account overview:

• Total balance (USD)
• Quick actions (Deposit, Withdraw, Payments)
• Account info

Assets View

Shows detailed asset balances:

• Token balances
• USD values
• Token symbols and icons

Deposit View

Allows users to deposit funds:

• Shows deposit address (QR code)
• Copy address button
• Asset selection

Withdraw View

Allows users to withdraw funds:

• Select asset and amount
• Enter recipient address
• Confirm withdrawal

Payments View

Shows payment history:

• List of past payments
• Payment details
• Transaction hashes

Account Info View

Shows account information:

• Wallet address
• Email address
• Passkey status

DepositModal Component

The DepositModal component allows users to deposit funds into their wallet.

Basic Usage

import { useVolrModal } from '@volr/react-ui';

function DepositButton() {
  const { open } = useVolrModal();

  return (
    <button onClick={() => open({ mode: 'deposit' })}>
      Deposit
    </button>
  );
}

With Specific Asset

import { useVolrModal } from '@volr/react-ui';

function DepositUSDCButton() {
  const { open } = useVolrModal();

  return (
    <button
      onClick={() =>
        open({
          mode: 'deposit',
          asset: { chainId: 8453, symbol: 'USDC' },
        })
      }
    >
      Deposit USDC
    </button>
  );
}

DepositModal Props

Prop	Type	Required	Description
open	boolean	Yes	Controls modal visibility
onOpenChange	(open: boolean) => void	Yes	Called when modal state changes
asset	{ chainId: number; symbol: string }	No	Pre-select asset

Checking Account Status

Use useVolr hook to check account status:

import { useVolr } from '@volr/react';

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

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

  return (
    <div>
      <p>Wallet: {evm.address}</p>
      <p>Email: {user?.email}</p>
      <p>Passkey: {user?.keyStorageType === 'passkey' ? 'Set up' : 'Not set up'}</p>
    </div>
  );
}

Viewing Balances

Using useUserBalances Hook

import { useUserBalances } from '@volr/react';

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

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

  return (
    <div>
      <h3>Total Balance: ${totalUsd}</h3>
      <ul>
        {balances.map((balance) => (
          <li key={balance.tokenId}>
            {balance.symbol}: {balance.balance} (${balance.usdValue})
          </li>
        ))}
      </ul>
    </div>
  );
}

Examples

Account Menu

import { useVolrModal, useVolr } from '@volr/react-ui';

function AccountMenu() {
  const { open } = useVolrModal();
  const { isLoggedIn, evm, logout } = useVolr();

  if (!isLoggedIn) {
    return (
      <button onClick={() => open({ mode: 'account' })}>
        Sign In
      </button>
    );
  }

  return (
    <div>
      <p>Wallet: {evm.address.slice(0, 6)}...{evm.address.slice(-4)}</p>
      <button onClick={() => open({ mode: 'account' })}>
        My Account
      </button>
      <button onClick={() => open({ mode: 'deposit' })}>
        Deposit
      </button>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Deposit Flow

import { useVolrModal } from '@volr/react-ui';

function CheckoutWithDeposit() {
  const { open } = useVolrModal();
  const { pay } = useVolrPay();

  const handlePay = async () => {
    try {
      await pay({
        amount: '10.00',
        currency: 'USDC',
        onSuccess: () => {
          console.log('Payment successful!');
        },
        onError: (error) => {
          if (error.message.includes('insufficient')) {
            // Show deposit option
            open({ mode: 'deposit', asset: { chainId: 8453, symbol: 'USDC' } });
          }
        },
      });
    } catch (error) {
      console.error('Payment error:', error);
    }
  };

  return <button onClick={handlePay}>Pay $10.00</button>;
}

Next Steps

• Transactions - Understand transaction handling
• Gas Sponsorship - Learn about gas fee sponsorship