refactor: migrate Text to design system in swaps-engineers components

app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.tsx

@@ -7,9 +7,7 @@ import BottomSheet, {
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
 import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader';
 import BottomSheetFooter from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
-import Text, {
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
+import { Text, TextVariant } from '@metamask/design-system-react-native';
 import {
   ButtonSize,
   ButtonVariants,
@@ -25,9 +23,6 @@ const createStyles = () =>
       paddingVertical: 20,
       paddingHorizontal: 16,
     },
-    errorMessage: {
-      textAlign: 'center',
-    },
   });
 
 interface BlockaidModalRouteParams {
@@ -62,7 +57,7 @@ const BlockaidModal = () => {
         {strings(`blockaid_modal.${errorType}_title`)}
       </BottomSheetHeader>
       <View style={styles.container}>
-        <Text variant={TextVariant.BodyMD} style={styles.errorMessage}>
+        <Text variant={TextVariant.BodyMd} twClassName="text-center">
           {errorMessage}
         </Text>
       </View>

app/components/UI/Bridge/components/QuoteCountdownTimer/QuoteCountdownTimer.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import Text, {
+import {
+  Box,
+  Text,
   TextColor,
   TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import { Box } from '@metamask/design-system-react-native';
+} from '@metamask/design-system-react-native';
 import {
   selectBridgeControllerState,
   selectBridgeFeatureFlags,
@@ -68,7 +69,7 @@ const QuoteCountdownTimer: React.FC = () => {
 
   return (
     <Box style={styles.container}>
-      <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+      <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
         {`0:${formattedSeconds}`}
       </Text>
     </Box>

app/components/UI/Bridge/components/QuoteDetailsCard/__snapshots__/QuoteDetailsCard.test.tsx.snap

@@ -406,13 +406,17 @@ exports[`QuoteDetailsCard renders initial state 1`] = `
                                 <Text
                                   accessibilityRole="text"
                                   style={
-                                    {
-                                      "color": "#66676a",
-                                      "fontFamily": "Geist-Regular",
-                                      "fontSize": 16,
-                                      "letterSpacing": 0,
-                                      "lineHeight": 24,
-                                    }
+                                    [
+                                      {
+                                        "color": "#66676a",
+                                        "fontFamily": "Geist-Regular",
+                                        "fontSize": 16,
+                                        "fontWeight": 400,
+                                        "letterSpacing": 0,
+                                        "lineHeight": 24,
+                                      },
+                                      undefined,
+                                    ]
                                   }
                                 >
                                   0:30

app/components/UI/Bridge/components/TokenButton.tsx

@@ -4,9 +4,11 @@ import {
   ImageSourcePropType,
   TouchableOpacity,
 } from 'react-native';
-import Text, {
+import {
+  FontWeight,
+  Text,
   TextVariant,
-} from '../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../component-library/hooks';
 import { Theme } from '../../../../util/theme/models';
 import { Box } from '../../Box/Box';
@@ -49,11 +51,6 @@ const createStyles = (params: StylesParams) => {
       paddingRight: 11,
       ...shadows.size.xs,
     },
-    tokenSymbol: {
-      color: theme.colors.text.default,
-      fontSize: theme.typography.sHeadingLG.fontSize,
-      fontWeight: 500,
-    },
   });
 };
 
@@ -88,7 +85,7 @@ export const TokenButton: React.FC<TokenProps> = ({
           <TokenIcon symbol={symbol} icon={iconUrl} style={styles.icon} />
         </BadgeWrapper>
 
-        <Text style={styles.tokenSymbol} variant={TextVariant.HeadingLG}>
+        <Text variant={TextVariant.HeadingLg} fontWeight={FontWeight.Medium}>
           {symbol}
         </Text>
       </Box>

app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import Text, {
+import {
+  FontWeight,
   TextColor,
+  Text,
   TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import {
   AlignItems,
   FlexDirection,
@@ -110,13 +112,14 @@ const TransactionAsset = ({
         flexDirection={FlexDirection.Column}
         gap={2}
       >
-        <Text variant={TextVariant.BodyLGMedium}>
+        <Text variant={TextVariant.BodyLg} fontWeight={FontWeight.Medium}>
           {tokenAmount} {token.symbol}
         </Text>
         {txType === TransactionType.bridge && (
           <Text
-            variant={TextVariant.BodyMDMedium}
-            color={TextColor.Alternative}
+            variant={TextVariant.BodyMd}
+            fontWeight={FontWeight.Medium}
+            color={TextColor.TextAlternative}
             style={styles.networkName}
           >
             {networkName}