From 7d8e1e71a66ac543891b2830b7a815a966e9fcf2 Mon Sep 17 00:00:00 2001 From: Saliou Diallo Date: Thu, 25 Apr 2024 12:19:29 -0400 Subject: [PATCH 1/2] Show loading state while funds are transferring from solana root wallet to user bank and update balance --- packages/common/src/store/buy-usdc/sagas.ts | 15 +++++++++++++-- packages/common/src/store/buy-usdc/slice.ts | 4 ++++ packages/common/src/store/buy-usdc/types.ts | 1 + .../web/src/components/add-funds/AddFunds.tsx | 12 +++++++++++- 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/common/src/store/buy-usdc/sagas.ts b/packages/common/src/store/buy-usdc/sagas.ts index 81d4ee9eb1c..25bd9b6a4ed 100644 --- a/packages/common/src/store/buy-usdc/sagas.ts +++ b/packages/common/src/store/buy-usdc/sagas.ts @@ -9,7 +9,7 @@ import { Name } from '~/models/Analytics' import { ErrorLevel } from '~/models/ErrorReporting' import { PurchaseVendor } from '~/models/PurchaseContent' import { Status } from '~/models/Status' -import { StringUSDC } from '~/models/Wallet' +import { BNUSDC, StringUSDC } from '~/models/Wallet' import { createPaymentRouterRouteTransaction, createRootWalletRecoveryTransaction, @@ -18,6 +18,7 @@ import { getRecentBlockhash, getRootSolanaAccount, getTokenAccountInfo, + getUserbankAccountInfo, pollForTokenBalanceChange, relayTransaction } from '~/services/audius-backend/solana' @@ -44,7 +45,8 @@ import { purchaseStarted, onrampSucceeded, startRecoveryIfNecessary, - recoveryStatusChanged + recoveryStatusChanged, + transferStarted } from './slice' import { BuyUSDCError, BuyUSDCErrorCode } from './types' import { getBuyUSDCRemoteConfig, getUSDCUserBank } from './utils' @@ -176,6 +178,8 @@ function* transferStep({ const feePayerOverride = new PublicKey(feePayer) const recentBlockhash = yield* call(getRecentBlockhash, audiusBackendInstance) + yield* put(transferStarted()) + yield* call( retry, async () => { @@ -362,6 +366,13 @@ function* doBuyUSDC({ yield* put(buyUSDCFlowSucceeded()) + // Update USDC balance in store + const account = yield* call(getUserbankAccountInfo, audiusBackendInstance, { + mint: 'usdc' + }) + const balance = (account?.amount ?? new BN(0)) as BNUSDC + yield* put(setUSDCBalance({ amount: balance.toString() as StringUSDC })) + // Record success yield* call( track, diff --git a/packages/common/src/store/buy-usdc/slice.ts b/packages/common/src/store/buy-usdc/slice.ts index 57d86bf84f0..da427d34ebb 100644 --- a/packages/common/src/store/buy-usdc/slice.ts +++ b/packages/common/src/store/buy-usdc/slice.ts @@ -59,6 +59,9 @@ const slice = createSlice({ onrampSucceeded: (state) => { state.stage = BuyUSDCStage.CONFIRMING_PURCHASE }, + transferStarted: (state) => { + state.stage = BuyUSDCStage.TRANSFERRING + }, onrampFailed: ( _state, _action: PayloadAction<{ error: StripeSessionCreationError }> @@ -101,6 +104,7 @@ 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 index 5310b3bbd29..ddfbccd505e 100644 --- a/packages/common/src/store/buy-usdc/types.ts +++ b/packages/common/src/store/buy-usdc/types.ts @@ -9,6 +9,7 @@ export enum BuyUSDCStage { START = 'START', PURCHASING = 'PURCHASING', CONFIRMING_PURCHASE = 'CONFIRMING_PURCHASE', + TRANSFERRING = 'TRANSFERRING', CANCELED = 'CANCELED', FINISH = 'FINISH' } diff --git a/packages/web/src/components/add-funds/AddFunds.tsx b/packages/web/src/components/add-funds/AddFunds.tsx index 6635b625be9..1e3e44aac07 100644 --- a/packages/web/src/components/add-funds/AddFunds.tsx +++ b/packages/web/src/components/add-funds/AddFunds.tsx @@ -2,10 +2,12 @@ import { useState } from 'react' import { useUSDCBalance, useCreateUserbankIfNeeded } from '@audius/common/hooks' import { PurchaseMethod, PurchaseVendor } from '@audius/common/models' +import { BuyUSDCStage, buyUSDCSelectors } from '@audius/common/store' import { USDC } from '@audius/fixed-decimal' import { Box, Button, Flex, Text, IconLogoCircleUSDC } from '@audius/harmony' import { BN } from 'bn.js' import cn from 'classnames' +import { useSelector } from 'react-redux' import { PaymentMethod } from 'components/payment-method/PaymentMethod' import { useIsMobile } from 'hooks/useIsMobile' @@ -14,8 +16,11 @@ import { audiusBackendInstance } from 'services/audius-backend/audius-backend-in import styles from './AddFunds.module.css' +const { getBuyUSDCFlowStage } = buyUSDCSelectors + const messages = { usdcBalance: 'USDC Balance', + transferring: 'Transferring funds to your wallet...', continue: 'Continue' } @@ -42,6 +47,9 @@ export const AddFunds = ({ const { data: balanceBN } = useUSDCBalance({ isPolling: true }) const balance = USDC(balanceBN ?? new BN(0)).value + const buyUSDCStage = useSelector(getBuyUSDCFlowStage) + const isTransferring = buyUSDCStage === BuyUSDCStage.TRANSFERRING + return (
onContinue(selectedPurchaseMethod, selectedPurchaseVendor) } + isLoading={isTransferring} + disabled={isTransferring} > - {messages.continue} + {isTransferring ? messages.transferring : messages.continue}
From 43ae753467167c4f4008fb85c48c55ec64b65194 Mon Sep 17 00:00:00 2001 From: Saliou Diallo Date: Thu, 25 Apr 2024 12:37:57 -0400 Subject: [PATCH 2/2] Do not close modal while transferring --- packages/web/src/components/add-funds-modal/AddFundsModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx index 3370c9c0712..30b1d283b89 100644 --- a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx +++ b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx @@ -33,6 +33,7 @@ export const AddFundsModal = () => { const { isOpen, onClose } = useAddFundsModal() const dispatch = useDispatch() const buyUSDCStage = useSelector(getBuyUSDCFlowStage) + const isTransferring = buyUSDCStage === BuyUSDCStage.TRANSFERRING const isMobile = useIsMobile() const [page, setPage] = useState('add-funds') @@ -81,7 +82,7 @@ export const AddFundsModal = () => { onClosed={handleClosed} bodyClassName={styles.modal} useGradientTitle={false} - dismissOnClickOutside + dismissOnClickOutside={!isTransferring} isFullscreen={false} >