Settings

Settings payouts

The Payouts pane of space settings, combining a balance card with a withdraw action and a paginated history of past withdrawals.

Open in Storybook

Available

Ports as-is

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Settings payouts

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`balance`	`number`	`0`	Cleared balance, in dollars. Formatted with `toLocaleString` at render.
`withdrawals`	`PayoutWithdrawal[]`	`[]`	History rows. Defaults to an empty list.
`onManageBank`	`() => void`	—	Opens the bank-details screen.
`onWithdraw`	`(amount: string) => void`	—	Fired by the withdraw dialog's confirm, with the raw field text.
`page`	`number`	—	Zero-based page of the desktop history table.
`onPageChange`	`(page: number) => void`	—	Undocumented — add TSDoc to the prop in the library.
`pageSize`	`number`	`20`	Rows per page.
`isMobile`	`boolean`	`false`	Overrides the mobile fork: the withdraw sheet is a full-screen Dialog below `md` and an AlertDialog at and above it.
`defaultWithdrawOpen`	`boolean`	`false`	Opens the withdraw dialog on mount.
`initialWithdrawAmount`	`string`	`""`	Seeds the withdraw amount field.
`className`	`string`	—	Undocumented — add TSDoc to the prop in the library.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/settings/SettingsPayouts.tsx
Portability: Copies across unchanged — only the utils import path moves.
Variants: status: completed | pending | failed
Notes: Use it to show an operator their cleared balance alongside recent payout activity. The desktop view renders a paginated table while mobile shows an unpaginated stacked list, and the withdraw dialog only reports the entered amount through a callback rather than moving any money.