refactor(perps): migrate Close All Positions sheet to MMDS

app/components/UI/Perps/Perps.testIds.ts

@@ -306,6 +306,20 @@ export const PerpsPositionsViewSelectorsIDs = {
   POSITIONS_SECTION_TITLE: 'perps-positions-section-title',
 };
 
+// ========================================
+// PERPS CLOSE ALL POSITIONS VIEW SELECTORS
+// ========================================
+
+export const PerpsCloseAllPositionsViewSelectorsIDs = {
+  SHEET: 'perps-close-all-positions-sheet',
+  TITLE: 'perps-close-all-positions-title',
+  DESCRIPTION: 'perps-close-all-positions-description',
+  EMPTY_STATE: 'perps-close-all-positions-empty-state',
+  CLOSING_STATE: 'perps-close-all-positions-closing-state',
+  KEEP_BUTTON: 'perps-close-all-positions-keep-button',
+  CLOSE_ALL_BUTTON: 'perps-close-all-positions-close-all-button',
+} as const;
+
 export const PerpsPositionDetailsViewSelectorsIDs = {
   CANDLESTICK_CHART: 'candlestick-chart',
   TRADINGVIEW_CHART: 'tradingview-chart',

app/components/UI/Perps/Views/PerpsCloseAllPositionsView/PerpsCloseAllPositionsView.styles.ts

@@ -3,16 +3,9 @@ import type { Theme } from '../../../../../util/theme/models';
 
 export const createStyles = (_theme: Theme) =>
   StyleSheet.create({
-    contentContainer: {
-      paddingHorizontal: 16,
-      paddingVertical: 8,
-    },
     description: {
       marginBottom: 16,
     },
-    breakdownContainer: {
-      gap: 12,
-    },
     loadingContainer: {
       paddingVertical: 32,
       alignItems: 'center',
@@ -23,22 +16,7 @@ export const createStyles = (_theme: Theme) =>
     },
     emptyContainer: {
       paddingVertical: 32,
-      paddingHorizontal: 16,
       alignItems: 'center',
       justifyContent: 'center',
     },
-    footerContainer: {
-      paddingHorizontal: 16,
-      zIndex: 0, // Ensure footer stays behind modal overlays
-      elevation: 0, // Android equivalent
-    },
-    footerButtonSecondary: {
-      flex: 1,
-      borderWidth: 0,
-    },
-    labelWithTooltip: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-    },
   });

app/components/UI/Perps/Views/PerpsCloseAllPositionsView/PerpsCloseAllPositionsView.test.tsx

@@ -8,6 +8,7 @@ import {
   usePerpsRewardAccountOptedIn,
 } from '../../hooks';
 import { InternalAccount } from '@metamask/keyring-internal-api';
