Fee Calculator FAQ Block for React

Edit SPEEDS at the top of the file: each speed has a label, when it arrives, a flatCents part, a percentage part in basis points (rateBps) with its minCents and maxCents, and a limitCents ceiling. feeCents turns an amount and a speed into the fee, rounded to a whole cent. The answers about fees and limits are built from the same table, so changing a number changes the calculator and the text together.

Digits and one dot; anything else is ignored when the amount is read, so "1,200" works. An empty amount shows dashes and says "Enter an amount to see the fee." An amount over the speed's ceiling shows dashes too and names the ceiling, so nobody reads a fee for a transfer that can't be sent. The status line under the figures is a polite live region, read out as the amount or the speed changes.

Money is formatted by one Intl.NumberFormat for US dollars, and each amount sits in its own dir="ltr" span, so a "$2.99" keeps its order in right-to-left layouts. The figures are labelled "Example figures only", once, under the calculator. To use another currency, change USD and the $ in the field.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". The calculator keeps its values when its question is closed and opened again.

Each question is a button inside its own h3 under the section's h2. Tab moves from a question to the amount field, then to the speed control, which is a radio group: arrow keys move between Standard, Instant and Wire and choose as they go. The amount field is named "Amount to send", and the three figures are a description list a screen reader reads as pairs.

Below the lg breakpoint the title stacks above the questions, the rows run from rail to rail, and inside the open answer the amount field and the speed control stack, with the figures under them. The status line keeps room for two lines, so choosing a speed never moves what's below. Nothing scrolls sideways at 320 pixels.