From 6202ec392ecff5e4903d9cf16e9dd87b84a1f817 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Tue, 21 Nov 2023 14:32:27 -0500 Subject: [PATCH 1/2] [PAY-2192] Dedupe USDC balance polling and use FixedDecimal formatting --- .../common/src/hooks/usePurchaseMethod.ts | 2 +- .../PremiumTrackPurchaseDrawer.tsx | 2 +- .../hooks/usePurchaseContentFormState.ts | 2 +- .../usdc-balance-pill/USDCBalancePill.tsx | 2 +- .../USDCManualTransferDrawer.tsx | 4 +++- .../screens/pay-and-earn-screen/USDCCard.tsx | 5 +---- .../web/src/components/add-funds/AddFunds.tsx | 17 +++++++------- .../components/address-tile/AddressTile.tsx | 22 +++++++------------ .../components/PurchaseContentFormFields.tsx | 17 ++++++++------ .../hooks/usePurchaseContentFormState.ts | 2 +- .../usdc-balance-pill/USDCBalancePill.tsx | 4 +--- .../USDCManualTransfer.tsx | 13 ++++++----- .../pages/dashboard-page/DashboardPage.tsx | 5 +---- .../desktop/PayAndEarnPage.tsx | 5 +---- .../mobile/PayAndEarnPage.tsx | 5 +---- 15 files changed, 47 insertions(+), 60 deletions(-) diff --git a/packages/common/src/hooks/usePurchaseMethod.ts b/packages/common/src/hooks/usePurchaseMethod.ts index 02f01918fcc..314a414cf53 100644 --- a/packages/common/src/hooks/usePurchaseMethod.ts +++ b/packages/common/src/hooks/usePurchaseMethod.ts @@ -22,7 +22,7 @@ export const usePurchaseMethod = ({ method, setMethod }: UsePurchaseMethodProps) => { - const { data: balance } = useUSDCBalance({ isPolling: true }) + const { data: balance } = useUSDCBalance() const balanceUSDC = USDC(balance ?? new BN(0)).value const totalPriceInCents = price + (extraAmount ?? 0) const isExistingBalanceDisabled = diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx index 4d33184a7a2..a3b83da2485 100644 --- a/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx +++ b/packages/mobile/src/components/premium-track-purchase-drawer/PremiumTrackPurchaseDrawer.tsx @@ -240,7 +240,7 @@ const RenderForm = ({ const [{ value: purchaseMethod }, , { setValue: setPurchaseMethod }] = useField(PURCHASE_METHOD) - const { data: balance } = useUSDCBalance({ isPolling: true }) + const { data: balance } = useUSDCBalance() const { extraAmount } = usePurchaseSummaryValues({ price, currentBalance: balance diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts b/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts index dc00ee35b8d..9c784702c5a 100644 --- a/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts +++ b/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts @@ -22,7 +22,7 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { recoveryStatus, refresh, cancelPolling - } = useUSDCBalance({ isPolling: true }) + } = useUSDCBalance() // Refresh balance on successful recovery useEffect(() => { diff --git a/packages/mobile/src/components/usdc-balance-pill/USDCBalancePill.tsx b/packages/mobile/src/components/usdc-balance-pill/USDCBalancePill.tsx index 86fffa54a22..c21d5c45bbc 100644 --- a/packages/mobile/src/components/usdc-balance-pill/USDCBalancePill.tsx +++ b/packages/mobile/src/components/usdc-balance-pill/USDCBalancePill.tsx @@ -34,7 +34,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({ export const USDCBalancePill = () => { const styles = useStyles() const { data: usdcBalance, balanceStatus: usdcBalanceStatus } = - useUSDCBalance({ isPolling: false }) + useUSDCBalance() const isUsdcBalanceLoading = usdcBalance === null || usdcBalanceStatus === Status.LOADING const balanceCents = formatUSDCWeiToFloorCentsNumber( diff --git a/packages/mobile/src/components/usdc-manual-transfer-drawer/USDCManualTransferDrawer.tsx b/packages/mobile/src/components/usdc-manual-transfer-drawer/USDCManualTransferDrawer.tsx index b2ab4fbf8f7..5fb344b78e1 100644 --- a/packages/mobile/src/components/usdc-manual-transfer-drawer/USDCManualTransferDrawer.tsx +++ b/packages/mobile/src/components/usdc-manual-transfer-drawer/USDCManualTransferDrawer.tsx @@ -186,7 +186,9 @@ export const USDCManualTransferDrawer = () => { left={} analytics={analytics} balance={USDC(balanceBN ?? new BN(0)).toLocaleString('en-US', { - roundingMode: 'floor' + roundingMode: 'floor', + minimumFractionDigits: 2, + maximumFractionDigits: 2 })} /> diff --git a/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx b/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx index cae32282081..b7371f71f55 100644 --- a/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx +++ b/packages/mobile/src/screens/pay-and-earn-screen/USDCCard.tsx @@ -85,10 +85,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({ export const USDCCard = () => { const styles = useStyles() const white = useColor('white') - const { data: balance } = useUSDCBalance({ - isPolling: true, - pollingInterval: 3000 - }) + const { data: balance } = useUSDCBalance() const balanceCents = formatUSDCWeiToFloorCentsNumber( (balance ?? new BN(0)) as BNUSDC ) diff --git a/packages/web/src/components/add-funds/AddFunds.tsx b/packages/web/src/components/add-funds/AddFunds.tsx index 4f504e5b3d6..89eb1463c08 100644 --- a/packages/web/src/components/add-funds/AddFunds.tsx +++ b/packages/web/src/components/add-funds/AddFunds.tsx @@ -1,14 +1,12 @@ import { useCallback, useState } from 'react' import { - BNUSDC, PurchaseMethod, PurchaseVendor, - decimalIntegerToHumanReadable, - formatUSDCWeiToFloorCentsNumber, useCreateUserbankIfNeeded, useUSDCBalance } from '@audius/common' +import { USDC } from '@audius/fixed-decimal' import { Box, Button, @@ -54,11 +52,8 @@ export const AddFunds = ({ const [selectedPurchaseMethod, setSelectedPurchaseMethod] = useState(PurchaseMethod.CARD) const mobile = isMobile() - const { data: balance } = useUSDCBalance({ isPolling: true }) - const balanceNumber = formatUSDCWeiToFloorCentsNumber( - (balance ?? new BN(0)) as BNUSDC - ) - const balanceFormatted = decimalIntegerToHumanReadable(balanceNumber) + const { data: balanceBN } = useUSDCBalance({ isPolling: true }) + const balance = USDC(balanceBN ?? new BN(0)).value const vendorOptions = [{ label: PurchaseVendor.STRIPE }] @@ -123,7 +118,11 @@ export const AddFunds = ({ - {`$${balanceFormatted}`} + {`$${USDC(balance).toLocaleString('en-us', { + roundingMode: 'floor', + minimumFractionDigits: 2, + maximumFractionDigits: 2 + })}`} diff --git a/packages/web/src/components/address-tile/AddressTile.tsx b/packages/web/src/components/address-tile/AddressTile.tsx index 01e807f2764..f28222f0626 100644 --- a/packages/web/src/components/address-tile/AddressTile.tsx +++ b/packages/web/src/components/address-tile/AddressTile.tsx @@ -1,12 +1,7 @@ import { useCallback, useContext } from 'react' -import { - BNUSDC, - decimalIntegerToHumanReadable, - formatUSDCWeiToCeilingCentsNumber, - shortenSPLAddress, - useUSDCBalance -} from '@audius/common' +import { shortenSPLAddress, useUSDCBalance } from '@audius/common' +import { USDC } from '@audius/fixed-decimal' import { Text, IconCopy, @@ -41,12 +36,7 @@ export const AddressTile = ({ const { color } = useTheme() const { toast } = useContext(ToastContext) const mobile = isMobile() - - const { data: balance } = useUSDCBalance({ isPolling: true }) - const balanceNumber = formatUSDCWeiToCeilingCentsNumber( - (balance ?? new BN(0)) as BNUSDC - ) - const balanceFormatted = decimalIntegerToHumanReadable(balanceNumber) + const { data: balanceBN } = useUSDCBalance({ isPolling: true }) const handleCopyPress = useCallback(() => { copyToClipboard(address) @@ -71,7 +61,11 @@ export const AddressTile = ({ - {`$${balanceFormatted}`} + {`$${USDC(balanceBN ?? new BN(0)).toLocaleString('en-us', { + roundingMode: 'floor', + minimumFractionDigits: 2, + maximumFractionDigits: 2 + })}`} 0 + const hasBalance = balance > 0 const { isExistingBalanceDisabled, totalPriceInCents } = usePurchaseMethod({ price, extraAmount, @@ -117,7 +116,11 @@ export const PurchaseContentFormFields = ({ : undefined } > - {`$${USDC(balanceUSDC).toFixed(2)}`} + {`$${USDC(balance).toLocaleString('en-us', { + roundingMode: 'floor', + minimumFractionDigits: 2, + maximumFractionDigits: 2 + })}`} ) } diff --git a/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts b/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts index 1dc47fb7d4c..8d0437248e2 100644 --- a/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts +++ b/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts @@ -22,7 +22,7 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { recoveryStatus, refresh, cancelPolling - } = useUSDCBalance({ isPolling: true }) + } = useUSDCBalance() // Refresh balance on successful recovery useEffect(() => { diff --git a/packages/web/src/components/usdc-balance-pill/USDCBalancePill.tsx b/packages/web/src/components/usdc-balance-pill/USDCBalancePill.tsx index 42476708798..0b7dfec7b83 100644 --- a/packages/web/src/components/usdc-balance-pill/USDCBalancePill.tsx +++ b/packages/web/src/components/usdc-balance-pill/USDCBalancePill.tsx @@ -19,9 +19,7 @@ type USDCPillProps = { } export const USDCBalancePill = ({ className }: USDCPillProps) => { - const { data: balance, balanceStatus: usdcBalanceStatus } = useUSDCBalance({ - isPolling: false - }) + const { data: balance, balanceStatus: usdcBalanceStatus } = useUSDCBalance() const isLoading = balance === null || usdcBalanceStatus === Status.LOADING const balanceCents = formatUSDCWeiToFloorCentsNumber( (balance ?? new BN(0)) as BNUSDC diff --git a/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx index 46488f4b6ac..2ce4f547c44 100644 --- a/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx +++ b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx @@ -60,10 +60,7 @@ export const USDCManualTransfer = ({ const stage = useSelector(getPurchaseContentFlowStage) const error = useSelector(getPurchaseContentError) const isUnlocking = !error && isContentPurchaseInProgress(stage) - const { data: balanceBN } = useUSDCBalance({ - isPolling: true, - pollingInterval: 1000 - }) + const { data: balanceBN } = useUSDCBalance() const balance = USDC(balanceBN ?? new BN(0)).value const amount = USDC((amountInCents ?? 0) / 100).value const isBuyButtonDisabled = isUnlocking || balance < amount @@ -145,7 +142,13 @@ export const USDCManualTransfer = ({ disabled={isBuyButtonDisabled} onClick={handleBuyClick} > - {messages.buy(USDC(amount).ceil(2).toFixed(2))} + {messages.buy( + USDC(amount).toLocaleString('en-us', { + roundingMode: 'ceil', + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }) + )} )} diff --git a/packages/web/src/pages/dashboard-page/DashboardPage.tsx b/packages/web/src/pages/dashboard-page/DashboardPage.tsx index 4483be4b321..8695c0882b0 100644 --- a/packages/web/src/pages/dashboard-page/DashboardPage.tsx +++ b/packages/web/src/pages/dashboard-page/DashboardPage.tsx @@ -77,10 +77,7 @@ export const DashboardPage = () => { const listenData = useSelector(getDashboardListenData) const dashboardStatus = useSelector(getDashboardStatus) const theme = useSelector(getTheme) - const { data: balance, balanceStatus } = useUSDCBalance({ - isPolling: true, - pollingInterval: 3000 - }) + const { data: balance, balanceStatus } = useUSDCBalance() const statuses = [dashboardStatus] if (balance === null) { statuses.push(balanceStatus) diff --git a/packages/web/src/pages/pay-and-earn-page/desktop/PayAndEarnPage.tsx b/packages/web/src/pages/pay-and-earn-page/desktop/PayAndEarnPage.tsx index e101b817e45..b69cfdfeaa9 100644 --- a/packages/web/src/pages/pay-and-earn-page/desktop/PayAndEarnPage.tsx +++ b/packages/web/src/pages/pay-and-earn-page/desktop/PayAndEarnPage.tsx @@ -44,10 +44,7 @@ type TableMetadata = { export const PayAndEarnPage = ({ tableView }: PayAndEarnPageProps) => { const dispatch = useDispatch() - const { data: balance } = useUSDCBalance({ - isPolling: true, - pollingInterval: 3000 - }) + const { data: balance } = useUSDCBalance() const accountHasTracks = useSelector(getAccountHasTracks) const [tableOptions, setTableOptions] = useState(null) diff --git a/packages/web/src/pages/pay-and-earn-page/mobile/PayAndEarnPage.tsx b/packages/web/src/pages/pay-and-earn-page/mobile/PayAndEarnPage.tsx index be5659767e7..c6ff7b3f8cf 100644 --- a/packages/web/src/pages/pay-and-earn-page/mobile/PayAndEarnPage.tsx +++ b/packages/web/src/pages/pay-and-earn-page/mobile/PayAndEarnPage.tsx @@ -37,10 +37,7 @@ type TableMetadata = { export const PayAndEarnPage = ({ tableView }: PayAndEarnPageProps) => { const dispatch = useDispatch() - const { data: balance } = useUSDCBalance({ - isPolling: true, - pollingInterval: 3000 - }) + const { data: balance } = useUSDCBalance() const accountHasTracks = useSelector(getAccountHasTracks) const [tableOptions, setTableOptions] = useState(null) From 57e24d8220fcb526e64d951db7480905e63592c4 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Tue, 21 Nov 2023 14:38:15 -0500 Subject: [PATCH 2/2] remove cancelPolling() --- .../hooks/usePurchaseContentFormState.ts | 13 +------------ .../hooks/usePurchaseContentFormState.ts | 13 +------------ 2 files changed, 2 insertions(+), 24 deletions(-) diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts b/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts index 9c784702c5a..8f574de4b7a 100644 --- a/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts +++ b/packages/mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts @@ -17,12 +17,7 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { const error = useSelector(getPurchaseContentError) const isUnlocking = !error && isContentPurchaseInProgress(stage) - const { - data: currentBalance, - recoveryStatus, - refresh, - cancelPolling - } = useUSDCBalance() + const { data: currentBalance, recoveryStatus, refresh } = useUSDCBalance() // Refresh balance on successful recovery useEffect(() => { @@ -31,12 +26,6 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { } }, [recoveryStatus, refresh]) - useEffect(() => { - if (isUnlocking) { - cancelPolling() - } - }, [isUnlocking, cancelPolling]) - const purchaseSummaryValues = usePurchaseSummaryValues({ price, currentBalance diff --git a/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts b/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts index 8d0437248e2..8f574de4b7a 100644 --- a/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts +++ b/packages/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts @@ -17,12 +17,7 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { const error = useSelector(getPurchaseContentError) const isUnlocking = !error && isContentPurchaseInProgress(stage) - const { - data: currentBalance, - recoveryStatus, - refresh, - cancelPolling - } = useUSDCBalance() + const { data: currentBalance, recoveryStatus, refresh } = useUSDCBalance() // Refresh balance on successful recovery useEffect(() => { @@ -36,12 +31,6 @@ export const usePurchaseContentFormState = ({ price }: { price: number }) => { currentBalance }) - useEffect(() => { - if (isUnlocking) { - cancelPolling() - } - }, [isUnlocking, cancelPolling]) - return { stage, error,