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

app/components/Nav/Main/MainNavigator.js

@@ -866,9 +866,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
@@ -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/Nav/Main/MainNavigator.test.tsx

@@ -1433,45 +1433,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

@@ -8,7 +8,7 @@ const styleSheet = (params: { theme: Theme }) =>
       backgroundColor: params.theme.colors.background.default,
     },
     scrollContent: {
-      paddingBottom: 0,
+      paddingBottom: 40,
     },
   });
 

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx

@@ -256,14 +256,6 @@ describe('MoneyHomeView', () => {
     expect(getByTestId(MoneyFooterTestIds.CONTAINER)).toBeOnTheScreen();
   });
 
-  it('pressing the back button calls navigation.goBack', () => {
-    const { getByTestId } = renderWithProvider(<MoneyHomeView />);
-
-    fireEvent.press(getByTestId(MoneyHeaderTestIds.BACK_BUTTON));
-
-    expect(mockGoBack).toHaveBeenCalledTimes(1);
-  });
-
   it('navigates to the Money activity screen when View all is pressed', () => {
     const { getByTestId } = renderWithProvider(<MoneyHomeView />);
 

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

@@ -92,10 +92,6 @@ const MoneyHomeView = () => {
     return moneyFormatFiat(new BigNumber(earnings), currentCurrency);
   }, [totalFiatRaw, apyPercent, currentCurrency, formattedZero]);
 
-  const handleBackPress = useCallback(() => {
-    navigation.goBack();
-  }, [navigation]);
-
   const handleMenuPress = useCallback(() => {
     navigation.navigate(Routes.MONEY.MODALS.ROOT, {
       screen: Routes.MONEY.MODALS.MORE_SHEET,
@@ -218,10 +214,7 @@ const MoneyHomeView = () => {
       twClassName="flex-1 bg-default"
       testID={MoneyHomeViewTestIds.CONTAINER}
     >
-      <MoneyHeader
-        onBackPress={handleBackPress}
-        onMenuPress={handleMenuPress}
-      />
+      <MoneyHeader onMenuPress={handleMenuPress} />
       <ScrollView
         testID={MoneyHomeViewTestIds.SCROLL_VIEW}
         contentContainerStyle={styles.scrollContent}
@@ -309,13 +302,16 @@ const MoneyHomeView = () => {
           </>
         )}
         {!isMilestone && (
-          <MoneyWhatYouGet
-            apy={apyPercent}
-            onLearnMorePress={handleLearnMorePress}
-          />
+          <>
+            <MoneyWhatYouGet
+              apy={apyPercent}
+              onLearnMorePress={handleLearnMorePress}
+            />
+            <Divider />
+          </>
         )}
+        <MoneyFooter onAddMoneyPress={handleAddPress} />
       </ScrollView>
-      <MoneyFooter onAddMoneyPress={handleAddPress} />
     </Box>
   );
 };

app/components/UI/Money/components/MoneyBalanceSummary/MoneyBalanceSummary.tsx

@@ -9,6 +9,8 @@ import {
   IconColor,
   IconName,
   Skeleton,
+  Tag,
+  TagSeverity,
   Text,
   TextColor,
   TextVariant,
@@ -87,19 +89,19 @@ const MoneyBalanceSummary = ({
           />
         ) : (
           isPositiveNumber(apy) && (
-            <Box
-              twClassName="self-start rounded-md bg-success-muted px-2 py-0.5"
+            <Tag
+              severity={TagSeverity.Success}
               testID={MoneyBalanceSummaryTestIds.APY_TAG}
             >
               <Text
-                variant={TextVariant.BodySm}
+                variant={TextVariant.BodyMd}
                 fontWeight={FontWeight.Medium}
                 color={TextColor.SuccessDefault}
                 testID={MoneyBalanceSummaryTestIds.APY}
               >
                 {strings('money.apy_label', { percentage: apy })}
               </Text>
-            </Box>
+            </Tag>
           )
         )}
         {onApyInfoPress && isPositiveNumber(apy) && !isLoading && (

app/components/UI/Money/components/MoneyFooter/MoneyFooter.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React from 'react';
 import {
   Box,
   Button,
@@ -8,35 +7,25 @@ import {
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
 import { MoneyFooterTestIds } from './MoneyFooter.testIds';
-import createStyles from './MoneyFooter.styles';
 
 interface MoneyFooterProps {
   onAddMoneyPress?: () => void;
 }
 
 const MoneyFooter = ({
   onAddMoneyPress = () => undefined,
-}: MoneyFooterProps) => {
-  const { bottom } = useSafeAreaInsets();
-  const styles = useMemo(() => createStyles(bottom), [bottom]);
-
-  return (
-    <Box
-      twClassName="px-4 pt-4 bg-default"
-      style={styles.container}
-      testID={MoneyFooterTestIds.CONTAINER}
+}: MoneyFooterProps) => (
+  <Box twClassName="px-4 py-3" testID={MoneyFooterTestIds.CONTAINER}>
+    <Button
+      variant={ButtonVariant.Primary}
+      size={ButtonSize.Lg}
+      isFullWidth
+      onPress={onAddMoneyPress}
+      testID={MoneyFooterTestIds.ADD_MONEY_BUTTON}
     >
-      <Button
-        variant={ButtonVariant.Primary}
-        size={ButtonSize.Lg}
-        isFullWidth
-        onPress={onAddMoneyPress}
-        testID={MoneyFooterTestIds.ADD_MONEY_BUTTON}
-      >
-        {strings('money.footer.add_money')}
-      </Button>
-    </Box>
-  );
-};
+      {strings('money.footer.add_money')}
+    </Button>
+  </Box>
+);
 
 export default MoneyFooter;

app/components/UI/Money/components/MoneyHeader/MoneyHeader.test.tsx

@@ -3,33 +3,17 @@ import { render, fireEvent } from '@testing-library/react-native';
 import MoneyHeader from './MoneyHeader';
 import { MoneyHeaderTestIds } from './MoneyHeader.testIds';
 
-const noop = jest.fn();
-
 describe('MoneyHeader', () => {
-  it('renders the back and menu buttons', () => {
-    const { getByTestId } = render(
-      <MoneyHeader onBackPress={noop} onMenuPress={noop} />,
-    );
+  it('renders the menu button', () => {
+    const { getByTestId } = render(<MoneyHeader onMenuPress={jest.fn()} />);
 
-    expect(getByTestId(MoneyHeaderTestIds.BACK_BUTTON)).toBeOnTheScreen();
     expect(getByTestId(MoneyHeaderTestIds.MENU_BUTTON)).toBeOnTheScreen();
   });
 
-  it('calls onBackPress when the back button is pressed', () => {
-    const mockOnBackPress = jest.fn();
-    const { getByTestId } = render(
-      <MoneyHeader onBackPress={mockOnBackPress} onMenuPress={noop} />,
-    );
-
-    fireEvent.press(getByTestId(MoneyHeaderTestIds.BACK_BUTTON));
-
-    expect(mockOnBackPress).toHaveBeenCalledTimes(1);
-  });
-
   it('calls onMenuPress when the menu button is pressed', () => {
     const mockOnMenuPress = jest.fn();
     const { getByTestId } = render(
-      <MoneyHeader onBackPress={noop} onMenuPress={mockOnMenuPress} />,
+      <MoneyHeader onMenuPress={mockOnMenuPress} />,
     );
 
     fireEvent.press(getByTestId(MoneyHeaderTestIds.MENU_BUTTON));

app/components/UI/Money/components/MoneyHeader/MoneyHeader.testIds.ts

@@ -1,5 +1,4 @@
 export const MoneyHeaderTestIds = {
   CONTAINER: 'money-header-container',
-  BACK_BUTTON: 'money-header-back-button',
   MENU_BUTTON: 'money-header-menu-button',
 } as const;

app/components/UI/Money/components/MoneyHeader/MoneyHeader.tsx

@@ -3,24 +3,15 @@ import { HeaderStandard, IconName } from '@metamask/design-system-react-native';
 import { MoneyHeaderTestIds } from './MoneyHeader.testIds';
 
 interface MoneyHeaderProps {
-  /**
-   * Handler for the back/navigation button
-   */
-  onBackPress: () => void;
   /**
    * Handler for the options menu button
    */
   onMenuPress: () => void;
 }
 
-const MoneyHeader = ({ onBackPress, onMenuPress }: MoneyHeaderProps) => (
+const MoneyHeader = ({ onMenuPress }: MoneyHeaderProps) => (
   <HeaderStandard
     testID={MoneyHeaderTestIds.CONTAINER}
-    onBack={onBackPress}
-    backButtonProps={{
-      accessibilityLabel: 'Back',
-      testID: MoneyHeaderTestIds.BACK_BUTTON,
-    }}
     endButtonIconProps={[
       {
         iconName: IconName.MoreVertical,