refactor(perps): migrate provider selector UI to MMDS

Use SelectButton, BottomSheet, ListItemSelect, and Tag so home and
sheet chrome stay vertically centered without custom badge styles.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: brianacnguyen

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx

@@ -1017,6 +1017,7 @@ const PerpsHomeView = ({
         <Tag
           severity={TagSeverity.Warning}
           testID={`${homeHeadingTestID}-testnet-badge`}
+          twClassName="self-center"
         >
           Testnet
         </Tag>

app/components/UI/Perps/Views/PerpsSelectProviderView/PerpsSelectProviderView.tsx

@@ -92,7 +92,6 @@ const PerpsSelectProviderView: React.FC = () => {
 
   return (
     <PerpsProviderSelectorSheet
-      isVisible
       onClose={handleClose}
       selectedOptionId={selectedOptionId}
       onOptionSelect={handleOptionSelect}

app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelector.styles.ts

@@ -14,11 +14,6 @@ export interface PerpsProviderSelectorBadgeProps {
  * Props for PerpsProviderSelectorSheet component
  */
 export interface PerpsProviderSelectorSheetProps {
-  /**
-   * Whether the bottom sheet is visible
-   */
-  isVisible: boolean;
-
   /**
    * Callback when the sheet is closed
    */

app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelector.types.ts

@@ -18,43 +18,6 @@ jest.mock('../../hooks/usePerpsProvider', () => ({
   usePerpsProvider: jest.fn(),
 }));
 
-jest.mock('../../../../../component-library/hooks', () => ({
-  useStyles: () => ({
-    styles: {
-      badgeContainer: {},
-      badgeText: {},
-      testnetDot: {},
-    },
-  }),
-}));
-
-jest.mock('../../../../../component-library/components/Texts/Text', () => {
-  const { Text: RNText } = jest.requireActual('react-native');
-  const MockText = ({ children, ...props }: Record<string, unknown>) => (
-    <RNText {...props}>{children}</RNText>
-  );
-  MockText.displayName = 'Text';
-  return {
-    __esModule: true,
-    default: MockText,
-    TextVariant: { BodySM: 'BodySM' },
-    TextColor: { Alternative: 'Alternative', Warning: 'Warning' },
-  };
-});
-
-jest.mock('../../../../../component-library/components/Icons/Icon', () => {
-  const { View } = jest.requireActual('react-native');
-  return {
-    __esModule: true,
-    default: (props: Record<string, unknown>) => (
-      <View testID="icon" {...props} />
-    ),
-    IconName: { ArrowDown: 'ArrowDown' },
-    IconSize: { Xs: 'Xs' },
-    IconColor: { Alternative: 'Alternative', Warning: 'Warning' },
-  };
-});
-
 const mockNavigate = jest.fn();
 const mockUsePerpsProvider = usePerpsProvider as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -144,7 +107,7 @@ describe('PerpsProviderSelectorBadge', () => {
     expect(badge.props.accessibilityLabel).toContain('Mainnet');
   });
 
-  it('renders testnet dot and warning styling when on testnet', () => {
+  it('includes Testnet in accessibility label when on testnet', () => {
     mockUseSelector.mockReturnValue('testnet');
     mockUsePerpsProvider.mockReturnValue({
       activeProvider: 'hyperliquid',

app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.test.tsx

@@ -1,24 +1,17 @@
 import React, { useCallback } from 'react';
 import {
-  Icon,
-  IconColor,
-  IconName,
-  IconSize,
+  Box,
+  SelectButton,
+  SelectButtonSize,
+  SelectButtonVariant,
 } from '@metamask/design-system-react-native';
-import { TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { useStyles } from '../../../../../component-library/hooks';
-import Text, {
-  TextVariant,
-  TextColor,
-} from '../../../../../component-library/components/Texts/Text';
 import Routes from '../../../../../constants/navigation/Routes';
 import { usePerpsProvider } from '../../hooks/usePerpsProvider';
 import { selectPerpsNetwork } from '../../selectors/perpsController';
 import type { PerpsProviderSelectorBadgeProps } from './PerpsProviderSelector.types';
 import { PROVIDER_DISPLAY_INFO } from './PerpsProviderSelector.constants';
-import { styleSheet } from './PerpsProviderSelector.styles';
 
 /**
  * PerpsProviderSelectorBadge Component
@@ -30,7 +23,6 @@ import { styleSheet } from './PerpsProviderSelector.styles';
 const PerpsProviderSelectorBadge: React.FC<PerpsProviderSelectorBadgeProps> = ({
   testID,
 }) => {
-  const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
   const { activeProvider, isMultiProviderEnabled } = usePerpsProvider();
   const network = useSelector(selectPerpsNetwork);
@@ -53,27 +45,21 @@ const PerpsProviderSelectorBadge: React.FC<PerpsProviderSelectorBadgeProps> = ({
     : PROVIDER_DISPLAY_INFO.hyperliquid;
 
   return (
-    <TouchableOpacity
-      style={styles.badgeContainer}
+    <SelectButton
+      size={SelectButtonSize.Sm}
+      variant={SelectButtonVariant.Primary}
+      value={currentProvider.name}
       onPress={handlePress}
       testID={testID}
       accessibilityRole="button"
       accessibilityLabel={`Current provider: ${currentProvider.name}, ${isTestnet ? 'Testnet' : 'Mainnet'}. Tap to change.`}
-    >
-      {isTestnet && <View style={styles.testnetDot} />}
-      <Text
-        variant={TextVariant.BodySM}
-        color={isTestnet ? TextColor.Warning : TextColor.Alternative}
-        style={styles.badgeText}
-      >
-        {currentProvider.name}
-      </Text>
-      <Icon
-        name={IconName.ArrowDown}
-        size={IconSize.Xs}
-        color={isTestnet ? IconColor.WarningDefault : IconColor.IconAlternative}
-      />
-    </TouchableOpacity>
+      twClassName="self-center"
+      startAccessory={
+        isTestnet ? (
+          <Box twClassName="w-1.5 h-1.5 rounded-full bg-warning-default" />
+        ) : undefined
+      }
+    />
   );
 };