feat: init perpsEnabled feature flag

.github/CODEOWNERS

@@ -87,6 +87,17 @@ app/scripts/controllers/swaps                         @MetaMask/swaps-engineers
 # Ramps team to own code for the ramps folder
 **/ramps/**                                           @MetaMask/ramp
 
+# Perps Team
+ui/pages/perps/ @MetaMask/perps
+ui/components/app/perps/ @MetaMask/perps
+ui/ducks/perps/ @MetaMask/perps
+ui/hooks/perps/ @MetaMask/perps
+ui/selectors/perps/ @MetaMask/perps
+shared/lib/deep-links/routes/perps.ts @MetaMask/perps
+test/e2e/tests/perps/ @MetaMask/perps
+docs/perps/ @MetaMask/perps
+**/perps/** @MetaMask/perps
+
 # Snaps
 **/snaps/**                          @MetaMask/core-platform
 shared/constants/permissions.ts      @MetaMask/core-platform

shared/constants/app-state.ts

@@ -8,19 +8,22 @@ export enum AccountOverviewTabKey {
   Nfts = 'nfts',
   Activity = 'activity',
   DeFi = 'defi',
+  Perps = 'perps',
 }
 
 export const ACCOUNT_OVERVIEW_TAB_KEY_TO_METAMETRICS_EVENT_NAME_MAP = {
   [AccountOverviewTabKey.Tokens]: MetaMetricsEventName.TokenScreenOpened,
   [AccountOverviewTabKey.DeFi]: MetaMetricsEventName.DeFiScreenOpened,
   [AccountOverviewTabKey.Activity]: MetaMetricsEventName.ActivityScreenOpened,
+  [AccountOverviewTabKey.Perps]: MetaMetricsEventName.PerpsScreenOpened,
 } as const;
 
 export const ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP = {
   [AccountOverviewTabKey.Tokens]: TraceName.AccountOverviewAssetListTab,
   [AccountOverviewTabKey.Nfts]: TraceName.AccountOverviewNftsTab,
   [AccountOverviewTabKey.Activity]: TraceName.AccountOverviewActivityTab,
   [AccountOverviewTabKey.DeFi]: TraceName.AccountOverviewDeFiTab,
+  [AccountOverviewTabKey.Perps]: TraceName.AccountOverviewPerpsTab,
 } as const;
 
 export type CarouselSlide = {

shared/constants/metametrics.ts

@@ -886,6 +886,7 @@ export enum MetaMetricsEventName {
   DeFiScreenOpened = 'DeFi Screen Opened',
   DeFiDetailsOpened = 'DeFi Details Opened',
   ActivityScreenOpened = 'Activity Screen Opened',
+  PerpsScreenOpened = 'Perps Screen Opened',
   WhatsNewViewed = `What's New Viewed`,
   WhatsNewClicked = `What's New Link Clicked`,
   PrepareSwapPageLoaded = 'Prepare Swap Page Loaded',

shared/lib/trace.ts

@@ -12,6 +12,7 @@ export enum TraceName {
   AccountOverviewNftsTab = 'Account Overview Nfts Tab',
   AccountOverviewActivityTab = 'Account Overview Activity Tab',
   AccountOverviewDeFiTab = 'Account Overview DeFi Tab',
+  AccountOverviewPerpsTab = 'Account Overview Perps Tab',
   AssetDetails = 'Asset Details',
   BackgroundConnect = 'Background Connect',
   BridgeBalancesUpdated = 'Bridge Balances Updated',

test/e2e/tests/perps/helpers.ts

@@ -0,0 +1,9 @@
+/**
+ * Perps E2E test helpers
+ *
+ * This directory contains E2E test utilities and helpers for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export {};

ui/components/app/perps/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Perps UI components
+ *
+ * This directory contains reusable UI components for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export {};

ui/components/multichain/account-overview/account-overview-tabs.tsx

@@ -24,6 +24,7 @@ import {
   getEnabledChainIds,
   getIsMultichainAccountsState2Enabled,
 } from '../../../selectors';
+import { getIsPerpsEnabled } from '../../../selectors/perps';
 import { getAllEnabledNetworksForAllNamespaces } from '../../../selectors/multichain/networks';
 import { detectNfts } from '../../../store/actions';
 import AssetList from '../../app/assets/asset-list';
@@ -138,6 +139,8 @@ export const AccountOverviewTabs = ({
   );
   const showUnifiedTransactionList = isBIP44FeatureFlagEnabled;
 
+  const isPerpsEnabled = useSelector(getIsPerpsEnabled);
+
   return (
     <>
       <AssetListTokenDetection />
@@ -165,6 +168,17 @@ export const AccountOverviewTabs = ({
             </Box>
           </Tab>
         )}
+
+        {isPerpsEnabled && (
+          <Tab
+            name={t('perps')}
+            tabKey={AccountOverviewTabKey.Perps}
+            data-testid="account-overview__perps-tab"
+          >
+            <Box />
+          </Tab>
+        )}
+
         {showDefi && (
           <Tab
             name={t('defi')}

ui/ducks/perps/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Perps Redux slice
+ *
+ * This directory contains Redux state management (actions, reducers, selectors)
+ * for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export {};

ui/hooks/perps/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Perps custom hooks
+ *
+ * This directory contains custom React hooks for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export {};

ui/pages/perps/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Perps page components
+ *
+ * This directory contains page-level components for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export {};

ui/selectors/perps/feature-flags.test.ts

@@ -0,0 +1,41 @@
+import { getIsPerpsEnabled } from './feature-flags';
+
+type MockState = {
+  metamask: {
+    remoteFeatureFlags: {
+      perpsEnabled?: boolean;
+    };
+  };
+};
+
+const getMockState = (perpsEnabled?: boolean): MockState => ({
+  metamask: {
+    remoteFeatureFlags: {
+      perpsEnabled,
+    },
+  },
+});
+
+describe('Perps Feature Flags', () => {
+  describe('getIsPerpsEnabled', () => {
+    it('returns true when perpsEnabled flag is true', () => {
+      const state = getMockState(true);
+      expect(getIsPerpsEnabled(state)).toBe(true);
+    });
+
+    it('returns false when perpsEnabled flag is false', () => {
+      const state = getMockState(false);
+      expect(getIsPerpsEnabled(state)).toBe(false);
+    });
+
+    it('returns false when perpsEnabled flag is undefined', () => {
+      const state = getMockState(undefined);
+      expect(getIsPerpsEnabled(state)).toBe(false);
+    });
+
+    it('returns false when remoteFeatureFlags is empty', () => {
+      const state = { metamask: { remoteFeatureFlags: {} } };
+      expect(getIsPerpsEnabled(state)).toBe(false);
+    });
+  });
+});

ui/selectors/perps/feature-flags.ts

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import { getRemoteFeatureFlags } from '../remote-feature-flags';
+
+/**
+ * Get the state of the `perpsEnabled` remote feature flag.
+ *
+ * @param _state - The MetaMask state object
+ * @returns `true` if Perps trading is enabled, `false` otherwise.
+ */
+export const getIsPerpsEnabled = createSelector(
+  getRemoteFeatureFlags,
+  (remoteFeatureFlags) => remoteFeatureFlags.perpsEnabled === true,
+);

ui/selectors/perps/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Perps selectors
+ *
+ * This directory contains Redux selectors for the Perps trading feature.
+ *
+ * @see {@link https://github.com/MetaMask/metamask-extension} for more info
+ */
+
+export { getIsPerpsEnabled } from './feature-flags';