fix(MUSD-744): rewire tab nav inside MainNavigator to avoid DS files

Reverts all changes to app/component-library/components/Navigation/TabBar/*
and to useCashNavigation so this PR no longer triggers
@MetaMask/design-system-engineers CODEOWNERS review, and so the
CashSection.test.tsx test that asserts the original navigate signature
passes again.

The tab bar stays visible on Money Home because the Money Tab.Screen is
now registered as Routes.MONEY.ROOT (instead of Routes.MONEY.HOME), and
the outer Stack.Screen for Routes.MONEY.ROOT is removed. The original
TabBar handler navigate(Routes.MONEY.ROOT, { screen: Routes.MONEY.HOME })
resolves to the tab itself with the inner stack's initial screen, so the
global tab bar stays mounted.

Side effect: the Money tab icon reverts to IconName.Bank. The IconName.Coin
swap will land in a separate small DS-owned PR.

Author: Kureev

app/component-library/components/Navigation/TabBar/TabBar.constants.ts

@@ -14,7 +14,7 @@ export const ICON_BY_TAB_BAR_ICON_KEY: IconByTabBarIconKey = {
   [TabBarIconKey.Setting]: IconName.Setting,
   [TabBarIconKey.Rewards]: IconName.MetamaskFoxOutline,
   [TabBarIconKey.Trending]: IconName.Search,
-  [TabBarIconKey.Money]: IconName.Coin,
+  [TabBarIconKey.Money]: IconName.Bank,
 };
 
 export const LABEL_BY_TAB_BAR_ICON_KEY = {

app/component-library/components/Navigation/TabBar/TabBar.test.tsx

@@ -220,36 +220,6 @@ describe('TabBar', () => {
     expect(navigation.navigate).toHaveBeenCalledWith(Routes.TRENDING_VIEW);
   });
 
-  it('navigates to money home when money tab is pressed', () => {
-    const moneyState = {
-      index: 0,
-      routes: [{ key: '1', name: 'Tab 1' }],
-    };
-    const moneyDescriptors: TestDescriptors = {
-      '1': {
-        options: {
-          tabBarIconKey: TabBarIconKey.Money,
-          rootScreenName: Routes.MONEY.HOME,
-        },
-      },
-    };
-
-    const { getByTestId } = renderWithProvider(
-      <TabBar
-        state={moneyState as TabNavigationState<ParamListBase>}
-        descriptors={
-          moneyDescriptors as Record<string, ExtendedBottomTabDescriptor>
-        }
-        navigation={navigation}
-      />,
-      { state: mockInitialState },
-    );
-
-    fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Money}`));
-    expect(navigation.navigate).toHaveBeenCalledWith(Routes.MONEY.HOME);
-    expect(navigation.navigate).toHaveBeenCalledTimes(1);
-  });
-
   it('does not render hidden tabs', () => {
     const stateWithHidden = {
       index: 0,

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -34,7 +34,7 @@ const FILLED_ICONS: Partial<Record<TabBarIconKey, IconName>> = {
   [TabBarIconKey.Activity]: IconName.ClockFilled,
   [TabBarIconKey.Trending]: IconName.Search,
   [TabBarIconKey.Rewards]: IconName.MetamaskFoxFilled,
-  [TabBarIconKey.Money]: IconName.Coin,
+  [TabBarIconKey.Money]: IconName.Bank,
 };
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
@@ -112,7 +112,9 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             navigation.navigate(Routes.TRENDING_VIEW);
             break;
           case Routes.MONEY.HOME:
-            navigation.navigate(Routes.MONEY.HOME);
+            navigation.navigate(Routes.MONEY.ROOT, {
+              screen: Routes.MONEY.HOME,
+            });
             break;
         }
       };

app/components/Nav/Main/MainNavigator.js

@@ -866,7 +866,7 @@ const HomeTabs = () => {
       {/* Activity Tab (replaced by Money when feature flag is on) */}
       {isMoneyHomeScreenEnabled ? (
         <Tab.Screen
-          name={Routes.MONEY.HOME}
+          name={Routes.MONEY.ROOT}
           options={options.money}
           component={MoneyScreenStack}
         />
@@ -1222,11 +1222,6 @@ const MainNavigator = () => {
       />
       {isMoneyHomeScreenEnabled && (
         <>
-          <Stack.Screen
-            name={Routes.MONEY.ROOT}
-            component={MoneyScreenStack}
-            options={{ headerShown: false, ...slideFromRightAnimation }}
-          />
           <Stack.Screen
             name={Routes.MONEY.MODALS.ROOT}
             component={MoneyModalStack}

app/components/Views/Homepage/Sections/Cash/useCashNavigation.test.ts

@@ -77,10 +77,11 @@ describe('useCashNavigation', () => {
       expect(mockNavigate).toHaveBeenCalledTimes(1);
       expect(mockNavigate).toHaveBeenCalledWith(
         Routes.WALLET.CASH_TOKENS_FULL_VIEW,
+        undefined,
       );
     });
 
-    it('navigates to Money Home tab when isMoneyHomeEnabled and education already seen', () => {
+    it('navigates to Money Home when isMoneyHomeEnabled and education already seen', () => {
       setupSelectors({
         isMoneyHomeEnabled: true,
         hasSeenEducation: true,
@@ -90,10 +91,12 @@ describe('useCashNavigation', () => {
       result.current.navigateToCash();
 
       expect(mockNavigate).toHaveBeenCalledTimes(1);
-      expect(mockNavigate).toHaveBeenCalledWith(Routes.MONEY.HOME);
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.MONEY.ROOT, {
+        screen: Routes.MONEY.HOME,
+      });
     });
 
-    it('navigates to education screen with Money Home tab returnTo when isMoneyHomeEnabled and education not seen', () => {
+    it('navigates to education screen with Money Home returnTo when isMoneyHomeEnabled and education not seen', () => {
       setupSelectors({
         isMoneyHomeEnabled: true,
         hasSeenEducation: false,
@@ -106,7 +109,10 @@ describe('useCashNavigation', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.EARN.ROOT, {
         screen: Routes.EARN.MUSD.CONVERSION_EDUCATION,
         params: {
-          returnTo: { screen: Routes.MONEY.HOME },
+          returnTo: {
+            screen: Routes.MONEY.ROOT,
+            params: { screen: Routes.MONEY.HOME },
+          },
         },
       });
     });

app/components/Views/Homepage/Sections/Cash/useCashNavigation.ts

@@ -16,7 +16,7 @@ export const useCashNavigation = () => {
 
   const navigateToCash = useCallback(() => {
     const destination: MusdNavigationTarget = isMoneyHomeEnabled
-      ? { screen: Routes.MONEY.HOME }
+      ? { screen: Routes.MONEY.ROOT, params: { screen: Routes.MONEY.HOME } }
       : { screen: Routes.WALLET.CASH_TOKENS_FULL_VIEW };
 
     if (!hasSeenEducation) {
@@ -27,7 +27,7 @@ export const useCashNavigation = () => {
       return;
     }
 
-    navigation.navigate(destination.screen);
+    navigation.navigate(destination.screen, destination.params);
   }, [isMoneyHomeEnabled, hasSeenEducation, navigation]);
 
   return { navigateToCash, isMoneyHomeEnabled, hasSeenEducation };