refactor: extract shared Radio components and restyle Address Mode

[raul-oliveira]

Acceptance Criteria

• Extract the duplicated radio selector and save button from the Amount Format and Address Mode screens into shared, reusable components (RadioButton, RadioOption, RadioGroup, PreferenceSaveButton)
• Amount Format keeps its exact look, now composed from the shared components
• Address Mode adopts the Amount Format visual style: a single bordered card with a divider, primary-colored radios, bold titles, muted descriptions and italic hints
• Address Mode preserves its existing behavior: the single-address availability check, the disabled Single option + warning banner, and the "changing address mode" saving modal
• Stacked on feat(decimal): add wallet-wide amount format preference #891 — base branch is feat/amount-format-settings (not master)

Screenshot

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.

Summary by CodeRabbit

• New Features

  • Added reusable radio-selection controls with support for titles, descriptions, badges, hints, and disabled states.
  • Added a shared “Save Preferences” button with active and disabled styling.
  • Updated address mode and amount format settings with consistent radio groups and save actions.

• UI Improvements

  • Added clearer introductory content and streamlined preference-selection layouts.
  • Preserved relevant warnings and selection constraints, including unavailable address modes.

[coderabbitai]

Warning

Review limit reached

@raul-oliveira, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 21 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7f607c32-4bb5-4396-bed5-a4b20ef0731c

📥 Commits

Reviewing files that changed from the base of the PR and between 30a35e3 and 1a81328.

📒 Files selected for processing (10)

• locale/da/texts.po
• locale/pt-br/texts.po
• locale/ru-ru/texts.po
• locale/texts.pot
• src/components/Radio/RadioButton.js
• src/components/Radio/RadioGroup.js
• src/components/Radio/RadioOption.js
• src/components/Radio/index.js
• src/screens/AddressMode.js
• src/screens/AmountFormat.js

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Fix failing CI checks

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/address-mode-restyle

---

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.}

The base branch was changed.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/screens/AddressMode.js (1)

242-255: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Preference-screen layout styles (container, content, intro, groupWrapper, bottomSpacer, buttonContainer) are duplicated verbatim across both screens. Given this PR's own goal of extracting shared preference-selection UI, consider extracting a small shared stylesheet (or a PreferenceScreenLayout wrapper) for these common layout rules so future preference screens don't re-copy them.

• src/screens/AddressMode.js#L242-L255: extract content/intro/introBold/groupWrapper (and the unchanged container/bottomSpacer/buttonContainer below) into a shared stylesheet.
• src/screens/AmountFormat.js#L122-L123: extract groupWrapper (and the unchanged container/content/bottomSpacer/buttonContainer) using the same shared stylesheet.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/screens/AddressMode.js` around lines 242 - 255, Extract the duplicated
preference-screen layout styles into one shared stylesheet and update both
screens to reuse it: in src/screens/AddressMode.js lines 242-255, move content,
intro, introBold, groupWrapper, and the unchanged container, bottomSpacer, and
buttonContainer styles; in src/screens/AmountFormat.js lines 122-123, replace
groupWrapper and the unchanged container, content, bottomSpacer, and
buttonContainer styles with the shared definitions. Preserve each screen’s
existing layout behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/screens/AddressMode.js`:
- Around line 200-205: Update the PreferenceSaveButton disabled state and the
onSave guard to include the in-flight saving state, using isSaveDisabled ||
saving in both places so rapid taps cannot start concurrent wallet mode updates.

---

Nitpick comments:
In `@src/screens/AddressMode.js`:
- Around line 242-255: Extract the duplicated preference-screen layout styles
into one shared stylesheet and update both screens to reuse it: in
src/screens/AddressMode.js lines 242-255, move content, intro, introBold,
groupWrapper, and the unchanged container, bottomSpacer, and buttonContainer
styles; in src/screens/AmountFormat.js lines 122-123, replace groupWrapper and
the unchanged container, content, bottomSpacer, and buttonContainer styles with
the shared definitions. Preserve each screen’s existing layout behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 630d7f56-2240-4cb3-ba4d-55e6a84a2c6f

📥 Commits

Reviewing files that changed from the base of the PR and between b9eb962 and 30a35e3.

📒 Files selected for processing (7)

• src/components/PreferenceSaveButton.js
• src/components/Radio/RadioButton.js
• src/components/Radio/RadioGroup.js
• src/components/Radio/RadioOption.js
• src/components/Radio/index.js
• src/screens/AddressMode.js
• src/screens/AmountFormat.js