feat(rn_cli_wallet): Lottie animations for WC Pay loader and success

[ignaciosantise]

Summary

• Replaces the custom 4-square Reanimated loader with a branded Lottie animation on the WC Pay confirming step ("Setting up {token}", "Processing your payment...", "Finalizing payment").
• Swaps the static CheckCircle SVG for a one-shot success Lottie on the result screen.
• Keeps the legacy WalletConnectLoading spinner on the initial loading step ("Preparing your payment...") via a new variant prop on LoadingView.
• Remaps Lottie track-matte layers to the theme background via colorFilters so they don't leak white in dark mode (a known lottie-react-native rendering quirk with stroke-based mattes).
• Trims the loader composition (ip 0→25, op 207→190) to remove dead frames at the start/end and tighten the loop.

Screenshots

Screen.Recording.2026-05-22.at.3.08.30.PM.mov

Flow

flowchart LR
  A[loading<br/>Preparing your payment...] -->|variant=spinner| S[WalletConnectLoading]
  B[confirming<br/>Setting up USDT / Processing...] -->|variant=lottie| L[Loading.json]
  C[result success] --> R[Success.json]
  C2[result error] --> X[CoinStack / WarningCircle SVG]

Loading

Test plan

• iOS + Android: run a WC Pay flow, confirm Lottie loader plays through "Setting up {token}" → "Processing your payment..." → success Lottie.
• Toggle dark mode: confirm no white matte artifacts in the loader.
• Trigger an error path (insufficient funds / cancelled / expired): confirm existing SVG icons still render.
• Confirm the initial "Preparing your payment..." step still shows the legacy 4-square spinner.
• Confirm WalletConnectLoading still renders unchanged in Wallets/index.tsx, LoadingModal.tsx, and CollectDataWebView.tsx.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
pos-demo	Ready	Preview, Comment	May 22, 2026 6:45pm

[claude]

Claude finished @ignaciosantise's task in 2m 5s —— View job

---

Code Review

• Gather context
• Read changed files
• Run license / breaking-changes / data-classification checks
• Post findings

---

License: lottie-react-native@7.3.5 is Apache-2.0 — no issues.
Breaking changes: LoadingView is only consumed within PaymentOptionsModal; all call sites updated correctly — no breaking changes.
Data classification: Animation JSON files contain only vector/timing data — no sensitive data.

Found 2 issue(s)

Issue 1: arePayModalAnimationsEnabled duplicated across files

ID: loadingview-arepaymodal-dup-a3f1
File: wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/ResultView.tsx:16 and LoadingView.tsx:19
Severity: MEDIUM
Category: code_quality

Context:

• Pattern: The constant const arePayModalAnimationsEnabled = Config.ENV_TEST_MODE !== 'true' is copy-pasted verbatim in both files
• Risk: If the test-mode detection logic ever changes (e.g., new env var name), it must be updated in two places; one copy will silently diverge
• Impact: Inconsistent animation behavior between loader and result screen in edge cases
• Trigger: Any future change to the animation enable/disable logic

Recommendation: Extract to a shared module (e.g., utils/PaymentUtil.ts or a new utils/AnimationUtil.ts):

// utils/AnimationUtil.ts
import Config from 'react-native-config';
export const arePayModalAnimationsEnabled = Config.ENV_TEST_MODE !== 'true';

Fix this →

---

Issue 2: Missing testID on loading Lottie animation

ID: loadingview-lottie-testid-b7c2
File: wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/LoadingView.tsx:64
Severity: MEDIUM
Category: code_quality

Context:

• Pattern: LottieView for the loader has no testID, but the success LottieView in ResultView.tsx:66 has testID="pay-result-success-icon" and the text in the same component already uses testID="pay-loading-message"
• Risk: Maestro E2E tests (referenced in AGENTS.md) cannot assert on the loading animation state — e.g. confirming the Lottie loader is present vs. the spinner
• Impact: Reduces test coverage confidence on the confirming step; inconsistent with the project's pay-* testID convention
• Trigger: Any Maestro flow that needs to differentiate the loading animation from the spinner

Recommendation:

<LottieView
  source={require('@/assets/lottie/Loading.json')}
  autoPlay={arePayModalAnimationsEnabled}
  loop
  colorFilters={lottieColorFilters}
  style={{ width: size, height: size }}
  testID="pay-loading-lottie"
/>

Fix this →

[Copilot]

Pull request overview

This PR updates the WC Pay flow UI in rn_cli_wallet to use Lottie animations for the “confirming” loader and the success result state, while keeping the legacy spinner for the initial “loading” step.

Changes:

• Add lottie-react-native dependency (JS + iOS pods) to support animated assets.
• Update PaymentOptionsModal loading UI to support a new variant (spinner vs lottie) and apply theme-based color filtering for known matte artifacts.
• Replace the success result icon with a one-shot Lottie animation.

Reviewed changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
wallets/rn_cli_wallet/package.json	Adds lottie-react-native dependency.
wallets/rn_cli_wallet/yarn.lock	Locks lottie-react-native@7.3.5.
wallets/rn_cli_wallet/ios/Podfile.lock	Adds lottie-react-native + lottie-ios pods.
wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/index.tsx	Uses LoadingView variant="spinner" for the initial loading step.
wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/LoadingView.tsx	Introduces variant prop; renders Lottie loader with color filters for dark mode.
wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/ResultView.tsx	Replaces static success icon with success Lottie animation.
wallets/rn_cli_wallet/src/assets/lottie/Loading.json	Adds loader animation asset.
wallets/rn_cli_wallet/src/assets/lottie/Success.json	Adds success animation asset.

Comments suppressed due to low confidence (1)

wallets/rn_cli_wallet/src/modals/PaymentOptionsModal/ResultView.tsx:69

• Previously the success icon color was driven by the theme (Theme['text-success']), but the Lottie animation uses hard-coded colors from the JSON. If the success indicator is expected to match the app theme/palette, add color remapping (e.g., via colorFilters) or otherwise ensure the animation assets use the intended success color.

        <LottieView
          source={require('@/assets/lottie/Success.json')}
          autoPlay={arePayModalAnimationsEnabled}
          loop={false}
          style={styles.successAnimation}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.