Skip to content

fix(TMCU-1045): Remove useElevatedSurface shim from Core UX bottom sheets #33162

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 5 commits into from
Closed

fix(TMCU-1045): Remove useElevatedSurface shim from Core UX bottom sheets #33162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fb3c08
fix(TMCU-1045): remove useElevatedSurface shim from Core UX bottom sh…
cursoragent Jul 10, 2026
f4ff3b8
fix(TMCU-1045): fix format check and restore trade menu elevation
cursoragent Jul 10, 2026
a8b92b9
revert(TMCU-1045): restore BottomShape.tsx per review feedback
cursoragent Jul 10, 2026
b473132
revert(TMCU-1045): restore TradeWalletActions.test.tsx per review fee…
cursoragent Jul 11, 2026
6a83c16
revert(TMCU-1045): restore TradeWalletActions.tsx per review feedback
cursoragent Jul 11, 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
7 changes: 0 additions & 7 deletions app/components/UI/CustomNetworkSelector/CustomNetworkSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { parseCaipChainId } from '@metamask/utils';
import { toHex } from '@metamask/controller-utils';
import { useSelector } from 'react-redux';
import { formatChainIdToCaip } from '@metamask/bridge-controller';
import { useTailwind } from '@metamask/design-system-twrnc-preset';

// external dependencies
import { strings } from '../../../../locales/i18n';
Expand Down Expand Up @@ -42,7 +41,6 @@ import { useNetworksToUse } from '../../hooks/useNetworksToUse/useNetworksToUse'
import AccountGroupBalancePerChain from '../Assets/components/Balance/AccountGroupBalancePerChain';
// internal dependencies
import createStyles from './CustomNetworkSelector.styles';
import { useElevatedSurface } from '../../../util/theme/themeUtils';

