Skip to main content

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​

PropTypeRequiredDescription
isOpenbooleanYesControls modal visibility
onClose() => voidYesCalled when modal should close
onError(error: Error) => voidNoCalled 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​

PropTypeRequiredDescription
openbooleanYesControls modal visibility
onOpenChange(open: boolean) => voidYesCalled when modal state changes
asset{ chainId: number; symbol: string }NoPre-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​