[pull] main from MetaMask:main

app/components/UI/SRPList/SRPList.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { useWindowDimensions, View } from 'react-native';
+import React, { type ComponentProps } from 'react';
+import { useWindowDimensions } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
+
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { Box } from '@metamask/design-system-react-native';
+
 import { strings } from '../../../../locales/i18n';
 import { SRPListProps } from './SRPList.types';
-import { useStyles } from '../../hooks/useStyles';
-import styleSheet from './SRPList.styles';
 import SRPListItem from '../SRPListItem';
 import { SRPListSelectorsIDs } from './SRPList.testIds';
 import { useHdKeyringsWithSnapAccounts } from '../../hooks/useHdKeyringsWithSnapAccounts';
@@ -17,24 +19,29 @@ const SRPList = ({
   containerStyle,
   showArrowName = '',
 }: SRPListProps) => {
-  // trigger sync SRP when SRP list is shown
   useSyncSRPs();
 
   const { height: windowHeight } = useWindowDimensions();
   const maxHeight = windowHeight * 0.7;
-  const { styles } = useStyles(styleSheet, { maxHeight });
+  const tw = useTailwind();
   const hdKeyringsWithSnapAccounts = useHdKeyringsWithSnapAccounts();
   const { trackEvent, createEventBuilder } = useAnalytics();
 
   return (
-    <View
-      style={[styles.base, containerStyle]}
+    <Box
+      twClassName="py-4 px-4 bg-default m-2"
+      style={
+        {
+          maxHeight,
+          ...(containerStyle ?? {}),
+        } as ComponentProps<typeof Box>['style']
+      }
       testID={SRPListSelectorsIDs.SRP_LIST}
     >
       <FlatList
-        style={styles.flatList}
+        style={tw.style('flex-grow-0')}
         data={hdKeyringsWithSnapAccounts}
-        contentContainerStyle={styles.srpListContentContainer}
+        contentContainerStyle={tw.style('py-1 gap-y-4')}
         renderItem={({ item, index }) => (
           <SRPListItem
             key={item.metadata.id}
@@ -58,7 +65,7 @@ const SRPList = ({
         scrollEnabled
         nestedScrollEnabled
       />
-    </View>
+    </Box>
   );
 };
 

app/components/UI/SRPList/SRPList.types.ts

@@ -1,7 +1,7 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
 
 export interface SRPListProps {
   onKeyringSelect: (id: string) => void;
-  containerStyle?: StyleProp<ViewStyle>;
+  containerStyle?: ViewStyle;
   showArrowName?: string;
 }