From 374175867d74a9ef9fb4d3cb636891d7e8dac381 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 23:32:57 +0000
Subject: [PATCH 1/2] fix(bridge): remove redundant useElevatedSurface from
 Bridge modals

MMDS BottomSheet now handles pure-black elevated surface internally.
Remove the useElevatedSurface shim (twClassName={surfaceClass}) from
all Bridge-owned bottom sheet modals per TMCU-1039.

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
---
 .../BatchSellDestinationTokenSelectorModal/index.tsx          | 3 ---
 .../UI/Bridge/components/BatchSellFinalReviewModal/index.tsx  | 3 ---
 .../components/BatchSellMinimumReceivedInfoModal/index.tsx    | 3 ---
 .../Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx  | 3 ---
 .../UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx | 3 ---
 .../UI/Bridge/components/HighRateAlertModal/index.tsx         | 3 ---
 .../UI/Bridge/components/MissingPriceModal/index.tsx          | 3 ---
 .../UI/Bridge/components/PriceImpactModal/index.tsx           | 4 +---
 8 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/app/components/UI/Bridge/components/BatchSellDestinationTokenSelectorModal/index.tsx b/app/components/UI/Bridge/components/BatchSellDestinationTokenSelectorModal/index.tsx
index bd03756a8c1..1c06e9390e9 100644
--- a/app/components/UI/Bridge/components/BatchSellDestinationTokenSelectorModal/index.tsx
+++ b/app/components/UI/Bridge/components/BatchSellDestinationTokenSelectorModal/index.tsx
@@ -36,7 +36,6 @@ import { RootState } from '../../../../../reducers';
 import { BridgeToken } from '../../types';
 import { formatTokenBalance } from '../../utils';
 import { BatchSellDestinationTokenSelectorModalSelectorsIDs } from './BatchSellDestinationTokenSelectorModal.testIds';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 const getTokenKey = (token: BridgeToken) => `${token.chainId}:${token.address}`;
 
@@ -87,7 +86,6 @@ export function BatchSellDestinationTokenSelectorModal() {
     chainIds:
       destinationChainIds ?? (sourceChainId ? [sourceChainId] : undefined),
   });
