Skip to content

Add SEP-24 fiat onramp/offramp flow #25

Description

@MJ-RWA

Complexity: High — 200 pts

Summary

SEP-24 is Stellar's standard for interactive fiat deposits and withdrawals via anchors. This issue integrates a SEP-24 flow so users (especially Nigerian users) can deposit NGN and receive USDC — or withdraw USDC back to NGN — directly within StellarFlow using a SEP-24 compatible anchor.

Files to Create/Modify

  • Create: src/lib/sep24.ts
  • Create: src/pages/OnrampPage.tsx
  • Modify: src/App.tsx — add /onramp route
  • Modify: src/pages/DashboardPage.tsx — add Buy/Sell quick action

Implementation Notes

sep24.ts

Three functions:

  1. fetchAnchorToml(homeDomain) — fetch /.well-known/stellar.toml, regex out TRANSFER_SERVER_SEP0024 and WEB_AUTH_ENDPOINT
  2. sep10Authenticate(authServer, address, signTx) — GET challenge transaction, sign with Freighter via the passed signTx callback, POST signed tx, return JWT
  3. initiateDeposit(transferServer, jwt, assetCode) — POST to /transactions/deposit/interactive with Bearer auth, returns { url, id }
  4. pollTransaction(transferServer, jwt, txId) — GET /transaction?id= to check status

OnrampPage

  • Hardcode testanchor.stellar.org for testnet
  • Deposit tab + Withdraw tab, asset selector (USDC)
  • "Start Deposit"/"Start Withdrawal" opens the anchor interactive URL (iframe or new window)
  • Poll /transaction?id= every 3 seconds, show status progression: pending_user_transfer_startpending_anchorcompleted

Acceptance Criteria

  • SEP-1 TOML parsed to discover anchor endpoints
  • SEP-10 JWT obtained by signing challenge with Freighter
  • SEP-24 interactive deposit URL opens correctly
  • Transaction status polled every 3 seconds and displayed
  • Works with testanchor.stellar.org on testnet
  • Withdrawal flow implemented alongside deposit
  • Graceful error if anchor is unavailable

Screen Recording Requirements (using testanchor.stellar.org)

  1. Open Onramp page, click Start Deposit
  2. Anchor interactive iframe/modal opens
  3. Complete the deposit flow in the anchor UI
  4. Status updates: pending → completed
  5. USDC balance increases on the Dashboard

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions