fix(pure-black): migrate confirmation Expandable to MMDS BottomSheet

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 (#33160)
 ## [8.1.1]
 
 ### Fixed

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: {

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<BottomSheetRef>(null);
+
+  const closeExpanded = useCallback(() => {
+    bottomSheetRef.current?.onCloseBottomSheet();
+  }, []);
+
+  const handleSheetClosed = useCallback(() => {
+    setExpanded(false);
+  }, []);
 
   return (
     <>
@@ -45,27 +57,30 @@ const Expandable = ({
       >
         {collapsedContent}
       </TouchableOpacity>
-      {expanded && (
-        <BottomModal onClose={() => setExpanded(false)}>
-          <View style={styles.modalContent}>
-            <HeaderStandard
-              title={expandedContentTitle}
-              onClose={() => setExpanded(false)}
-              closeButtonProps={{
-                testID: collapseButtonTestID ?? 'collapseButtonTestID',
-              }}
-            />
-            <View style={styles.modalExpandedContent}>
-              {copyText && (
-                <View style={styles.copyButtonContainer}>
-                  <CopyButton copyText={copyText} />
-                </View>
-              )}
-              {expandedContent}
-            </View>
+      <Modal
+        visible={expanded}
+        transparent
+        animationType="none"
+        onRequestClose={closeExpanded}
+      >
+        <BottomSheet ref={bottomSheetRef} onClose={handleSheetClosed}>
+          <HeaderStandard
+            title={expandedContentTitle}
+            onClose={closeExpanded}
+            closeButtonProps={{
+              testID: collapseButtonTestID ?? 'collapseButtonTestID',
+            }}
+          />
+          <View style={styles.modalExpandedContent}>
+            {copyText && (
+              <View style={styles.copyButtonContainer}>
+                <CopyButton copyText={copyText} />
+              </View>
+            )}
+            {expandedContent}
           </View>
-        </BottomModal>
-      )}
+        </BottomSheet>
+      </Modal>
     </>
   );
 };