feat: migrate TooltipModal to design system components

app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx

@@ -34,9 +34,7 @@ const KeyValueRowLabel = ({ label, tooltip }: KeyValueRowLabelProps) => {
 
   const onNavigateToTooltipModal = () => {
     if (!hasTooltip) return;
-    openTooltipModal(tooltip.title, tooltip.content, undefined, undefined, {
-      bottomPadding: tooltip.bottomPadding,
-    });
+    openTooltipModal(tooltip.title, tooltip.content, undefined, undefined);
     tooltip?.onPress?.();
   };
 

app/component-library/components-temp/KeyValueRow/KeyValueRow.types.ts

@@ -37,10 +37,6 @@ interface KeyValueRowTooltip {
    * Optional onPress handler
    */
   onPress?: (...args: unknown[]) => unknown;
-  /**
-   * Optional bottom padding for the tooltip modal.
-   */
-  bottomPadding?: number;
 }
 
 /**

app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.test.tsx

@@ -62,7 +62,6 @@ describe('RewardsCard', () => {
         tooltip: strings('tooltip_modal.reward_rate.tooltip'),
         footerText: undefined,
         buttonText: undefined,
-        bottomPadding: undefined,
       },
       screen: 'tooltipModal',
     });
@@ -94,7 +93,6 @@ describe('RewardsCard', () => {
         tooltip: strings('tooltip_modal.reward_frequency.tooltip'),
         footerText: undefined,
         buttonText: undefined,
-        bottomPadding: undefined,
       },
       screen: 'tooltipModal',
     });

app/components/Views/TooltipModal/ToolTipModal.types.ts

@@ -5,5 +5,4 @@ export interface TooltipModalRouteParams {
   tooltip: string | ReactNode;
   footerText?: string;
   buttonText?: string;
-  bottomPadding?: number;
 }

app/components/Views/TooltipModal/TooltipModal.test.tsx

@@ -10,30 +10,61 @@ import { useParams } from '../../../util/navigation/navUtils';
 
 const mockOnCloseBottomSheet = jest.fn();
 
-jest.mock('../../../util/navigation/navUtils', () => ({
-  useParams: jest.fn(),
+jest.mock('@metamask/design-system-twrnc-preset', () => ({
+  useTailwind: () => {
+    const tw = () => ({});
+    tw.style = () => ({});
+    return tw;
+  },
 }));
 
-jest.mock('../../../component-library/hooks', () => ({
-  useStyles: () => ({
-    styles: {
-      content: {},
-      footerContainer: {},
-      footerTextContainer: {},
-    },
-  }),
-}));
+jest.mock('@metamask/design-system-react-native', () => {
+  const ReactActual = jest.requireActual('react');
+  const {
+    View: ReactNativeView,
+    Text: ReactNativeText,
+    Pressable: ReactNativePressable,
+  } = jest.requireActual('react-native');
 
-jest.mock('../../../component-library/components/Texts/Text', () => {
-  const { Text: ReactNativeText } = jest.requireActual('react-native');
   return {
-    __esModule: true,
-    default: ReactNativeText,
-    TextVariant: {},
-    TextColor: {},
+    Box: ReactNativeView,
+    Text: ReactNativeText,
+    TextVariant: { BodyMd: 'BodyMd', BodySm: 'BodySm' },
+    TextColor: { TextAlternative: 'TextAlternative' },
+    ButtonSize: { Lg: 'Lg' },
+    BottomSheetFooter: ({
+      primaryButtonProps,
+    }: {
+      primaryButtonProps?: {
+        children: React.ReactNode;
+        onPress: () => void;
+      };
+    }) =>
+      primaryButtonProps
+        ? ReactActual.createElement(
+            ReactNativeView,
+            { testID: 'bottom-sheet-footer' },
+            ReactActual.createElement(
+              ReactNativePressable,
+              {
+                testID: 'footer-primary-button',
+                onPress: primaryButtonProps.onPress,
+              },
+              ReactActual.createElement(
+                ReactNativeText,
+                {},
+                primaryButtonProps.children,
+              ),
+            ),
+          )
+        : null,
   };
 });
 
+jest.mock('../../../util/navigation/navUtils', () => ({
+  useParams: jest.fn(),
+}));
+
 jest.mock(
   '../../../component-library/components-temp/HeaderCompactStandard',
   () => {
@@ -80,43 +111,6 @@ jest.mock(
   },
 );
 
-jest.mock(
-  '../../../component-library/components/BottomSheets/BottomSheetFooter',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const {
-      View: ReactNativeView,
-      Text: ReactNativeText,
-      Pressable: ReactNativePressable,
-    } = jest.requireActual('react-native');
-
-    return {
-      __esModule: true,
-      default: ({
-        buttonPropsArray,
-      }: {
-        buttonPropsArray: { label: string; onPress: () => void }[];
-      }) =>
-        ReactActual.createElement(
-          ReactNativeView,
-          { testID: 'bottom-sheet-footer' },
-          ...buttonPropsArray.map((buttonProps) =>
-            ReactActual.createElement(
-              ReactNativePressable,
-              {
-                key: buttonProps.label,
-                onPress: buttonProps.onPress,
-                testID: `footer-button-${buttonProps.label}`,
-              },
-              ReactActual.createElement(ReactNativeText, {}, buttonProps.label),
-            ),
-          ),
-        ),
-      ButtonsAlignment: { Horizontal: 'Horizontal' },
-    };
-  },
-);
-
 jest.mock('../../../../locales/i18n', () => ({
   strings: (key: string) => `i18n:${key}`,
 }));

app/components/Views/TooltipModal/index.tsx

@@ -1,32 +1,29 @@
 import React, { useRef, isValidElement, useCallback } from 'react';
-import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import {
+  Box,
+  Text,
+  TextVariant,
+  TextColor,
+  BottomSheetFooter,
+  ButtonSize,
+} from '@metamask/design-system-react-native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
-import BottomSheetFooter, {
-  ButtonsAlignment,
-} from '../../../component-library/components/BottomSheets/BottomSheetFooter';
 import HeaderCompactStandard from '../../../component-library/components-temp/HeaderCompactStandard';
-import Text, {
-  TextVariant,
-  TextColor,
-} from '../../../component-library/components/Texts/Text';
-import {
-  ButtonSize,
-  ButtonVariants,
-} from '../../../component-library/components/Buttons/Button';
 import { strings } from '../../../../locales/i18n';
 
 import { TooltipModalRouteParams } from './ToolTipModal.types';
-import { useStyles } from '../../../component-library/hooks';
-import styleSheet from './ToolTipModal.styles';
 import { useParams } from '../../../util/navigation/navUtils';
 
 const TooltipModal = () => {
-  const { tooltip, title, footerText, buttonText, bottomPadding } =
+  const { tooltip, title, footerText, buttonText } =
     useParams<TooltipModalRouteParams>();
 
-  const { styles } = useStyles(styleSheet, { bottomPadding });
+  const tw = useTailwind();
+  const insets = useSafeAreaInsets();
 
   const bottomSheetRef = useRef<BottomSheetRef>(null);
 
@@ -36,38 +33,37 @@ const TooltipModal = () => {
     bottomSheetRef.current?.onCloseBottomSheet();
   }, []);
 
-  const footerButtons = [
-    {
-      label: buttonText ?? strings('browser.got_it'),
-      onPress: handleGotItPress,
-      variant: ButtonVariants.Primary,
-      size: ButtonSize.Lg,
-    },
-  ];
-
   return (
     <BottomSheet ref={bottomSheetRef}>
       <HeaderCompactStandard title={title} onClose={onCloseModal} />
-      <View style={styles.content}>
+      <Box twClassName="px-4">
         {isValidElement(tooltip) ? (
           tooltip
         ) : (
-          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+          <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
             {tooltip}
           </Text>
         )}
-      </View>
+      </Box>
       <BottomSheetFooter
-        buttonsAlignment={ButtonsAlignment.Horizontal}
-        buttonPropsArray={footerButtons}
-        style={styles.footerContainer}
+        primaryButtonProps={{
+          size: ButtonSize.Lg,
+          children: buttonText ?? strings('browser.got_it'),
+          onPress: handleGotItPress,
+        }}
+        twClassName="px-4 pt-6"
+        style={tw.style({ paddingBottom: footerText ? 0 : insets.bottom })}
       />
       {footerText && (
-        <View style={styles.footerTextContainer}>
-          <Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
+        <Box
+          style={tw.style('flex-row justify-center px-4 pt-1', {
+            paddingBottom: insets.bottom,
+          })}
+        >
+          <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
             {footerText}
           </Text>
-        </View>
+        </Box>
       )}
     </BottomSheet>
   );

app/components/hooks/useTooltipModal.test.tsx

@@ -31,7 +31,6 @@ interface TooltipModalNavigateParams {
     tooltip: string | React.ReactNode;
     footerText?: string;
     buttonText?: string;
-    bottomPadding?: number;
   };
 }
 
@@ -57,7 +56,6 @@ describe('useTooltipModal', () => {
         tooltip,
         footerText,
         buttonText,
-        bottomPadding: undefined,
       },
     });
   });
@@ -76,29 +74,6 @@ describe('useTooltipModal', () => {
     expect(navigateParams.params.tooltip).toBe(tooltip);
   });
 
-  it('includes bottomPadding when provided', () => {
-    const { result } = renderHook(() => useTooltipModal());
-    const title = 'Title';
-    const tooltip = 'Tooltip text';
-    const bottomPadding = 24;
-
-    result.current.openTooltipModal(title, tooltip, undefined, undefined, {
-      bottomPadding,
-    });
-
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.MODAL.ROOT_MODAL_FLOW, {
-      screen: Routes.SHEET.TOOLTIP_MODAL,
-      params: {
-        title,
-        tooltip,
-        footerText: undefined,
-        buttonText: undefined,
-        bottomPadding,
-      },
-    });
-  });
-
   it('returns stable openTooltipModal reference across rerenders', () => {
     const { result, rerender } = renderHook(() => useTooltipModal());
     const firstReturnValue = result.current;

app/components/hooks/useTooltipModal.tsx

@@ -2,10 +2,6 @@ import { useNavigation } from '@react-navigation/native';
 import Routes from '../../constants/navigation/Routes';
 import { ReactNode, useCallback, useMemo } from 'react';
 
-interface TooltipOptions {
-  bottomPadding?: number;
-}
-
 const useTooltipModal = () => {
   const { navigate } = useNavigation();
 
@@ -15,7 +11,6 @@ const useTooltipModal = () => {
       tooltip: string | ReactNode,
       footerText?: string,
       buttonText?: string,
-      options?: TooltipOptions,
     ) =>
       navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
         screen: Routes.SHEET.TOOLTIP_MODAL,
@@ -24,7 +19,6 @@ const useTooltipModal = () => {
           tooltip,
           footerText,
           buttonText,
-          bottomPadding: options?.bottomPadding,
         },
       }),
     [navigate],