Cherry-picking commits from main to release/7.78.0 for PR #30213

[runway-github]

• fix(Rewards): Update theMiracle logo and make it theme-aware cp-7.78.0 (fix(Rewards): Update theMiracle logo and make it theme-aware cp-7.78.0 #30213)

Description

The logo for theMiracle displayed at the bottom of the Benefits screen
was incorrect and was hard to see in dark theme

This uses the updated, correct logo as an SVG and swaps the color when
in dark mode.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/RWDS-1302

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

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
Low risk UI-only change: swaps an SVG asset and passes a theme-derived
color prop to improve contrast; minimal logic impact covered by unit
test updates.

Overview
Updates the Rewards Benefits footer to render the TheMiracle logo
using the current theme text color by wiring useTheme() into
TheMiracleFooter and passing a color prop to the SVG component.

Replaces themiracle-logo.svg with the corrected artwork and adjusts
the unit test to mock/verify the new color prop is set to
colors.text.default.

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

[ea0f772](https://github.com/MetaMask/metamask-mobile/commit/ea0f77220e156ce3457c4738106bee148f8818d7)

[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

⏭️ Smart E2E selection skipped - PR targets a release branch (release/*)

All E2E tests pre-selected.

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

[chloeYue]

Close in favour of #30274