Build the anchor deposit/withdraw funding flow UI wired to /api/anchor endpoints

[Baskarayelu]

📋 Description

RemitWise has a full anchor integration on the server — lib/anchor/client.ts, lib/anchor/flow-store.ts, rate caching in lib/anchor/rates-cache.ts, and the routes app/api/anchor/deposit/route.ts, app/api/anchor/withdraw/route.ts, and app/api/anchor/rates/route.ts. But there is no user-facing way to fund or withdraw — no page consumes these routes. Users can split and send, but the on/off-ramp that makes that possible is invisible.

This issue builds a fund/withdraw flow: choose direction, see live rates, enter amount, review, and track the anchor flow status.

Why this matters: without an on/off-ramp UI, the wallet is a closed loop — there's no way to get money in or out through the anchor. This is the connective tissue between fiat and the Stellar rails the whole product depends on.

🎯 Requirements & Context

Functional requirements

• Add a fund/withdraw flow (new route under app/) with deposit and withdraw directions.
• Display live exchange rates from /api/anchor/rates (cached, with a refresh affordance).
• Build deposit via /api/anchor/deposit and withdraw via /api/anchor/withdraw, tracking interactive status from lib/anchor/flow-store.ts.
• Multi-step review + confirm; reuse the async submission UX from components/AsyncSubmissionStatus.tsx.
• Wallet connection gating via components/WalletButton.tsx.

Context & constraints

• Use the session-aware lib/client/apiClient.ts; amounts formatted with the shared currency formatter.
• Handle rate staleness (show timestamp, warn when stale).

🛠️ Suggested Execution

1. Fork & branch

git checkout -b feature/anchor-fund-withdraw-flow

2. Implement changes

• Build the flow page + a useAnchorFlow hook orchestrating rates, build, and status polling.
• Add TSDoc and a doc page describing the deposit/withdraw lifecycle.
• Edge cases: disconnected wallet, stale rate, withdraw exceeding balance, anchor flow failure/timeout, a11y multi-step, responsive, i18n (en/es), loading/error states.

3. Test & commit

npm run lint
npx tsc --noEmit
npm run test:coverage
npm run build

Example commit message

feat(anchor): build deposit/withdraw funding flow UI

Adds a multi-step fund/withdraw flow wired to /api/anchor rates, deposit, and
withdraw with live rates, wallet gating, and interactive flow status.

✅ Acceptance Criteria & Guidelines

Requirement	Target
Deposit + withdraw wired to all three anchor routes	Required
useAnchorFlow unit-tested	≥ 85% lines/branches
Stale-rate handling	Required
a11y multi-step + responsive	Required
i18n en + es	Required
lint + tsc --noEmit + build clean	Required
Timeframe	96 hours from assignment

💬 Community & Support

Questions and design discussion — join the RemitWise contributor community on Discord: https://discord.gg/CtQuPZFMA

Advanced — ping us in the channel for context before you start. 🚀

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[happyboy24]

CAN I WORK ON THIS PLEASE

[grantfox-oss]

🦊 GrantFox — @happyboy24 has been assigned to this issue!

Next steps:

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

Good luck! Track your progress on GrantFox.