diff --git a/packages/common/src/store/buy-usdc/sagas.ts b/packages/common/src/store/buy-usdc/sagas.ts index 15ec1d9be6a..5416392dd91 100644 --- a/packages/common/src/store/buy-usdc/sagas.ts +++ b/packages/common/src/store/buy-usdc/sagas.ts @@ -213,7 +213,8 @@ function* transferStep({ function* doBuyUSDC({ payload: { vendor, - purchaseInfo: { desiredAmount } + purchaseInfo: { desiredAmount }, + portalHostName } }: ReturnType) { const reportToSentry = yield* getContext('reportToSentry') @@ -258,7 +259,8 @@ function* doBuyUSDC({ destinationWallet: rootAccount.publicKey.toString(), onrampCanceled: onrampCanceled(), onrampFailed: onrampFailed({}), - onrampSucceeded: onrampSucceeded() + onrampSucceeded: onrampSucceeded(), + portalHostName }) ) diff --git a/packages/common/src/store/buy-usdc/slice.ts b/packages/common/src/store/buy-usdc/slice.ts index 46d083b3fef..4c4d1667fbe 100644 --- a/packages/common/src/store/buy-usdc/slice.ts +++ b/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 diff --git a/packages/common/src/store/ui/stripe-modal/slice.ts b/packages/common/src/store/ui/stripe-modal/slice.ts index a05d82c0988..7470c04353e 100644 --- a/packages/common/src/store/ui/stripe-modal/slice.ts +++ b/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, diff --git a/packages/common/src/store/ui/stripe-modal/types.ts b/packages/common/src/store/ui/stripe-modal/types.ts index 07aa729a2bf..1b7e4eabb1a 100644 --- a/packages/common/src/store/ui/stripe-modal/types.ts +++ b/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 = { diff --git a/packages/mobile/src/components/add-funds-drawer/AddCashDrawer.tsx b/packages/mobile/src/components/add-funds-drawer/AddCashDrawer.tsx index 8fd0c920124..61b09cf600e 100644 --- a/packages/mobile/src/components/add-funds-drawer/AddCashDrawer.tsx +++ b/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.CARD) const [page, setPage] = useState(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 = ( diff --git a/packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx b/packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx index ed43aa1798d..0adf4bf6069 100644 --- a/packages/mobile/src/components/stripe-onramp-drawer/StripeOnrampDrawer.tsx +++ b/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 = ( { ) + + return portalHostName ? ( + {drawer} + ) : ( + drawer + ) }