import {
CustomNetworkItem,
Expand All @@ -64,8 +62,6 @@ const CustomNetworkSelector = ({
}: CustomNetworkSelectorProps) => {
const { colors } = useTheme();
const { styles } = useStyles(createStyles, {});
const tw = useTailwind();
const surfaceClass = useElevatedSurface();
const { navigate } = useNavigation();
const safeAreaInsets = useSafeAreaInsets();

Expand Down Expand Up @@ -168,7 +164,6 @@ const CustomNetworkSelector = ({
caipChainId,
isSelected,
)}
style={tw.style(surfaceClass)}
>
{(!isTestNet(chainId) || showFiatOnTestnets) && (
<AccountGroupBalancePerChain caipChainId={caipChainId} />
Expand All @@ -185,8 +180,6 @@ const CustomNetworkSelector = ({
createAvatarProps,
selectedChainIdCaip,
showFiatOnTestnets,
surfaceClass,
tw,
],
);

Expand Down
3 changes: 0 additions & 3 deletions app/components/UI/FundActionMenu/FundActionMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,10 @@ import type {
} from './FundActionMenu.types';
import { getDetectedGeolocation } from '../../../reducers/fiatOrders';
import { useRampsButtonClickData } from '../Ramp/hooks/useRampsButtonClickData';
import { useElevatedSurface } from '../../../util/theme/themeUtils';

const FundActionMenu = () => {
const sheetRef = useRef<BottomSheetRef>(null);
const navigation = useNavigation();
const surfaceClass = useElevatedSurface();
const route = useRoute<FundActionMenuRouteProp>();

const customOnBuy = route.params?.onBuy;
Expand Down Expand Up @@ -170,7 +168,6 @@ const FundActionMenu = () => {
ref={sheetRef}
goBack={navigation.goBack}
testID="fund-action-menu-bottom-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 BottomSheet callsites no longer need twClassName={surfaceClass} because BottomSheetDialog owns elevated surface styling since design-system-react-native 0.33. CustomNetworkSelector and NetworkMultiSelectorList instead drop per-row surfaceClass that duplicated the parent sheet background. AddressSelector and DeleteNetworkModal match the BottomSheet pattern in this PR.

twClassName={surfaceClass}
>
<Box twClassName="py-4">
{actionConfigs.map(
Expand Down
5 changes: 1 addition & 4 deletions app/components/UI/NetworkMultiSelectorList/NetworkMultiSelectorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ import { strings } from '../../../../locales/i18n';
import TagColored, {
TagColor,
} from '../../../component-library/components-temp/TagColored';
import { useElevatedSurface } from '../../../util/theme/themeUtils';

const SELECTION_DEBOUNCE_DELAY = 150;

Expand Down Expand Up @@ -117,7 +116,6 @@ const NetworkMultiSelectList = ({

const { styles } = useStyles(styleSheet, {});
const tw = useTailwind();
const surfaceClass = useElevatedSurface();

const processedNetworks = useMemo(
(): ProcessedNetwork[] =>
Expand Down Expand Up @@ -331,7 +329,7 @@ const NetworkMultiSelectList = ({
disabled={isDisabled}
showButtonIcon={showButtonIcon}
buttonProps={createButtonProps(network)}
style={tw.style(`${surfaceClass} items-center`)}
style={tw.style('items-center')}
testID={NETWORK_MULTI_SELECTOR_TEST_IDS.NETWORK_LIST_ITEM(
caipChainId,
isSelected,
Expand Down Expand Up @@ -361,7 +359,6 @@ const NetworkMultiSelectList = ({
isGasFeesSponsoredNetworkEnabled,
isHardwareWallet,
styles.noNetworkFeeContainer,
surfaceClass,
tw,
styles.networkNameText,
],
Expand Down
9 changes: 1 addition & 8 deletions app/components/Views/AddressSelector/AddressSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import { createAccountSelectorNavDetails } from '../AccountSelector';
import { NetworkConfiguration } from '@metamask/network-controller';
import { strings } from '../../../../locales/i18n';
import { AddressSelectorSelectors } from './AddressSelector.testIds';
import { useElevatedSurface } from '../../../util/theme/themeUtils';

export const createAddressSelectorNavDetails =
createNavigationDetails<AddressSelectorParams>(
Expand Down Expand Up @@ -73,7 +72,6 @@ const AddressSelector = () => {
);

const accountName = useAccountName();
const surfaceClass = useElevatedSurface();
const selectedCaipChainId = isCaipChainId(selectedChainId)
? selectedChainId
: toEvmCaipChainId(selectedChainId);
Expand Down Expand Up @@ -153,12 +151,7 @@ const AddressSelector = () => {
}, [internalAccountsSpreadByScopes, isEvmOnly, displayOnlyCaipChainIds]);

return (
<BottomSheet
ref={sheetRef}
isFullscreen
goBack={navigation.goBack}
twClassName={surfaceClass}
>
<BottomSheet ref={sheetRef} isFullscreen goBack={navigation.goBack}>
<BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
{strings('address_selector.select_an_address')}
</BottomSheetHeader>
Expand Down
4 changes: 0 additions & 4 deletions app/components/Views/NetworksManagement/components/DeleteNetworkModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
import { strings } from '../../../../../locales/i18n';

import { NetworksManagementViewSelectorsIDs } from '../NetworksManagementView.testIds';
import { useElevatedSurface } from '../../../../util/theme/themeUtils';

interface DeleteNetworkModalProps {
networkName: string;
Expand All @@ -38,15 +37,12 @@ const DeleteNetworkModal = forwardRef<BottomSheetRef, DeleteNetworkModalProps>(
testID: NetworksManagementViewSelectorsIDs.DELETE_CONFIRM_BUTTON,
};

const surfaceClass = useElevatedSurface();

return (
<BottomSheet
ref={ref}
onClose={onClose}
goBack={onClose}
testID={NetworksManagementViewSelectorsIDs.DELETE_MODAL}
twClassName={surfaceClass}
>
<BottomSheetHeader onClose={onClose}>
{`${strings('app_settings.delete')} ${networkName} ${strings('app_settings.network')}`}
Expand Down
Loading