Merge branch 'chore/navigation-typing-phase-4-perps' of github.com:MetaMask/metamask-mobile into chore/navigation-typing-phase-4-perps

Author: weitingsun

.depcheckrc.yml

@@ -46,6 +46,11 @@ ignores:
   - 'xml2js'
   # jest-junit is used as a Jest reporter in tests/jest.e2e.detox.config.js
   - 'jest-junit'
+  # Required directly only by scripts/babel/named-capturing-groups-regex.test.ts
+  # (a regression guard for the @react-native/babel-preset patch). It's provided
+  # transitively via @expo/metro-config + Metro, so we don't declare it as a
+  # direct dependency.
+  - 'babel-preset-expo'
 
   # tsconfig path alias pointing to app/controllers/perps (not an npm package)
   - '@metamask/perps-controller'
@@ -76,7 +81,6 @@ ignores:
   - 'chromedriver'
   - 'execa'
   - 'jetifier'
-  - 'metro-react-native-babel-preset'
   - 'react-native-svg-asset-plugin'
   - 'regenerator-runtime'
   - 'prettier-2'

.yarn/patches/@react-native-babel-preset-npm-0.83.6-90eed53ffb.patch

@@ -0,0 +1,22 @@
+diff --git a/src/configs/main.js b/src/configs/main.js
+index a2f5e1e53a663c07ce8fa3def3a1d6d7828a4557..5179e8cf5bb6f085275daa183a05d21553cf695a 100644
+--- a/src/configs/main.js
++++ b/src/configs/main.js
+@@ -120,9 +120,14 @@ const getPreset = (src, options) => {
+     extraPlugins.push([require('@babel/plugin-transform-numeric-separator')]);
+     extraPlugins.push([require('@babel/plugin-transform-sticky-regex')]);
+   } else {
+-    extraPlugins.push([
+-      require('@babel/plugin-transform-named-capturing-groups-regex'),
+-    ]);
++    // NOTE (MetaMask): Do NOT down-level named-capture-group regexes on Hermes.
++    // Current Hermes supports them natively, and the `@babel/runtime/helpers/wrapRegExp`
++    // helper that this transform introduces breaks under SES lockdown (frozen
++    // intrinsics), causing `RegExp.exec` to return null for matching strings
++    // (e.g. NetworkController's INFURA_URL_REGEX -> "Could not derive Infura network").
++    // extraPlugins.push([
++    //   require('@babel/plugin-transform-named-capturing-groups-regex'),
++    // ]);
+     // Needed for regenerator
+     if (isHermes && enableRegenerator) {
+       extraPlugins.push([

.yarn/patches/@tommasini-react-native-scrollable-tab-view-npm-1.1.1-153a9df479.patch

@@ -54,7 +54,7 @@ index 81a8a70576a2336fbfce44f429b80acb6bacb2c1..f8916b181efe7ba4ab598d3e6fb11477
      borderTopWidth: 0,
      borderLeftWidth: 0,
 diff --git a/index.js b/index.js
-index dc9d4f4e0bb7b5a165e0bcc89133e4bf6cdfff91..496530970bce3754e76362737be4c3491d159f05 100644
+index dc9d4f4e0bb7b5a165e0bcc89133e4bf6cdfff91..94f7ac60e15478b197aa3f537224745d0d5fecb6 100644
 --- a/index.js
 +++ b/index.js
 @@ -13,17 +13,14 @@ const {
@@ -98,3 +98,12 @@ index dc9d4f4e0bb7b5a165e0bcc89133e4bf6cdfff91..496530970bce3754e76362737be4c349
          )}
          ref={(scrollView) => { this.scrollView = scrollView; }}
          {...this.props.contentProps}
+@@ -348,7 +342,7 @@ const ScrollableTabView = createReactClass({
+       // Need to call __makeNative manually to avoid a native animated bug. See
+       // https://github.com/facebook/react-native/pull/14435
+       containerWidthAnimatedValue.__makeNative();
+-      scrollValue = Animated.divide(this.state.scrollXIOS, containerWidthAnimatedValue);
++      const scrollValue = Animated.divide(this.state.scrollXIOS, containerWidthAnimatedValue);
+       this.setState({ containerWidth: width, scrollValue, });
+     } else {
+       this.setState({ containerWidth: width, });

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

@@ -332,10 +332,6 @@ export const PerpsTPSLViewSelectorsIDs = {
   SET_BUTTON: 'perps-tpsl-set-button',
   TAKE_PROFIT_PRICE_INPUT: 'perps-tpsl-tp-input',
   STOP_LOSS_PRICE_INPUT: 'perps-tpsl-sl-input',
-  TAKE_PROFIT_PERCENTAGE_INPUT: 'perps-tpsl-tp-percentage-input',
-  STOP_LOSS_PERCENTAGE_INPUT: 'perps-tpsl-sl-percentage-input',
-  TAKE_PROFIT_ROE_SIGN_BADGE: 'perps-tpsl-tp-roe-sign-badge',
-  STOP_LOSS_ROE_SIGN_BADGE: 'perps-tpsl-sl-roe-sign-badge',
 } as const;
 
 export const getPerpsTPSLViewSelector = {

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

@@ -2383,58 +2383,6 @@ describe('PerpsOrderView', () => {
       expect(placeOrderButton).toBeDefined();
     });
 
-    it('accepts a signed take profit (negative RoE below current price) after the sheet confirms', async () => {
-      // Arrange: long order with a TP at 2000 (below current 3000). Classic
-      // side rules reject this, but the Auto Close sheet allows it as a
-      // negative take profit. Regression for PR #32404: the order view must
-      // accept the signed trigger once the sheet reports its sign.
-      (usePerpsOrderContext as jest.Mock).mockReturnValue(
-        orderContextWithTPSL({ direction: 'long', takeProfitPrice: '2000' }),
-      );
-      (usePerpsOrderValidation as jest.Mock).mockReturnValue({
-        isValid: true,
-        errors: [],
-        isValidating: false,
-      });
-      (usePerpsOrderExecution as jest.Mock).mockReturnValue({
-        placeOrder: jest.fn(),
-        isPlacing: false,
-      });
-
-      render(<PerpsOrderView />, { wrapper: TestWrapper });
-
-      // Before the sheet reports a sign, the default + TP shows the warning.
-      await waitFor(() => {
-        expect(screen.getByText(/Take profit must be above/)).toBeDefined();
-      });
-
-      // Act: open the TP/SL sheet and confirm with a signed (negative) RoE.
-      const tpslRow = await screen.findByTestId(
-        PerpsOrderViewSelectorsIDs.STOP_LOSS_BUTTON,
-      );
-      fireEvent.press(tpslRow);
-      const { onConfirm } =
-        mockNavigate.mock.calls[mockNavigate.mock.calls.length - 1][1];
-      await act(async () => {
-        await onConfirm(undefined, '2000', undefined, {
-          direction: 'long',
-          source: 'trade_screen',
-          positionSize: 0,
-          takeProfitPercentage: -10,
-        });
-      });
-
-      // Assert: the signed trigger is accepted — no wrong-side warning and the
-      // Place Order button is no longer disabled on TP/SL grounds.
-      await waitFor(() => {
-        expect(screen.queryByText(/Take profit must be/)).toBeNull();
-      });
-      const placeOrderButton = await screen.findByTestId(
-        PerpsOrderViewSelectorsIDs.PLACE_ORDER_BUTTON,
-      );
-      expect(placeOrderButton.props.accessibilityState?.disabled).toBeFalsy();
-    });
-
     describe('limit order TP/SL validates against entry price, not market price', () => {
       const orderContextForLimitOrder = (overrides: {
         direction: 'long' | 'short';

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

@@ -90,7 +90,6 @@ import {
   type OrderParams,
   type OrderType,
   type Position,
-  type TPSLTrackingData,
   ORDER_SLIPPAGE_CONFIG,
 } from '@metamask/perps-controller';
 import {
@@ -202,9 +201,6 @@ interface PerpsOrderViewContentProps {
   defaultMaxLeverage?: number;
 }
 
-const flipDirection = (direction: 'long' | 'short'): 'long' | 'short' =>
-  direction === 'long' ? 'short' : 'long';
-
 /**
  * PerpsOrderViewContentBase
  * Main content component for the Perps order view
@@ -403,14 +399,6 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [shouldOpenLimitPrice, setShouldOpenLimitPrice] = useState(false);
 
-  // The Auto Close sheet renders the RoE sign on a badge and persists only the
-  // trigger price — not the sign. Track the chosen sign here so order-view
-  // validation can accept a signed trigger (a negative take profit or a
-  // gain-side stop loss) instead of rejecting it with the classic
-  // long/short side rules. Defaults match the sheet (+ TP / - SL).
-  const [takeProfitSign, setTakeProfitSign] = useState<'+' | '-'>('+');
-  const [stopLossSign, setStopLossSign] = useState<'+' | '-'>('-');
-
   // Max slippage from persisted controller state via hook so the component
   // never reaches into PerpsController directly (perps anti-pattern rule).
   // The hook also exposes the source (default vs user-configured) for
@@ -949,25 +937,13 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
         _position?: Position,
         takeProfitPrice?: string,
         stopLossPrice?: string,
-        trackingData?: TPSLTrackingData,
       ) => {
         // Order flow: no position; just persist TP/SL in form state
         const tpToSet = takeProfitPrice || undefined;
         const slToSet = stopLossPrice || undefined;
 
         setTakeProfitPrice(tpToSet);
         setStopLossPrice(slToSet);
-
-        // Recover the RoE sign from the signed percentage the sheet reports so
-        // validation accepts a signed trigger. A negative TP percentage is a
-        // gain-side flip (-); a positive SL percentage is a gain-side flip (+).
-        // Absent/zero percentage falls back to the natural sign.
-        setTakeProfitSign(
-          (trackingData?.takeProfitPercentage ?? 0) < 0 ? '-' : '+',
-        );
-        setStopLossSign(
-          (trackingData?.stopLossPercentage ?? 0) > 0 ? '+' : '-',
-        );
       },
     });
   }, [
@@ -1475,26 +1451,12 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
 
   const tpslPriceType = isLimitWithPrice ? 'entry' : 'current';
 
-  // The RoE sign decides which side of the reference price the trigger must
-  // sit on, mirroring usePerpsTPSLForm: a + take profit / - stop loss keep the
-  // natural side, while a signed flip (- TP / + SL) accepts the opposite side.
-  // Passing the effective direction lets the existing price-side checks respect
-  // the sign without changing their logic, so a signed trigger isn't rejected.
-  const takeProfitEffectiveDirection =
-    takeProfitSign === '+'
-      ? orderForm.direction
-      : flipDirection(orderForm.direction);
-  const stopLossEffectiveDirection =
-    stopLossSign === '-'
-      ? orderForm.direction
-      : flipDirection(orderForm.direction);
-
   const isTakeProfitPriceInvalid = Boolean(
     orderForm.takeProfitPrice?.trim() &&
       validationReferencePrice > 0 &&
       !isValidTakeProfitPrice(orderForm.takeProfitPrice, {
         currentPrice: validationReferencePrice,
-        direction: takeProfitEffectiveDirection,
+        direction: orderForm.direction,
       }),
   );
 
@@ -1503,7 +1465,7 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
       validationReferencePrice > 0 &&
       !isValidStopLossPrice(orderForm.stopLossPrice, {
         currentPrice: validationReferencePrice,
-        direction: stopLossEffectiveDirection,
+        direction: orderForm.direction,
       }),
   );
 

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

@@ -217,13 +217,4 @@ export const createStyles = (colors: Theme['colors']) =>
     footerButton: {
       flex: 1,
     },
-    roeSignBadge: {
-      paddingHorizontal: 8,
-      paddingVertical: 2,
-      marginRight: 4,
-      borderRadius: 6,
-      backgroundColor: colors.background.default,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
   });

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

@@ -153,8 +153,6 @@ describe('PerpsTPSLView', () => {
       slPercentInputFocused: false,
       tpUsingPercentage: false,
       slUsingPercentage: false,
-      takeProfitSign: '+',
-      stopLossSign: '-',
     },
     handlers: {
       handleTakeProfitPriceChange: jest.fn(),
@@ -175,8 +173,6 @@ describe('PerpsTPSLView', () => {
       handleStopLossPercentageButton: jest.fn(),
       handleTakeProfitOff: jest.fn(),
       handleStopLossOff: jest.fn(),
-      handleTakeProfitSignToggle: jest.fn(),
-      handleStopLossSignToggle: jest.fn(),
     },
     validation: {
       isValid: true,
@@ -591,44 +587,6 @@ describe('PerpsTPSLView', () => {
       );
     });
 
-    it('reports signed RoE percentages in tracking metadata for negative TP and gain-side SL', async () => {
-      const mockOnConfirm = jest.fn().mockResolvedValue(undefined);
-      mockRouteParams = { ...defaultRouteParams, onConfirm: mockOnConfirm };
-      renderView({
-        formState: {
-          ...defaultMockReturn.formState,
-          takeProfitPrice: '$2,850.00',
-          stopLossPrice: '$3,150.00',
-          takeProfitSign: '-',
-          stopLossSign: '+',
-        },
-        display: {
-          ...defaultMockReturn.display,
-          formattedTakeProfitPercentage: '10%',
-          formattedStopLossPercentage: '10%',
-        },
-        validation: {
-          ...defaultMockReturn.validation,
-          hasChanges: true,
-        },
-      });
-
-      const setButton = screen.getByText('perps.tpsl.set');
-      await act(async () => {
-        fireEvent.press(setButton);
-      });
-
-      expect(mockOnConfirm).toHaveBeenCalledWith(
-        undefined,
-        '2850.00',
-        '3150.00',
-        expect.objectContaining({
-          takeProfitPercentage: -10,
-          stopLossPercentage: 10,
-        }),
-      );
-    });
-
     it('calls onConfirm with undefined when values are empty', async () => {
       const mockOnConfirm = jest.fn().mockResolvedValue(undefined);
       mockRouteParams = { ...defaultRouteParams, onConfirm: mockOnConfirm };
@@ -743,60 +701,4 @@ describe('PerpsTPSLView', () => {
       expect(screen.getByTestId('back-button')).toBeOnTheScreen();
     });
   });
-
-  // ==================== RoE Sign Badge ====================
-
-  describe('RoE Sign Badge', () => {
-    it('renders the default + take profit and - stop loss signs', () => {
-      renderView();
-
-      expect(
-        screen.getByTestId('perps-tpsl-tp-roe-sign-badge'),
-      ).toHaveTextContent('+');
-      expect(
-        screen.getByTestId('perps-tpsl-sl-roe-sign-badge'),
-      ).toHaveTextContent('-');
-    });
-
-    it('toggles the take profit sign when the badge is pressed', () => {
-      const mockToggle = jest.fn();
-      renderView({
-        buttons: {
-          ...defaultMockReturn.buttons,
-          handleTakeProfitSignToggle: mockToggle,
-        },
-      });
-
-      fireEvent.press(screen.getByTestId('perps-tpsl-tp-roe-sign-badge'));
-
-      expect(mockToggle).toHaveBeenCalled();
-    });
-
-    it('toggles the stop loss sign when the badge is pressed', () => {
-      const mockToggle = jest.fn();
-      renderView({
-        buttons: {
-          ...defaultMockReturn.buttons,
-          handleStopLossSignToggle: mockToggle,
-        },
-      });
-
-      fireEvent.press(screen.getByTestId('perps-tpsl-sl-roe-sign-badge'));
-
-      expect(mockToggle).toHaveBeenCalled();
-    });
-
-    it('reflects the take profit sign provided by the form hook', () => {
-      renderView({
-        formState: {
-          ...defaultMockReturn.formState,
-          takeProfitSign: '-',
-        },
-      });
-
-      expect(
-        screen.getByTestId('perps-tpsl-tp-roe-sign-badge'),
-      ).toHaveTextContent('-');
-    });
-  });
 });