fix(predict): migrate PredictPosition to design system components

Replace raw React Native components with design system equivalents to
comply with UI development guidelines:

- Replace TouchableOpacity → ButtonBase
- Replace View → Box with twClassName props
- Replace StyleSheet.create() → Tailwind classes
- Delete PredictPosition.styles.ts file
- Use useTailwind() hook for inline styles

Tailwind class mappings:
- positionContainer → flex-row items-start py-2 gap-4 w-full
- positionImageContainer → pt-1
- positionImage → w-10 h-10 rounded-full
- positionDetails → flex-1 gap-0.5
- positionPnl → gap-2 items-end
- skeletonSpacing → mb-1

Fixes CODEBOT violations:
- Component Hierarchy (STRICT ORDER) - now uses design system first
- Styling Rules (ENFORCE STRICTLY) - removed StyleSheet.create()

All tests passing (22/22).

Author: matallui

app/components/UI/Predict/components/PredictPosition/PredictPosition.styles.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import { Image, TouchableOpacity, View } from 'react-native';
+import { Image } from 'react-native';
+import { Box, ButtonBase } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import Text, {
   TextColor,
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
-import { useStyles } from '../../../../../component-library/hooks';
 import { PredictPosition as PredictPositionType } from '../../types';
 import {
   formatCents,
   formatPercentage,
   formatPositionSize,
   formatPrice,
 } from '../../utils/format';
-import styleSheet from './PredictPosition.styles';
 import { PredictPositionSelectorsIDs } from '../../../../../../e2e/selectors/Predict/Predict.selectors';
 import { strings } from '../../../../../../locales/i18n';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
@@ -37,18 +37,21 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
     size,
     optimistic,
   } = position;
-  const { styles } = useStyles(styleSheet, {});
+  const tw = useTailwind();
 
   return (
-    <TouchableOpacity
+    <ButtonBase
       testID={PredictPositionSelectorsIDs.CURRENT_POSITION_CARD}
-      style={styles.positionContainer}
       onPress={() => onPress?.(position)}
+      twClassName="flex-row items-start py-2 gap-4 w-full"
     >
-      <View style={styles.positionImageContainer}>
-        <Image source={{ uri: icon }} style={styles.positionImage} />
-      </View>
-      <View style={styles.positionDetails}>
+      <Box twClassName="pt-1">
+        <Image
+          source={{ uri: icon }}
+          style={tw.style('w-10 h-10 rounded-full')}
+        />
+      </Box>
+      <Box twClassName="flex-1 gap-0.5">
         <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
           {title}
         </Text>
@@ -71,11 +74,11 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
             },
           )}
         </Text>
-      </View>
-      <View style={styles.positionPnl}>
+      </Box>
+      <Box twClassName="gap-2 items-end">
         {optimistic ? (
           <>
-            <Skeleton width={60} height={20} style={styles.skeletonSpacing} />
+            <Skeleton width={60} height={20} style={tw.style('mb-1')} />
             <Skeleton width={50} height={16} />
           </>
         ) : (
@@ -91,8 +94,8 @@ const PredictPosition: React.FC<PredictPositionProps> = ({
             </Text>
           </>
         )}
-      </View>
-    </TouchableOpacity>
+      </Box>
+    </ButtonBase>
   );
 };