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

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="1170" height="2532" alt="Simulator Screenshot - iPhone 16e -
2026-05-15 at 11 03 13"
src="https://github.com/user-attachments/assets/9de0b304-234c-43b7-9cff-a20786909548"
/>

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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

<!-- CURSOR_SUMMARY -->
---

> [!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`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
0ee0184. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Montoya

app/components/UI/Rewards/components/Benefits/TheMiracleFooter.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import TheMiracleFooter from './TheMiracleFooter';
+import { mockTheme } from '../../../../../util/theme';
 
 const mockStrings = jest.fn((key: string) => {
   const translations: Record<string, string> = {
@@ -20,16 +21,19 @@ jest.mock('images/benefits/themiracle-logo.svg', () => {
     width,
     height,
     name,
+    color,
   }: {
     width: number;
     height: number;
     name: string;
+    color: string;
   }) =>
     ReactActual.createElement(View, {
       testID: 'the-miracle-logo',
       width,
       height,
       name,
+      color,
     });
 });
 
@@ -58,5 +62,6 @@ describe('TheMiracleFooter', () => {
     expect(logo.props.name).toBe('TheMiracleLogo');
     expect(logo.props.width).toBe(90);
     expect(logo.props.height).toBe(26);
+    expect(logo.props.color).toBe(mockTheme.colors.text.default);
   });
 });

app/components/UI/Rewards/components/Benefits/TheMiracleFooter.tsx

@@ -6,15 +6,25 @@ import {
 } from '@metamask/design-system-react-native';
 import React from 'react';
 import TheMiracleLogo from 'images/benefits/themiracle-logo.svg';
+import { useTheme } from '../../../../../util/theme';
 import { strings } from '../../../../../../locales/i18n';
 
-const TheMiracleFooter = () => (
-  <Box twClassName="flex flex-row gap-1 items-center justify-center">
-    <Text variant={TextVariant.BodyXs} color={TextColor.TextAlternative}>
-      {strings('rewards.benefits.powered_by')}
-    </Text>
-    <TheMiracleLogo name="TheMiracleLogo" width={90} height={26} />
-  </Box>
-);
+const TheMiracleFooter = () => {
+  const { colors } = useTheme();
+
+  return (
+    <Box twClassName="flex flex-row gap-1 items-center justify-center">
+      <Text variant={TextVariant.BodyXs} color={TextColor.TextAlternative}>
+        {strings('rewards.benefits.powered_by')}
+      </Text>
+      <TheMiracleLogo
+        name="TheMiracleLogo"
+        width={90}
+        height={26}
+        color={colors.text.default}
+      />
+    </Box>
+  );
+};
 
 export default TheMiracleFooter;