feat: migrate TooltipModal to design system components

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', {
+            paddingBottom: insets.bottom,
+          })}
+        >
+          <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
             {footerText}
           </Text>
-        </View>
+        </Box>
       )}
     </BottomSheet>
   );