Fix bottom sheet registration in Modal

app/currency.tsx

@@ -303,6 +303,7 @@ function ModalScreen() {
       <MintBalanceDisplay
         onMintSelected={handleMintSelected}
         unit={unit}
+        context="modal"
         requireBalance={
           params?.to === 'ecashSendConfirmation' || params?.to === 'lightningSendConfirmation'
         }

app/esimCheckout.tsx

@@ -206,7 +206,11 @@ function ModalScreen() {
       <Text weight="bold" size={16} style={styles.sectionTitle}>
         Pay with
       </Text>
-      <MintBalanceDisplay onMintSelected={handleMintSelected} unit={unit} />
+      <MintBalanceDisplay
+        onMintSelected={handleMintSelected}
+        unit={unit}
+        context="modal"
+      />
       <View style={styles.cardContainer}>
         <Card variant="warning" message="Ensure your phone supports eSIMs." theme={theme} />
       </View>

app/lightningSendConfirmation.tsx

@@ -213,6 +213,7 @@ export function LightningSendConfirmation({
             onMintSelected={handleMintSelected}
             unit={unit}
             updateSelectedMint={false}
+            context="modal"
           />
         )}
         <Spacer size={12} />

app/vpnCheckout.tsx

@@ -214,7 +214,11 @@ function ModalScreen() {
         }}>
         Pay with
       </Text>
-      <MintBalanceDisplay onMintSelected={handleMintSelected} unit={unit} />
+      <MintBalanceDisplay
+        onMintSelected={handleMintSelected}
+        unit={unit}
+        context="modal"
+      />
       <View style={{ margin: 16 }}>
         <Card
           variant="warning"

components/layout/MintBalanceDisplay.tsx

@@ -29,6 +29,10 @@ interface Props {
    * Defaults to true.
    */
   updateSelectedMint?: boolean;
+  /**
+   * Context to launch the sheet in. Defaults to 'global'.
+   */
+  context?: 'global' | 'modal';
   style?: StyleProp<ViewStyle>;
 }
 
@@ -37,6 +41,7 @@ const MintBalanceDisplay: React.FC<Props> = ({
   onMintSelected,
   requireBalance = true,
   updateSelectedMint = true,
+  context = 'global',
   style,
 }) => {
   const theme = useSelector(memoizedGetTheme);
@@ -48,6 +53,7 @@ const MintBalanceDisplay: React.FC<Props> = ({
 
   const handlePress = () => {
     SheetManager.show('mint-balance', {
+      context,
       payload: {
         navigate: false,
         requireBalance,

components/layout/Modal.tsx

@@ -22,9 +22,12 @@ import { useNavigation } from 'expo-router';
 import opacity from 'hex-color-opacity';
 import { memoizedGetTheme } from 'helper/redux/settings';
 
+import { SheetProvider } from 'react-native-actions-sheet';
 import { registerAllSheets } from 'components/layout/sheets/registerSheets';
 
-registerAllSheets({ context: undefined });
+// Register all action sheets within the modal context so that
+// sheets opened from a modal are scoped correctly
+registerAllSheets({ context: 'modal' });
 
 const headerHeight = Constants.statusBarHeight ?? 0;
 
@@ -155,16 +158,18 @@ export default function Modal({
     React.isValidElement(children) ? children : <View>{children}</View>;
 
   return (
-    <View
-      style={[
-        {
-          position: 'relative',
-          display: 'flex',
-          flex: 1,
-          backgroundColor: bgColor,
-        },
-        childrenStyles,
-      ]}>
+    <SheetProvider context="modal">
+      <View
+        style={[
+          {
+            position: 'relative',
+            display: 'flex',
+            flex: 1,
+            backgroundColor: bgColor,
+          },
+          childrenStyles,
+        ]}
+      >
       {renderHeader()}
 
       <FlatList
@@ -202,5 +207,6 @@ export default function Modal({
         {buttons}
       </View>
     </View>
+    </SheetProvider>
   );
 }