chore: rwds-390 wrong level image (#20303)

## **Description**

Right now the level image in the season status component is a static
image. It should be dynamic based on the data returned from the backend.

## **Changelog**

CHANGELOG entry: null`

## **Pre-merge author checklist**

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

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Co-authored-by: Christian Montoya <christian.montoya@consensys.net>

Author: VGR-GIT

app/components/UI/Rewards/components/SeasonStatus/SeasonStatus.test.tsx

@@ -76,6 +76,9 @@ const mockGetTimeDifferenceFromNow =
     typeof getTimeDifferenceFromNow
   >;
 
+// Import types
+import { SeasonTierDto } from '../../../../../core/Engine/controllers/rewards-controller/types';
+
 // Mock i18n
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => {
@@ -151,24 +154,6 @@ jest.mock('../../../../../component-library/components/Skeleton', () => ({
   },
 }));
 
-// Mock SeasonTierImage
-jest.mock('../SeasonTierImage', () => {
-  const ReactActual = jest.requireActual('react');
-  const { View } = jest.requireActual('react-native');
-  return ReactActual.forwardRef(
-    (
-      { tierOrder, testID, ...props }: { tierOrder?: number; testID?: string },
-      ref: unknown,
-    ) =>
-      ReactActual.createElement(View, {
-        testID: testID || 'season-tier-image',
-        ref,
-        'data-tier-order': tierOrder,
-        ...props,
-      }),
-  );
-});
-
 // Mock lodash capitalize but preserve the rest of lodash
 jest.mock('lodash', () => {
   const actual = jest.requireActual('lodash');
@@ -178,6 +163,32 @@ jest.mock('lodash', () => {
   };
 });
 
+// Mock RewardsThemeImageComponent
+jest.mock('../ThemeImageComponent', () => {
+  const ReactActual = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+  return {
+    __esModule: true,
+    default: ReactActual.forwardRef(
+      (
+        props: {
+          themeImage?: { lightModeUrl?: string; darkModeUrl?: string };
+          style?: unknown;
+          testID?: string;
+        },
+        ref: unknown,
+      ) =>
+        ReactActual.createElement(View, {
+          testID: props.testID || 'season-tier-image',
+          'data-light-mode-url': props.themeImage?.lightModeUrl,
+          'data-dark-mode-url': props.themeImage?.darkModeUrl,
+          style: props.style,
+          ref,
+        }),
+    ),
+  };
+});
+
 describe('SeasonStatus', () => {
   // Default mock values
   const defaultMockValues = {
@@ -308,27 +319,6 @@ describe('SeasonStatus', () => {
       expect(getByTestId('metamask-rewards-points-svg')).toBeTruthy();
     });
 
-    it('should render correct tier order for different tiers', () => {
-      // Test silver tier (2nd in array)
-      mockSelectCurrentTier.mockReturnValue({
-        id: 'silver',
-        name: 'silver',
-        pointsNeeded: 2000,
-        image: {
-          lightModeUrl: 'lightModeUrl',
-          darkModeUrl: 'darkModeUrl',
-        },
-        levelNumber: 'Level 2',
-        rewards: [],
-      });
-
-      const { getByText, getByTestId } = render(<SeasonStatus />);
-
-      expect(getByText('Level 2')).toBeTruthy();
-      expect(getByText('Silver')).toBeTruthy();
-      expect(getByTestId('season-tier-image')).toHaveProp('data-tier-order', 2);
-    });
-
     it('should capitalize tier names correctly', () => {
       mockSelectCurrentTier.mockReturnValue({
         id: 'gold',
@@ -539,6 +529,78 @@ describe('SeasonStatus', () => {
     });
   });
 
+  describe('RewardsThemeImageComponent Integration', () => {
+    it('should render RewardsThemeImageComponent with correct testID when tier has image', () => {
+      const { getByTestId } = render(<SeasonStatus />);
+
+      expect(getByTestId('season-tier-image')).toBeTruthy();
+    });
+
+    it('should pass correct themeImage prop to RewardsThemeImageComponent', () => {
+      const { getByTestId } = render(<SeasonStatus />);
+
+      const tierImage = getByTestId('season-tier-image');
+      expect(tierImage.props['data-light-mode-url']).toBe('lightModeUrl');
+      expect(tierImage.props['data-dark-mode-url']).toBe('darkModeUrl');
+    });
+
+    it('should pass correct style prop to RewardsThemeImageComponent', () => {
+      const { getByTestId } = render(<SeasonStatus />);
+
+      const tierImage = getByTestId('season-tier-image');
+      expect(tierImage.props.style).toBeDefined();
+    });
+
+    it('should render fallback Image when tier has no image', () => {
+      // Given: tier without image
+      mockSelectCurrentTier.mockReturnValue({
+        id: 'bronze',
+        name: 'bronze',
+        pointsNeeded: 0,
+        image: undefined,
+        levelNumber: 'Level 1',
+        rewards: [],
+      } as unknown as SeasonTierDto);
+
+      const { queryByTestId } = render(<SeasonStatus />);
+
+      // RewardsThemeImageComponent should not be rendered
+      expect(queryByTestId('season-tier-image')).toBeNull();
+    });
+
+    it('should render RewardsThemeImageComponent with updated image when tier changes', () => {
+      // Given: initial tier with image
+      const { getByTestId, rerender } = render(<SeasonStatus />);
+      const initialTierImage = getByTestId('season-tier-image');
+      expect(initialTierImage.props['data-light-mode-url']).toBe(
+        'lightModeUrl',
+      );
+
+      // When: tier changes to different image URLs
+      mockSelectCurrentTier.mockReturnValue({
+        id: 'silver',
+        name: 'silver',
+        pointsNeeded: 2000,
+        image: {
+          lightModeUrl: 'newLightModeUrl',
+          darkModeUrl: 'newDarkModeUrl',
+        },
+        levelNumber: 'Level 2',
+        rewards: [],
+      });
+      rerender(<SeasonStatus />);
+
+      // Then: new image URLs are used
+      const updatedTierImage = getByTestId('season-tier-image');
+      expect(updatedTierImage.props['data-light-mode-url']).toBe(
+        'newLightModeUrl',
+      );
+      expect(updatedTierImage.props['data-dark-mode-url']).toBe(
+        'newDarkModeUrl',
+      );
+    });
+  });
+
   describe('Memoized Values', () => {
     it('should update displayed points when balance changes', () => {
       // Given: initial balance of 1500

app/components/UI/Rewards/components/SeasonStatus/SeasonStatus.tsx

@@ -12,7 +12,6 @@ import { strings } from '../../../../../../locales/i18n';
 import { useTheme } from '../../../../../util/theme';
 import MetamaskRewardsPointsImage from '../../../../../images/rewards/metamask-rewards-points.svg';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
-import SeasonTierImage from '../SeasonTierImage';
 import { capitalize } from 'lodash';
 import { useSelector } from 'react-redux';
 import {
@@ -26,6 +25,9 @@ import {
 } from '../../../../../reducers/rewards/selectors';
 import { formatNumber, formatTimeRemaining } from '../../utils/formatUtils';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import RewardsThemeImageComponent from '../ThemeImageComponent';
+import { Image } from 'react-native';
+import fallbackTierImage from '../../../../../images/rewards/tiers/rewards-s1-tier-1.png';
 
 const SeasonStatus: React.FC = () => {
   const tw = useTailwind();
@@ -75,29 +77,31 @@ const SeasonStatus: React.FC = () => {
     return tiers.findIndex((tier) => tier.id === currentTier.id) + 1;
   }, [tiers, currentTier]);
 
-  if (seasonStatusLoading) {
+  if (seasonStatusLoading || !currentTier) {
     return <Skeleton height={115} width="100%" />;
   }
 
   return (
     <Box flexDirection={BoxFlexDirection.Column} twClassName="gap-4 w-full">
       {/* Top Row - season name, tier name, and tier image */}
-      <Box twClassName="flex-row justify-between items-center">
-        <Box flexDirection={BoxFlexDirection.Row} twClassName="gap-4">
+      <Box twClassName="flex-row justify-between items-center -mb-2">
+        <Box
+          flexDirection={BoxFlexDirection.Row}
+          twClassName="gap-4 items-center"
+        >
           {/* Tier image */}
-          <Box twClassName="h-[42px] w-[55px] flex align-center">
-            <SeasonTierImage
-              tierOrder={currentTierOrder}
-              twClassName="w-full h-full"
+          {currentTier?.image ? (
+            <RewardsThemeImageComponent
+              themeImage={currentTier.image}
+              style={tw.style('h-15 w-15')}
             />
-          </Box>
+          ) : (
+            <Image source={fallbackTierImage} style={tw.style('h-15 w-15')} />
+          )}
 
           {/* Tier name */}
           <Box flexDirection={BoxFlexDirection.Column}>
-            <Text
-              variant={TextVariant.BodySm}
-              twClassName="text-alternative -mb-1"
-            >
+            <Text variant={TextVariant.BodySm} twClassName="text-alternative">
               {strings('rewards.level')} {currentTierOrder}
             </Text>
             <Text variant={TextVariant.BodyMd} twClassName="text-default">
@@ -109,10 +113,7 @@ const SeasonStatus: React.FC = () => {
         {/* Season ends */}
         {!!seasonEndDate && !!timeRemaining && (
           <Box flexDirection={BoxFlexDirection.Column}>
-            <Text
-              variant={TextVariant.BodySm}
-              twClassName="text-alternative -mb-1"
-            >
+            <Text variant={TextVariant.BodySm} twClassName="text-alternative">
               {strings('rewards.season_ends')}
             </Text>
             <Text
@@ -166,7 +167,7 @@ const SeasonStatus: React.FC = () => {
       {/* Bottom Row - Points Summary */}
       <Box
         flexDirection={BoxFlexDirection.Row}
-        twClassName="gap-2 justify-between items-center mt-1"
+        twClassName="gap-2 justify-between items-center"
       >
         <Box
           alignItems={BoxAlignItems.Center}