feat: responsive wallet modal with Freighter, Albedo & Rango support

[oscar24357]

closes #525

Summary by CodeRabbit

• New Features

  • Added support for connecting with the Rango wallet, including a link for installation when it isn’t available.
  • Added wallet-specific icons and improved connection loading feedback.
  • Wallet selection now supports keyboard controls and clearly indicates the selected option.

• Bug Fixes

  • Prevented connection attempts without a wallet selection or while a connection is already in progress.
  • Wallet selection resets when the modal is reopened.
  • The wallet modal now closes automatically after a successful connection.

• Accessibility

  • Improved screen reader support with accessible wallet selection roles and states.

[drips-wave]

@oscar24357 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[coderabbitai]

📝 Walkthrough

Walkthrough

WalletModal now supports Rango, wallet-specific SVG icons, keyboard-accessible selection, guarded connection actions, loading states, automatic closing after connection, and expanded accessibility tests.

Changes

Multi-wallet selector

Layer / File(s)	Summary
Wallet catalog and modal state foundations apps/web/src/providers/StellarWalletProvider.tsx, apps/web/src/components/organisms/wallet-modal.tsx	Adds Rango wallet metadata and install URL support, plus wallet icon mappings and modal state effects.
Accessible wallet selection and connection flow apps/web/src/components/organisms/wallet-modal.tsx	Adds radio semantics, mouse and keyboard selection, guarded connection handling, and animated loading states.
Modal behavior and accessibility validation apps/web/src/components/organisms/wallet-modal.test.tsx	Tests rendering, selection, connection behavior, auto-close behavior, loading states, and ARIA attributes.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant WalletModal
  participant StellarWalletProvider
  User->>WalletModal: Select wallet by click or keyboard
  WalletModal->>WalletModal: Set activeSelection
  User->>WalletModal: Activate Connect Now
  WalletModal->>StellarWalletProvider: connect(activeSelection)
  StellarWalletProvider-->>WalletModal: Update connection state
  WalletModal->>WalletModal: Close when isConnected becomes true

Loading

Possibly related PRs

• Fundable-Protocol/stellar_client_os#68: Modifies wallet modal accessibility and keyboard interaction markup.
• Fundable-Protocol/stellar_client_os#144: Modifies the wallet modal connection flow and error handling.
• Fundable-Protocol/stellar_client_os#577: Modifies wallet modal keyboard and dialog focus behavior.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: a responsive multi-wallet modal with Freighter, Albedo, and Rango support.
Linked Issues check	✅ Passed	The PR implements the requested responsive wallet selector, adds Rango support, improves accessibility and loading states, and includes component tests.
Out of Scope Changes check	✅ Passed	The changes stay within the wallet modal and provider scope and do not introduce unrelated functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 5

🤖 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 `@apps/web/src/components/organisms/wallet-modal.test.tsx`:
- Around line 13-17: Expand the defaultWallets fixture in the wallet modal
regression test to include every wallet supported by StellarWalletProvider,
specifically xBull, Rabet, and Lobstr, using their provider IDs, names, and
icons. Keep the existing wallet entries unchanged so the test covers the
complete provider-supported list.
- Around line 147-159: Add regression tests alongside the existing
keyboard-selection tests in wallet-modal.test.tsx for the radio group’s
arrow-key behavior: Right/Down should move focus and selection to the next
wallet, while Left/Up should move to the previous wallet, including wraparound
if supported by the component. Use the existing wallet-option test IDs and
assert the selected option’s aria-checked state after each key event.

In `@apps/web/src/components/organisms/wallet-modal.tsx`:
- Around line 78-81: Remove the eager setIsModalOpen(false) call from
StellarWalletProvider.connect before getAddress() resolves, while preserving
modal closure through the wallet-modal.tsx effect when isConnected becomes true.
Ensure failed or pending connections keep the modal open and retain the existing
auto-close behavior after successful connection.
- Around line 94-99: Update the wallet option keyboard behavior around
handleKeyDown and the option rendering so the group follows radiogroup
semantics: keep exactly one option tabbable via roving tabIndex, move focus and
selection to the previous/next option on ArrowUp/Down/Left/Right with
wraparound, and retain Enter/Space selection. Ensure the active option’s
tabIndex and focus state stay synchronized when the selection changes.

In `@apps/web/src/providers/StellarWalletProvider.tsx`:
- Line 169: Add the missing rango.png asset under the public icons directory so
the icon path used by the supportedWallets entry for id "rango" resolves
successfully. Preserve the existing icon reference and filename.

🪄 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: 460d817b-0c42-4a63-8f79-79441c79b6b0

📥 Commits

Reviewing files that changed from the base of the PR and between 375c936 and 8c06fdc.

📒 Files selected for processing (3)

• apps/web/src/components/organisms/wallet-modal.test.tsx
• apps/web/src/components/organisms/wallet-modal.tsx
• apps/web/src/providers/StellarWalletProvider.tsx

[oscar24357]

Hello maintainer, good evening. Can you please award this points to me on drips..thank you

[oscar24357]

hello maintainer, can you please award this point to me on drips

[Idrhas]

dont forget to offramp using https://stellar.fundable.finance/offramp its fast, free and p2p rates