[Feature] Build Transaction Flow UX with Form Validation, Preview, Confirmation, and Progress Tracking

[KarenZita01]

Description

The frontend has no form validation, no transaction confirmation dialogs, and no user guidance for complex blockchain interactions. Creating streams, registering meters, submitting readings, and configuring gas buffers all require careful parameter validation before submitting to the blockchain.

Form/transaction UX gaps:

• No form library (react-hook-form, formik) for complex forms
• No field validation with error messages
• No transaction preview before signing (show what will happen)
• No gas estimation display before transaction submission
• No transaction confirmation steps (are you sure?)
• No success/failure feedback after transaction confirmation
• No pending transaction progress tracking
• No multi-step wizard for complex operations (register meter)
• No input formatting (address auto-format, number formatting)

Technical Context & Impact

• Affected Components/Files: src/components/forms/ (missing), src/components/transactions/ (missing)
• Impact: Poor UX, user errors in blockchain transactions (irreversible mistakes)

Step-by-Step Implementation Guide

1. Install form library: npm install react-hook-form @hookform/resolvers zod
2. Set up Zod schemas: src/lib/schemas/:
   • meterSchema.ts - meter ID range, public key format, billing type, token address
   • streamSchema.ts - stream rate range, duration limits, recipient validation
   • gasBufferSchema.ts - top-up amount range, minimum balance check
   • billingSchema.ts - payment amount, billing period selection
3. Create form components: src/components/forms/:
   • MeterRegistrationForm.tsx - with wallet address validation, meter type selection
   • CreateStreamForm.tsx - with real-time rate calculator, recipient search
   • GasBufferForm.tsx - with recommended top-up amount, balance display
   • BillingSettingsForm.tsx - with auto-pay toggle, payment method selection
4. Implement transaction preview: src/components/transactions/TransactionPreview.tsx:
   • Shows operation summary: "You are about to: Create a stream of 100 USDC/hour to address G..."
   • Gas fee estimate
   • Network (testnet/mainnet) warning
5. Create transaction confirmation dialog: src/components/transactions/ConfirmDialog.tsx:
   • "Are you sure?" with details summary
   • "Remember: blockchain transactions are irreversible"
   • Submit and Cancel buttons
6. Add transaction progress tracker: src/components/transactions/TxProgress.tsx:
   • Steps: Building -> Signing -> Submitting -> Confirming -> Confirmed
   • Estimated time remaining
   • Link to Stellar Expert explorer for transaction hash
7. Implement address validation: Realtime check that Stellar addresses match format G... with valid checksum

Verification & Testing Steps

1. Test form validation: submit empty form -> all required fields show error messages
2. Test meter registration flow: fill form -> preview -> confirm -> success feedback
3. Test invalid address: enter "invalid address" -> inline validation error shown
4. Test transaction progress: submit -> see progress through states -> see explorer link
5. Test gas estimation: form shows estimated gas before submission
6. Run npx tsc --noEmit and verify type safety