From 69e5376830ec37af709adf2b7eca2fa1156d3c3a Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 22:08:47 +0000 Subject: [PATCH 1/3] fix(pure-black): Use MMDS BottomSheet in confirmations Expandable to apply bg-alternative surface when Pure Black is enabled; remove legacy BottomModal usage Co-authored-by: George Marshall --- .../UI/expandable/expandable.styles.ts | 7 ++- .../components/UI/expandable/expandable.tsx | 60 ++++++++++++------- 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts index 1e558e97920..cfd1fc61c10 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts @@ -20,11 +20,14 @@ const styleSheet = (params: { padding: isCompact ? 0 : 16, marginBottom: isCompact ? 0 : 8, }, + /** Full-screen wrapper for transparent Modal so BottomSheet can fill the window. */ + modalRoot: { + flex: 1, + }, modalContent: { + // Deprecated: kept for backward-compat; BottomSheet provides surface + radius. backgroundColor: theme.colors.background.section, paddingBottom: 34, - borderTopLeftRadius: 8, - borderTopRightRadius: 8, }, modalExpandedContent: { paddingHorizontal: 16, diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx index 10ebdebedda..be1c726136b 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx @@ -1,11 +1,15 @@ -import React, { ReactNode, useState } from 'react'; -import { HeaderStandard } from '@metamask/design-system-react-native'; -import { TouchableOpacity, View } from 'react-native'; +import React, { ReactNode, useRef, useState } from 'react'; +import { + BottomSheet, + BottomSheetRef, + HeaderStandard, +} from '@metamask/design-system-react-native'; +import { Modal, TouchableOpacity, View } from 'react-native'; import { useStyles } from '../../../../../../component-library/hooks'; -import BottomModal from '../bottom-modal'; import CopyButton from '../copy-button'; import styleSheet from './expandable.styles'; +import { useElevatedSurface } from '../../../../../../util/theme/themeUtils'; interface ExpandableProps { collapsedContent: ReactNode; @@ -32,6 +36,8 @@ const Expandable = ({ }: ExpandableProps) => { const { styles } = useStyles(styleSheet, { isCompact }); const [expanded, setExpanded] = useState(false); + const bottomSheetRef = useRef(null); + const surfaceClass = useElevatedSurface(); return ( <> @@ -46,25 +52,37 @@ const Expandable = ({ {collapsedContent} {expanded && ( - setExpanded(false)}> - - bottomSheetRef.current?.onCloseBottomSheet()} + > + + setExpanded(false)} - closeButtonProps={{ - testID: collapseButtonTestID ?? 'collapseButtonTestID', - }} - /> - - {copyText && ( - - - - )} - {expandedContent} - + twClassName={surfaceClass} + > + bottomSheetRef.current?.onCloseBottomSheet()} + closeButtonProps={{ + testID: collapseButtonTestID ?? 'collapseButtonTestID', + }} + /> + + {copyText && ( + + + + )} + {expandedContent} + + - + )} ); From f35ba6b7bee627874f1d582bed64584be41d4cb4 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:28:15 +0000 Subject: [PATCH 2/3] revert(confirmations): roll back Expandable to legacy BottomModal implementation Co-authored-by: George Marshall --- .../UI/expandable/expandable.styles.ts | 10 ++-- .../components/UI/expandable/expandable.tsx | 60 +++++++------------ 2 files changed, 25 insertions(+), 45 deletions(-) diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts index cfd1fc61c10..cc3584281c9 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts @@ -1,6 +1,7 @@ import { StyleSheet } from 'react-native'; import { Theme } from '../../../../../../util/theme/models'; +import { getElevatedSurfaceColor } from '../../../../../../util/theme/themeUtils'; const styleSheet = (params: { theme: Theme; @@ -20,14 +21,11 @@ const styleSheet = (params: { padding: isCompact ? 0 : 16, marginBottom: isCompact ? 0 : 8, }, - /** Full-screen wrapper for transparent Modal so BottomSheet can fill the window. */ - modalRoot: { - flex: 1, - }, modalContent: { - // Deprecated: kept for backward-compat; BottomSheet provides surface + radius. - backgroundColor: theme.colors.background.section, + backgroundColor: getElevatedSurfaceColor(theme), paddingBottom: 34, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, }, modalExpandedContent: { paddingHorizontal: 16, diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx index be1c726136b..10ebdebedda 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx @@ -1,15 +1,11 @@ -import React, { ReactNode, useRef, useState } from 'react'; -import { - BottomSheet, - BottomSheetRef, - HeaderStandard, -} from '@metamask/design-system-react-native'; -import { Modal, TouchableOpacity, View } from 'react-native'; +import React, { ReactNode, useState } from 'react'; +import { HeaderStandard } from '@metamask/design-system-react-native'; +import { TouchableOpacity, View } from 'react-native'; import { useStyles } from '../../../../../../component-library/hooks'; +import BottomModal from '../bottom-modal'; import CopyButton from '../copy-button'; import styleSheet from './expandable.styles'; -import { useElevatedSurface } from '../../../../../../util/theme/themeUtils'; interface ExpandableProps { collapsedContent: ReactNode; @@ -36,8 +32,6 @@ const Expandable = ({ }: ExpandableProps) => { const { styles } = useStyles(styleSheet, { isCompact }); const [expanded, setExpanded] = useState(false); - const bottomSheetRef = useRef(null); - const surfaceClass = useElevatedSurface(); return ( <> @@ -52,37 +46,25 @@ const Expandable = ({ {collapsedContent} {expanded && ( - bottomSheetRef.current?.onCloseBottomSheet()} - > - - setExpanded(false)}> + + setExpanded(false)} - twClassName={surfaceClass} - > - bottomSheetRef.current?.onCloseBottomSheet()} - closeButtonProps={{ - testID: collapseButtonTestID ?? 'collapseButtonTestID', - }} - /> - - {copyText && ( - - - - )} - {expandedContent} - - + closeButtonProps={{ + testID: collapseButtonTestID ?? 'collapseButtonTestID', + }} + /> + + {copyText && ( + + + + )} + {expandedContent} + - + )} ); From 5e13d3841568e1ae44231310e8ad401e671d3220 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 13 Jul 2026 15:08:03 -0700 Subject: [PATCH 3/3] fix(TMCU-1059): add pure-black muted border to Advanced details sheet Gate border.muted on the Expandable BottomModal surface when pure black preview is enabled in dark mode, matching other elevated surface stopgaps. Co-authored-by: Cursor --- .../components/UI/expandable/expandable.styles.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts index cc3584281c9..c9f6fca3a2e 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts @@ -1,7 +1,10 @@ import { StyleSheet } from 'react-native'; -import { Theme } from '../../../../../../util/theme/models'; -import { getElevatedSurfaceColor } from '../../../../../../util/theme/themeUtils'; +import { AppThemeKey, Theme } from '../../../../../../util/theme/models'; +import { + getElevatedSurfaceColor, + isPureBlackEnabled, +} from '../../../../../../util/theme/themeUtils'; const styleSheet = (params: { theme: Theme; @@ -9,6 +12,9 @@ const styleSheet = (params: { }) => { const { theme, vars } = params; const { isCompact } = vars; + const { colors } = theme; + const isPureBlackDark = + isPureBlackEnabled && theme.themeAppearance === AppThemeKey.dark; return StyleSheet.create({ container: { @@ -21,8 +27,12 @@ const styleSheet = (params: { padding: isCompact ? 0 : 16, marginBottom: isCompact ? 0 : 8, }, + // TODO(Pure Black): Remove once MMDS ships pure-black-aware surface tokens. + // Drop getElevatedSurfaceColor, isPureBlackEnabled, and AppThemeKey checks. modalContent: { backgroundColor: getElevatedSurfaceColor(theme), + borderWidth: isPureBlackDark ? 1 : 0, + borderColor: isPureBlackDark ? colors.border.muted : undefined, paddingBottom: 34, borderTopLeftRadius: 8, borderTopRightRadius: 8,