Fix lint

Author: sophieqgu

ui/components/app/rewards/RewardsPointsBalance.test.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useSelector } from 'react-redux';
-import { RewardsPointsBalance } from './RewardsPointsBalance';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useRewardsContext } from '../../../contexts/rewards';
 import type { RewardsContextValue } from '../../../contexts/rewards';
-import type { SeasonStatusState } from '../../../../app/scripts/controllers/rewards/rewards-controller.types';
+import { RewardsPointsBalance } from './RewardsPointsBalance';
 
 // Mock dependencies
 jest.mock('react-redux', () => ({
@@ -39,14 +38,20 @@ const mockUseRewardsContext = useRewardsContext as jest.MockedFunction<
 
 describe('RewardsPointsBalance', () => {
   const mockT = jest.fn((key: string, values?: string[]) => {
-    if (key === 'rewardsOptIn') return 'Opt In';
-    if (key === 'rewardsPointsBalance' && values) return `${values[0]} points`;
-    if (key === 'rewardsPointsIcon') return 'Rewards Points Icon';
+    if (key === 'rewardsOptIn') {
+      return 'Opt In';
+    }
+    if (key === 'rewardsPointsBalance' && values) {
+      return `${values[0]} points`;
+    }
+    if (key === 'rewardsPointsIcon') {
+      return 'Rewards Points Icon';
+    }
     return key;
   });
 
   // Mock season status with complete structure
-  const mockSeasonStatus: SeasonStatusState = {
+  const mockSeasonStatus = {
     season: {
       id: 'test-season',
       name: 'Test Season',

ui/components/app/rewards/RewardsPointsBalance.tsx

@@ -6,6 +6,29 @@ import { getIntlLocale } from '../../../ducks/locale/locale';
 import { useRewardsContext } from '../../../contexts/rewards';
 import { Skeleton } from '../../component-library/skeleton';
 
+const RewardsBadge = ({ text }: { text: string }) => {
+  const t = useI18nContext();
+
+  return (
+    <Box
+      className="flex items-center gap-2 px-2 bg-background-muted rounded"
+      data-testid="rewards-points-balance"
+    >
+      <img
+        src="./images/metamask-rewards-points.svg"
+        alt={t('rewardsPointsIcon')}
+        style={{ width: '16px', height: '16px' }}
+      />
+      <Text
+        variant={TextVariant.BodySm}
+        data-testid="rewards-points-balance-value"
+      >
+        {text}
+      </Text>
+    </Box>
+  );
+};
+
 /**
  * Component to display the rewards points balance
  * Shows the points balance with an icon for users who haven't opted in yet
@@ -41,26 +64,3 @@ export const RewardsPointsBalance = () => {
 
   return <RewardsBadge text={t('rewardsPointsBalance', [formattedPoints])} />;
 };
-
-const RewardsBadge = ({ text }: { text: string }) => {
-  const t = useI18nContext();
-
-  return (
-    <Box
-      className="flex items-center gap-2 px-2 bg-background-muted rounded"
-      data-testid="rewards-points-balance"
-    >
-      <img
-        src="./images/metamask-rewards-points.svg"
-        alt={t('rewardsPointsIcon')}
-        style={{ width: '16px', height: '16px' }}
-      />
-      <Text
-        variant={TextVariant.BodySm}
-        data-testid="rewards-points-balance-value"
-      >
-        {text}
-      </Text>
-    </Box>
-  );
-};