feat(money): play card flip animation on link card sheet (MUSD-1199)

[Kureev]

Description

The link-card half-sheet now plays a Rive card-flip animation when it is presented: the card graphic appears and flips into view, for both the virtual and the metal card variants. Previously the sheet showed a static card image.

• New MoneyCardFlipAnimation component renders card_tilt_v1.2.riv by playing the one-shot yAnimation flip timeline on the per-variant artboards (Card Tilt Y Animation - Digital / Card Tilt Y Animation - Metal), wrapped in a short Reanimated entrance (opacity 0.5→1, translateY 10→0 over 250 ms). The MainTilt state machine's data-bound startAnimation trigger does not fire the flip in this asset version (verified on-device and in a headless runtime simulation), so the state machine is deliberately bypassed.
• The animation respects the OS reduce-motion setting (existing useReduceMotion hook) and falls back to the previous static card image when reduce motion is on, when the animation is disabled remotely, or when the Rive runtime errors.
• Added selectMoneyCardFlipAnimationEnabledFlag, a version-gated remote kill-switch (earnMoneyCardFlipAnimationEnabled, default ON, local override MM_MONEY_CARD_FLIP_ANIMATION_ENABLED), mirroring the existing Money animation flags.
• The shared card_tilt_v1.2.riv asset (147 KB) is authored to also serve the upcoming card-tilt and receive-card surfaces; its ViewModel (cardType / startAnimation / xValue / yValue) is not consumed in this PR and the state-machine wiring needs a follow-up with the designer.

Changelog

CHANGELOG entry: Added a card flip animation to the link card sheet in the Money account

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-1199

Manual testing steps

Feature: Card flip animation on link card half-sheet

  Scenario: user opens the link card sheet with a virtual card
    Given the user has a Money account and an unlinked virtual MetaMask Card

    When the user triggers the link card half-sheet
    Then the virtual card graphic appears and flips into view

  Scenario: user opens the link card sheet with a metal card
    Given the user has a Money account and an unlinked metal MetaMask Card

    When the user triggers the link card half-sheet
    Then the metal card graphic appears and flips into view

  Scenario: user has reduce motion enabled
    Given the OS reduce-motion accessibility setting is enabled

    When the user triggers the link card half-sheet
    Then the static card image is shown and no animation plays

Screenshots/Recordings

Before

N/A

After

IMG_4408.MOV

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Money UI-only change with remote kill-switch, reduce-motion and Rive error fallbacks to static images; no auth, payments, or data-path changes.

Overview
The link card half-sheet swaps its static card image for a new MoneyCardFlipAnimation that plays a one-shot Rive flip (card_tilt_v1.2.riv, digital vs metal artboards) with a short Reanimated entrance when animations are allowed.

Gating and fallbacks: Remote/env kill-switch selectMoneyCardFlipAnimationEnabledFlag (earnMoneyCardFlipAnimationEnabled, MM_MONEY_CARD_FLIP_ANIMATION_ENABLED, default on). The animation is skipped for reduce motion, disabled flag, or Rive errors, with the previous PNGs as fallback. useReduceMotionState (null while the OS setting is unresolved) avoids a static-to-Rive flash; the sheet passes isMetalCard as undefined until card home data finishes loading so the flip runs once on the right variant.

Sheet polish: Bottom sheet goBack wiring, CTA act/async handling, and tests for confirmLinkInBackground rejections not surfacing. Dedicated component tests and flag selector tests added; link-sheet card image styles removed.

