From ec7ebc620dcfd04d11ebea8049dca1201963b570 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:35:10 +0000 Subject: [PATCH 1/3] fix(pure-black): migrate confirmation Expandable to MMDS BottomSheet The Advanced details bottom sheet (and other confirmation expandable sections) used the legacy BottomModal with a hardcoded bg-section background. In Pure Black theme this caused a contrast mismatch against the surrounding page. Replace BottomModal with MMDS BottomSheet, which applies bg-alternative automatically in Pure Black mode. Fixes TMCU-1059 (part of TMCU-622) Co-authored-by: George Marshall --- CHANGELOG.md | 3 + .../UI/expandable/expandable.styles.ts | 7 +-- .../components/UI/expandable/expandable.tsx | 63 ++++++++++++------- 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e05b99c35aa..d5aee294da6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Fixed + +- Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet (#TBD) ## [8.1.1] ### Fixed 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..c4fc1f71307 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.styles.ts @@ -20,13 +20,8 @@ const styleSheet = (params: { padding: isCompact ? 0 : 16, marginBottom: isCompact ? 0 : 8, }, - modalContent: { - backgroundColor: theme.colors.background.section, - paddingBottom: 34, - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - }, modalExpandedContent: { + paddingBottom: 34, paddingHorizontal: 16, }, copyButtonContainer: { diff --git a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx index 10ebdebedda..ef25aada140 100644 --- a/app/components/Views/confirmations/components/UI/expandable/expandable.tsx +++ b/app/components/Views/confirmations/components/UI/expandable/expandable.tsx @@ -1,9 +1,12 @@ -import React, { ReactNode, useState } from 'react'; -import { HeaderStandard } from '@metamask/design-system-react-native'; -import { TouchableOpacity, View } from 'react-native'; +import React, { ReactNode, useCallback, 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'; @@ -32,6 +35,15 @@ const Expandable = ({ }: ExpandableProps) => { const { styles } = useStyles(styleSheet, { isCompact }); const [expanded, setExpanded] = useState(false); + const bottomSheetRef = useRef(null); + + const closeExpanded = useCallback(() => { + bottomSheetRef.current?.onCloseBottomSheet(); + }, []); + + const handleSheetClosed = useCallback(() => { + setExpanded(false); + }, []); return ( <> @@ -45,27 +57,30 @@ const Expandable = ({ > {collapsedContent} - {expanded && ( - setExpanded(false)}> - - setExpanded(false)} - closeButtonProps={{ - testID: collapseButtonTestID ?? 'collapseButtonTestID', - }} - /> - - {copyText && ( - - - - )} - {expandedContent} - + + + + + {copyText && ( + + + + )} + {expandedContent} - - )} + + ); }; From 2508cdd00c24641caf5ff4caac98b27f40b90959 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:35:29 +0000 Subject: [PATCH 2/3] chore: add PR number to CHANGELOG entry Co-authored-by: George Marshall --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5aee294da6..f0bef052063 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet (#TBD) +- Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet ## [8.1.1] ### Fixed From 57db15dcb1670d9e5879a577bf695d7fd053bf71 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 23:35:57 +0000 Subject: [PATCH 3/3] chore: restore PR number in CHANGELOG entry Co-authored-by: George Marshall --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f0bef052063..c56af8d1004 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet +- Fixed Advanced details bottom sheet background in Pure Black theme by migrating confirmation expandable sheets to MMDS BottomSheet (#33160) ## [8.1.1] ### Fixed