[PAY-2038] Catch errors creating stripe session and cancel purchase

packages/common/src/models/Analytics.ts

@@ -321,6 +321,7 @@ export enum Name {
   // Buy USDC
   BUY_USDC_ON_RAMP_OPENED = 'Buy USDC: On Ramp Opened',
   BUY_USDC_ON_RAMP_CANCELED = 'Buy USDC: On Ramp Canceled',
+  BUY_USDC_ON_RAMP_FAILURE = 'Buy USDC: On Ramp Failed',
   BUY_USDC_ON_RAMP_SUCCESS = 'Buy USDC: On Ramp Success',
   BUY_USDC_SUCCESS = 'Buy USDC: Success',
   BUY_USDC_FAILURE = 'Buy USDC: Failure',
@@ -1559,6 +1560,12 @@ type BuyUSDCOnRampCanceled = {
   provider: string
 }
 
+type BuyUSDCOnRampFailed = {
+  eventName: Name.BUY_USDC_ON_RAMP_FAILURE
+  error: string
+  provider: string
+}
+
 type BuyUSDCOnRampSuccess = {
   eventName: Name.BUY_USDC_ON_RAMP_SUCCESS
   provider: string
@@ -1933,6 +1940,7 @@ export type AllTrackingEvents =
   | BuyUSDCOnRampOpened
   | BuyUSDCOnRampSuccess
   | BuyUSDCOnRampCanceled
+  | BuyUSDCOnRampFailed
   | BuyUSDCSuccess
   | BuyUSDCFailure
   | BuyUSDCRecoveryInProgress

packages/common/src/services/audius-backend/stripe.ts

@@ -10,7 +10,9 @@ export const createStripeSession = async (
   audiusBackendInstance: AudiusBackend,
   config: CreateStripeSessionArgs
 ) => {
-  return (
-    await audiusBackendInstance.getAudiusLibs()
-  ).identityService?.createStripeSession(config)
+  const libs = await audiusBackendInstance.getAudiusLibsTyped()
+  if (!libs.identityService) {
+    throw new Error('createStripeSession: Unexpected missing identity service')
+  }
+  return libs.identityService.createStripeSession(config)
 }

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

@@ -26,6 +26,7 @@ import {
   buyUSDCFlowFailed,
   buyUSDCFlowSucceeded,
   onrampCanceled,
+  onrampFailed,
   onrampOpened,
   purchaseStarted,
   onrampSucceeded,
@@ -90,6 +91,7 @@ function* purchaseStep({
 
   // Wait for on ramp finish
   const result = yield* race({
+    failure: take(onrampFailed),
     success: take(onrampSucceeded),
     canceled: take(onrampCanceled)
   })
@@ -101,6 +103,21 @@ function* purchaseStep({
       make({ eventName: Name.BUY_USDC_ON_RAMP_CANCELED, provider })
     )
     return {}
+  } else if (result.failure) {
+    const error = result.failure.payload?.error
+      ? result.failure.payload.error
+      : new Error('Unknown error')
+
+    yield* call(
+      track,
+      make({
+        eventName: Name.BUY_USDC_ON_RAMP_FAILURE,
+        provider,
+        error: error.message
+      })
+    )
+    // Throw up to the flow above this
+    throw error
   }
   yield* call(
     track,
@@ -223,6 +240,7 @@ function* doBuyUSDC({
         destinationCurrency: 'usdc',
         destinationWallet: rootAccount.publicKey.toString(),
         onrampCanceled,
+        onrampFailed,
         onrampSucceeded
       })
     )
@@ -273,19 +291,20 @@ function* doBuyUSDC({
       })
     )
   } catch (e) {
+    const error = e as Error
     yield* call(reportToSentry, {
       level: ErrorLevel.Error,
-      error: e as Error,
+      error,
       additionalInfo: { userBank }
     })
-    yield* put(buyUSDCFlowFailed())
+    yield* put(buyUSDCFlowFailed({ error }))
     yield* call(
       track,
       make({
         eventName: Name.BUY_USDC_FAILURE,
         provider,
         requestedAmount: desiredAmount,
-        error: (e as Error).message
+        error: error.message
       })
     )
   }

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

@@ -59,8 +59,11 @@ const slice = createSlice({
     onrampSucceeded: (state) => {
       state.stage = BuyUSDCStage.CONFIRMING_PURCHASE
     },
-    buyUSDCFlowFailed: (state) => {
-      state.error = new Error('USDC purchase failed')
+    onrampFailed: (state, action: PayloadAction<{ error: Error }>) => {
+      state.error = new Error(`Stripe onramp failed: ${action.payload}`)
+    },
+    buyUSDCFlowFailed: (state, action: PayloadAction<{ error: Error }>) => {
+      state.error = action.payload.error
     },
     buyUSDCFlowSucceeded: (state) => {
       state.stage = BuyUSDCStage.FINISH
@@ -91,6 +94,7 @@ export const {
   purchaseStarted,
   onrampSucceeded,
   onrampCanceled,
+  onrampFailed,
   stripeSessionStatusChanged,
   startRecoveryIfNecessary,
   recoveryStatusChanged,

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

@@ -17,13 +17,23 @@ function* handleInitializeStripeModal({
   payload: { amount, destinationCurrency, destinationWallet }
 }: ReturnType<typeof initializeStripeModal>) {
   const audiusBackendInstance = yield* getContext('audiusBackendInstance')
-  const res = yield* call(createStripeSession, audiusBackendInstance, {
-    amount,
-    destinationCurrency,
-    destinationWallet
-  })
-  // TODO: Need to handle errors here?
-  yield* put(stripeSessionCreated({ clientSecret: res.client_secret }))
+  const { onrampFailed } = yield* select(getStripeModalState)
+  try {
+    const res = yield* call(createStripeSession, audiusBackendInstance, {
+      amount,
+      destinationCurrency,
+      destinationWallet
+    })
+    yield* put(stripeSessionCreated({ clientSecret: res.client_secret }))
+  } catch (e) {
+    // TODO: When we have better error messages from identity, we should extract them here so
+    // they make it into analytics.
+    // https://linear.app/audius/issue/PAY-2041/[usdc]-we-should-pipe-the-stripe-session-creation-error-back-from
+    if (onrampFailed) {
+      yield* put({ type: onrampFailed.type, payload: { error: e } })
+    }
+    yield* put(setVisibility({ modal: 'StripeOnRamp', visible: 'closing' }))
+  }
 }
 
 function* handleStripeSessionChanged({

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

@@ -1,4 +1,4 @@
-import { Action, createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 import {
   StripeSessionStatus,
@@ -10,8 +10,9 @@ type InitializeStripeModalPayload = {
   amount: string
   destinationCurrency: StripeDestinationCurrencyType
   destinationWallet: string
-  onrampSucceeded: Action
-  onrampCanceled: Action
+  onrampFailed: StripeModalState['onrampFailed']
+  onrampSucceeded: StripeModalState['onrampSucceeded']
+  onrampCanceled: StripeModalState['onrampCanceled']
 }
 
 const initialState: StripeModalState = {}
@@ -25,6 +26,7 @@ const slice = createSlice({
       action: PayloadAction<InitializeStripeModalPayload>
     ) => {
       state.stripeSessionStatus = 'initialized'
+      state.onrampFailed = action.payload.onrampFailed
       state.onrampSucceeded = action.payload.onrampSucceeded
       state.onrampCanceled = action.payload.onrampCanceled
     },

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

@@ -12,6 +12,7 @@ export type StripeDestinationCurrencyType = 'sol' | 'usdc'
 export type StripeModalState = {
   onrampSucceeded?: Action
   onrampCanceled?: Action
+  onrampFailed?: Action
   stripeSessionStatus?: StripeSessionStatus
   stripeClientSecret?: string
 }

packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.tsx

@@ -49,6 +49,7 @@ export const StripeBuyAudioButton = () => {
           amount,
           onrampSucceeded,
           onrampCanceled,
+          onrampFailed: onrampCanceled,
           destinationCurrency: 'sol',
           destinationWallet
         })