Reality2byte · pull · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx b/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx
@@ -35,30 +35,24 @@ const TabsList = forwardRef<TabsListRef, TabsListProps>(
 
     const tabs: TabItem[] = useMemo(
       () =>
-        React.Children.map(children, (child, index) => {
-          if (React.isValidElement(child)) {
-            const props = child.props as {
+        React.Children.toArray(children)
+          .filter((child) => React.isValidElement(child))
+          .map((child, index) => {
+            const props = (child as React.ReactElement).props as {
               tabLabel?: string;
               isDisabled?: boolean;
             };
             const tabLabel = props.tabLabel || `Tab ${index + 1}`;
             const isDisabled = props.isDisabled || false;
             return {
-              key: child.key?.toString() || `tab-${index}`,
+              key:
+                (child as React.ReactElement).key?.toString() || `tab-${index}`,
               label: tabLabel,
               content: child,
               isDisabled,
               isLoaded: false,
             };
-          }
-          return {
-            key: `tab-${index}`,
-            label: `Tab ${index + 1}`,
-            content: child,
-            isDisabled: false,
-            isLoaded: false,
-          };
-        }) || [],
+          }),
       [children],
     );
 

diff --git a/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap b/app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap
@@ -146,109 +146,6 @@ exports[`TabsList Edge Cases handles non-React element children with default val
           </Text>
         </View>
       </View>
-      <View
-        onLayout={[Function]}
-        style={
-          {
-            "flexShrink": 0,
-          }
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingBottom": 4,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 4,
-              "position": "relative",
-            }
-          }
-          testID="undefined-tab-1"
-        >
-          <Text
-            accessibilityRole="text"
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#121314",
-                  "fontFamily": "Geist Bold",
-                  "fontSize": 16,
-                  "fontWeight": 400,
-                  "letterSpacing": 0,
-                  "lineHeight": 24,
-                },
-                {
-                  "opacity": 0,
-                },
-              ]
-            }
-          >
-            Tab 2
-          </Text>
-          <Text
-            accessibilityRole="text"
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#686e7d",
-                  "fontFamily": "Geist Regular",
-                  "fontSize": 16,
-                  "fontWeight": 400,
-                  "letterSpacing": 0,
-                  "lineHeight": 24,
-                },
-                {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "display": "flex",
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-              ]
-            }
-          >
-            Tab 2
-          </Text>
-        </View>
-      </View>
     </View>
   </View>
   <View

diff --git a/app/components/Base/SelectorButton.tsx b/app/components/Base/SelectorButton.tsx
@@ -6,7 +6,11 @@ import {
   TouchableOpacityProps,
   GestureResponderEvent,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import Icon, {
+  IconName,
+  IconSize,
+  IconColor,
+} from '../../component-library/components/Icons/Icon';
 import { useTheme } from '../../util/theme';
 import { Theme } from '@metamask/design-tokens';
 
@@ -19,7 +23,7 @@ interface SelectorButtonProps {
 const createStyles = (colors: Theme['colors']) =>
   StyleSheet.create({
     container: {
-      backgroundColor: colors.background.alternative,
+      backgroundColor: colors.background.muted,
       paddingVertical: 8,
       paddingHorizontal: 10,
       borderRadius: 100,
@@ -28,10 +32,7 @@ const createStyles = (colors: Theme['colors']) =>
       justifyContent: 'center',
     },
     caretDown: {
-      textAlign: 'right',
-      color: colors.text.alternative,
-      marginLeft: 10,
-      marginRight: 5,
+      marginHorizontal: 5,
     },
   });
 
@@ -48,7 +49,12 @@ const SelectorButton: React.FC<SelectorButtonProps & TouchableOpacityProps> = ({
     <TouchableOpacity onPress={onPress} disabled={disabled} {...props}>
       <View style={styles.container}>
         <>{children}</>
-        <Icon name="caret-down" size={18} style={styles.caretDown} />
+        <Icon
+          name={IconName.ArrowDown}
+          size={IconSize.Sm}
+          color={IconColor.Alternative}
+          style={styles.caretDown}
+        />
       </View>
     </TouchableOpacity>
   );

diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts
@@ -8,47 +8,21 @@ export const styleSheet = (params: { theme: Theme }) => {
     container: {
       flex: 1,
     },
-    filterTabText: {
-      color: colors.text.alternative,
-    },
     filterContainer: {
+      paddingVertical: 8,
       paddingHorizontal: 16,
-      paddingVertical: 12,
       backgroundColor: colors.background.default,
     },
-    filterScrollView: {
-      flexGrow: 0,
-    },
-    filterTabContainer: {
-      gap: 8,
-    },
-    filterTabActive: {
-      backgroundColor: colors.background.defaultPressed,
-    },
-    transactionList: {
-      flex: 1,
-      minHeight: 1, // Prevents FlashList layout issues
-    },
     tabDescription: {
       paddingHorizontal: 16,
       paddingTop: 8,
     },
-    sectionHeader: {
-      paddingTop: 12,
-      paddingHorizontal: 16,
-      backgroundColor: colors.background.default,
-    },
-    sectionHeaderText: {
-      fontSize: 16,
-      fontWeight: '600' as const,
-      color: colors.text.alternative,
-    },
     transactionItem: {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
       paddingVertical: 16,
       paddingHorizontal: 16,
-      minHeight: 72, // Consistent height for FlashList
+      minHeight: 72,
     },
     tokenIconContainer: {
       width: 36,
@@ -104,12 +78,11 @@ export const styleSheet = (params: { theme: Theme }) => {
       flex: 1,
       justifyContent: 'center' as const,
       alignItems: 'center' as const,
-      paddingVertical: 48,
+      paddingVertical: 40,
     },
-    fillTag: {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      gap: 10,
+    sectionHeader: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
     },
   };
 };
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx
@@ -10,10 +10,15 @@ import React, {
 import { RefreshControl, ScrollView, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
-import Text, {
+import {
+  Text,
   TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
+  TextColor,
+  ButtonSize,
+} from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
+import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
+import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
 import Routes from '../../../../../constants/navigation/Routes';
 import { PerpsNavigationParamList } from '../../types/navigation';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../../../selectors/accountsController';
@@ -36,12 +41,11 @@ import { formatDateSection } from '../../utils/formatUtils';
 import { styleSheet } from './PerpsTransactionsView.styles';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { TraceName } from '../../../../../util/trace';
-import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
-import { ButtonSize } from '@metamask/design-system-react-native';
-import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
   const { styles } = useStyles(styleSheet, {});
+  const tw = useTailwind();
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
 
   // Transaction data is now computed from hooks instead of stored in state
@@ -266,7 +270,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.fill) {
       return (
         <Text
-          variant={TextVariant.BodySM}
+          variant={TextVariant.BodySm}
           style={item.fill.isPositive ? styles.profitAmount : styles.lossAmount}
         >
           {item.fill.amount}
@@ -285,7 +289,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
       }
 
       return (
-        <Text variant={TextVariant.BodySM} style={statusStyle}>
+        <Text variant={TextVariant.BodySm} style={statusStyle}>
           {item.order.text}
         </Text>
       );
@@ -294,7 +298,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.fundingAmount) {
       return (
         <Text
-          variant={TextVariant.BodySM}
+          variant={TextVariant.BodySm}
           style={
             item.fundingAmount.isPositive
               ? styles.profitAmount
@@ -314,7 +318,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.type === 'header') {
       return (
         <View style={styles.sectionHeader}>
-          <Text style={styles.sectionHeaderText}>{item.title}</Text>
+          <Text color={TextColor.TextAlternative}>{item.title}</Text>
         </View>
       );
     }
@@ -382,7 +386,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
-            style={styles.filterScrollView}
+            contentContainerStyle={tw.style('flex-row gap-3')}
             pointerEvents="auto"
             scrollEnabled={false}
           >
@@ -392,7 +396,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
 
         {filterTabDescription && (
           <View style={styles.tabDescription}>
-            <Text variant={TextVariant.BodySM}>{filterTabDescription}</Text>
+            <Text variant={TextVariant.BodySm}>{filterTabDescription}</Text>
           </View>
         )}
 
@@ -406,7 +410,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
       <View style={styles.filterContainer} pointerEvents="box-none">
         <ScrollView
           horizontal
-          contentContainerStyle={styles.filterTabContainer}
+          contentContainerStyle={tw.style('flex-row gap-3')}
           showsHorizontalScrollIndicator={false}
           pointerEvents="auto"
           scrollEnabled
@@ -417,7 +421,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
 
       {filterTabDescription && (
         <View style={styles.tabDescription}>
-          <Text variant={TextVariant.BodySM}>{filterTabDescription}</Text>
+          <Text variant={TextVariant.BodySm}>{filterTabDescription}</Text>
         </View>
       )}
 

diff --git a/app/components/UI/Predict/hooks/usePredictToasts.test.ts b/app/components/UI/Predict/hooks/usePredictToasts.test.ts
@@ -86,7 +86,7 @@ describe('usePredictToasts', () => {
     errorToastConfig: {
       title: 'Transaction Failed',
       description: 'Something went wrong',
-      retryLabel: 'Try Again',
+      retryLabel: 'Try again',
       onRetry: mockOnRetry,
     },
     clearTransaction: mockClearTransaction,
@@ -609,7 +609,7 @@ describe('usePredictToasts', () => {
               }),
             ]),
             linkButtonOptions: expect.objectContaining({
-              label: 'Try Again',
+              label: 'Try again',
               onPress: mockOnRetry,
             }),
           }),