Skip to content

NFC payment: New animation and polish motion (reduced-motion + faster timings)#164

Open
swedishfrenchpress wants to merge 15 commits intomainfrom
erik_nfc_animation_v5
Open

NFC payment: New animation and polish motion (reduced-motion + faster timings)#164
swedishfrenchpress wants to merge 15 commits intomainfrom
erik_nfc_animation_v5

Conversation

@swedishfrenchpress
Copy link
Collaborator

Summary

This PR ports the WebView-based NFC payment animation from erik_nfc_animation_v4 to the current branch and applies motion design best practices based on Emil Kowalski, Jakub Krehel, and accessibility guidelines.

Changes

NFC Animation Migration

  • Replaced native NfcPaymentAnimationView with WebView-based animation (nfc_animation.html)
  • Added organic blob morphing effect during payment processing
  • Added "Done" close button that appears after successful payment
  • Implemented fullscreen mode during animation with proper system bar handling
  • Added 10-second safety timeout for NFC payments

Motion Design Improvements

  • Accessibility: Added prefers-reduced-motion media query support (critical for users with vestibular disorders)
  • Speed: Reduced total animation time from ~2+ seconds to ~500ms for production use
  • Natural motion: Changed all scale(0) animations to scale(0.9) for gentler, more natural movement
  • Polish: Added blur effect to result text ("materializing" enter animation)
  • Professional feel: Replaced bouncy easing curves with smooth deceleration
  • Simplified morphing: Reduced blob animation from aggressive 4-step to subtle 2-step breathing

Timing Changes

Animation Before After
Phase duration 600ms 250ms
Min animation time 1200ms 400ms
Check circle transition 500ms 350ms
Fade in/out 300ms 200ms

New Files

  • app/src/main/assets/nfc_animation.html - WebView animation
  • app/src/main/res/anim/fade_in.xml - Activity fade transition
  • app/src/main/res/anim/fade_out.xml - Activity fade transition
  • app/src/main/res/drawable/bg_button_black_pill.xml - Close button background
  • app/src/main/res/drawable-night/bg_button_black_pill.xml - Dark mode variant

Modified Files

  • PaymentRequestActivity.kt - WebView setup, animation callbacks, fullscreen handling
  • activity_payment_request.xml - Replaced custom view with WebView container
  • strings.xml - Added close button text

@a1denvalu3
Copy link
Collaborator

a1denvalu3 commented Jan 31, 2026

@swedishfrenchpress It looks like NfcPaymentAnimationView.kt is not used anywhere in the codebase.

@swedishfrenchpress
Copy link
Collaborator Author

It looks like NfcPaymentAnimationView.kt is not used anywhere in the codebase.

good catch. i verified this with my AI and just pushed a commit.

@swedishfrenchpress swedishfrenchpress marked this pull request as draft February 8, 2026 21:01
@swedishfrenchpress
Copy link
Collaborator Author

update on latest changes:

Payment Animation Changes (Native Migration)

What changed

  • Replaced the NFC payment animation WebView path with a native Android view:
    • NfcPaymentAnimationView in PaymentRequestActivity.
  • Unified success in PaymentRequestActivity to the native green full-screen result UI.
  • Added success actions on the overlay:
    • View Details
    • Done
  • Updated failure overlay actions to:
    • Try again
    • Close
  • Stopped routing overlay-close on failure to the old failure screen.
  • Modernized PaymentFailureActivity to the red visual style so old white failure design is retired app-wide.
  • Reduced duplication by centralizing resume/details intent creation in:
    • PaymentIntentFactory

Why native is better than the old WebView here

  • Removes WebView load/bridge timing from this payment animation path.
  • Reduces risk of delayed animation start and state-sync issues.
  • Uses direct native rendering/animation for more reliable transitions on POS devices.

Notes

  • Payment protocol logic was not changed (Cashu/NFC/Lightning flow behavior preserved).
  • Known existing build blocker remains unrelated to these UI changes:
    • Cashu SDK class version mismatch (65.0 vs 61.0) during full assembleDebug.

- Cancel NFC safety timeout in onCashuTokenReceived to prevent race conditions with slow network operations.
- Rename NFC_ANIMATION_SAFETY_TIMEOUT_MS to NFC_READ_TIMEOUT_MS to better reflect its purpose.
- Add isProcessingNfcPayment flag to lock out subsequent NFC operations once a token is received.
- Ignore onNfcReadingStarted if a payment is already processing, preventing the safety timeout from being re-armed during slow swap operations.
- This fixes a race condition where NFC connection bounces could cause premature timeout failures during successful payments.
- Replace verbose error message on NFC failure screen with a simple 'Payment failed' title.
- Prevents error messages from being truncated or overwhelming the user.
@swedishfrenchpress swedishfrenchpress marked this pull request as ready for review February 14, 2026 13:38
@swedishfrenchpress
Copy link
Collaborator Author

@a1denvalu3 i think this is ready to do. i haven't pushed any changes. it's been to challenging to get the nfc processing screen to animate. i think for launch we can live with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

2 participants