Skip to content

fix(bridge): remove redundant useElevatedSurface from Bridge modals (TMCU-1039) #33158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
georgewrmarshall wants to merge 2 commits into from
Closed

fix(bridge): remove redundant useElevatedSurface from Bridge modals (TMCU-1039) #33158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3741758
fix(bridge): remove redundant useElevatedSurface from Bridge modals
cursoragent Jul 10, 2026
0a96f5d
style(bridge): fix Prettier formatting in MissingPriceModal
cursoragent Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/BatchSellDestinationTokenSelectorModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;

Expand Down Expand Up @@ -87,7 +86,6 @@ export function BatchSellDestinationTokenSelectorModal() {
chainIds:
destinationChainIds ?? (sourceChainId ? [sourceChainId] : undefined),
});
const surfaceClass = useElevatedSurface();

const handleClose = useCallback(() => {
sheetRef.current?.onCloseBottomSheet();
Expand All @@ -106,7 +104,6 @@ export function BatchSellDestinationTokenSelectorModal() {
ref={sheetRef}
goBack={navigation.goBack}
testID={BatchSellDestinationTokenSelectorModalSelectorsIDs.SHEET}

@georgewrmarshall georgewrmarshall Jul 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MMDS BottomSheetDialog applies elevated surface styling internally since design-system-react-native 0.33, so twClassName={surfaceClass} was redundant at every Bridge modal callsite. useElevatedSurface returned bg-alternative in pure-black dark mode, matching what BottomSheetDialog now sets via usePureBlack. The other seven Bridge files in this PR are the same deletion with no additional behavior change.

twClassName={surfaceClass}
>
<BottomSheetHeader
onClose={handleClose}
Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/BatchSellFinalReviewModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 =
Expand Down Expand Up @@ -433,7 +431,6 @@ export function BatchSellFinalReviewModal() {
ref={sheetRef}
testID={BatchSellFinalReviewModalSelectorsIDs.SHEET}
goBack={navigation.goBack}
twClassName={surfaceClass}
>
<BottomSheetHeader
onClose={handleClose}
Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/BatchSellQuoteDetailsModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -49,7 +47,6 @@ export function BatchSellQuoteDetailsModal() {
<BottomSheet
testID={BatchSellQuoteDetailsModalSelectorsIDs.SHEET}
goBack={navigation.goBack}
twClassName={surfaceClass}
>
<BottomSheetHeader
onClose={navigation.goBack}
Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/Bridge/components/HighRateAlertModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,7 +33,6 @@ export function HighRateAlertModal() {
location: SwapBridgeNavigationLocation.MainView,
sourcePage: 'BatchSell',
});
const surfaceClass = useElevatedSurface();

const handleClose = useCallback(() => {
sheetRef.current?.onCloseBottomSheet();
Expand All @@ -51,7 +49,6 @@ export function HighRateAlertModal() {
ref={sheetRef}
goBack={goBack}
testID={HighRateAlertModalSelectorsIDs.SHEET}
twClassName={surfaceClass}
>
<BottomSheetHeader
onClose={handleClose}
Expand Down
8 changes: 1 addition & 7 deletions app/components/UI/Bridge/components/MissingPriceModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
Text,
TextVariant,
} from '@metamask/design-system-react-native';
import { useElevatedSurface } from '../../../../../util/theme/themeUtils';

export interface MissingPriceModalParams {
location: MetaMetricsSwapsEventSource;
Expand All @@ -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,
Expand Down Expand Up @@ -66,11 +64,7 @@ export const MissingPriceModal = () => {
}, [confirmBridge]);

return (
<BottomSheet
ref={sheetRef}
goBack={navigation.goBack}
twClassName={surfaceClass}
>
<BottomSheet ref={sheetRef} goBack={navigation.goBack}>
<BottomSheetHeader
onClose={handleClose}
closeButtonProps={{
Expand Down
4 changes: 1 addition & 3 deletions app/components/UI/Bridge/components/PriceImpactModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -43,7 +42,6 @@ export const PriceImpactModal = () => {
const priceImpactViewData = usePriceImpactViewData(
activeQuote?.quote.priceData?.priceImpact,
);
const surfaceClass = useElevatedSurface();

const isDangerousPriceImpact = useMemo(
() =>
Expand All @@ -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}
Expand Down
Loading