MetaMask
diff --git a/‎app/actions/user/index.ts‎
Lines changed: 13 additions & 0 deletions b/‎app/actions/user/index.ts‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎app/actions/user/types.ts‎
Lines changed: 7 additions & 0 deletions b/‎app/actions/user/types.ts‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎app/animations/money_account_onboarding_animation.riv‎
5.38 MB b/‎app/animations/money_account_onboarding_animation.riv‎
5.38 MB
diff --git a/‎app/component-library/components/Navigation/TabBar/TabBar.tsx‎
Lines changed: 11 additions & 7 deletions b/‎app/component-library/components/Navigation/TabBar/TabBar.tsx‎
Lines changed: 11 additions & 7 deletions
diff --git a/‎app/components/Nav/Main/MainNavigator.js‎
Lines changed: 6 additions & 0 deletions b/‎app/components/Nav/Main/MainNavigator.js‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎app/components/UI/Money/Views/MoneyOnboardingView/MoneyOnboardingView.test.tsx‎
Lines changed: 167 additions & 0 deletions b/‎app/components/UI/Money/Views/MoneyOnboardingView/MoneyOnboardingView.test.tsx‎
Lines changed: 167 additions & 0 deletions
@@ -26,6 +26,7 @@ import {
   type SetMusdConversionEducationSeenAction,
   type SetMusdConversionAssetDetailCtaSeenAction,
   type ClearMusdConversionAssetDetailCtasSeenAction,
+  type SetMoneyOnboardingSeenAction,
   type SetTokenOverviewChartTypeAction,
   UserActionType,
 } from './types';
@@ -226,6 +227,18 @@ export function clearMusdConversionAssetDetailCtasSeen(): ClearMusdConversionAss
   };
 }
 
+/**
+ * Action to set Money onboarding as seen
+ */
+export function setMoneyOnboardingSeen(
+  seen: boolean,
+): SetMoneyOnboardingSeenAction {
+  return {
+    type: UserActionType.SET_MONEY_ONBOARDING_SEEN,
+    payload: { seen },
+  };
+}
+
 /**
  * Action to set token overview chart type preference
  */
 
@@ -29,6 +29,7 @@ export enum UserActionType {
   SET_MUSD_CONVERSION_EDUCATION_SEEN = 'SET_MUSD_CONVERSION_EDUCATION_SEEN',
   SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN = 'SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN',
   CLEAR_MUSD_CONVERSION_ASSET_DETAIL_CTAS_SEEN = 'CLEAR_MUSD_CONVERSION_ASSET_DETAIL_CTAS_SEEN',
+  SET_MONEY_ONBOARDING_SEEN = 'SET_MONEY_ONBOARDING_SEEN',
   SET_TOKEN_OVERVIEW_CHART_TYPE = 'SET_TOKEN_OVERVIEW_CHART_TYPE',
 }
 
@@ -113,6 +114,11 @@ export type SetMusdConversionAssetDetailCtaSeenAction =
 export type ClearMusdConversionAssetDetailCtasSeenAction =
   Action<UserActionType.CLEAR_MUSD_CONVERSION_ASSET_DETAIL_CTAS_SEEN>;
 
