Skip to content
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
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
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"

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
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
3 changes: 0 additions & 3 deletions app/components/Views/AddressSelector/AddressSelector.tsx
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 @@ -157,7 +155,6 @@ const AddressSelector = () => {
ref={sheetRef}
isFullscreen
goBack={navigation.goBack}
twClassName={surfaceClass}
>
<BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
{strings('address_selector.select_an_address')}
Expand Down
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
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', () => {

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

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

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
50 changes: 4 additions & 46 deletions app/components/Views/TradeWalletActions/TradeWalletActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,8 @@ import {
TextVariant,
} from '@metamask/design-system-react-native';
import {
usePureBlack,
useTailwind,
} from '@metamask/design-system-twrnc-preset';
import {
getElevatedSurfaceColor,
useElevatedSurface,
} from '../../../util/theme/themeUtils';
import { BatchSellMetricsLocation } from '@metamask/bridge-controller';
import {
useSafeAreaFrame,
Expand Down Expand Up @@ -118,8 +113,6 @@ 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;

Expand Down Expand Up @@ -317,8 +310,6 @@ function TradeWalletActions() {
[dismissRootModalFlow, exitingAnimationWithCallback],
);

const elevatedSurfaceColor = getElevatedSurfaceColor(theme);

const actionList = (
<>
{shouldRenderBatchSell && (
Expand Down Expand Up @@ -391,56 +382,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('bg-default 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('bg-default flex-1 rounded-bl-2xl')} />
<BottomShape
width={buttonLayout.width * 4}
height={bottomMaskHeight}
peakHeight={16}
peakBezierLength={25}
baseBezierLength={55}
fill={elevatedSurfaceColor}
fill={colors.background.default}
/>
<View
style={tw.style(
`${surfaceClass} flex-1 rounded-br-2xl`,
isPureBlack && 'border-r border-b border-muted',
)}
/>
{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('bg-default flex-1 rounded-br-2xl')} />

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.

Trade menu loses elevated surface

Low Severity

The custom trade actions sheet is not an MMDS BottomSheet, but it now paints the menu container, side masks, and BottomShape fill with bg-default and colors.background.default instead of the elevated-surface helpers. With MM_PURE_BLACK_PREVIEW on in dark mode, the panel no longer uses the elevated alternative background it had before, so it can blend into the pure-black wallet backdrop.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 3fb3c08. Configure here.

</View>
</View>
</Animated.View>
Expand Down
36 changes: 3 additions & 33 deletions app/components/Views/TradeWalletActions/components/BottomShape.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import Svg, { Path, type PathProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';

function BottomShape({
width,
Expand All @@ -8,8 +8,6 @@ function BottomShape({
peakBezierLength = 25,
baseBezierLength = 55,
fill = 'black',
strokeOnly = false,
pathProps,
...svgProps
}: {
width: number;
Expand All @@ -18,8 +16,6 @@ function BottomShape({
peakBezierLength?: number;
baseBezierLength?: number;
fill?: string;
strokeOnly?: boolean;
pathProps?: PathProps;
}) {
const pathData = useMemo(() => {
const centerX = width / 2;
Expand All @@ -32,25 +28,6 @@ function BottomShape({
const rightBaseX = centerX + baseBezierLength;
const rightBaseY = height;

// strokeOnly builds an open path for the border-muted stroke that traces the full
// bottom edge of the trade-menu shape: the flat shoulders on either side plus the
// cutout curve in the middle, so the border wraps continuously across the bottom.
// TradeWalletActions is the only caller; this branch can be removed if that menu no longer has a border.
if (strokeOnly) {
return `
M ${width} ${height}
H ${rightBaseX}
C ${rightBaseX - peakBezierLength} ${rightBaseY}
${peakX + peakBezierLength} ${peakY}
${peakX} ${peakY}
S ${leftBaseX + peakBezierLength} ${leftBaseY}
${leftBaseX} ${leftBaseY}
H 0
`
.replace(/\s+/g, ' ')
.trim();
}

return `
M 0 ${height}
V 0
Expand All @@ -67,18 +44,11 @@ function BottomShape({
`
.replace(/\s+/g, ' ')
.trim();
}, [
width,
height,
peakHeight,
peakBezierLength,
baseBezierLength,
strokeOnly,
]);
}, [width, height, peakHeight, peakBezierLength, baseBezierLength]);

return (
<Svg width={width} height={height} {...svgProps}>
<Path d={pathData} fill={strokeOnly ? 'none' : fill} {...pathProps} />
<Path d={pathData} fill={fill} />
</Svg>
);
}

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 10, 2026

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 BottomShape.tsx to its original version from main, restoring the strokeOnly and pathProps support that was removed in the earlier cleanup.

Pushed in commit a8b92b9ee1 on the PR branch.

Open in Web Open in Cursor 

Expand Down
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