^{Reviewed by Cursor Bugbot for commit 04c2e71. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Feature Flag Registry Check

This PR introduces feature flag references that are not yet registered in the
feature flag registry.

Unregistered flags

Flag	Referenced in
earnMoneyCardFlipAnimationEnabled	app/components/UI/Money/selectors/featureFlags.ts

How to fix

Add an entry for each flag in tests/feature-flags/feature-flag-registry.ts:

myNewFlag: {
  name: 'myNewFlag',
  type: FeatureFlagType.Remote,
  inProd: false,
  productionDefault: false,
  status: FeatureFlagStatus.Active,
},

Set inProd and productionDefault to match the current production values from the
client-config API.

If you access the flag via a constant (e.g. remoteFeatureFlags[MY_CONSTANT]), also add the constant to
.github/scripts/known-feature-flag-constants.ts
so the CI check can resolve it.

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/UI/Money/hooks/useReduceMotion.test.ts	0/162	0/272	0/289

AI-detected flaky patterns

app/components/UI/Money/hooks/useReduceMotion.test.ts

• J10 — jest.spyOn without restoreAllMocks() in afterEach (medium)
  • Multiple jest.spyOn calls (on AccessibilityInfo.isReduceMotionEnabled and addEventListener) appear in beforeEach() and inside several it() blocks with no corresponding afterEach(() => { jest.restoreAllMocks(); }). Spies persist across tests and can cause order-dependent or non-deterministic failures (matches J10 exactly). No other J1-J10 patterns matched in either file. History JSON showed zero failures for both files so historicalHintUsed=false. First test file had no matching patterns and is omitted from findings.
  • Suggested fix in app/components/UI/Money/hooks/useReduceMotion.test.ts:

    -  beforeEach(() => {
    -    jest.clearAllMocks();
    -    capturedListener = undefined;
    -
    -    jest
    -      .spyOn(AccessibilityInfo, 'isReduceMotionEnabled')
    -      .mockResolvedValue(false);
    -
    -    jest
    -      .spyOn(AccessibilityInfo, 'addEventListener')
    -      .mockImplementation((_event, listener) => {
    -        capturedListener = listener as unknown as (enabled: boolean) => void;
    -        return { remove: mockRemove } as never;
    -      });
    -  });
    +  beforeEach(() => {
    +    jest.clearAllMocks();
    +    capturedListener = undefined;
    +
    +    jest
    +      .spyOn(AccessibilityInfo, 'isReduceMotionEnabled')
    +      .mockResolvedValue(false);
    +
    +    jest
    +      .spyOn(AccessibilityInfo, 'addEventListener')
    +      .mockImplementation((_event, listener) => {
    +        capturedListener = listener as unknown as (enabled: boolean) => void;
    +        return { remove: mockRemove } as never;
    +      });
    +  });
    +
    +  afterEach(() => {
    +    jest.restoreAllMocks();
    +  });

This check is informational only and does not block merging.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit cfae263. Configure here.}

[ffmcgee725]

On users without reduce-motion and with cached card data, this briefly shows the static PNG before Rive because useReduceMotion defaults to true until the async check resolves.

Could we treat “reduce motion not yet resolved” like !variantKnown (placeholder / hold) so we don’t flash static → flip? Otherwise, first paint hits the static <Image>, then swaps to Rive + 250ms entrance.

[ffmcgee725]

Comment says 620/400 is from MainTilt, but we render the per-variant Y Animation artboards.
Can we confirm those share that size and update the comment? Otherwise Fit.Contain may letterbox.

[Kureev]

I can confirm that both of them are exactly 620×400, same as MainTilt.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeMoney
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces a new MoneyCardFlipAnimation component (Rive-based animated card flip with static image fallback) and integrates it into MoneyLinkCardSheet, replacing the previous static Image component. Additional changes include a new feature flag selector (selectMoneyCardFlipAnimationEnabledFlag), a new useReduceMotionState() hook variant, a new env variable, and the Rive animation asset. All changes are scoped entirely to the Money/Card UI feature area — specifically the card linking sheet. This maps directly to SmokeMoney (MetaMask Card flows: home screen, card linking, etc.). The card linking sheet is not part of Add Funds/swap flows, so SmokeSwap and SmokeConfirmations are not required. No other feature areas (accounts, confirmations, network, browser, snaps, etc.) are affected.

Performance Test Selection:
The changes are UI-only within the Money/Card feature area (card flip animation, static image fallback, reduce-motion hook). None of the changed files affect performance-sensitive flows like app launch, login, onboarding, account list rendering, asset loading, swaps, or perps. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud