feat: TAT-1921 add adl link to perps trade history ADL pill (#21970)

Matt561 · web-flow · commit 55f232be1dd0 · 2025-10-31T05:12:39.000Z
## **Description** - Updated ADL fill tag to be clickable and redirect to the MetaMask ADL support article. - Fixed TP/SL tags not appearing  ## **Changelog**  CHANGELOG entry: updated ADL fill tag to be clickable and redirect to the MetaMask ADL support article CHANGELOG entry: fixed TP/SL tags not appearing ## **Related issues** Fixes: - [TAT-1921: Add link to ADL article when user tap on ADL pill in trade history](https://consensyssoftware.atlassian.net/browse/TAT-1921) - [TAT-1955: Fix missing tp/sl pills in trades activity view regression](https://consensyssoftware.atlassian.net/browse/TAT-1955) ## **Manual testing steps** 1. Update `getUserAddressWithDefault` function to use ADL testing address - (`HyperLiquidWalletService.ts`) ```ts public async getUserAddressWithDefault( accountId?: CaipAccountId, ): Promise<Hex> { return "0x186e806622d9A8209d99694804Ff61bE830bEB2C"; const id = accountId || (await this.getCurrentAccountId()); return this.getUserAddress(id); } ``` 2. Check the Perps Trade history list for the "Auto-Deleveraging" tag 3. Click the tag to be redirected to the ADL support article ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before**  ### **After** <img width="461" height="88" alt="image" src="https://github.com/user-attachments/assets/c6d388a8-f675-42b9-96c8-6bddfec53dec" /> <img width="461" height="88" alt="image" src="https://github.com/user-attachments/assets/9878b953-36d8-445b-9561-2802efe6d41e" /> https://github.com/user-attachments/assets/9f8120d1-b401-4db2-bcd5-efb90598b719  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > Makes the ADL tag in trades history tappable to open a support article with analytics tracking, and enriches fills from orders to display TP/SL pills; adds supporting constants and tests. > > - **Perps UI**: > - **ADL tag interaction**: Wrap `PerpsTransactionItem` ADL tag in a pressable; opens `PERPS_SUPPORT_ARTICLES_URLS.ADL_URL` via `Linking.openURL` and tracks tap with `usePerpsEventTracking` (`PERPS_ACTIVITY_HISTORY`, `TRADES`, `ADL_LEARN_MORE`, plus `asset` and `order_timestamp`). > - Use `TouchableOpacity` around tag; minor deps added to memo. > - **Hooks**: > - **Transaction history enrichment**: In `usePerpsTransactionHistory`, map fills with matching order `detailedOrderType` before `transformFillsToTransactions` to enable TP/SL pills in trade history. > - **Constants/Events**: > - Add `PERPS_SUPPORT_ARTICLES_URLS.ADL_URL` in `perpsConfig`. > - Extend `eventNames`: add `TAB_NAME`, `ORDER_TIMESTAMP`, `SCREEN_NAME.PERPS_ACTIVITY_HISTORY`, `ACTION_TYPE.ADL_LEARN_MORE`, and `PERPS_HISTORY_TABS`. > - **Tests**: > - Update/add tests for ADL tag press to open URL and emit tracking event. > - Add tests validating fill enrichment for `detailedOrderType` across scenarios. > - Wire `usePerpsEventTracking` in `PerpsTransactionsView` test setup. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit d91cdc8. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.test.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.test.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { fireEvent, waitFor, act } from '@testing-library/react-native';
 import PerpsTransactionsView from './PerpsTransactionsView';
-import { usePerpsConnection, usePerpsTransactionHistory } from '../../hooks';
+import {
+  usePerpsConnection,
+  usePerpsTransactionHistory,
+  usePerpsEventTracking,
+} from '../../hooks';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import { RootState } from '../../../../../reducers';
 import renderWithProvider, {
@@ -25,6 +29,7 @@ jest.mock('@react-navigation/native', () => ({
 jest.mock('../../hooks', () => ({
   usePerpsConnection: jest.fn(),
   usePerpsTransactionHistory: jest.fn(),
+  usePerpsEventTracking: jest.fn(),
 }));
 
 // Mock the asset metadata hook to avoid network calls
@@ -109,6 +114,8 @@ describe('PerpsTransactionsView', () => {
     usePerpsTransactionHistory as jest.MockedFunction<
       typeof usePerpsTransactionHistory
     >;
+  const mockUsePerpsEventTracking =
+    usePerpsEventTracking as jest.MockedFunction<typeof usePerpsEventTracking>;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -131,6 +138,10 @@ describe('PerpsTransactionsView', () => {
       error: null,
       refetch: jest.fn(),
     });
+
+    mockUsePerpsEventTracking.mockReturnValue({
+      track: jest.fn(),
+    });
   });
 
   it('should render with filter tabs', () => {
diff --git a/app/components/UI/Perps/components/PerpsTransactionItem/PerpsTransactionItem.test.tsx b/app/components/UI/Perps/components/PerpsTransactionItem/PerpsTransactionItem.test.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Linking } from 'react-native';
 import PerpsTransactionItem, { FillType } from './PerpsTransactionItem';
 import { PerpsTransactionSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import {
   PerpsOrderTransactionStatus,
   PerpsOrderTransactionStatusType,
 } from '../../types/transactionHistory';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import {
+  PerpsEventProperties,
+  PerpsEventValues,
+} from '../../constants/eventNames';
+import { PERPS_SUPPORT_ARTICLES_URLS } from '../../constants/perpsConfig';
 
 // Mock Redux selector
 jest.mock('react-redux', () => ({
@@ -61,6 +67,16 @@ jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => key),
 }));
 
+// Mock Linking
+jest.mock('react-native/Libraries/Linking/Linking', () => ({
+  openURL: jest.fn(() => Promise.resolve()),
+}));
+
+// Mock usePerpsEventTracking
+jest.mock('../../hooks', () => ({
+  usePerpsEventTracking: jest.fn(),
+}));
+
 const mockColors = {
   black: '#000000',
   gray: '#666666',
@@ -144,6 +160,7 @@ const mockTransaction = {
 describe('PerpsTransactionItem', () => {
   const mockOnPress = jest.fn();
   const mockRenderRightContent = jest.fn().mockReturnValue('Right Content');
+  const mockTrack = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -156,9 +173,15 @@ describe('PerpsTransactionItem', () => {
     useSelector.mockReturnValue(() => ({
       address: '0x123',
     }));
+
+    // Mock usePerpsEventTracking hook
+    const { usePerpsEventTracking } = jest.requireMock('../../hooks');
+    usePerpsEventTracking.mockReturnValue({
+      track: mockTrack,
+    });
   });
 
-  it('should render transaction item with correct content', () => {
+  it('renders transaction item with correct content', () => {
     const { getByText, getByTestId } = render(
       <PerpsTransactionItem
         item={mockTransaction}
@@ -490,6 +513,49 @@ describe('PerpsTransactionItem', () => {
       expect(getByTestId('tag-base-info')).toBeTruthy();
     });
 
+    it('tracks event and opens support URL when ADL tag is pressed', () => {
+      const adlTransaction = {
+        ...mockTransaction,
+        asset: 'BTC',
+        timestamp: 1234567890000,
+        fill: {
+          ...mockTransaction.fill,
+          fillType: FillType.AutoDeleveraging,
+        },
+      };
+
+      const { getByText } = render(
+        <PerpsTransactionItem
+          item={adlTransaction}
+          styles={mockStyles}
+          onPress={mockOnPress}
+          renderRightContent={mockRenderRightContent}
+        />,
+      );
+
+      const adlTag = getByText('perps.transactions.order.auto_deleveraging');
+      fireEvent.press(adlTag);
+
+      expect(Linking.openURL).toHaveBeenCalledWith(
+        PERPS_SUPPORT_ARTICLES_URLS.ADL_URL,
+      );
+      expect(mockTrack).toHaveBeenCalledWith(
+        MetaMetricsEvents.PERPS_UI_INTERACTION,
+        {
+          [PerpsEventProperties.INTERACTION_TYPE]:
+            PerpsEventValues.INTERACTION_TYPE.TAP,
+          [PerpsEventProperties.SCREEN_NAME]:
+            PerpsEventValues.SCREEN_NAME.PERPS_ACTIVITY_HISTORY,
+          [PerpsEventProperties.TAB_NAME]:
+            PerpsEventValues.PERPS_HISTORY_TABS.TRADES,
+          [PerpsEventProperties.ACTION_TYPE]:
+            PerpsEventValues.ACTION_TYPE.ADL_LEARN_MORE,
+          [PerpsEventProperties.ASSET]: 'BTC',
+          [PerpsEventProperties.ORDER_TIMESTAMP]: 1234567890000,
+        },
+      );
+    });
+
     it('should not display badge for regular fills', () => {
       const regularTransaction = {
         ...mockTransaction,
diff --git a/app/components/UI/Perps/components/PerpsTransactionItem/PerpsTransactionItem.tsx b/app/components/UI/Perps/components/PerpsTransactionItem/PerpsTransactionItem.tsx
@@ -1,5 +1,11 @@
 import React, { useMemo } from 'react';
-import { View, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  ViewStyle,
+  TextStyle,
+  Linking,
+} from 'react-native';
 import Text, {
   TextColor,
   TextVariant,
@@ -16,6 +22,14 @@ import { strings } from '../../../../../../locales/i18n';
 import { useSelector } from 'react-redux';
 import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import { EVM_SCOPE } from '../../../Earn/constants/networks';
+import { noop } from 'lodash';
+import { PERPS_SUPPORT_ARTICLES_URLS } from '../../constants/perpsConfig';
+import { usePerpsEventTracking } from '../../hooks';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import {
+  PerpsEventProperties,
+  PerpsEventValues,
+} from '../../constants/eventNames';
 
 export enum FillType {
   Standard = 'standard',
@@ -53,6 +67,8 @@ const PerpsTransactionItem: React.FC<PerpsTransactionItemProps> = ({
     EVM_SCOPE,
   );
 
+  const { track } = usePerpsEventTracking();
+
   const fillTag = useMemo(() => {
     const { fill } = item;
 
@@ -101,18 +117,42 @@ const PerpsTransactionItem: React.FC<PerpsTransactionItemProps> = ({
       return null;
     }
 
+    let onTagPress = noop;
+
+    if (fill.fillType === FillType.AutoDeleveraging) {
+      onTagPress = () => {
+        Linking.openURL(PERPS_SUPPORT_ARTICLES_URLS.ADL_URL).catch((error) => {
+          console.error('Error opening ADL support article:', error);
+        });
+        track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
+          [PerpsEventProperties.INTERACTION_TYPE]:
+            PerpsEventValues.INTERACTION_TYPE.TAP,
+          [PerpsEventProperties.SCREEN_NAME]:
+            PerpsEventValues.SCREEN_NAME.PERPS_ACTIVITY_HISTORY,
+          [PerpsEventProperties.TAB_NAME]:
+            PerpsEventValues.PERPS_HISTORY_TABS.TRADES,
+          [PerpsEventProperties.ACTION_TYPE]:
+            PerpsEventValues.ACTION_TYPE.ADL_LEARN_MORE,
+          [PerpsEventProperties.ASSET]: item.asset,
+          [PerpsEventProperties.ORDER_TIMESTAMP]: item.timestamp,
+        });
+      };
+    }
+
     return (
-      <TagBase
-        shape={TagShape.Pill}
-        severity={tagConfig.severity}
-        includesBorder={tagConfig.includesBorder}
-      >
-        <Text variant={TextVariant.BodyXSMedium} color={tagConfig.textColor}>
-          {tagConfig.label}
-        </Text>
-      </TagBase>
+      <TouchableOpacity onPress={onTagPress}>
+        <TagBase
+          shape={TagShape.Pill}
+          severity={tagConfig.severity}
+          includesBorder={tagConfig.includesBorder}
+        >
+          <Text variant={TextVariant.BodyXSMedium} color={tagConfig.textColor}>
+            {tagConfig.label}
+          </Text>
+        </TagBase>
+      </TouchableOpacity>
     );
-  }, [item, selectedAccount?.address]);
+  }, [item, selectedAccount?.address, track]);
 
   return (
     <TouchableOpacity
diff --git a/app/components/UI/Perps/constants/eventNames.ts b/app/components/UI/Perps/constants/eventNames.ts
@@ -12,13 +12,15 @@ export const PerpsEventProperties = {
   ASSET: 'asset',
   DIRECTION: 'direction',
   SOURCE: 'source',
+  TAB_NAME: 'tab_name',
 
   // Trade properties
   LEVERAGE: 'leverage',
   LEVERAGE_USED: 'leverage_used',
   ORDER_SIZE: 'order_size',
   MARGIN_USED: 'margin_used',
   ORDER_TYPE: 'order_type', // lowercase per dashboard
+  ORDER_TIMESTAMP: 'order_timestamp',
   LIMIT_PRICE: 'limit_price',
   FEES: 'fees',
   FEE: 'fee',
@@ -169,6 +171,7 @@ export const PerpsEventValues = {
     SKIP: 'skip',
     STOP_LOSS_SET: 'stop_loss_set',
     TAKE_PROFIT_SET: 'take_profit_set',
+    ADL_LEARN_MORE: 'adl_learn_more',
   },
   NOTIFICATION_TYPE: {
     POSITION_LIQUIDATED: 'position_liquidated',
@@ -215,8 +218,15 @@ export const PerpsEventValues = {
   },
   SCREEN_NAME: {
     CONNECTION_ERROR: 'connection_error',
+    PERPS_ACTIVITY_HISTORY: 'perps_activity_history',
   },
   ACTION: {
     CONNECTION_RETRY: 'connection_retry',
   },
+  PERPS_HISTORY_TABS: {
+    TRADES: 'trades',
+    ORDERS: 'orders',
+    FUNDING: 'funding',
+    DEPOSITS: 'deposits',
+  },
 } as const;
diff --git a/app/components/UI/Perps/constants/perpsConfig.ts b/app/components/UI/Perps/constants/perpsConfig.ts
@@ -411,3 +411,12 @@ export const SUPPORT_CONFIG = {
   TITLE_KEY: 'perps.support.title',
   DESCRIPTION_KEY: 'perps.support.description',
 } as const;
+
+/**
+ * Support article URLs
+ * Links to specific MetaMask support articles for Perps features
+ */
+export const PERPS_SUPPORT_ARTICLES_URLS = {
+  ADL_URL:
+    'https://support.metamask.io/manage-crypto/trade/perps/leverage-and-liquidation/#what-is-auto-deleveraging-adl',
+} as const;
diff --git a/app/components/UI/Perps/hooks/usePerpsTransactionHistory.test.ts b/app/components/UI/Perps/hooks/usePerpsTransactionHistory.test.ts
diff --git a/app/components/UI/Perps/hooks/usePerpsTransactionHistory.ts b/app/components/UI/Perps/hooks/usePerpsTransactionHistory.ts
