Update Add Funds copy and loading state (#8266)

Co-authored-by: Saliou Diallo <saliou@audius.co>
AudiusProject · Apr 30, 2024 · 62b5a08 · 62b5a08
1 parent 4503cc7
commit 62b5a08
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 29 deletions.
diff --git a/packages/common/src/store/buy-crypto/sagas.ts b/packages/common/src/store/buy-crypto/sagas.ts
@@ -376,9 +376,9 @@ function* doBuyCryptoViaSol({
         amount: (lamportsToPurchase / LAMPORTS_PER_SOL).toString(),
         destinationCurrency: 'sol',
         destinationWallet: wallet.publicKey.toBase58(),
-        onrampCanceled,
-        onrampFailed,
-        onrampSucceeded
+        onrampCanceled: onrampCanceled(),
+        onrampFailed: onrampFailed({}),
+        onrampSucceeded: onrampSucceeded()
       })
     )
     yield* put(setVisibility({ modal: 'StripeOnRamp', visible: true }))

diff --git a/packages/common/src/store/buy-crypto/slice.ts b/packages/common/src/store/buy-crypto/slice.ts
@@ -49,7 +49,7 @@ const slice = createSlice({
      */
     onrampFailed: (
       _state,
-      _action: PayloadAction<{ error: StripeSessionCreationError }>
+      _action: PayloadAction<{ error?: StripeSessionCreationError }>
     ) => {
       // handled by saga
     },

diff --git a/packages/common/src/store/buy-usdc/sagas.ts b/packages/common/src/store/buy-usdc/sagas.ts
@@ -45,8 +45,7 @@ import {
   purchaseStarted,
   onrampSucceeded,
   startRecoveryIfNecessary,
-  recoveryStatusChanged,
-  transferStarted
+  recoveryStatusChanged
 } from './slice'
 import { BuyUSDCError, BuyUSDCErrorCode } from './types'
 import { getBuyUSDCRemoteConfig, getUSDCUserBank } from './utils'
@@ -178,8 +177,6 @@ function* transferStep({
   const feePayerOverride = new PublicKey(feePayer)
   const recentBlockhash = yield* call(getRecentBlockhash, audiusBackendInstance)
 
-  yield* put(transferStarted())
-
   yield* call(
     retry,
     async () => {
@@ -264,9 +261,9 @@ function* doBuyUSDC({
             amount: (desiredAmount / 100).toString(),
             destinationCurrency: 'usdc',
             destinationWallet: rootAccount.publicKey.toString(),
-            onrampCanceled,
-            onrampFailed,
-            onrampSucceeded
+            onrampCanceled: onrampCanceled(),
+            onrampFailed: onrampFailed({}),
+            onrampSucceeded: onrampSucceeded()
           })
         )
 

diff --git a/packages/common/src/store/buy-usdc/slice.ts b/packages/common/src/store/buy-usdc/slice.ts
@@ -59,12 +59,9 @@ const slice = createSlice({
     onrampSucceeded: (state) => {
       state.stage = BuyUSDCStage.CONFIRMING_PURCHASE
     },
-    transferStarted: (state) => {
-      state.stage = BuyUSDCStage.TRANSFERRING
-    },
     onrampFailed: (
       _state,
-      _action: PayloadAction<{ error: StripeSessionCreationError }>
+      _action: PayloadAction<{ error?: StripeSessionCreationError }>
     ) => {
       // handled by saga
     },
@@ -104,7 +101,6 @@ export const {
   onrampSucceeded,
   onrampCanceled,
   onrampFailed,
-  transferStarted,
   stripeSessionStatusChanged,
   startRecoveryIfNecessary,
   recoveryStatusChanged,

diff --git a/packages/common/src/store/buy-usdc/types.ts b/packages/common/src/store/buy-usdc/types.ts
@@ -9,7 +9,6 @@ export enum BuyUSDCStage {
   START = 'START',
   PURCHASING = 'PURCHASING',
   CONFIRMING_PURCHASE = 'CONFIRMING_PURCHASE',
-  TRANSFERRING = 'TRANSFERRING',
   CANCELED = 'CANCELED',
   FINISH = 'FINISH'
 }

diff --git a/packages/common/src/store/ui/stripe-modal/sagas.ts b/packages/common/src/store/ui/stripe-modal/sagas.ts
@@ -127,7 +127,7 @@ function* handleStripeSessionChanged({
     }
 
     if (onrampSucceeded) {
-      yield* put(onrampSucceeded)
+      yield* put({ ...onrampSucceeded })
     }
     yield* put(setVisibility({ modal: 'StripeOnRamp', visible: 'closing' }))
   }
@@ -139,7 +139,7 @@ function* handleCancelStripeOnramp() {
   yield* put(setVisibility({ modal: 'StripeOnRamp', visible: 'closing' }))
 
   if (onrampCanceled) {
-    yield* put(onrampCanceled)
+    yield* put({ ...onrampCanceled })
   }
 }
 

diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx
@@ -33,7 +33,10 @@ export const AddFundsModal = () => {
   const { isOpen, onClose } = useAddFundsModal()
   const dispatch = useDispatch()
   const buyUSDCStage = useSelector(getBuyUSDCFlowStage)
-  const isTransferring = buyUSDCStage === BuyUSDCStage.TRANSFERRING
+  const inProgress = [
+    BuyUSDCStage.PURCHASING,
+    BuyUSDCStage.CONFIRMING_PURCHASE
+  ].includes(buyUSDCStage)
   const isMobile = useIsMobile()
 
   const [page, setPage] = useState<Page>('add-funds')
@@ -82,7 +85,7 @@ export const AddFundsModal = () => {
       onClosed={handleClosed}
       bodyClassName={styles.modal}
       useGradientTitle={false}
-      dismissOnClickOutside={!isTransferring}
+      dismissOnClickOutside={!inProgress}
       isFullscreen={false}
     >
       <ModalHeader

diff --git a/packages/web/src/components/add-funds/AddFunds.tsx b/packages/web/src/components/add-funds/AddFunds.tsx
@@ -20,7 +20,7 @@ const { getBuyUSDCFlowStage } = buyUSDCSelectors
 
 const messages = {
   usdcBalance: 'USDC Balance',
-  transferring: 'Transferring funds to your wallet...',
+  purchasing: 'Purchasing',
   continue: 'Continue'
 }
 
@@ -48,7 +48,10 @@ export const AddFunds = ({
   const balance = USDC(balanceBN ?? new BN(0)).value
 
   const buyUSDCStage = useSelector(getBuyUSDCFlowStage)
-  const isTransferring = buyUSDCStage === BuyUSDCStage.TRANSFERRING
+  const inProgress = [
+    BuyUSDCStage.PURCHASING,
+    BuyUSDCStage.CONFIRMING_PURCHASE
+  ].includes(buyUSDCStage)
 
   return (
     <div className={styles.root}>
@@ -90,10 +93,10 @@ export const AddFunds = ({
             onClick={() =>
               onContinue(selectedPurchaseMethod, selectedPurchaseVendor)
             }
-            isLoading={isTransferring}
-            disabled={isTransferring}
+            isLoading={inProgress}
+            disabled={inProgress}
           >
-            {isTransferring ? messages.transferring : messages.continue}
+            {inProgress ? messages.purchasing : messages.continue}
           </Button>
         </Flex>
       </div>

diff --git a/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.tsx b/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.tsx
@@ -47,9 +47,9 @@ export const StripeBuyAudioButton = () => {
       dispatch(
         initializeStripeModal({
           amount,
-          onrampSucceeded,
-          onrampCanceled,
-          onrampFailed: onrampCanceled,
+          onrampSucceeded: onrampSucceeded(),
+          onrampCanceled: onrampCanceled(),
+          onrampFailed: onrampCanceled(),
           destinationCurrency: 'sol',
           destinationWallet
         })