-  const surfaceClass = useElevatedSurface();
 
   const handleClose = useCallback(() => {
     sheetRef.current?.onCloseBottomSheet();
@@ -106,7 +104,6 @@ export function BatchSellDestinationTokenSelectorModal() {
       ref={sheetRef}
       goBack={navigation.goBack}
       testID={BatchSellDestinationTokenSelectorModalSelectorsIDs.SHEET}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onClose={handleClose}
diff --git a/app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx b/app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx
index b908edb6f33..9182f8d6797 100644
--- a/app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx
+++ b/app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx
@@ -48,7 +48,6 @@ import { useSubmitBatchSellTx } from '../../hooks/useSubmitBatchSellTx';
 import type { BridgeToken } from '../../types';
 import { BatchSellQuoteDetails } from '../BatchSellQuoteDetailsModal';
 import { BatchSellFinalReviewModalSelectorsIDs } from './BatchSellFinalReviewModal.testIds';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 import { useTrackBatchSellReviewModalSubmitted } from '../../hooks/useTrackBatchSellReviewModalSubmitted';
 
 const MAX_VISIBLE_SOURCE_TOKEN_AVATARS = 5;
@@ -305,7 +304,6 @@ export function BatchSellFinalReviewModal() {
     isGasless: batchSellQuoteData.isGasless,
     networkFee: batchSellQuoteData.networkFee,
   });
-  const surfaceClass = useElevatedSurface();
   const sheetRef = useRef<BottomSheetRef>(null);
   const [isTokenDetailsExpanded, setIsTokenDetailsExpanded] = useState(false);
   const trackBatchSellReviewModalSubmitted =
@@ -433,7 +431,6 @@ export function BatchSellFinalReviewModal() {
       ref={sheetRef}
       testID={BatchSellFinalReviewModalSelectorsIDs.SHEET}
       goBack={navigation.goBack}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onClose={handleClose}
diff --git a/app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx b/app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx
index 06834dc14c3..4dc0cbaf184 100644
--- a/app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx
+++ b/app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx
@@ -15,7 +15,6 @@ import { strings } from '../../../../../../locales/i18n';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { BatchSellMinimumReceivedInfoModalSelectorsIDs } from './BatchSellMinimumReceivedInfoModal.testIds';
 import { BatchSellMinimumReceivedInfoModalParams } from './BatchSellMinimumReceivedInfoModal.types';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellMinimumReceivedInfoModal() {
   const navigation = useNavigation<AppStackNavigationProp>();
@@ -23,13 +22,11 @@ export function BatchSellMinimumReceivedInfoModal() {
   const handleBack = sourceModal
     ? () => navigation.replace(sourceModal.screen, sourceModal.params)
     : undefined;
-  const surfaceClass = useElevatedSurface();
 
   return (
     <BottomSheet
       testID={BatchSellMinimumReceivedInfoModalSelectorsIDs.SHEET}
       goBack={navigation.goBack}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onBack={handleBack}
diff --git a/app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx b/app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx
index 8893d42bb5e..54c8f7be90f 100644
--- a/app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx
+++ b/app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx
@@ -15,7 +15,6 @@ import { strings } from '../../../../../../locales/i18n';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { BatchSellNetworkFeeInfoModalSelectorsIDs } from './BatchSellNetworkFeeInfoModal.testIds';
 import { BatchSellNetworkFeeInfoModalParams } from './BatchSellNetworkFeeInfoModal.types';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellNetworkFeeInfoModal() {
   const navigation = useNavigation<AppStackNavigationProp>();
@@ -23,13 +22,11 @@ export function BatchSellNetworkFeeInfoModal() {
   const handleBack = sourceModal
     ? () => navigation.replace(sourceModal.screen, sourceModal.params)
     : undefined;
-  const surfaceClass = useElevatedSurface();
 
   return (
     <BottomSheet
       testID={BatchSellNetworkFeeInfoModalSelectorsIDs.SHEET}
       goBack={navigation.goBack}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onBack={handleBack}
diff --git a/app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx b/app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx
index 2dd9a803088..3d35d553749 100644
--- a/app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx
+++ b/app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx
@@ -17,12 +17,10 @@ import {
 import { BatchSellQuoteDetails } from './BatchSellQuoteDetails';
 import { BatchSellQuoteDetailsModalSelectorsIDs } from './BatchSellQuoteDetailsModal.testIds';
 import { strings } from '../../../../../../locales/i18n';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export function BatchSellQuoteDetailsModal() {
   const navigation = useNavigation<AppStackNavigationProp>();
   const sourceTokens = useSelector(selectBatchSellSourceTokens);
-  const surfaceClass = useElevatedSurface();
   const batchSellQuoteData = useBatchSellQuoteData({
     shouldUpdateBatchSellTrades: false,
   });
@@ -49,7 +47,6 @@ export function BatchSellQuoteDetailsModal() {
     <BottomSheet
       testID={BatchSellQuoteDetailsModalSelectorsIDs.SHEET}
       goBack={navigation.goBack}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onClose={navigation.goBack}
diff --git a/app/components/UI/Bridge/components/HighRateAlertModal/index.tsx b/app/components/UI/Bridge/components/HighRateAlertModal/index.tsx
index 18fa4b0b849..5c8f879a44e 100644
--- a/app/components/UI/Bridge/components/HighRateAlertModal/index.tsx
+++ b/app/components/UI/Bridge/components/HighRateAlertModal/index.tsx
@@ -19,7 +19,6 @@ import {
   useSwapBridgeNavigation,
 } from '../../hooks/useSwapBridgeNavigation';
 import { HighRateAlertModalSelectorsIDs } from './HighRateAlertModal.testIds';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export interface HighRateAlertModalParams {
   sourceToken: BridgeToken;
@@ -34,7 +33,6 @@ export function HighRateAlertModal() {
     location: SwapBridgeNavigationLocation.MainView,
     sourcePage: 'BatchSell',
   });
-  const surfaceClass = useElevatedSurface();
 
   const handleClose = useCallback(() => {
     sheetRef.current?.onCloseBottomSheet();
@@ -51,7 +49,6 @@ export function HighRateAlertModal() {
       ref={sheetRef}
       goBack={goBack}
       testID={HighRateAlertModalSelectorsIDs.SHEET}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onClose={handleClose}
diff --git a/app/components/UI/Bridge/components/MissingPriceModal/index.tsx b/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
index eda4efeb6d4..78647d96312 100644
--- a/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
+++ b/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
@@ -25,7 +25,6 @@ import {
   Text,
   TextVariant,
 } from '@metamask/design-system-react-native';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export interface MissingPriceModalParams {
   location: MetaMetricsSwapsEventSource;
@@ -36,7 +35,6 @@ export const MissingPriceModal = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
   const [loading, setLoading] = useState(false);
   const { location } = useParams<MissingPriceModalParams>();
-  const surfaceClass = useElevatedSurface();
   const sourceToken = useSelector(selectSourceToken);
   const tokenBalance = useLatestBalance({
     address: sourceToken?.address,
@@ -69,7 +67,6 @@ export const MissingPriceModal = () => {
     <BottomSheet
       ref={sheetRef}
       goBack={navigation.goBack}
-      twClassName={surfaceClass}
     >
       <BottomSheetHeader
         onClose={handleClose}
diff --git a/app/components/UI/Bridge/components/PriceImpactModal/index.tsx b/app/components/UI/Bridge/components/PriceImpactModal/index.tsx
index a00cf9d84f0..4d421b0a19b 100644
--- a/app/components/UI/Bridge/components/PriceImpactModal/index.tsx
+++ b/app/components/UI/Bridge/components/PriceImpactModal/index.tsx
@@ -19,7 +19,6 @@ import {
   BottomSheet,
   BottomSheetRef,
 } from '@metamask/design-system-react-native';
-import { useElevatedSurface } from '../../../../../util/theme/themeUtils';
 
 export const PriceImpactModal = () => {
   const { goBack } = useNavigation();
@@ -43,7 +42,6 @@ export const PriceImpactModal = () => {
   const priceImpactViewData = usePriceImpactViewData(
     activeQuote?.quote.priceData?.priceImpact,
   );
-  const surfaceClass = useElevatedSurface();
 
   const isDangerousPriceImpact = useMemo(
     () =>
@@ -68,7 +66,7 @@ export const PriceImpactModal = () => {
   }, [confirmBridge]);
 
   return (
-    <BottomSheet ref={sheetRef} goBack={goBack} twClassName={surfaceClass}>
+    <BottomSheet ref={sheetRef} goBack={goBack}>
       <PriceImpactHeader
         onClose={handleClose}
         iconName={priceImpactViewData.icon?.name}

From 0a96f5dd29b404533fe742a3bf3d26b0e96679dd Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 23:43:47 +0000
Subject: [PATCH 2/2] style(bridge): fix Prettier formatting in
 MissingPriceModal

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
---
 .../UI/Bridge/components/MissingPriceModal/index.tsx         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/UI/Bridge/components/MissingPriceModal/index.tsx b/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
index 78647d96312..d26008dbefe 100644
--- a/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
+++ b/app/components/UI/Bridge/components/MissingPriceModal/index.tsx
@@ -64,10 +64,7 @@ export const MissingPriceModal = () => {
   }, [confirmBridge]);
 
   return (
-    <BottomSheet
-      ref={sheetRef}
-      goBack={navigation.goBack}
-    >
+    <BottomSheet ref={sheetRef} goBack={navigation.goBack}>
       <BottomSheetHeader
         onClose={handleClose}
         closeButtonProps={{