feat: MUSD-741, MUSD-743, MUSD-744 — Money Home header polish + tab bar (#29645)

## **Description**

Bundle of polish items on the Money Home screen.

- **MUSD-741** migrates the "X% APY" pill in the Money Home header from
a hand-rolled `Box + Text` to the MMDS `Tag` component (severity =
success), and bumps the inner text from `BodySm` (14px) to `BodyMd`
(16px) so yield reads as a primary value prop.
- **MUSD-743** removes the back chevron from the Money Home header. With
Money now a top-level tab destination, the back button was misleading;
the kebab on the right naturally aligns with the title via
`HeaderStandard`'s built-in layout.
- **MUSD-744** renders the global wallet action bar at the bottom of
Money Home so the screen functions as a proper tab destination instead
of a dead-end. Concretely:
- The Money `Tab.Screen` is registered as `Routes.MONEY.ROOT` (instead
of `Routes.MONEY.HOME`) and wired to `MoneyScreenStack`. This matches
the existing `TabBar` handler which navigates to `Routes.MONEY.ROOT, {
screen: Routes.MONEY.HOME }` — so the tab mounts with its inner stack
and the global tab bar stays visible.
- The outer `Stack.Screen` for `Routes.MONEY.ROOT` (which was pushing
above `HomeTabs` and hiding the tab bar) is removed from
`MainNavigator`.
- All changes are inside `app/components/Nav/Main/MainNavigator.js` — no
design-system-owned files are touched.
- `MoneyFooter` ("Add money" CTA) was unpinned from its sticky-bottom
position and now flows inside the `ScrollView` content as a normal
section (`px-4 py-3`), with a single Divider above it (matching the
section rhythm) and `paddingBottom: 40` on the scroll content. MUSD-747
will reintroduce sticky behaviour with peek-and-hide based on the
onboarding stepper's viewport state.

No analytics changes, no copy changes, no behavioural changes outside
the navigation rewiring described above.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
- https://consensyssoftware.atlassian.net/browse/MUSD-741
- https://consensyssoftware.atlassian.net/browse/MUSD-743
- https://consensyssoftware.atlassian.net/browse/MUSD-744

## **Manual testing steps**

```gherkin
Feature: Money Home header polish + tab bar visibility

  Scenario: user opens Money Home via the bottom tab
    Given the Money Account feature flag is enabled
    When the user taps the Money tab in the bottom navigation
    Then Money Home renders with the global tab bar visible at the bottom
    And the "Money" tab is shown as active
    And no back chevron is rendered in the Money Home header
    And the options (kebab) icon sits in the top-right
    And the "X% APY" pill is rendered as an MMDS Tag at 16px text

  Scenario: Add money button placement
    Given Money Home is open
    When the user scrolls to the bottom of the page
    Then the "Add money" button renders inside the scroll content as the last section
    And it is preceded by the standard section divider
    And it has visible breathing room before the global tab bar
```

## **Screenshots/Recordings**

### **Before**

<!-- to be added -->

### **After**

<!-- to be added -->

## **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
- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
- [ ] I've tested with a power user scenario
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk due to navigation rewiring (Money tab now routes to
`Routes.MONEY.ROOT`/`MoneyScreenStack` and a stack-level screen is
removed), which could affect tab routing and back-stack behavior.
UI/layout changes are otherwise straightforward and covered by updated
tests.
> 
> **Overview**
> Makes Money a first-class bottom-tab destination by switching the
conditional tab registration from `Routes.MONEY.HOME` to
`Routes.MONEY.ROOT` and mounting `MoneyScreenStack` directly, while
removing the extra `Routes.MONEY.ROOT` stack screen that previously sat
above `HomeTabs` (keeping the global tab bar visible).
> 
> Polishes Money Home UI: replaces the APY pill with the design-system
`Tag`, updates the header to a title+menu-only `HeaderBase` (removing
the back button), and simplifies the “Add money” footer from an
animated/sticky overlay to a normal scroll section with fixed bottom
padding; associated peek/hide stepper logic and its unit tests are
deleted and component tests are updated accordingly.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
a742e0d. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Kureev

app/components/Nav/Main/MainNavigator.js

@@ -867,9 +867,9 @@ 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={WalletTabModalFlow}
+          component={MoneyScreenStack}
         />
       ) : (
         <Tab.Screen
@@ -1223,11 +1223,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/Nav/Main/MainNavigator.test.tsx

@@ -1446,45 +1446,50 @@ describe('MainNavigator', () => {
     });
 
     describe('Money home screen conditional rendering', () => {
-      it('includes Money route when feature flag is enabled', () => {
-        mockSelectMoneyHomeScreenEnabledFlag.mockReturnValue(true);
-
-        const container = renderWithProvider(<MainNavigator />, {
+      const getHomeTabsScreenNames = (): string[] => {
+        const { root: mainRoot } = renderWithProvider(<MainNavigator />, {
           state: initialRootState,
         });
-
-        const screenProps = container.root.children
+        const homeScreen = mainRoot.findAll(
+          (node: ReactTestInstance) =>
+            node.type?.toString?.() === 'Screen' && node.props?.name === 'Home',
+        )[0];
+        const HomeTabs = homeScreen?.props?.component as React.ComponentType<
+          Record<string, unknown>
+        >;
+        const { root: homeRoot } = renderWithProvider(
+          <HomeTabs route={{ params: {} }} />,
+          { state: initialRootState },
+        );
+        const tabNavigatorNode = homeRoot.findAll(
+          (node: ReactTestInstance) =>
+            node.type?.toString?.() === 'TabNavigator',
+        )[0];
+        return (tabNavigatorNode?.children ?? [])
           .filter(
             (child): child is ReactTestInstance =>
               typeof child === 'object' &&
-              'type' in child &&
               'props' in child &&
-              child.type?.toString() === 'Screen',
+              typeof child.props?.name === 'string',
           )
-          .map((child) => child.props.name);
+          .map((child) => child.props.name as string);
+      };
+
+      it('includes Money route when feature flag is enabled', () => {
+        mockSelectMoneyHomeScreenEnabledFlag.mockReturnValue(true);
 
-        expect(screenProps).toContain(Routes.MONEY.ROOT);
+        const tabScreenNames = getHomeTabsScreenNames();
+
+        expect(tabScreenNames).toContain(Routes.MONEY.ROOT);
         mockSelectMoneyHomeScreenEnabledFlag.mockReturnValue(false);
       });
 
       it('excludes Money route when feature flag is disabled', () => {
         mockSelectMoneyHomeScreenEnabledFlag.mockReturnValue(false);
 
-        const container = renderWithProvider(<MainNavigator />, {
-          state: initialRootState,
-        });
-
-        const screenProps = container.root.children
-          .filter(
-            (child): child is ReactTestInstance =>
-              typeof child === 'object' &&
-              'type' in child &&
-              'props' in child &&
-              child.type?.toString() === 'Screen',
-          )
-          .map((child) => child.props.name);
+        const tabScreenNames = getHomeTabsScreenNames();
 
-        expect(screenProps).not.toContain(Routes.MONEY.ROOT);
+        expect(tabScreenNames).not.toContain(Routes.MONEY.ROOT);
       });
     });
   });

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.styles.ts

@@ -7,11 +7,8 @@ const styleSheet = (params: { theme: Theme }) =>
       flex: 1,
       backgroundColor: params.theme.colors.background.default,
     },
-    footerOverlay: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
+    scrollContent: {
+      paddingBottom: 40,
     },
   });