From 244f441bcd26515c628f4ac84dd1d091fc6b3167 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Tue, 14 Jul 2026 23:43:45 -0700
Subject: [PATCH] refactor(perps): use MMDS BannerAlert for service
 interruption banner

Replace the custom outage banner with BannerAlert Warning and an action button, and place it above the Perps Home title with 16px spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Views/PerpsHomeView/PerpsHomeView.tsx     | 12 ++-
 .../PerpsServiceInterruptionBanner.test.tsx   |  8 +-
 .../PerpsServiceInterruptionBanner.tsx        | 93 ++-----------------
 3 files changed, 20 insertions(+), 93 deletions(-)

diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
index ceda24a063e..eaa34da34a6 100644
--- a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
+++ b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
@@ -1069,6 +1069,13 @@ const PerpsHomeView = ({
             setTitleSectionHeight(event.nativeEvent.layout.height)
           }
         >
+          {isServiceInterruptionBannerEnabled && (
+            <Box twClassName="px-4 mb-4">
+              <PerpsServiceInterruptionBanner
+                testID={PerpsHomeViewSelectorsIDs.SERVICE_INTERRUPTION_BANNER}
+              />
+            </Box>
+          )}
           <TitleHub
             testID={PerpsHomeViewSelectorsIDs.HOME_HEADING}
             title={hideHeader ? undefined : perpsScreenTitle}
@@ -1122,11 +1129,6 @@ const PerpsHomeView = ({
         </Box>
 
         <Box paddingBottom={3}>
-          {/* Service Interruption Banner */}
-          <PerpsServiceInterruptionBanner
-            testID={PerpsHomeViewSelectorsIDs.SERVICE_INTERRUPTION_BANNER}
-          />
-
           {/* Balance Actions Component */}
           <PerpsMarketBalanceActions
             showActionButtons={HOME_SCREEN_CONFIG.ShowHeaderActionButtons}
diff --git a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
index 9759d8e5945..dc32650bb0e 100644
--- a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
+++ b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.test.tsx
@@ -63,7 +63,7 @@ describe('PerpsServiceInterruptionBanner', () => {
     expect(getByText('Contact support')).toBeOnTheScreen();
   });
 
-  it('navigates to support when support link pressed', () => {
+  it('navigates to support when contact support action button pressed', () => {
     useSelector.mockImplementation((selector: unknown) => {
       if (selector === selectPerpsServiceInterruptionBannerEnabledFlag) {
         return true;
@@ -71,11 +71,9 @@ describe('PerpsServiceInterruptionBanner', () => {
       return undefined;
     });
 
-    const { getByTestId } = render(<PerpsServiceInterruptionBanner />);
+    const { getByText } = render(<PerpsServiceInterruptionBanner />);
 
-    fireEvent.press(
-      getByTestId('perps-service-interruption-banner-support-link'),
-    );
+    fireEvent.press(getByText('Contact support'));
 
     expect(mockNavigate).toHaveBeenCalledTimes(1);
   });
diff --git a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
index a9e19f954d3..2c3f01599c6 100644
--- a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
+++ b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx
@@ -1,19 +1,9 @@
 import React, { useCallback } from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import {
-  Box,
-  Text,
-  Icon,
-  IconName,
-  IconSize,
-  TextVariant,
-  TextColor,
-  BoxFlexDirection,
-  BoxAlignItems,
-  BoxBackgroundColor,
-  IconColor,
+  BannerAlert,
+  BannerAlertSeverity,
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -21,32 +11,6 @@ import { selectPerpsServiceInterruptionBannerEnabledFlag } from '../../selectors
 import { SUPPORT_CONFIG } from '../../constants/perpsConfig';
 import type { PerpsServiceInterruptionBannerProps } from './PerpsServiceInterruptionBanner.types';
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  banner: {
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    gap: 8,
-  },
-  titleRow: {
-    gap: 8,
-  },
-  iconContainer: {
-    width: 34,
-    height: 34,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  underline: {
-    textDecorationLine: 'underline',
-  },
-});
-
 const PerpsServiceInterruptionBanner: React.FC<
   PerpsServiceInterruptionBannerProps
 > = ({ testID = 'perps-service-interruption-banner' }) => {
@@ -70,51 +34,14 @@ const PerpsServiceInterruptionBanner: React.FC<
   }
 
   return (
-    <Box style={styles.container} testID={testID}>
-      <Box
-        style={styles.banner}
-        backgroundColor={BoxBackgroundColor.BackgroundMuted}
-      >
-        {/* Title row: icon + heading */}
-        <Box
-          flexDirection={BoxFlexDirection.Row}
-          alignItems={BoxAlignItems.Center}
-          style={styles.titleRow}
-        >
-          <Box
-            style={styles.iconContainer}
-            backgroundColor={BoxBackgroundColor.WarningMuted}
-          >
-            <Icon
-              name={IconName.FlashSlash}
-              size={IconSize.Md}
-              color={IconColor.WarningDefault}
-            />
-          </Box>
-          <Text
-            variant={TextVariant.HeadingSm}
-            color={TextColor.WarningDefault}
-          >
-            {strings('perps.service_interruption.title')}
-          </Text>
-        </Box>
-
-        {/* Description aligned to left */}
-        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
-          {strings('perps.service_interruption.description')}{' '}
-          <Text
-            variant={TextVariant.BodySm}
-            color={TextColor.TextAlternative}
-            style={styles.underline}
-            onPress={handleSupportPress}
-            accessibilityRole="link"
-            testID={`${testID}-support-link`}
-          >
-            {strings('perps.service_interruption.contact_support')}
-          </Text>
-        </Text>
-      </Box>
-    </Box>
+    <BannerAlert
+      severity={BannerAlertSeverity.Warning}
+      title={strings('perps.service_interruption.title')}
+      description={strings('perps.service_interruption.description')}
+      actionButtonLabel={strings('perps.service_interruption.contact_support')}
+      actionButtonOnPress={handleSupportPress}
+      testID={testID}
+    />
   );
 };