Skip to content

[SC-03] Integrate Freighter wallet connect in the frontend #1115

Description

@yusuftomilola

Overview

All user-facing blockchain features (tokenization [SC-04], dividends [SC-05], voting [SC-06]) require users to sign transactions with their own Stellar wallet. The standard is the Freighter browser extension. No wallet integration exists in the frontend.

What to Build

  1. A frontend/lib/stellar/ module wrapping the Freighter API (@stellar/freighter-api): detect availability, connect, get public key, sign transaction XDR, network guard (warn when wallet network ≠ app network)
  2. A WalletProvider (React context or Zustand slice, matching frontend/store/auth.store.ts conventions): connection state, address, connect/disconnect actions, persistence of "previously connected" for silent reconnect
  3. Topbar wallet button: connect → truncated address (GDXF…K3LQ) with copy + disconnect dropdown; "install Freighter" fallback linking to the extension when not detected
  4. Optionally associate the wallet address with the user profile (PATCH /api/users/me gains stellarAddress) so the backend can verify ownership later

References

  • Consumed by [SC-04], [SC-05], [SC-06]
  • Conventions: see the auth store and topbar (frontend/components/layout/topbar.tsx)

Acceptance Criteria

  • Connect/disconnect round-trip works against Freighter on testnet
  • Wrong-network state detected and clearly messaged
  • Address persisted and silently reconnected on revisit (when authorized)
  • A demo signing call (any innocuous transaction) succeeds end-to-end

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions