feat: migrate Skeleton (rewards scope)

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

@@ -70,22 +70,25 @@ jest.mock('./Views/RewardsSettingsView', () => {
 });
 
 // Mock Skeleton component
-jest.mock('../../../component-library/components/Skeleton/Skeleton', () => {
-  const ReactActual = jest.requireActual('react');
-  const { View } = jest.requireActual('react-native');
-  return function MockSkeleton({
-    width,
-    height,
-  }: {
-    width: string;
-    height: string;
-  }) {
-    return ReactActual.createElement(View, {
-      testID: 'skeleton-loader',
-      style: { width, height },
-    });
-  };
-});
+jest.mock(
+  '../../../component-library/components-temp/Skeleton/Skeleton',
+  () => {
+    const React = jest.requireActual('react');
+    const { View } = jest.requireActual('react-native');
+    return function MockSkeleton({
+      width,
+      height,
+    }: {
+      width: string;
+      height: string;
+    }) {
+      return React.createElement(View, {
+        testID: 'skeleton-loader',
+        style: { width, height },
+      });
+    };
+  },
+);
 
 // Mock ErrorBoundary
 jest.mock('../../Views/ErrorBoundary', () => ({

app/components/UI/Rewards/components/Onboarding/OnboardingIntroStep.tsx

@@ -20,7 +20,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 
 import {
   setOnboardingActiveStep,

app/components/UI/Rewards/components/PreviousSeason/PreviousSeasonSummaryTile.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { render } from '@testing-library/react-native';
 import { Text } from 'react-native';
 import PreviousSeasonSummaryTile from './PreviousSeasonSummaryTile';
-import { SkeletonProps } from '../../../../../component-library/components/Skeleton';
+import { SkeletonProps } from '../../../../../component-library/components-temp/Skeleton';
 
 // Mock Skeleton
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');
   return {

app/components/UI/Rewards/components/PreviousSeason/PreviousSeasonSummaryTile.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@metamask/design-system-react-native';
 import React, { PropsWithChildren } from 'react';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 
 interface PreviousSeasonSummaryTileProps extends PropsWithChildren {
   twClassName?: string;

app/components/UI/Rewards/components/PreviousSeason/PreviousSeasonUnlockedRewards.test.tsx

@@ -182,7 +182,7 @@ jest.mock('@metamask/design-system-react-native', () => {
 });
 
 // Mock Skeleton
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');
   return {

app/components/UI/Rewards/components/PreviousSeason/PreviousSeasonUnlockedRewards.tsx

@@ -27,7 +27,7 @@ import {
 import { useUnlockedRewards } from '../../hooks/useUnlockedRewards';
 import RewardsSeasonEndedNoUnlockedRewardsImage from '../../../../../images/rewards/rewards-season-ended-no-unlocked-rewards.svg';
 import RewardsErrorBanner from '../RewardsErrorBanner';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import RewardItem from '../RewardItem/RewardItem';
 import { useTheme } from '../../../../../util/theme';

app/components/UI/Rewards/components/ReferralDetails/CopyableField.tsx

@@ -12,7 +12,7 @@ import {
   IconColor,
   IconName,
 } from '../../../../../component-library/components/Icons/Icon/Icon.types';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 
 interface CopyableFieldProps {
   label: string;

app/components/UI/Rewards/components/ReferralDetails/ReferralStatsSection.test.tsx

@@ -9,7 +9,7 @@ jest.mock(
 );
 
 // Mock the Skeleton component
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const mockReact = jest.requireActual('react');
   const RN = jest.requireActual('react-native');
 

app/components/UI/Rewards/components/ReferralDetails/ReferralStatsSection.tsx

@@ -8,7 +8,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import MetamaskRewardsPointsImage from '../../../../../images/rewards/metamask-rewards-points.svg';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { SeasonWayToEarnSpecificReferralDto } from '../../../../../core/Engine/controllers/rewards-controller/types';
 import { strings } from '../../../../../../locales/i18n';
 

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

@@ -164,7 +164,7 @@ jest.mock('../../../../../images/rewards/metamask-rewards-points.svg', () => {
 });
 
 // Mock Skeleton component
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');
   return {

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

@@ -11,7 +11,7 @@ import {
 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 { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { useSelector } from 'react-redux';
 import {
   selectSeasonStatusLoading,

app/components/UI/Rewards/components/Settings/ReferredByCodeSection.test.tsx

@@ -152,7 +152,7 @@ jest.mock('../../../../../component-library/components/Buttons/Button', () => {
   };
 });
 
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');
 

app/components/UI/Rewards/components/Settings/ReferredByCodeSection.tsx

@@ -23,7 +23,7 @@ import {
   REFERRAL_CODE_LENGTH,
 } from '../../hooks/useValidateReferralCode';
 import { useApplyReferralCode } from '../../hooks/useApplyReferralCode';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { useTheme } from '../../../../../util/theme';
 import RewardsErrorBanner from '../RewardsErrorBanner';
 

app/components/UI/Rewards/components/Settings/RewardSettingsAccountGroupList.test.tsx

@@ -266,7 +266,7 @@ jest.mock('@metamask/design-system-react-native', () => {
 });
 
 // Mock Skeleton component
-jest.mock('../../../../../component-library/components/Skeleton', () => {
+jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
   const ReactActual = jest.requireActual('react');
   const { View } = jest.requireActual('react-native');
 

app/components/UI/Rewards/components/Settings/RewardSettingsAccountGroupList.tsx

@@ -17,7 +17,7 @@ import {
   IconColor,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
-import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import { useRewardOptinSummary } from '../../hooks/useRewardOptinSummary';
 import { selectAvatarAccountType } from '../../../../../selectors/settings';
 import { selectInternalAccountsByGroupId } from '../../../../../selectors/multichainAccounts/accounts';

app/components/UI/Rewards/components/Tabs/ActivityTab/ActivityTab.tsx

@@ -23,7 +23,7 @@ import {
   selectSeasonStatusLoading,
   selectSeasonActivityTypes,
 } from '../../../../../../reducers/rewards/selectors';
-import { Skeleton } from '../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import MetamaskRewardsActivityEmptyImage from '../../../../../../images/rewards/metamask-rewards-activity-empty.svg';
 import RewardsErrorBanner from '../../RewardsErrorBanner';
 import { setActiveTab } from '../../../../../../actions/rewards';

app/components/UI/Rewards/components/Tabs/LevelsTab/UnlockedRewards.test.tsx

@@ -17,7 +17,7 @@ import {
   selectCurrentTier,
 } from '../../../../../../reducers/rewards/selectors';
 import { useUnlockedRewards } from '../../../hooks/useUnlockedRewards';
-import { SkeletonProps } from '../../../../../../component-library/components/Skeleton';
+import { SkeletonProps } from '../../../../../../component-library/components-temp/Skeleton';
 
 // Mock dependencies
 jest.mock('react-redux', () => ({
@@ -84,19 +84,22 @@ jest.mock('../../../../../../../locales/i18n', () => ({
 jest.mock('../../RewardItem/RewardItem', () => jest.fn(() => null));
 
 // Mock Skeleton
-jest.mock('../../../../../../component-library/components/Skeleton', () => {
-  const ReactActual = jest.requireActual('react');
-  const { View } = jest.requireActual('react-native');
-  return {
-    __esModule: true,
-    Skeleton: ({ style, ...props }: SkeletonProps) =>
-      ReactActual.createElement(View, {
-        testID: 'skeleton',
-        style,
-        ...props,
-      }),
-  };
-});
+jest.mock(
+  '../../../../../../component-library/components-temp/Skeleton',
+  () => {
+    const ReactActual = jest.requireActual('react');
+    const { View } = jest.requireActual('react-native');
+    return {
+      __esModule: true,
+      Skeleton: ({ style, ...props }: SkeletonProps) =>
+        ReactActual.createElement(View, {
+          testID: 'skeleton',
+          style,
+          ...props,
+        }),
+    };
+  },
+);
 
 // Mock the useUnlockedRewards hook
 jest.mock('../../../hooks/useUnlockedRewards', () => ({

app/components/UI/Rewards/components/Tabs/LevelsTab/UnlockedRewards.tsx

@@ -15,7 +15,7 @@ import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { REWARDS_VIEW_SELECTORS } from '../../../Views/RewardsView.constants';
 import RewardItem from '../../RewardItem/RewardItem';
 import { useUnlockedRewards } from '../../../hooks/useUnlockedRewards';
-import { Skeleton } from '../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import RewardsErrorBanner from '../../RewardsErrorBanner';
 import { ActivityIndicator } from 'react-native';
 interface UnlockedRewardItemProps {

app/components/UI/Rewards/components/Tabs/LevelsTab/UpcomingRewards.tsx

@@ -31,7 +31,7 @@ import { REWARDS_VIEW_SELECTORS } from '../../../Views/RewardsView.constants';
 import RewardItem from '../../RewardItem/RewardItem';
 import RewardsThemeImageComponent from '../../ThemeImageComponent';
 import RewardsErrorBanner from '../../RewardsErrorBanner';
-import { Skeleton } from '../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import RewardsImageModal from '../../RewardsImageModal';
 import fallbackTierImage from '../../../../../../images/rewards/tiers/rewards-s1-tier-1.png';
 

app/components/UI/Rewards/components/Tabs/OverviewTab/ActiveBoosts.test.tsx

@@ -5,7 +5,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import ActiveBoosts from './ActiveBoosts';
 import { REWARDS_VIEW_SELECTORS } from '../../../Views/RewardsView.constants';
 import { PointsBoostDto } from '../../../../../../core/Engine/controllers/rewards-controller/types';
-import { SkeletonProps } from '../../../../../../component-library/components/Skeleton';
+import { SkeletonProps } from '../../../../../../component-library/components-temp/Skeleton';
 
 // Mock dependencies
 const mockUseTheme = jest.fn(() => ({
@@ -81,12 +81,15 @@ jest.mock('../../../utils/formatUtils', () => ({
   }),
 }));
 
-jest.mock('../../../../../../component-library/components/Skeleton', () => ({
-  Skeleton: ({ testID, ...props }: SkeletonProps) => {
-    const { View } = jest.requireActual('react-native');
-    return <View testID={testID || 'skeleton'} {...props} />;
-  },
-}));
+jest.mock(
+  '../../../../../../component-library/components-temp/Skeleton',
+  () => ({
+    Skeleton: ({ testID, ...props }: SkeletonProps) => {
+      const { View } = jest.requireActual('react-native');
+      return <View testID={testID || 'skeleton'} {...props} />;
+    },
+  }),
+);
 
 // Mock RewardsThemeImageComponent
 jest.mock('../../ThemeImageComponent', () => {

app/components/UI/Rewards/components/Tabs/OverviewTab/ActiveBoosts.tsx

@@ -34,7 +34,7 @@ import {
 } from '../../../../Bridge/hooks/useSwapBridgeNavigation';
 import { REWARDS_VIEW_SELECTORS } from '../../../Views/RewardsView.constants';
 import { formatTimeRemaining } from '../../../utils/formatUtils';
-import { Skeleton } from '../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import RewardsThemeImageComponent from '../../ThemeImageComponent';
 import RewardsErrorBanner from '../../RewardsErrorBanner';
 import { MetaMetricsEvents, useMetrics } from '../../../../../hooks/useMetrics';

app/components/UI/Rewards/components/Tabs/OverviewTab/SnapshotsSection/SnapshotsSection.test.tsx

@@ -44,17 +44,20 @@ jest.mock('../../../../components/SnapshotTile', () => {
   };
 });
 
-jest.mock('../../../../../../../component-library/components/Skeleton', () => {
-  const ReactNative = jest.requireActual('react-native');
-  const ReactActual = jest.requireActual('react');
-  return {
-    Skeleton: jest.fn(() =>
-      ReactActual.createElement(ReactNative.View, {
-        testID: 'skeleton-loader',
-      }),
-    ),
-  };
-});
+jest.mock(
+  '../../../../../../../component-library/components-temp/Skeleton',
+  () => {
+    const ReactNative = jest.requireActual('react-native');
+    const ReactActual = jest.requireActual('react');
+    return {
+      Skeleton: jest.fn(() =>
+        ReactActual.createElement(ReactNative.View, {
+          testID: 'skeleton-loader',
+        }),
+      ),
+    };
+  },
+);
 
 jest.mock('../../../../components/RewardsErrorBanner', () => {
   const ReactNative = jest.requireActual('react-native');

app/components/UI/Rewards/components/Tabs/OverviewTab/SnapshotsSection/SnapshotsSection.tsx

@@ -17,7 +17,7 @@ import {
   SnapshotTile,
   UpcomingSnapshotTileCondensed,
 } from '../../../../components/SnapshotTile';
-import { Skeleton } from '../../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../../component-library/components-temp/Skeleton';
 import RewardsErrorBanner from '../../../../components/RewardsErrorBanner';
 import { REWARDS_VIEW_SELECTORS } from '../../../../Views/RewardsView.constants';
 

app/components/UI/Rewards/components/Tabs/SnapshotsTab/SnapshotsTab.test.tsx

@@ -32,9 +32,12 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
   }),
 }));
 
-jest.mock('../../../../../../component-library/components/Skeleton', () => ({
-  Skeleton: 'Skeleton',
-}));
+jest.mock(
+  '../../../../../../component-library/components-temp/Skeleton',
+  () => ({
+    Skeleton: 'Skeleton',
+  }),
+);
 
 jest.mock('../../RewardsErrorBanner', () => ({
   __esModule: true,

app/components/UI/Rewards/components/Tabs/SnapshotsTab/SnapshotsTab.tsx

@@ -11,7 +11,7 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { strings } from '../../../../../../../locales/i18n';
 import { useSnapshots } from '../../../hooks/useSnapshots';
-import { Skeleton } from '../../../../../../component-library/components/Skeleton';
+import { Skeleton } from '../../../../../../component-library/components-temp/Skeleton';
 import RewardsErrorBanner from '../../RewardsErrorBanner';
 import { REWARDS_VIEW_SELECTORS } from '../../../Views/RewardsView.constants';
 import SnapshotsGroup from './SnapshotsGroup';