[PE-7336] Fix stripe mobile on-ramp visibility

packages/common/src/store/buy-usdc/sagas.ts

@@ -213,7 +213,8 @@ function* transferStep({
 function* doBuyUSDC({
   payload: {
     vendor,
-    purchaseInfo: { desiredAmount }
+    purchaseInfo: { desiredAmount },
+    portalHostName
   }
 }: ReturnType<typeof onrampOpened>) {
   const reportToSentry = yield* getContext('reportToSentry')
@@ -258,7 +259,8 @@ function* doBuyUSDC({
             destinationWallet: rootAccount.publicKey.toString(),
             onrampCanceled: onrampCanceled(),
             onrampFailed: onrampFailed({}),
-            onrampSucceeded: onrampSucceeded()
+            onrampSucceeded: onrampSucceeded(),
+            portalHostName
           })
         )
 

packages/common/src/store/buy-usdc/slice.ts

@@ -42,6 +42,7 @@ const slice = createSlice({
       action: PayloadAction<{
         purchaseInfo: PurchaseInfo
         vendor: PurchaseVendor
+        portalHostName?: string
       }>
     ) => {
       state.stage = BuyUSDCStage.START

packages/common/src/store/ui/stripe-modal/slice.ts

@@ -13,6 +13,7 @@ type InitializeStripeModalPayload = {
   onrampFailed: StripeModalState['onrampFailed']
   onrampSucceeded: StripeModalState['onrampSucceeded']
   onrampCanceled: StripeModalState['onrampCanceled']
+  portalHostName?: string
 }
 
 const initialState: StripeModalState = {}
@@ -31,6 +32,7 @@ const slice = createSlice({
       state.onrampFailed = action.payload.onrampFailed
       state.onrampSucceeded = action.payload.onrampSucceeded
       state.onrampCanceled = action.payload.onrampCanceled
+      state.portalHostName = action.payload.portalHostName
     },
     stripeSessionCreated: (
       state,

packages/common/src/store/ui/stripe-modal/types.ts

@@ -59,6 +59,7 @@ export type StripeModalState = {
   stripeSessionData?: StripeSessionData
   stripeSessionStatus?: StripeSessionStatus
   stripeClientSecret?: string
+  portalHostName?: string
 }
 
 export type StripeSessionCreationErrorResponseData = {

packages/mobile/src/components/add-funds-drawer/AddCashDrawer.tsx

@@ -30,40 +30,40 @@ const messages = {
 export const AddCashDrawer = () => {
   const dispatch = useDispatch()
   const purchaseVendorState = useSelector(getPurchaseVendor)
-  const {
-    isOpen,
-    onClose,
-    onClosed,
-    data: { portalHostName }
-  } = useAddCashModal()
+  const { isOpen, onClose, onClosed, data } = useAddCashModal()
+  const portalHostName = data?.portalHostName
 
   const [selectedPurchaseMethod, setSelectedPurchaseMethod] =
     useState<PurchaseMethod>(PurchaseMethod.CARD)
   const [page, setPage] = useState<AddCashDrawerPage>(AddCashDrawerPage.MAIN)
 
+  const handleClose = useCallback(() => {
+    dispatch(resetPurchaseMethod())
+    setPage(AddCashDrawerPage.MAIN)
+    setSelectedPurchaseMethod(PurchaseMethod.CARD)
+    onClose()
+  }, [dispatch, onClose, setPage, setSelectedPurchaseMethod])
+
   const openCardFlow = useCallback(() => {
     dispatch(
       buyUSDCActions.onrampOpened({
         vendor: purchaseVendorState ?? PurchaseVendor.STRIPE,
         purchaseInfo: {
           desiredAmount: DEFAULT_PURCHASE_AMOUNT_CENTS
-        }
+        },
+        portalHostName
       })
     )
-  }, [dispatch, purchaseVendorState])
+  }, [dispatch, purchaseVendorState, portalHostName])
 
   const onContinuePress = useCallback(() => {
     if (selectedPurchaseMethod === PurchaseMethod.CARD) {
       openCardFlow()
+      handleClose()
     } else if (selectedPurchaseMethod === PurchaseMethod.CRYPTO) {
       setPage(AddCashDrawerPage.TRANSFER)
     }
-  }, [selectedPurchaseMethod, openCardFlow])
-
-  const handleClose = useCallback(() => {
-    dispatch(resetPurchaseMethod())
-    onClose()
-  }, [dispatch, onClose])
+  }, [selectedPurchaseMethod, openCardFlow, handleClose])
 
   const content = (
     <Drawer isOpen={isOpen} onClose={handleClose} onClosed={onClosed}>

packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx

@@ -4,6 +4,7 @@ import {
   stripeModalUIActions,
   stripeModalUISelectors
 } from '@audius/common/store'
+import { Portal } from '@gorhom/portal'
 import { TouchableOpacity, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -62,13 +63,14 @@ const StripeOnrampDrawerHeader = ({ onClose }: { onClose: () => void }) => {
 export const StripeOnrampDrawer = () => {
   const styles = useStyles()
   const dispatch = useDispatch()
-  const { stripeSessionStatus } = useSelector(getStripeModalState)
+  const { stripeSessionStatus, portalHostName } =
+    useSelector(getStripeModalState)
 
   const handleClose = useCallback(() => {
     dispatch(cancelStripeOnramp())
   }, [dispatch])
 
-  return (
+  const drawer = (
     <AppDrawer
       blockClose={stripeSessionStatus === 'fulfillment_processing'}
       drawerHeader={StripeOnrampDrawerHeader}
@@ -83,4 +85,10 @@ export const StripeOnrampDrawer = () => {
       </View>
     </AppDrawer>
   )
+
+  return portalHostName ? (
+    <Portal hostName={portalHostName}>{drawer}</Portal>
+  ) : (
+    drawer
+  )
 }