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

[Montoya]

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.}

[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.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.86%. Comparing base (3751d9a) to head (d33c2bd).
⚠️ Report is 211 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30213      +/-   ##
==========================================
+ Coverage   81.54%   81.86%   +0.32%     
==========================================
  Files        5343     5434      +91     
  Lines      142128   144899    +2771     
  Branches    32411    33093     +682     
==========================================
+ Hits       115899   118625    +2726     
+ Misses      18299    18162     -137     
- Partials     7930     8112     +182     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are limited to three files within the Rewards/Benefits UI feature area:

1. TheMiracleFooter.tsx - A small presentational component that renders a "Powered by TheMiracle" footer with an SVG logo. It has no side effects, no state management, no navigation changes, and no controller interactions.
2. TheMiracleFooter.test.tsx - Unit tests for the above component (not E2E tests).
3. themiracle-logo.svg - A new static SVG asset.

The component is only imported by BenefitsFullView.tsx within the same Rewards feature. There are no changes to:

• Shared navigation components (TabBar, modals, bottom sheets)
• Controllers or Engine
• E2E test infrastructure
• Critical user flows (confirmations, swaps, accounts, etc.)

This is a low-risk, isolated UI addition. No E2E test tags are warranted as none of the available tags cover the Rewards/Benefits feature specifically, and the changes don't affect any shared components that could break existing E2E tests.

Performance Test Selection:
The changes are purely cosmetic UI additions (a small footer component with a static SVG logo). There is no impact on rendering performance of lists, data loading, state management, or any critical user 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
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud