feat: multi-wallet support beyond Freighter

[brightpixel-dev]

Summary

Expand wallet support from Freighter-only to a full wallet selection modal supporting xBull, Lobstr, Albedo, Rabet, and WalletConnect. Today, anyone without the Freighter browser extension is blocked from using Crate. Mobile users have zero options.

Why

• Freighter is desktop-only and Chrome/Firefox only. Safari, mobile browsers, and Brave users are locked out.
• In the target markets (West Africa, East Africa), mobile internet dominates. A desktop-only wallet = a dead product.
• @creit.tech/stellar-wallets-kit already supports multiple wallet modules — we're only using FreighterModule today.
• Lobstr and xBull have the largest mobile Stellar user bases. Supporting them unlocks the mobile web market.

What to build

1. Wallet selection modal (src/components/WalletModal.tsx)

• Replaces the current Freighter-only connect() call
• Shows a grid of supported wallets with icons and names:
  • Freighter — browser extension (Chrome, Firefox)
  • xBull — browser extension + mobile wallet
  • Lobstr — mobile wallet (iOS, Android)
  • Albedo — web-based wallet (no install)
  • Rabet — browser extension
  • WalletConnect — protocol (bridges to 300+ wallets)
• Each wallet shows: name, icon, description, "Recommended" badge for the best match
• Auto-detect installed wallets and highlight them
• Show "Not installed → Install" link for missing browser extensions
• Modal has search/filter if >4 wallets

2. Extend useWallet() hook

• Register all wallet modules in StellarWalletsKit:

  modules: [
    new FreighterModule(),
    new XBullModule(),
    new AlbedoModule(),
    new RabetModule(),
    new LobstrModule(),
    // WalletConnect if projectId is configured
  ]

• connect() opens the new wallet modal instead of calling kit.openModal directly
• Store selectedWalletId in localStorage alongside the address
• On reconnect, restore the exact wallet module (not just address)
• disconnect() clears both address and wallet ID

3. Wallet detection utilities (src/utils/walletDetect.ts)

• detectAvailableWallets(): WalletOption[] — checks window.freighter, window.xBull, window.albedo, window.rabet
• Returns sorted list: installed wallets first, then installable ones
• Each WalletOption has: id, name, icon, isInstalled, installUrl, description

4. Mobile wallet deep links

• For Lobstr and xBull on mobile: generate wallet connect deep links
• When on mobile browser and wallet is not injected, show "Open in Lobstr" / "Open in xBull" buttons
• Deep link format: lobstr://connect?... / xbull://connect?...
• Fallback: WalletConnect QR code for any mobile wallet

5. WalletInfo in Navbar

• Show connected wallet name + truncated address in WalletButton
• Dropdown: wallet name, address (with copy), balance, network, disconnect
• Different icons per wallet type

Files to modify

• src/hooks/useWallet.ts — register all modules, store wallet ID
• src/components/WalletButton.tsx — open new modal, show wallet name
• src/components/WalletModal.tsx — new file
• src/utils/walletDetect.ts — new file
• src/App.tsx — wrap with WalletConnect provider if configured

Environment config

VITE_WALLETCONNECT_PROJECT_ID=<optional-wc-project-id>

Acceptance criteria

• User sees a wallet selection modal when clicking "Connect Wallet"
• At least 5 wallets are listed: Freighter, xBull, Lobstr, Albedo, Rabet
• Installed wallets are highlighted; missing ones show install links
• Connected wallet name is displayed in the Navbar
• Disconnect clears the correct wallet session
• Works on mobile browsers (deep links for Lobstr/xBull)
• WalletConnect QR code flow works for unsupported wallets
• Existing Freighter users see no regression — auto-reconnect still works

Labels

enhancement Maybe Rewarded GrantFox OSS Official Campaign | FWC26

[Benedict315]

Hello please assign me to this issue

[blurbeast]

hello Boss, can i jump on this please ??

[grantfox-oss]

🦊 GrantFox — @blurbeast has been assigned to this issue as part of the Third Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #16)
2. Your PR will be reviewed by the Crate-Protocol maintainers

Good luck! Track your progress on GrantFox.