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>

Author: cursoragent

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}

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}

app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx

@@ -15,21 +15,18 @@ 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>();
   const { sourceModal } = useParams<BatchSellMinimumReceivedInfoModalParams>();
   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}

app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx

@@ -15,21 +15,18 @@ 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>();
   const { sourceModal } = useParams<BatchSellNetworkFeeInfoModalParams>();
   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}

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}

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}

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}

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}