Credit Balance Success Block for React

Everything: the page describes a top-up that already happened for a fictional account, so nothing is bought and no balance is stored. Render it after your payment provider confirms the charge and your ledger has the new batch, and pass your own batches in CREDITS: an amount in cents, an expiry date, a name, and fresh: true on the one just added. The Start writing link is a placeholder href.

From the ledger, never typed twice. The new balance is the sum of every batch, the change is the sum of the fresh ones, the old balance is the rest, and the heading, the big figure and the pill all read those three numbers. Each row's "in 78 days" is the distance between two fixed ISO dates (AS_OF and its expiry), so it reads the same on every visit instead of following the visitor's clock.

Because it decides whether anything is lost. The ledger is sorted by expiry and the soonest row carries the Used first badge, which is only true if your spending code takes credit in that order, oldest expiry first. If yours works differently, change bySoonest and the badge so the page says what your product does.

The balance counts from the old figure to the new one through every number on the way, slowing into the last digits. Screen readers read the new balance once and never the count, and with reduced motion, or with no script, the new figure is shown at once. The change pill and the heading never move.

Amounts are whole cents written with Intl.NumberFormat in a fixed en-US locale, each in one left-to-right span so digits and signs keep their order on a right-to-left page; the big figure is a left-to-right line of $ and the counting digits. Dates are Intl.DateTimeFormat in UTC, kept in time elements.