diff --git a/app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx b/app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx
index 35df68c22bf9..52e151fe2f0b 100644
--- a/app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx
+++ b/app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx
@@ -56,6 +56,7 @@ import MarketInsightsTrendSourcesBottomSheet from '../../components/MarketInsigh
import { MarketInsightsSelectorsIDs } from '../../MarketInsights.testIds';
import { isSafeUrl } from '../../utils/marketInsightsFormatting';
import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import PerpsDirectionButton from '../../../Perps/components/PerpsDirectionButton';
import type {
MarketInsightsTweet,
MarketInsightsTrend,
@@ -886,24 +887,24 @@ const MarketInsightsView: React.FC = () => {
twClassName={`border-t border-muted bg-default px-4 pt-4 pb-[${insets.bottom + 8}px]`}
>
-
-
+
= ({
return 0;
}, [focusedPrice, livePrices, market?.symbol]);
- // A/B Testing: Button color test (TAT-1937)
- const {
- variantName: buttonColorVariant,
- isActive: isButtonColorTestEnabled,
- } = useABTest(PERPS_BUTTON_COLOR_AB_TEST_KEY, BUTTON_COLOR_VARIANTS, {
- experimentName: 'Long/Short Button Color Test',
- variationNames: { control: 'White/White', colors: 'Green/Red' },
- });
-
usePerpsConnection();
// Check if market is at open interest cap
@@ -937,10 +924,6 @@ const PerpsMarketDetailsView: React.FC = ({
isPerpsInsightsEnabled && Boolean(perpsInsightsReport),
[PERPS_EVENT_PROPERTY.OUTAGE_BANNER_SHOWN]:
isServiceInterruptionBannerEnabled,
- // A/B Test context (TAT-1937) - for baseline exposure tracking
- ...(isButtonColorTestEnabled && {
- [PERPS_EVENT_PROPERTY.AB_TEST_BUTTON_COLOR]: buttonColorVariant,
- }),
}),
[
market?.symbol,
@@ -953,8 +936,6 @@ const PerpsMarketDetailsView: React.FC = ({
isPerpsInsightsEnabled,
perpsInsightsReport,
isServiceInterruptionBannerEnabled,
- isButtonColorTestEnabled,
- buttonColorVariant,
],
);
@@ -1206,19 +1187,6 @@ const PerpsMarketDetailsView: React.FC = ({
return;
}
- // Track AB test on button press (TAT-1937)
- if (isButtonColorTestEnabled) {
- track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
- [PERPS_EVENT_PROPERTY.INTERACTION_TYPE]:
- PERPS_EVENT_VALUE.INTERACTION_TYPE.TAP,
- [PERPS_EVENT_PROPERTY.ASSET]: market.symbol,
- [PERPS_EVENT_PROPERTY.DIRECTION]:
- direction === 'long'
- ? PERPS_EVENT_VALUE.DIRECTION.LONG
- : PERPS_EVENT_VALUE.DIRECTION.SHORT,
- });
- }
-
navigateToOrder({
direction,
asset: market.symbol,
@@ -1246,7 +1214,6 @@ const PerpsMarketDetailsView: React.FC = ({
market?.symbol,
market?.providerId,
marketData,
- isButtonColorTestEnabled,
chartLibrary,
useBottomSheet,
],
@@ -2231,53 +2198,27 @@ const PerpsMarketDetailsView: React.FC = ({
{/* Show Long/Short buttons when no position exists and user can trade */}
{shouldShowLongShortButtonsOnly && (
- {buttonColorVariant === 'colors' ? (
-
- {strings('perps.market.long')}
-
- ) : (
-
- {strings('perps.market.long')}
-
- )}
+
+ {strings('perps.market.long')}
+
- {buttonColorVariant === 'colors' ? (
-
- {strings('perps.market.short')}
-
- ) : (
-
- {strings('perps.market.short')}
-
- )}
+
+ {strings('perps.market.short')}
+
)}
diff --git a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.test.tsx b/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.test.tsx
index f04eb8b6000a..78ff1b224265 100644
--- a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.test.tsx
@@ -234,16 +234,6 @@ jest.mock('../../hooks/usePerpsEventTracking', () => ({
}),
}));
-// Mock useABTest to return default control variant (controllable per-test)
-const mockUseABTest = jest.fn(() => ({
- variantName: 'control',
- variant: { long: 'white', short: 'white' },
- isActive: false,
-}));
-jest.mock('../../../../../hooks/useABTest', () => ({
- useABTest: () => mockUseABTest(),
-}));
-
// Mock components
jest.mock('../../components/PerpsOrderBookTable', () => {
const { View } = jest.requireActual('react-native');
diff --git a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx b/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx
index 23bcc749feff..63368c1156bd 100644
--- a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx
+++ b/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx
@@ -8,8 +8,6 @@ import {
ButtonBaseSize,
ButtonIcon,
ButtonIconSize,
- ButtonSemantic,
- ButtonSemanticSeverity,
FilterButton,
HeaderSubpage,
IconColor,
@@ -79,11 +77,7 @@ import {
} from '../../selectors/perpsController';
import { useComplianceGate } from '../../../Compliance';
import { selectSelectedInternalAccountAddress } from '../../../../../selectors/accountsController';
-import { useABTest } from '../../../../../hooks/useABTest';
-import {
- BUTTON_COLOR_VARIANTS,
- PERPS_BUTTON_COLOR_AB_TEST_KEY,
-} from '../../abTestConfig';
+import PerpsDirectionButton from '../../components/PerpsDirectionButton';
import {
formatPerpsFiat,
PRICE_RANGES_UNIVERSAL,
@@ -119,16 +113,6 @@ const PerpsOrderBookView: React.FC = ({
const insets = useSafeAreaInsets();
const activeProvider = useSelector(selectPerpsProvider);
- // A/B Testing: Button color test (TAT-1937)
- const { variantName: buttonColorVariant } = useABTest(
- PERPS_BUTTON_COLOR_AB_TEST_KEY,
- BUTTON_COLOR_VARIANTS,
- {
- experimentName: 'Long/Short Button Color Test',
- variationNames: { control: 'White/White', colors: 'Green/Red' },
- },
- );
-
// Geo-restriction eligibility check
const isEligible = useSelector(selectPerpsEligibility);
const [isEligibilityModalVisible, setIsEligibilityModalVisible] =
@@ -776,49 +760,25 @@ const PerpsOrderBookView: React.FC = ({
) : (
- {buttonColorVariant === 'colors' ? (
-
- {strings('perps.market.long')}
-
- ) : (
-
- )}
-
- {buttonColorVariant === 'colors' ? (
-
- {strings('perps.market.short')}
-
- ) : (
-
- )}
+
+ {strings('perps.market.long')}
+
+
+
+ {strings('perps.market.short')}
+
)}
diff --git a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx
index a0c41354201e..8c07d99edc5a 100644
--- a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx
@@ -724,16 +724,6 @@ jest.mock('../../../../../core/Engine', () => ({
},
}));
-// Mock useABTest hook (controllable per-test)
-const mockUseABTest = jest.fn(() => ({
- variantName: 'control',
- variant: { long: 'white', short: 'white' },
- isActive: false,
-}));
-jest.mock('../../../../../hooks/useABTest', () => ({
- useABTest: () => mockUseABTest(),
-}));
-
// Mock useTooltipModal hook
jest.mock('../../../../hooks/useTooltipModal', () => ({
__esModule: true,
@@ -1278,11 +1268,6 @@ function applyDefaultHookMocks() {
setPayToken: jest.fn(),
isNative: undefined,
});
- mockUseABTest.mockReturnValue({
- variantName: 'control',
- variant: { long: 'white', short: 'white' },
- isActive: false,
- });
mockCreateEventBuilder.mockImplementation(() => ({
addProperties: jest.fn().mockReturnThis(),
build: jest.fn().mockReturnValue({}),
@@ -4312,13 +4297,8 @@ describe('PerpsOrderView', () => {
expect(placeOrderButton.props.accessibilityState?.disabled).toBeTruthy();
});
- it('disables control (white) button variant when TP/SL is invalid', async () => {
- // Arrange: control (default/white) A/B test variant + invalid TP
- mockUseABTest.mockReturnValue({
- variantName: 'control',
- variant: { long: 'white', short: 'white' },
- isActive: true,
- });
+ it('disables the trade button when TP/SL is invalid', async () => {
+ // Arrange
(usePerpsOrderContext as jest.Mock).mockReturnValue(
orderContextWithTPSL({ direction: 'long', takeProfitPrice: '2000' }),
);
@@ -4337,16 +4317,15 @@ describe('PerpsOrderView', () => {
// Act
render(, { wrapper: TestWrapper });
- // Assert: warning visible (proves hasInvalidTPSL is true in control/white path)
+ // Assert
await waitFor(() => {
- expect(screen.getByText(/Take profit must be above/)).toBeDefined();
+ expect(screen.getByText(/Take profit must be above/)).toBeOnTheScreen();
});
- // Assert: control (white) button rendered and receives isDisabled prop
const placeOrderButton = await screen.findByTestId(
PerpsOrderViewSelectorsIDs.PLACE_ORDER_BUTTON,
);
- expect(placeOrderButton).toBeDefined();
+ expect(placeOrderButton).toBeOnTheScreen();
});
describe('limit order TP/SL validates against entry price, not market price', () => {
diff --git a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
index 5ff84ae0c430..0d8229ded027 100644
--- a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
+++ b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
@@ -20,8 +20,6 @@ import {
Box,
Button,
ButtonBaseSize,
- ButtonSemantic,
- ButtonSemanticSeverity,
ButtonVariant,
ButtonSize as ButtonSizeRNDesignSystem,
TextVariant,
@@ -144,7 +142,6 @@ import { usePerpsConnection } from '../../hooks/usePerpsConnection';
import { usePerpsEstimatedSlippage } from '../../hooks/usePerpsEstimatedSlippage';
import { usePerpsMaxSlippage } from '../../hooks/usePerpsMaxSlippage';
import { useIsPerpsBalanceSelected } from '../../hooks/useIsPerpsBalanceSelected';
-import { useABTest } from '../../../../../hooks/useABTest';
import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
import { usePerpsAbandonOrderTracking } from '../../hooks/usePerpsAbandonOrderTracking';
import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
@@ -161,6 +158,7 @@ import {
selectPerpsServiceInterruptionBannerEnabledFlag,
selectPerpsTradeWithAnyTokenEnabledFlag,
} from '../../selectors/featureFlags';
+import PerpsDirectionButton from '../../components/PerpsDirectionButton';
import { selectPerpsChartPreferredCandlePeriod } from '../../selectors/chartPreferences';
import { usePerpsStream } from '../../providers/PerpsStreamManager';
import {
@@ -564,15 +562,6 @@ const PerpsOrderViewContentBase: React.FC = ({
// Check if market is at OI cap (zero network overhead - uses existing webData2 subscription)
const { isAtCap: isAtOICap } = usePerpsOICap(orderForm.asset);
- // A/B Testing: Button color test
- const {
- variantName: buttonColorVariant,
- isActive: isButtonColorTestEnabled,
- } = useABTest(PERPS_BUTTON_COLOR_AB_TEST_KEY, BUTTON_COLOR_VARIANTS, {
- experimentName: 'Long/Short Button Color Test',
- variationNames: { control: 'White/White', colors: 'Green/Red' },
- });
-
// Markets data for navigation
const { markets } = usePerpsMarkets();
@@ -2977,6 +2966,25 @@ const PerpsOrderViewContentBase: React.FC = ({
testID={PerpsOrderViewSelectorsIDs.SERVICE_INTERRUPTION_BANNER}
/>
+ handlePlaceOrder()}
+ isFullWidth
+ size={ButtonBaseSize.Lg}
+ isDisabled={
+ !orderValidation.isValid ||
+ isPlacingOrder ||
+ doesStopLossRiskLiquidation ||
+ hasInvalidTPSL ||
+ isAtOICap ||
+ shouldBlockBecauseOfFeesLoading ||
+ hasBlockingPayAlerts
+ }
+ isLoading={isPlacingOrder}
+ testID={PerpsOrderViewSelectorsIDs.PLACE_ORDER_BUTTON}
+ >
+ {placeOrderLabel}
+
{buttonColorVariant === 'colors' ? (
) : null}
-
{placeOrderLabel}
-
+
{isScaleOrder ? (
) : null}
diff --git a/app/components/UI/Perps/abTestConfig.test.ts b/app/components/UI/Perps/abTestConfig.test.ts
index b27641209e41..d901628ae54f 100644
--- a/app/components/UI/Perps/abTestConfig.test.ts
+++ b/app/components/UI/Perps/abTestConfig.test.ts
@@ -1,9 +1,5 @@
import { EVENT_NAME } from '../../../core/Analytics/MetaMetrics.events';
import {
- BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING,
- BUTTON_COLOR_VARIANTS,
- ButtonColorVariant,
- PERPS_BUTTON_COLOR_AB_TEST_KEY,
PERPS_SCREEN_VS_BOTTOM_SHEET_AB_TEST_KEY,
SCREEN_VS_BOTTOM_SHEET_AB_TEST_ANALYTICS_MAPPING,
SCREEN_VS_BOTTOM_SHEET_VARIANTS,
@@ -11,59 +7,6 @@ import {
} from './abTestConfig';
describe('Perps abTestConfig', () => {
- describe('PERPS_BUTTON_COLOR_AB_TEST_KEY', () => {
- it('follows the {team}{TICKET}Abtest{TestName} naming convention', () => {
- expect(PERPS_BUTTON_COLOR_AB_TEST_KEY).toBe(
- 'perpsTAT1937AbtestButtonColor',
- );
- expect(PERPS_BUTTON_COLOR_AB_TEST_KEY).toMatch(
- /^[a-z][A-Za-z0-9]*[A-Z]{2,}[0-9]+Abtest[A-Z][A-Za-z0-9]*$/,
- );
- });
- });
-
- describe('BUTTON_COLOR_VARIANTS', () => {
- it('includes a control variant', () => {
- expect(BUTTON_COLOR_VARIANTS).toHaveProperty(ButtonColorVariant.Control);
- });
-
- it('maps control (default/fallback) to white/white', () => {
- expect(BUTTON_COLOR_VARIANTS[ButtonColorVariant.Control]).toEqual({
- long: 'white',
- short: 'white',
- });
- });
-
- it('maps colors to green/red', () => {
- expect(BUTTON_COLOR_VARIANTS[ButtonColorVariant.Colors]).toEqual({
- long: 'green',
- short: 'red',
- });
- });
- });
-
- describe('BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING', () => {
- it('references the button color flag key', () => {
- expect(BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING.flagKey).toBe(
- PERPS_BUTTON_COLOR_AB_TEST_KEY,
- );
- });
-
- it('declares control and colors as valid variants', () => {
- expect(BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING.validVariants).toEqual([
- ButtonColorVariant.Control,
- ButtonColorVariant.Colors,
- ]);
- });
-
- it('registers the screen viewed and UI interaction events', () => {
- expect(BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING.eventNames).toEqual([
- EVENT_NAME.PERPS_SCREEN_VIEWED,
- EVENT_NAME.PERPS_UI_INTERACTION,
- ]);
- });
- });
-
describe('PERPS_SCREEN_VS_BOTTOM_SHEET_AB_TEST_KEY', () => {
it('follows the {team}{TICKET}Abtest{TestName} naming convention', () => {
expect(PERPS_SCREEN_VS_BOTTOM_SHEET_AB_TEST_KEY).toBe(
diff --git a/app/components/UI/Perps/abTestConfig.ts b/app/components/UI/Perps/abTestConfig.ts
index 0389d5daee0e..52bd7b1f20f8 100644
--- a/app/components/UI/Perps/abTestConfig.ts
+++ b/app/components/UI/Perps/abTestConfig.ts
@@ -1,50 +1,6 @@
import { EVENT_NAME } from '../../../core/Analytics/MetaMetrics.events';
import type { ABTestAnalyticsMapping } from '../../../util/analytics/abTestAnalytics.types';
-/**
- * TAT-1937: Long/Short Button Color Test
- *
- * Tests the impact of button colors on trading behavior:
- * - Control (default/fallback): White buttons for both, reduces risk anxiety and promotes balanced participation
- * - Colors: Traditional green (long) / red (short), familiar and intuitive
- *
- * `control` is the required fallback key for `useABTest` (see `app/hooks/useABTest.ts`),
- * so it is always what's shown when the flag is absent, invalid, or the test is inactive —
- * white is therefore the default experience, and `colors` is the active-experiment variant.
- *
- * Migrated to the canonical A/B testing standard (see `docs/ab-testing.md`) under TAT-3308.
- *
- * LaunchDarkly flag setup: version-gated to app version 8.3.0+ using the
- * `versions` + `thresholdVersion: 2` composition (resolved entirely by
- * RemoteFeatureFlagController — no app-side version check needed). See
- * `docs/perps/perps-feature-flags.md` for the exact flag JSON.
- */
-export const PERPS_BUTTON_COLOR_AB_TEST_KEY = 'perpsTAT1937AbtestButtonColor';
-
-export enum ButtonColorVariant {
- Control = 'control',
- Colors = 'colors',
-}
-
-export interface ButtonColorVariantConfig {
- long: string;
- short: string;
-}
-
-export const BUTTON_COLOR_VARIANTS: Record<
- ButtonColorVariant,
- ButtonColorVariantConfig
-> = {
- [ButtonColorVariant.Control]: { long: 'white', short: 'white' },
- [ButtonColorVariant.Colors]: { long: 'green', short: 'red' },
-};
-
-export const BUTTON_COLOR_AB_TEST_ANALYTICS_MAPPING: ABTestAnalyticsMapping = {
- flagKey: PERPS_BUTTON_COLOR_AB_TEST_KEY,
- validVariants: Object.values(ButtonColorVariant),
- eventNames: [EVENT_NAME.PERPS_SCREEN_VIEWED, EVENT_NAME.PERPS_UI_INTERACTION],
-};
-
/**
* Shared Perps screen vs bottom-sheet experiment.
*
diff --git a/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.test.tsx b/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.test.tsx
new file mode 100644
index 000000000000..6663765e2cb5
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { darkTheme, lightTheme } from '@metamask/design-tokens';
+import ThemeProvider from '../../../../../component-library/providers/ThemeProvider/ThemeProvider';
+import PerpsDirectionButton, {
+ type PerpsDirection,
+} from './PerpsDirectionButton';
+
+const mockStore = configureMockStore();
+
+const renderDirectionButton = (
+ direction: PerpsDirection,
+ appTheme: 'dark' | 'light',
+) => {
+ const store = mockStore({ user: { appTheme } });
+
+ return render(
+
+
+
+ {direction}
+
+
+ ,
+ );
+};
+
+describe('PerpsDirectionButton', () => {
+ it.each([
+ {
+ appTheme: 'light',
+ direction: 'long',
+ backgroundColor: lightTheme.colors.success.default,
+ foregroundColor: lightTheme.colors.success.inverse,
+ },
+ {
+ appTheme: 'dark',
+ direction: 'long',
+ backgroundColor: darkTheme.colors.success.default,
+ foregroundColor: darkTheme.colors.success.inverse,
+ },
+ {
+ appTheme: 'light',
+ direction: 'short',
+ backgroundColor: lightTheme.colors.error.default,
+ foregroundColor: lightTheme.colors.error.inverse,
+ },
+ {
+ appTheme: 'dark',
+ direction: 'short',
+ backgroundColor: darkTheme.colors.error.default,
+ foregroundColor: darkTheme.colors.error.inverse,
+ },
+ ] as const)(
+ 'uses the $direction semantic palette in $appTheme mode',
+ ({ appTheme, direction, backgroundColor, foregroundColor }) => {
+ renderDirectionButton(direction, appTheme);
+
+ expect(screen.getByTestId('perps-direction-button')).toHaveStyle({
+ backgroundColor,
+ });
+ expect(screen.getByText(direction)).toHaveStyle({
+ color: foregroundColor,
+ });
+ },
+ );
+});
diff --git a/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.tsx b/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.tsx
new file mode 100644
index 000000000000..c7454c66b54f
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsDirectionButton/PerpsDirectionButton.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+ ButtonBase,
+ type ButtonBaseProps,
+} from '@metamask/design-system-react-native';
+
+export type PerpsDirection = 'long' | 'short';
+
+interface PerpsDirectionButtonProps
+ extends Omit<
+ ButtonBaseProps,
+ 'iconClassName' | 'textClassName' | 'textProps' | 'twClassName'
+ > {
+ direction: PerpsDirection;
+ twClassName?: string;
+}
+
+const DIRECTION_COLOR_CLASSES: Record<
+ PerpsDirection,
+ { background: string; foreground: string }
+> = {
+ long: {
+ background: 'bg-success-default',
+ foreground: 'text-success-inverse',
+ },
+ short: {
+ background: 'bg-error-default',
+ foreground: 'text-error-inverse',
+ },
+};
+
+/**
+ * Trade CTA that keeps Long and Short colors consistent across Perps surfaces.
+ */
+const PerpsDirectionButton = ({
+ direction,
+ twClassName = '',
+ ...props
+}: PerpsDirectionButtonProps) => {
+ const colorClasses = DIRECTION_COLOR_CLASSES[direction];
+
+ return (
+ colorClasses.foreground}
+ iconClassName={() => colorClasses.foreground}
+ />
+ );
+};
+
+export default PerpsDirectionButton;
diff --git a/app/components/UI/Perps/components/PerpsDirectionButton/index.ts b/app/components/UI/Perps/components/PerpsDirectionButton/index.ts
new file mode 100644
index 000000000000..3b3f232a4b3b
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsDirectionButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './PerpsDirectionButton';
+export type { PerpsDirection } from './PerpsDirectionButton';
diff --git a/app/components/UI/Perps/components/PerpsTradeBottomSheet/PerpsTradeScreen.tsx b/app/components/UI/Perps/components/PerpsTradeBottomSheet/PerpsTradeScreen.tsx
index 36a53f1cbd21..2ebb548efa29 100644
--- a/app/components/UI/Perps/components/PerpsTradeBottomSheet/PerpsTradeScreen.tsx
+++ b/app/components/UI/Perps/components/PerpsTradeBottomSheet/PerpsTradeScreen.tsx
@@ -5,8 +5,9 @@ import {
BoxJustifyContent,
Button,
ButtonBaseSize,
- ButtonSemantic,
- ButtonSemanticSeverity,
+ ButtonIcon,
+ ButtonIconSize,
+ ButtonIconVariant,
ButtonSize,
ButtonVariant,
FontWeight,
@@ -29,6 +30,7 @@ import Keypad from '../../../../Base/Keypad';
import RewardsVipBadge from '../../../Rewards/components/RewardsVipBadge/RewardsVipBadge';
import { PerpsTradeSheetSelectorsIDs } from '../../Perps.testIds';
import PerpsAmountDisplay from '../PerpsAmountDisplay';
+import PerpsDirectionButton from '../PerpsDirectionButton';
import PerpsMarketLimitToggle from '../PerpsMarketLimitToggle';
import PerpsOICapWarning from '../PerpsOICapWarning';
import PerpsServiceInterruptionBanner from '../PerpsServiceInterruptionBanner';
@@ -803,12 +805,8 @@ const PerpsTradeScreen: React.FC = ({
))}
) : null}
- = ({
testID={PerpsTradeSheetSelectorsIDs.PLACE_ORDER_BUTTON}
>
{submitLabel ?? directionLabel}
-
+
{isFeeLoading ? (
= {
],
},
},
- status: FeatureFlagStatus.Active,
+ status: FeatureFlagStatus.Deprecated,
},
perpsTAT3938AbtestScreenVsBottomSheet: {