+import { PerpsCloseAllPositionsViewSelectorsIDs } from '../../Perps.testIds';
 
 // Mock all dependencies
 jest.mock('@react-navigation/native', () => ({
@@ -45,57 +46,6 @@ jest.mock('../../hooks/usePerpsEventTracking', () => ({
   usePerpsEventTracking: jest.fn(),
 }));
 
-jest.mock(
-  '../../../../../component-library/components/BottomSheets/BottomSheet',
-  () => {
-    const mockReact = jest.requireActual<typeof React>('react');
-    return mockReact.forwardRef(
-      (props: { children: React.ReactNode }, _ref) => <>{props.children}</>,
-    );
-  },
-);
-
-jest.mock(
-  '../../../../../component-library/components/BottomSheets/BottomSheetHeader',
-  () => 'BottomSheetHeader',
-);
-
-jest.mock(
-  '../../../../../component-library/components/BottomSheets/BottomSheetFooter',
-  () => {
-    const { View, TouchableOpacity, Text } = jest.requireActual('react-native');
-
-    return {
-      __esModule: true,
-      default: ({
-        buttonPropsArray,
-      }: {
-        buttonPropsArray?: {
-          label: string;
-          onPress: () => void;
-          disabled?: boolean;
-        }[];
-      }) => (
-        <View>
-          {buttonPropsArray?.map((buttonProps, index) => (
-            <TouchableOpacity
-              key={index}
-              onPress={buttonProps.onPress}
-              disabled={buttonProps.disabled}
-            >
-              <Text>{buttonProps.label}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      ),
-      ButtonsAlignment: {
-        Horizontal: 'Horizontal',
-        Vertical: 'Vertical',
-      },
-    };
-  },
-);
-
 jest.mock('../../components/PerpsCloseSummary', () => 'PerpsCloseSummary');
 
 const mockUsePerpsLivePositions = usePerpsLivePositions as jest.MockedFunction<
@@ -138,7 +88,7 @@ describe('PerpsCloseAllPositionsView', () => {
       takeProfitCount: 0,
       stopLossCount: 0,
       marketPrice: '50200',
-      timestamp: Date.now(),
+      timestamp: 1700000000000, // fixed epoch ms – 2023-11-14T22:13:20.000Z
     },
   ];
 
@@ -204,10 +154,12 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.title')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.TITLE),
+    ).toBeOnTheScreen();
   });
 
   it('renders empty state when no positions', () => {
@@ -218,19 +170,25 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.position.no_positions')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.EMPTY_STATE),
+    ).toBeOnTheScreen();
   });
 
   it('renders close all positions view with positions', () => {
     // Arrange & Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.title')).toBeTruthy();
-    expect(getByText('perps.close_all_modal.description')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.TITLE),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.DESCRIPTION),
+    ).toBeOnTheScreen();
   });
 
   it('renders loading state when closing', () => {
@@ -241,20 +199,25 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getAllByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    const closingElements = getAllByText('perps.close_all_modal.closing');
-    expect(closingElements.length).toBeGreaterThan(0);
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.CLOSING_STATE),
+    ).toBeOnTheScreen();
   });
 
   it('displays footer buttons with correct labels', () => {
     // Arrange & Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.keep_positions')).toBeTruthy();
-    expect(getByText('perps.close_all_modal.close_all')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.KEEP_BUTTON),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.CLOSE_ALL_BUTTON),
+    ).toBeOnTheScreen();
   });
 
   it('shows closing label on close button when in progress', () => {
@@ -265,11 +228,15 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getAllByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    const closingElements = getAllByText('perps.close_all_modal.closing');
-    expect(closingElements.length).toBeGreaterThan(0);
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.CLOSE_ALL_BUTTON),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.CLOSING_STATE),
+    ).toBeOnTheScreen();
   });
 
   it('renders with empty positions gracefully', () => {
@@ -280,18 +247,22 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.position.no_positions')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.EMPTY_STATE),
+    ).toBeOnTheScreen();
   });
 
   it('renders PerpsCloseSummary when not closing', () => {
     // Arrange & Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.description')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.DESCRIPTION),
+    ).toBeOnTheScreen();
   });
 
   it('calls usePerpsRewardAccountOptedIn with totalEstimatedPoints', () => {
@@ -337,10 +308,12 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.description')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.DESCRIPTION),
+    ).toBeOnTheScreen();
     expect(mockUsePerpsRewardAccountOptedIn).toHaveBeenCalled();
   });
 
@@ -352,10 +325,12 @@ describe('PerpsCloseAllPositionsView', () => {
     });
 
     // Act
-    const { getByText } = render(<PerpsCloseAllPositionsView />);
+    const { getByTestId } = render(<PerpsCloseAllPositionsView />);
 
     // Assert
-    expect(getByText('perps.close_all_modal.description')).toBeTruthy();
+    expect(
+      getByTestId(PerpsCloseAllPositionsViewSelectorsIDs.DESCRIPTION),
+    ).toBeOnTheScreen();
     expect(mockUsePerpsRewardAccountOptedIn).toHaveBeenCalled();
   });
 });