feat(money): bind the live APY to the onboarding animation (MUSD-1206)

[Kureev]

Description

The APY shown in the Money onboarding animation is the live rate, read through Rive data binding. Previously the value was baked into the artwork, so it could disagree with the APY shown everywhere else in the app.

The onboarding animation is upgraded to onboarding_flow_v25.riv, which adds two fields to the Main view model: apyValue carries the formatted rate including the percent sign, and apyAmountDigit carries how many digits that rate has. The artboard uses the digit count to pick between its new apyOneDigit / apyTwoDigit / apyThreeDigit timelines, which is what keeps the APY container laid out correctly on the second step. Both are pushed whenever the rate changes, and fall back to the placeholder rate the screen already used until the balance service resolves.

The rate comes from useMoneyAccountBalance, the same source as the Money home screen, so the two cannot drift apart.

Verified against the shipped asset rather than assuming the contract held: apyValue is a string and apyAmountDigit a number on the Main view model, and the artboard name, state machine and every step/transition name are unchanged from v24. File size is essentially unchanged (5.97 MB vs 5.98 MB), so there is no bundle impact.

Changelog

CHANGELOG entry: Fixed the Money onboarding animation showing a fixed APY, so it now displays the live rate and stays in step with the APY shown elsewhere in the app.

Related issues

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

Manual testing steps

Feature: Live APY in the Money onboarding animation

  Scenario: user opens onboarding with the live rate loaded
    Given the Money account balance service reports an APY
    And the user has not yet seen Money onboarding

    When user opens the Money onboarding flow
    Then the APY rendered in the animation matches the APY shown on the Money home screen
    And it is laid out correctly on the second step where the chart appears

  Scenario: user opens onboarding before the rate has loaded
    Given the Money account balance service has not returned an APY yet

    When user opens the Money onboarding flow
    Then the animation shows the placeholder rate rather than an empty value

  Scenario: no regression to the rest of the flow
    Given the user is in the Money onboarding flow

    When user steps forward and backward through every step and closes the flow
    Then each step transitions as before and the button text is unchanged

Screenshots/Recordings

Before

The APY in the animation was part of the artwork and did not change with the live rate.

After

Simulator.Screen.Recording.-.iPhone.17.-.2026-07-28.at.14.15.54.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
Scoped Money onboarding UI and Rive bindings with fallbacks and unit tests; no auth, payments, or shared balance logic changes beyond reading an existing formatted APY field.

Overview
Money onboarding no longer shows a fixed APY baked into the artwork. It switches to onboarding_flow_v25.riv and pushes the same formatted rate as Money home via Rive data binding: apyValue (e.g. 4.6%) and apyAmountDigit so the artboard picks the right one/two/three-digit layout on the APY step.

A dedicated apyDigitCount helper clamps digit counts to what the artboard supports. APY updates run in their own effect so rate changes refresh the animation without re-running transition speed, button text, and overlay fade setup. Until the balance hook returns a rate, the screen keeps using the existing 4% placeholder.

Tests cover live APY binding, digit count, fallback when APY is missing, and path-aware Rive mock setters.

^{Reviewed by Cursor Bugbot for commit 185294c. 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]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR changes are entirely within the Money/Card feature area:

1. MoneyOnboardingView.tsx: Updated to use the new v25 Rive animation (replacing v24), added two new Rive data bindings (apyValue and apyAmountDigit) to display the live APY in the animation, and imports a new utility function apyDigitCount.

2. riveApy.ts (new file): A utility that counts digits in a formatted APY string so the Rive artboard can select the appropriate layout for its APY container.

3. onboarding_flow_v25.riv (new animation file): The updated Rive animation asset.

4. Test files: Unit tests for the above changes (no E2E impact).

These changes affect the Money onboarding flow UI/animation, which is directly covered by SmokeMoney tests. The changes don't touch:

• Swap/bridge flows (no SmokeSwap needed)
• Transaction confirmations (no SmokeConfirmations needed)
• Wallet platform features (no SmokeWalletPlatform needed)
• Any core controllers or Engine

SmokeMoney is the appropriate and sufficient tag for validating these Money onboarding view changes.

Performance Test Selection:
The changes are limited to the Money onboarding view UI (Rive animation update and APY data binding). These are visual/UI changes that don't affect app launch, login, asset loading, or any other performance-sensitive flows. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud