Description
After a payment is signed and confirmed on-chain, the UI transitions abruptly from the signing spinner to a status update with no celebratory or reassuring feedback, which creates uncertainty about whether the action succeeded. This issue implements a full-screen payment confirmation animation (a Lottie or CSS-keyframe sequence showing a success state with the transaction amount, recipient, and hash) that plays automatically after on-chain confirmation is detected, then smoothly transitions to the updated invoice view.
Technical Context
Create components/invoice/PaymentConfirmationOverlay.tsx triggered by a paymentConfirmed state emitted from hooks/usePaymentSubmission.ts. The overlay renders as a fixed full-screen layer (z-index: 9999) using a Framer Motion entrance animation or a raw CSS keyframe sequence defined in globals.css. The animation sequence: (1) checkmark draw animation (SVG stroke-dashoffset), (2) amount and recipient label fade-in, (3) transaction hash appear with a copy button, (4) auto-dismiss after 4 seconds or on user click, fading back to the invoice view with the updated status. The overlay must be accessible: add role="status" and aria-live="polite" and announce the confirmation text to screen readers. Provide a prefers-reduced-motion media query fallback that skips the animation and shows a static success card instead.
Acceptance Criteria
Description
After a payment is signed and confirmed on-chain, the UI transitions abruptly from the signing spinner to a status update with no celebratory or reassuring feedback, which creates uncertainty about whether the action succeeded. This issue implements a full-screen payment confirmation animation (a Lottie or CSS-keyframe sequence showing a success state with the transaction amount, recipient, and hash) that plays automatically after on-chain confirmation is detected, then smoothly transitions to the updated invoice view.
Technical Context
Create
components/invoice/PaymentConfirmationOverlay.tsxtriggered by apaymentConfirmedstate emitted fromhooks/usePaymentSubmission.ts. The overlay renders as a fixed full-screen layer (z-index: 9999) using a Framer Motion entrance animation or a raw CSS keyframe sequence defined inglobals.css. The animation sequence: (1) checkmark draw animation (SVG stroke-dashoffset), (2) amount and recipient label fade-in, (3) transaction hash appear with a copy button, (4) auto-dismiss after 4 seconds or on user click, fading back to the invoice view with the updated status. The overlay must be accessible: addrole="status"andaria-live="polite"and announce the confirmation text to screen readers. Provide aprefers-reduced-motionmedia query fallback that skips the animation and shows a static success card instead.Acceptance Criteria
usePaymentSubmissionsetsstatus === 'confirmed'and displays the correct amount, recipient address (truncated), and transaction hashFully PaidorPartially Paidstatusprefers-reduced-motion: reducesee a static success card instead of the animation; all information is still presentaria-live="polite"causes screen readers to announce "Payment confirmed: [amount] [asset] sent to [address]" after the overlay appears