+export type SetMoneyOnboardingSeenAction =
+  Action<UserActionType.SET_MONEY_ONBOARDING_SEEN> & {
+    payload: { seen: boolean };
+  };
+
 export type SetTokenOverviewChartTypeAction =
   Action<UserActionType.SET_TOKEN_OVERVIEW_CHART_TYPE> & {
     payload: { chartType: ChartType };
@@ -147,4 +153,5 @@ export type UserAction =
   | SetMusdConversionEducationSeenAction
   | SetMusdConversionAssetDetailCtaSeenAction
   | ClearMusdConversionAssetDetailCtasSeenAction
+  | SetMoneyOnboardingSeenAction
   | SetTokenOverviewChartTypeAction;
@@ -28,6 +28,7 @@ import {
   LABEL_BY_TAB_BAR_ICON_KEY,
 } from './TabBar.constants';
 import { selectChainId } from '../../../../selectors/networkController';
+import { useMoneyNavigation } from '../../../../components/UI/Money/hooks/useMoneyNavigation';
 
 const FILLED_ICONS: Partial<Record<TabBarIconKey, IconName>> = {
   [TabBarIconKey.Wallet]: IconName.HomeFilled,
@@ -44,6 +45,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const tabBarRef = useRef(null);
   const previousTabIndexRef = useRef<number>(state.index);
   const tw = useTailwind();
+  const { navigateToMoneyHome } = useMoneyNavigation();
 
   const renderTabBarItem = useCallback(
     (route: { name: string; key: string }, index: number) => {
@@ -111,11 +113,10 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
           case Routes.TRENDING_VIEW:
             navigation.navigate(Routes.TRENDING_VIEW);
             break;
-          case Routes.MONEY.HOME:
-            navigation.navigate(Routes.MONEY.ROOT, {
-              screen: Routes.MONEY.HOME,
-            });
+          case Routes.MONEY.HOME: {
+            navigateToMoneyHome();
             break;
+          }
         }
       };
 
@@ -140,13 +141,16 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
       );
     },
     [
-      state,
       descriptors,
+      state.routeNames,
+      state.index,
+      state.routes,
+      tw,
       navigation,
-      chainId,
       trackEvent,
       createEventBuilder,
-      tw,
+      chainId,
+      navigateToMoneyHome,
     ],
   );
 
 
@@ -103,6 +103,7 @@ import { StakeModalStack, StakeScreenStack } from '../../UI/Stake/routes';
 import { AssetLoader } from '../../Views/AssetLoader';
 import { EarnScreenStack, EarnModalStack } from '../../UI/Earn/routes';
 import { MoneyAccountStackGate, MoneyModalStack } from '../../UI/Money/routes';
+import MoneyOnboardingView from '../../UI/Money/Views/MoneyOnboardingView';
 import { selectMoneyHomeScreenEnabledFlag } from '../../UI/Money/selectors/featureFlags';
 import { BridgeTransactionDetails } from '../../UI/Bridge/components/TransactionDetails/TransactionDetails';
 import { BridgeModalStack, BridgeScreenStack } from '../../UI/Bridge/routes';
