Implement SEP-24 Anchor Deposit and Withdrawal Modal Flow

[Cjay-Cyber-2]

Description — what to implement and the why/impact.

Users need a seamless way to on-ramp and off-ramp fiat currencies into Stellar assets (such as USDC) directly within the Mergepay web application without leaving the interface. This issue implements a SEP-24 anchor deposit and withdrawal modal flow that integrates with configured Stellar anchors.

Context & Requirements — background, constraints, design references, edge cases; grounded in the actual repo (real files, stack, conventions).

The app connects to Stellar anchors via SEP-24 interactive flows. We need a dedicated modal in src/components/ that initiates the deposit/withdrawal session, handles popup or iframe embedding securely, and tracks transaction statuses using @stellar/stellar-sdk and Zod validation for asset selection (src/lib/types.ts). The UI must follow our neobrutalist design system using existing primitives (Card, Button, Dialog).

Acceptance Criteria — a checklist ("- [ ] ...") of specific, testable conditions that define "done".

• Create a SEP-24 deposit/withdrawal modal component under src/components/anchors/.
• Integrate Zod schema validation for asset and amount inputs.
• Handle anchor interactive popup responses and error states gracefully.
• Ensure all forms use proper ARIA attributes and are fully keyboard-navigable.
• Pass npm run typecheck, npm run lint, and npm test without errors.

Implementation Guidance — likely files/modules to touch (use real paths from the repo context) and a suggested approach, without over-prescribing.

• Touch src/lib/types.ts for SEP-24 payload types if needed.
• Create src/components/anchors/AnchorModal.tsx leveraging existing UI primitives from src/components/ui/.
• Use react state and @tanstack/react-query mutations to manage anchor session requests.

Testing & Validation — how the contributor should prove it works (tests to add/run, manual checks, screenshots for UI).

• Add unit tests for anchor parameter building and response handling in src/lib/__tests__/.
• Verify UI responsiveness on mobile and desktop viewports.
• Run npm test to ensure all tests pass.

Submission Guidelines — must open a PR that includes "Closes #"; assignment is required before starting; follow the repo's existing style and conventions.

---

Wave complexity: Medium

[Ranjeet2063]

Hello @maintainers,

I can tackle Implement SEP-24 Anchor Deposit and Withdrawal Modal Flow. Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in mergepay/mergepay-web
• Implementation: Build Implement SEP-24 Anchor Deposit and Withdrawal Modal Flow with modular React/Next.js components, responsive styling, and proper loading/error states.
• Testing: Include component tests and verify clean production build with zero TypeScript/lint issues.
• PR: Atomic commit with clean git hygiene and passing CI

Happy to pick this up today—please assign to me!