Wallet

Code

import { Wallet } from "@fadymondy/nasaq/web";export function MyWallet() {  return (    <Wallet      balance={1250.5}      pending={100}      currency="USD"      sources={[{ id: "visa", label: "Visa ending 4242" }]}      destinations={[{ id: "bank", label: "Al Rajhi Bank", description: "SA03 **** 1234" }]}      transactions={[{ id: "t1", type: "topup", amount: 200, status: "completed", date: new Date(), description: "Top-up" }]}      onTopUp={async ({ amount, sourceId }) => api.topUp(amount, sourceId)}      onPayout={async ({ amount, destinationId }) => api.payout(amount, destinationId)}    />  );}

Billing · beta

Live examples and controls: Wallet in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/wallet.json

A prepaid balance in one piece: the balance with a 30-day trend, Add funds and Withdraw dialogs that validate the amount against limits, and a transaction list grouped by day with a money in / money out filter. It never moves money itself: your async callbacks do, and the dialogs show their busy and error states.

When to useCopy Anchor Link

• Prepaid credit, marketplace balances, payouts to a bank.

When not to useCopy Anchor Link

• Recurring subscription payment: use CheckoutSteps.
• Invoice history: use InvoiceList.

ImportCopy Anchor Link

import { Wallet, type WalletTransaction } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Wallet } from "@fadymondy/nasaq/web";

export function MyWallet() {
  return (
    <Wallet
      balance={1250.5}
      pending={100}
      currency="USD"
      sources={[{ id: "visa", label: "Visa ending 4242" }]}
      destinations={[{ id: "bank", label: "Al Rajhi Bank", description: "SA03 **** 1234" }]}
      transactions={[{ id: "t1", type: "topup", amount: 200, status: "completed", date: new Date(), description: "Top-up" }]}
      onTopUp={async ({ amount, sourceId }) => api.topUp(amount, sourceId)}
      onPayout={async ({ amount, destinationId }) => api.payout(amount, destinationId)}
    />
  );
}

AnatomyCopy Anchor Link

Wallet                           data-slot="wallet"
├─ WalletBalance                 balance (hide/show), pending, Sparkline trend, Add funds, Withdraw
├─ WalletTransactions            filter ToggleGroup, day groups, rows with status
├─ TopUpDialog                   presets, amount field, source RadioCard list
└─ PayoutDialog                  amount, "Withdraw all", destination list

APICopy Anchor Link

WalletCopy Anchor Link

WalletProps extends Omit<ComponentProps<"div">, "children">.

Result is void | { error?: string }.

WalletBalanceCopy Anchor Link

WalletBalanceProps extends Omit<ComponentProps<typeof Card>, "children">: balance, pending?, currency, trend?, onTopUp?, onPayout? (buttons with no arguments), loading?, labels?.

WalletTransactionsCopy Anchor Link

WalletTransactionsProps extends Omit<ComponentProps<"section">, "children">: transactions, currency, loading?, labels?. WalletTransaction: id, type ("topup" | "payout" | "payment" | "refund" | "fee"), signed amount, status ("completed" | "pending" | "failed"), date, description, reference?.

TopUpDialog / PayoutDialogCopy Anchor Link

ExamplesCopy Anchor Link

Balance onlyCopy Anchor Link

<WalletBalance balance={80} currency="USD" onTopUp={() => setOpen(true)} />

Failing top-upCopy Anchor Link

<Wallet balance={0} currency="USD" transactions={[]} sources={sources} onTopUp={async () => ({ error: "Card declined." })} />

ArabicCopy Anchor Link

<NasaqProvider locale="ar">
  <Wallet balance={1250.5} currency="SAR" transactions={[]} />
</NasaqProvider>

AccessibilityCopy Anchor Link

• The balance can be hidden; the hidden state is announced by label.
• Amount errors use FieldError and are announced.
• Direction is shown with an icon and a sign, not colour alone.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Amounts use Intl with currency, Latin digits by default, isolated left to right. Typed amounts accept Arabic-Indic digits and the Arabic decimal mark. References stay left to right.

Styling & tokensCopy Anchor Link

Uses card, border and text tokens plus the success and danger text tokens for direction. Target [data-slot="wallet"]; extend with className. No raw hex.

Do / Don'tCopy Anchor Link

• Do validate again on your server; the dialog checks are for feedback.
• Do send the signed amount in transactions (negative for money out).
• Don't show the balance to people who should not see it.

RelatedCopy Anchor Link

• invoice-list
• checkout-steps
• chart

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-billing-wallet--docs