@@ -1228,6 +1229,11 @@ const MainNavigator = () => {
             component={MoneyAccountStackGate}
             options={{ headerShown: false, ...slideFromRightAnimation }}
           />
+          <Stack.Screen
+            name={Routes.MONEY.ONBOARDING}
+            component={MoneyOnboardingView}
+            options={{ headerShown: false }}
+          />
           <Stack.Screen
             name={Routes.MONEY.MODALS.ROOT}
             component={MoneyModalStack}
 
@@ -0,0 +1,167 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react-native';
+import MoneyOnboardingView, {
+  MONEY_ONBOARDING_STEP_DURATION_MS,
+} from './MoneyOnboardingView';
+import { RiveOnboardingStepperTestIds } from '../../../RiveOnboardingStepper/RiveOnboardingStepper.testIds';
+import { __clearLastMockedMethods } from '../../../../../__mocks__/rive-react-native';
+import Routes from '../../../../../constants/navigation/Routes';
+
+const mockGoBack = jest.fn();
+const mockNavigate = jest.fn();
+const mockDispatch = jest.fn();
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({ goBack: mockGoBack, navigate: mockNavigate }),
+}));
+
+jest.mock('react-redux', () => ({
+  useDispatch: () => mockDispatch,
+  useSelector: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('../../hooks/useMoneyAccountBalance', () => ({
+  __esModule: true,
+  default: () => ({ apyPercent: 4 }),
+}));
+
+jest.mock('react-native-linear-gradient', () => 'LinearGradient');
+
+jest.mock('react-native-reanimated', () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const Reanimated = require('react-native-reanimated/mock');
+  Reanimated.default.call = jest.fn();
+  return Reanimated;
+});
+
+jest.mock(
+  '../../../../../animations/money_account_onboarding_animation.riv',
+  () => 1,
+  { virtual: true },
+);
+
+describe('MoneyOnboardingView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    __clearLastMockedMethods();
+  });
+
+  describe('Rendering', () => {
+    it('renders the onboarding stepper container', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      expect(
+        getByTestId(RiveOnboardingStepperTestIds.CONTAINER),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the progress bar', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      expect(
+        getByTestId(RiveOnboardingStepperTestIds.PROGRESS_BAR),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders five progress segments', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      [0, 1, 2, 3, 4].forEach((index) => {
+        expect(
+          getByTestId(
+            `${RiveOnboardingStepperTestIds.PROGRESS_SEGMENT}-${index}`,
+          ),
+        ).toBeOnTheScreen();
+      });
+    });
+
+    it('renders the Rive animation', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      expect(
+        getByTestId(RiveOnboardingStepperTestIds.RIVE_ANIMATION),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the footer button', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      expect(
+        getByTestId(RiveOnboardingStepperTestIds.FOOTER_BUTTON),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the close button', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      expect(
+        getByTestId(RiveOnboardingStepperTestIds.CLOSE_BUTTON),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the first step title', () => {
+      const { getByText } = render(<MoneyOnboardingView />);
+      expect(getByText('Money accounts are here')).toBeOnTheScreen();
+    });
+
+    it('renders the first step body text', () => {
+      const { getByText } = render(<MoneyOnboardingView />);
+      expect(
+        getByText(
+          'Earn up to 4% APY on your balance, available across your entire wallet.',
+        ),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the first step footer text', () => {
+      const { getByText } = render(<MoneyOnboardingView />);
+      expect(
+        getByText('APY is variable and may change at any time.'),
+      ).toBeOnTheScreen();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('calls navigation.goBack when close button is pressed', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      fireEvent.press(getByTestId(RiveOnboardingStepperTestIds.CLOSE_BUTTON));
+      expect(mockGoBack).toHaveBeenCalledTimes(1);
+    });
+
+    it('dispatches setMoneyOnboardingSeen and navigates to Money home on completion', () => {
+      jest.useFakeTimers();
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      const footerButton = getByTestId(
+        RiveOnboardingStepperTestIds.FOOTER_BUTTON,
+      );
+
+      // Step 0 -> 1 (button starts enabled at step 0)
+      fireEvent.press(footerButton);
+      act(() => jest.advanceTimersByTime(MONEY_ONBOARDING_STEP_DURATION_MS));
+
+      // Step 1 -> 2
+      fireEvent.press(footerButton);
+      act(() => jest.advanceTimersByTime(MONEY_ONBOARDING_STEP_DURATION_MS));
+
+      // Step 2 -> 3
+      fireEvent.press(footerButton);
+      act(() => jest.advanceTimersByTime(MONEY_ONBOARDING_STEP_DURATION_MS));
+
+      // Step 3 -> 4 (last step, autoComplete timer starts)
+      fireEvent.press(footerButton);
+
+      // Auto-complete timer fires onComplete after durationMs
+      act(() => jest.advanceTimersByTime(MONEY_ONBOARDING_STEP_DURATION_MS));
+
+      expect(mockDispatch).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'SET_MONEY_ONBOARDING_SEEN' }),
+      );
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.HOME_TABS, {
+        screen: Routes.MONEY.ROOT,
+        params: { screen: Routes.MONEY.HOME },
+      });
+
+      jest.useRealTimers();
+    });
+
+    it('does not navigate to Money home when continuing between non-final steps', () => {
+      const { getByTestId } = render(<MoneyOnboardingView />);
+      fireEvent.press(getByTestId(RiveOnboardingStepperTestIds.FOOTER_BUTTON));
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
+});