AudiusProject · dharit-tan · Nov 21, 2023 · Nov 21, 2023 · Nov 21, 2023
diff --git 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
@@ -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/.../mobile/src/components/premium-track-purchase-drawer/hooks/usePurchaseContentFormState.ts b/.../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({ isPolling: true })
+  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/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
@@ -186,7 +186,9 @@ export const USDCManualTransferDrawer = () => {
           left={<LogoUSDC height={spacing(6)} />}
           analytics={analytics}
           balance={USDC(balanceBN ?? new BN(0)).toLocaleString('en-US', {
-            roundingMode: 'floor'
+            roundingMode: 'floor',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
           })}
         />
         <View style={styles.disclaimerContainer}>

diff --git 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
@@ -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>(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 = ({
                 </Box>
               </Flex>
               <Text variant='title' size='l' strength='strong'>
-                {`$${balanceFormatted}`}
+                {`$${USDC(balance).toLocaleString('en-us', {
+                  roundingMode: 'floor',
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })}`}
               </Text>
             </Flex>
           </Box>

diff --git 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 = ({
           </Box>
         </Flex>
         <Text variant='title' size='l' strength='strong'>
-          {`$${balanceFormatted}`}
+          {`$${USDC(balanceBN ?? new BN(0)).toLocaleString('en-us', {
+            roundingMode: 'floor',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          })}`}
         </Text>
       </Flex>
       <Flex

diff --git a/...eb/src/components/premium-content-purchase-modal/components/PurchaseContentFormFields.tsx b/...eb/src/components/premium-content-purchase-modal/components/PurchaseContentFormFields.tsx
@@ -43,8 +43,7 @@ const messages = {
   existingBalance: 'Existing balance',
   card: 'Add funds with card',
   manualTransfer: 'Add with crypto transfer',
-  paymentMethod: 'Payment Method',
-  dollarSign: '$'
+  paymentMethod: 'Payment Method'
 }
 
 type PurchaseContentFormFieldsProps = Pick<
@@ -64,13 +63,13 @@ export const PurchaseContentFormFields = ({
     useField(PURCHASE_METHOD)
   const isPurchased = stage === PurchaseContentStage.FINISH
 
-  const { data: balance } = useUSDCBalance({ isPolling: true })
-  const balanceUSDC = USDC(balance ?? new BN(0)).value
+  const { data: balanceBN } = useUSDCBalance()
+  const balance = USDC(balanceBN ?? new BN(0)).value
   const { extraAmount } = usePurchaseSummaryValues({
     price,
-    currentBalance: balance
+    currentBalance: balanceBN
   })
-  const hasBalance = balanceUSDC > 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
+              })}`}
             </Text>
           )
         }

diff --git a/...es/web/src/components/premium-content-purchase-modal/hooks/usePurchaseContentFormState.ts b/...es/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({ isPolling: true })
+  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,

diff --git 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
@@ -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
+                })
+              )}
             </Button>
           </>
         )}

diff --git 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
@@ -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<TableType[] | null>(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
@@ -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<TableType[] | null>(null)