[PAY-610] Wire up Stripe modal to store (#2101)

* Wire up Stripe modal to store

* Close stripe modal on success, fix polling bug

* Add live key

* Don't break on clicking the stripe button while still loading the quote

Co-authored-by: Marcus Pasell <rickyrombo@users.noreply.github.com>

packages/web/.env/.env.prod

@@ -85,4 +85,4 @@ REACT_APP_FINGERPRINT_ENDPOINT=https://fp.audius.co
 
 REACT_APP_OTEL_TRACING_ENABLED=true
 
-REACT_APP_STRIPE_CLIENT_PUBLISHABLE_KEY=
+REACT_APP_STRIPE_CLIENT_PUBLISHABLE_KEY=pk_live_51LPsGuCJOWtpH6AEKshlCs3L8QhAfevNvhev8K9a0u92O5ku83KRjLIqCdxgf3NhitdtmMGlw0Wjf33NjZJjZUBz006A3IoSiQ

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

@@ -3,18 +3,20 @@ import { useCallback } from 'react'
 import {
   OnRampProvider,
   buyAudioSelectors,
-  accountSelectors,
   buyAudioActions
 } from '@audius/common'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
 import { OnRampButton } from 'components/on-ramp-button'
-import { createStripeSession } from 'services/audius-backend/BuyAudio'
+import {
+  createStripeSession,
+  getRootSolanaAccount
+} from 'services/audius-backend/BuyAudio'
 
-const { getAccountUser } = accountSelectors
 const { getAudioPurchaseInfo } = buyAudioSelectors
-const { calculateAudioPurchaseInfo } = buyAudioActions
+const { calculateAudioPurchaseInfo, onRampOpened, onRampSucceeded } =
+  buyAudioActions
 
 const STRIPE_PUBLISHABLE_KEY =
   process.env.REACT_APP_STRIPE_CLIENT_PUBLISHABLE_KEY
@@ -26,26 +28,31 @@ const StripeOnRamp = window.StripeOnramp
 export const StripeBuyAudioButton = () => {
   const dispatch = useDispatch()
   const [, setIsStripeModalVisible] = useModalState('StripeOnRamp')
-  const user = useSelector(getAccountUser)
 
   const purchaseInfo = useSelector(getAudioPurchaseInfo)
   const amount =
     purchaseInfo?.isError === false
       ? purchaseInfo.estimatedSOL.uiAmountString
       : undefined
 
+  const handleSessionUpdate = useCallback(
+    (e) => {
+      if (e.payload.session.state === 'fulfillment_complete') {
+        dispatch(onRampSucceeded())
+        setIsStripeModalVisible(false)
+      }
+    },
+    [dispatch, setIsStripeModalVisible]
+  )
+
   const handleClick = useCallback(async () => {
-    if (!user?.userBank) {
-      console.error('Missing user bank')
-      return
-    }
-    if (!amount) {
-      dispatch(calculateAudioPurchaseInfo({ audioAmount: 0 }))
+    if (!amount || !purchaseInfo || purchaseInfo?.isError === true) {
       return
     }
+    dispatch(onRampOpened(purchaseInfo))
     const res = await createStripeSession({
       amount,
-      destinationWallet: user.userBank
+      destinationWallet: (await getRootSolanaAccount()).publicKey.toString()
     })
     const stripeOnRampInstance = StripeOnRamp(STRIPE_PUBLISHABLE_KEY)
     const session = stripeOnRampInstance.createSession({
@@ -54,8 +61,15 @@ export const StripeBuyAudioButton = () => {
       clientSecret: res.client_secret
     })
     session.mount('#stripe-onramp-modal')
+    session.addEventListener('onramp_session_updated', handleSessionUpdate)
     setIsStripeModalVisible(true)
-  }, [dispatch, setIsStripeModalVisible, amount, user])
+  }, [
+    dispatch,
+    setIsStripeModalVisible,
+    handleSessionUpdate,
+    amount,
+    purchaseInfo
+  ])
 
   return <OnRampButton provider={OnRampProvider.STRIPE} onClick={handleClick} />
 }

packages/web/src/components/stripe-on-ramp-modal/StripeOnRampModal.tsx

@@ -1,22 +1,28 @@
 import { useCallback, useEffect, useRef } from 'react'
 
+import { buyAudioActions } from '@audius/common'
 import cn from 'classnames'
+import { useDispatch } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
 
 import styles from './StripeOnRampModal.module.css'
 
+const { onRampCanceled } = buyAudioActions
+
 export const StripeOnRampModal = () => {
   const [isOpen, setIsOpen] = useModalState('StripeOnRamp')
+  const dispatch = useDispatch()
 
   const el = useRef<HTMLDivElement>(null)
 
   const handleBackgroundClicked = useCallback(
     (e) => {
       setIsOpen(false)
       e.stopPropagation()
+      dispatch(onRampCanceled())
     },
-    [setIsOpen]
+    [setIsOpen, dispatch]
   )
 
   useEffect(() => {

packages/web/src/services/audius-backend/BuyAudio.ts

@@ -237,10 +237,10 @@ export const pollForNewTransaction = async ({
       limit: 1
     })
     transaction = transactions?.[0]?.signature
-    if (transaction && transaction !== initialTransaction) {
-      console.debug(`Found new transaction ${transaction}`)
-      return transaction
-    }
+  }
+  if (transaction && transaction !== initialTransaction) {
+    console.debug(`Found new transaction ${transaction}`)
+    return transaction
   }
   throw new Error('Transaction polling exceeded maximum retries')
 }