Skip to content

[V2 200pts] Add withdrawal confirmation modal with full address display and post-submission status screen #259

Description

@portableDD

Summary

Add a confirmation step to the withdrawal flow and a post-submission status tracking screen. Withdrawals move real money — users must explicitly confirm the destination address before submission, and must be able to track the withdrawal status after submission.

What Needs to Be Done

1. Withdrawal confirmation modal

Before calling POST /transactions/withdraw, show a confirmation modal:

You are withdrawing:
  500 USDC
  To: GABCD...WXYZ (full address shown, truncated for display)
  
This action cannot be undone. Funds sent to an incorrect address cannot be recovered.

[Cancel]   [Confirm Withdrawal]
  • Show the full destination address (not truncated — user must verify it fully)
  • Warning text about irreversibility must be visible
  • "Confirm Withdrawal" button triggers the API call

2. Post-submission status screen

After successful POST /transactions/withdraw call:

  • Show a "Withdrawal submitted" screen (not just a toast)
  • Display: transaction ID, amount, currency, destination address, estimated processing time
  • "View in transactions" link → navigates to /dashboard/transactions
  • "Make another withdrawal" link → resets the form
  • Do not navigate away automatically — let the user control the next step

3. components/dashboard/withdraw/withdrawal-confirmation-modal.tsx

  • Props: amount, currency, destinationAddress, onConfirm, onCancel, isLoading
  • Loading state on confirm button while API call is in flight
  • Closes automatically on success (parent handles navigation to status screen)

4. components/dashboard/withdraw/withdrawal-success.tsx

  • Shows after successful withdrawal submission
  • Props: transaction: Transaction

Acceptance Criteria

  • Confirmation modal appears before any API call is made
  • Full destination address visible in confirmation (not truncated)
  • Irreversibility warning is present in the confirmation modal
  • Success screen appears after submission (not just a toast)
  • Success screen shows transaction ID and all relevant details
  • npm run build and npm run lint pass

⚠️ IMPORTANT — READ BEFORE SUBMITTING YOUR PR
Your pull request MUST target the v2 branch.
PRs targeting main or any other branch will not be reviewed and will not be merged.
Double-check your base branch before opening the PR:

Base branch: v2   ✅
Base branch: main ❌  → will be closed without review

Complexity: High — 200 points

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions