refactor(amount): extract shared radio selector for preference modals

[raul-oliveira]

Acceptance Criteria

• The radio-selector and save-button markup shared by the Amount Format and Address Mode preference modals is extracted into reusable presentational components (Radio/{RadioButton,RadioOption,RadioGroup}, PreferenceSaveButton) and shared SCSS, mirroring wallet-mobile#893
• The Amount Format modal renders pixel-identically to before
• Address Mode adopts the unified styling with no behaviour change

Third of 6 PRs. Stacked on #893 — base branch is raul-oliveira/feat/amount-format-sweep, not master. Review #893 first.

What changed

• Four presentational components under src/components/Radio/ plus PreferenceSaveButton; a Radio/index.js barrel exposes the group.
• src/index.module.scss: the radio/option/save-button rules duplicated across .amount-format and .address-mode are hoisted into shared .radio-group / .radio-option / .radio-button / .preference-save-btn blocks, and the superseded per-modal selectors removed. .address-mode-alert and the Amount-Format-specific preview blocks are kept.
• Both modals become thin — they own state and behaviour, the components own presentation.

Address Mode restyle: its radio circle (24→26px) and save button (185→226px) now match the shared Amount Format sizing — an intended visual unification. Behaviour is untouched: the hasTxOutsideFirstAddress guard, single-address disabling, the warning banner (Learn more via helpers.openExternalURL) and wallet-reload-on-save all preserved. As a side benefit each option's <label> is now wired to its <input> (htmlFor/id), which the old Address Mode markup lacked.

Out of scope (follow-up): both modals still call $('#id').modal('show') directly instead of GlobalModal's manageDomLifecycle, so Escape or an outside click can discard a selection. Pre-existing, affects both, left for a separate issue to keep this a pure refactor.

Testing

Suite unchanged from #893: the same 7 pre-existing suites fail on the Jest/axios ESM issue (see #892), 33 passed. No new strings (existing ones only relocated), so make update_pot is a no-op.

Manual QA needed

• Amount Format modal is pixel-identical to before this PR.
• Address Mode, wallet with transactions outside the first address: Single is disabled and greyed, the warning banner shows, Save stays disabled.
• Address Mode, fresh wallet: Single is selectable, Save enables on change, saving reloads the wallet into single-address mode.
• Keyboard: both modals operable with Tab and arrow keys; clicking the label selects the option.

Security Checklist

• Make sure you do not include new dependencies in the project unless strictly necessary and do not include dev-dependencies as production ones. More dependencies increase the possibility of one of them being hijacked and affecting us.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 1bd4668c-6201-4478-b68d-0e71ae1ca46d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch raul-oliveira/feat/amount-format-radio

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}