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 3 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
44 changes: 0 additions & 44 deletions app/components/Views/TradeWalletActions/TradeWalletActions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,17 +361,9 @@ jest.mock('../../../util/navigation/navUtils', () => ({
useParams: () => mockUseParams(),
}));

let mockIsPureBlack = false;

jest.mock('@metamask/design-system-twrnc-preset', () => ({
...jest.requireActual('@metamask/design-system-twrnc-preset'),
usePureBlack: () => mockIsPureBlack,
}));

describe('TradeWalletActions', () => {
beforeEach(() => {
jest.clearAllMocks();
mockIsPureBlack = false;
mockParentCanGoBack = true;
jest
.spyOn(global, 'requestAnimationFrame')
Expand Down Expand Up @@ -445,42 +437,6 @@ describe('TradeWalletActions', () => {
).toBeNull();
});

it('renders a bottom cutout stroke when pure black is enabled', () => {
mockIsPureBlack = true;

const { getByTestId } = renderScreen(
TradeWalletActions,
{
name: 'TradeWalletActions',
},
{
state: mockInitialState,
},
);

expect(
getByTestId(WalletActionsBottomSheetSelectorsIDs.MENU_BOTTOM_STROKE),
).toBeTruthy();
});

it('does not render the bottom cutout stroke when pure black is disabled', () => {
mockIsPureBlack = false;

const { queryByTestId } = renderScreen(
TradeWalletActions,
{
name: 'TradeWalletActions',
},
{
state: mockInitialState,
},
);

expect(
queryByTestId(WalletActionsBottomSheetSelectorsIDs.MENU_BOTTOM_STROKE),
).toBeNull();
});

it('should render earn button if the stablecoin lending feature is enabled', () => {

@georgewrmarshall georgewrmarshall Jul 10, 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.

Revert the changes to this file

@georgewrmarshall georgewrmarshall Jul 11, 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.

@cursoragent Revert the changes to this file

@cursor cursor Bot Jul 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Reverted TradeWalletActions.test.tsx to its original version from main, restoring:

  • The usePureBlack mock
  • The two pure-black bottom cutout stroke tests

Pushed in commit b47313245b.

Note: Those two tests will fail until the related changes are also reverted in:

  • TradeWalletActions.tsx (pure-black border rendering / MENU_BOTTOM_STROKE)
  • WalletActionsBottomSheet.testIds.ts (MENU_BOTTOM_STROKE test ID)

BottomShape.tsx was already reverted. Say the word if you want those two files restored as well.

Open in Web Open in Cursor 

(
selectStablecoinLendingEnabledFlag as jest.MockedFunction<
Expand Down
51 changes: 6 additions & 45 deletions app/components/Views/TradeWalletActions/TradeWalletActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,7 @@ import {
Text,
TextVariant,
} from '@metamask/design-system-react-native';
import {
usePureBlack,
useTailwind,
} from '@metamask/design-system-twrnc-preset';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import {
getElevatedSurfaceColor,
useElevatedSurface,
Expand Down Expand Up @@ -118,10 +115,9 @@ function TradeWalletActions() {
const insetsTop = Platform.OS === 'android' ? insets.top : 0;

const tw = useTailwind();
const surfaceClass = useElevatedSurface();
const isPureBlack = usePureBlack();
const theme = useTheme();
const { colors } = theme;
const surfaceClass = useElevatedSurface();

const backdropOpacity = useSharedValue(0);
const backdropAnimatedStyle = useAnimatedStyle(() => ({
Expand Down Expand Up @@ -317,8 +313,6 @@ function TradeWalletActions() {
[dismissRootModalFlow, exitingAnimationWithCallback],
);

const elevatedSurfaceColor = getElevatedSurfaceColor(theme);

const actionList = (
<>
{shouldRenderBatchSell && (
Expand Down Expand Up @@ -391,56 +385,23 @@ function TradeWalletActions() {
<View style={tw.style('px-4')}>
<View
testID={WalletActionsBottomSheetSelectorsIDs.MENU_CONTAINER}
style={tw.style(
`${surfaceClass} p-4 rounded-t-2xl px-0`,
isPureBlack && 'border-t border-l border-r border-muted',
)}
style={tw.style(surfaceClass, 'p-4 rounded-t-2xl px-0')}
>
{actionList}
</View>
<View
style={tw.style('flex-row mt-[-1px]', { height: bottomMaskHeight })}
>
<View
style={tw.style(
`${surfaceClass} flex-1 rounded-bl-2xl`,
isPureBlack && 'border-l border-b border-muted',
)}
/>
<View style={tw.style(surfaceClass, 'flex-1 rounded-bl-2xl')} />
<BottomShape
width={buttonLayout.width * 4}
height={bottomMaskHeight}
peakHeight={16}
peakBezierLength={25}
baseBezierLength={55}
fill={elevatedSurfaceColor}
/>
<View
style={tw.style(
`${surfaceClass} flex-1 rounded-br-2xl`,
isPureBlack && 'border-r border-b border-muted',
)}
fill={getElevatedSurfaceColor(theme)}
/>
{isPureBlack ? (
<View
pointerEvents="none"
style={tw.style('absolute bottom-0 inset-x-0 items-center')}
testID={WalletActionsBottomSheetSelectorsIDs.MENU_BOTTOM_STROKE}
>
<BottomShape
width={buttonLayout.width * 4}
height={bottomMaskHeight}
peakHeight={16}
peakBezierLength={25}
baseBezierLength={55}
strokeOnly
pathProps={{
stroke: colors.border.muted,
strokeWidth: 1,
}}
/>
</View>
) : null}
<View style={tw.style(surfaceClass, 'flex-1 rounded-br-2xl')} />

@georgewrmarshall georgewrmarshall Jul 11, 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.

@cursoragent revert the changes to this file

@cursor cursor Bot Jul 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Reverted TradeWalletActions.tsx to its original version from main, restoring:

  • usePureBlack() and conditional border-muted styling
  • The MENU_BOTTOM_STROKE bottom cutout stroke rendering
  • elevatedSurfaceColor via getElevatedSurfaceColor()

Also restored MENU_BOTTOM_STROKE in WalletActionsBottomSheet.testIds.ts so the reverted tests compile and pass.

All 22 TradeWalletActions tests pass. Pushed in commit 6a83c1606b.

Open in Web Open in Cursor 

</View>
</View>
</Animated.View>
Expand Down
1 change: 0 additions & 1 deletion app/components/Views/WalletActions/WalletActionsBottomSheet.testIds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import enContent from '../../../../locales/languages/en.json';

export const WalletActionsBottomSheetSelectorsIDs = {
MENU_CONTAINER: 'wallet-actions-bottom-sheet-menu-container',
MENU_BOTTOM_STROKE: 'wallet-actions-bottom-sheet-menu-bottom-stroke',
SEND_BUTTON: 'wallet-send-button',
RECEIVE_BUTTON: 'wallet-receive-action',
SWAP_BUTTON: 'wallet-actions-bottom-sheet-swap-button',
Expand Down
Loading