fix(web): fix #1063 add confirmation dialog for auto top up transfer

[Owolabenjade]

Close issue #1063

This PR addresses issue #1063 where the auto_top_up dashboard button (apps/web/app/app/page.tsx) executed an on-chain fund transfer moving collateral shortfall from reserve to collateral escrow immediately upon a single click, with no preview or confirmation step.

Unlike DepositWizard which provides preview and confirmation steps before executing financial transactions, the auto_top_up button previously lacked any confirmation safeguard. This created a security and usability risk where importers could accidentally execute an irrevocable on-chain fund transfer without reviewing the exact transfer amount or confirming their intent.

Solution & Flow

• Modified apps/web/app/app/page.tsx to introduce a local showTopUpConfirm state (useState(false)).
• Intercepted the primary auto_top_up button onClick handler to trigger setShowTopUpConfirm(true) instead of invoking handleTopUp() directly.
• Added a lightweight modal dialog (fixed inset-0 z-50 bg-black/60 backdrop-blur-sm) that displays:
  • Transfer Amount: Exact amount in XLM (stroopsToXlm(shortfall.toString())).
  • Account Balances Preview: Source bucket (Reserve Pool balance) and target bucket (Collateral Escrow).
  • Cancel Action: Dismisses the modal (setShowTopUpConfirm(false)), leaving balances completely unchanged without executing api.autoTopUp.
  • Confirm & Transfer Action: Dismisses the modal and invokes handleTopUp().
• Maintained the existing disabled state (disabled={busy !== null || shortfall === 0n}) on the primary trigger button.

Value & Impact

This change resolves financial transaction safety concerns for issue #1063, ensuring importers preview exact transfer amounts and confirm intent before initiating on-chain transfers.

Changed

• apps/web/app/app/page.tsx: Added a confirmation modal step for auto_top_up fund transfers showing the exact transfer amount in XLM with cancellation safety while preserving disabled behavior when no shortfall exists, fixing auto_top_up button executes an on-chain fund transfer with a single click and no confirmation #1063.

Testing

The component modifications were verified using the following static analysis scripts:

# Verify TypeScript compilation and type safety
npm run typecheck --workspace=apps/web

# Verify zero ESLint warnings or code style issues
npm run lint --workspace=apps/web

[drips-wave]

@Owolabenjade Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tariff-shield-web	Error		Aug 27, 2026 5:59pm