Accounts Quick View

Part ofEmbedded Banking↗

A compact dashboard tile with the organization's total available balance across every bank account, the account count, and a View accounts link into your accounts page.

Quick Start

import { AccountsQuickViewWidget } from '@tesouro/embedded-components-react';

export function DashboardTiles() {
  return (
    <AccountsQuickViewWidget
      baseUrl="https://api.example.com"
      widgetToken="wt_live_abc123"
      organizationId="org_xyz"
      onTileClick={() => router.push('/accounts')}
    />
  );
}

All widget props are optional. The widget reads no URL or router; you own navigation via onTileClick.

Behaviour

• The total and the count use live balances, from the same read as BalancesWidget. The total is in the first account's currency; accounts in any other currency are left out of it rather than converted, and the count line then says so ("3 of 5 accounts, USD only", the accountCountInCurrency label). The amount is formatted at the currency's own precision, so 12,000 yen shows as ¥12,000; BalancesWidget currently assumes two decimals, so the two disagree for zero- and three-decimal currencies.
• The whole tile is one button when you pass onTileClick. Without it the tile is static, with no chevron and no View accounts link.
• The widget renders nothing when the token lacks bank_account:read:org. Write scopes aren't needed.
• The widget also renders nothing for an org with no accounts. A failed load shows an error with Retry.

Props

Widget props

Examples

Custom width

The tile is 320px wide by default and never wider than its container. The widget's own styles sit in a cascade layer, so any rule in your stylesheet wins without !important:

.accounts-tile {
  display: block;
  width: auto;
}

<AccountsQuickViewWidget className="accounts-tile" />
// or inline
<AccountsQuickViewWidget style={{ width: '100%' }} />

Custom labels (i18n)

<AccountsQuickViewWidget
  labels={{
    title: 'Saldo disponible total',
    viewAccounts: 'Ver cuentas',
    accountCount: (count) => `${count} ${count === 1 ? 'cuenta' : 'cuentas'}`,
  }}
/>

See the exported AccountsQuickViewWidgetLabels type for every key.

TypeScript

import type {
  AccountsQuickViewWidgetProps,
  AccountsQuickViewWidgetLabels,
} from '@tesouro/embedded-components-react';