feat: add reusable wallet transaction confirmation modal

[Duyicoda]

Overview

This PR adds a reusable Wallet Transaction Confirmation Modal system that displays transaction details (type, amount, wallet address, network, estimated fee) before submission and updates confirmation status in real time through pending, success, and failed states — with transaction hash copying, explorer links, and retry handling for a smooth user experience.

Related Issue

Changes

🔄 Transaction Confirmation Modal

• [ADD] components/transaction-confirmation-modal.tsx

  • Reusable modal component with dynamic status states (pending, success, failed) that update in real time via callbacks.
  • Displays transaction type, amount with currency/token symbol, sender wallet address, network (Mainnet/Testnet), and estimated transaction fee.
  • Includes transaction hash with copy button and explorer link after successful submission.
  • Responsive layout that adapts to desktop and mobile viewports.

• [MODIFY] components/dashboard/escrow-funding-dialog.tsx

  • Integrates the new confirmation modal into the escrow funding workflow, wiring status callbacks and retry logic.

• [MODIFY] components/stellar/TransactionHash.tsx

  • Adds copy-to-clipboard behavior and explorer hyperlink generation for completed transactions.

• [MODIFY] lib/stellar/transaction-builder.ts

  • Extends transaction result data with estimated fee and metadata required by the confirmation modal.

• [MODIFY] lib/hooks/use-freighter.ts

  • Exposes pending/success/failed status and the transaction hash from the Freighter sign-and-submit lifecycle.

• [MODIFY] lib/stellar/explorer.ts

  • Adds helper to build Stellar/Ethereum explorer URLs from a transaction hash.

Verification Results

npm run build
✅ TypeScript compile passed

npm test
✅ All existing tests passed

Manual acceptance check (Testnet / Freighter):
✅ Pending → success state transition verified in real time
✅ Transaction hash copy button verified
✅ Explorer link opens Stellar Expert with correct hash
✅ Responsive layout verified at 375px and 1280px viewports
✅ Failed transaction shows clear error message with retry option

Acceptance Criteria	Status
Pending/success/failed states update in real time	✅ Verified on Testnet with Freighter sign-and-submit flow
Transaction hash with copy button	✅ Copy button copies hash to clipboard
Explorer link after successful transaction	✅ Directs to Stellar/Ethereum explorer for verification
Responsive design — desktop and mobile	✅ Adaptive layout confirmed at 375px and 1280px
Error handling — clear messaging and retry	✅ Failed state shows detailed error with retry action
Reusable component	✅ Exportable and integrated into escrow funding dialog

Closes #184

[drips-wave]

@Duyicoda 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