Merge pull request #14055 from brave/fix-price-history-continuously-l…

…oading

fix(wallet): Price History Continuously Loading

components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx

@@ -14,12 +14,14 @@ import {
   WalletState,
   PageState,
   SupportedTestNetworks,
-  WalletRoutes
+  WalletRoutes,
+  PriceDataObjectType
 } from '../../../../constants/types'
 import { getLocale } from '../../../../../common/locale'
 
 // Utils
 import { getTokensCoinType } from '../../../../utils/network-utils'
+import { formatAsDouble } from '../../../../utils/string-utils'
 import Amount from '../../../../utils/amount'
 
 // Options
@@ -123,7 +125,7 @@ export const PortfolioOverview = () => {
   }, [userVisibleTokensInfo, selectedNetworkFilter, fullAssetBalance, networkList])
 
   // This will scrape all of the user's accounts and combine the fiat value for every asset
-  const fullPortfolioFiatBalance = React.useMemo(() => {
+  const fullPortfolioFiatBalance = React.useMemo((): string => {
     const visibleAssetOptions = userAssetList
       .filter((token) =>
         token.asset.visible &&
@@ -143,14 +145,19 @@ export const PortfolioOverview = () => {
       return a.plus(b)
     })
     return grandTotal.formatAsFiat(defaultCurrencies.fiat)
-  }, [userAssetList, computeFiatAmount])
+  }, [userAssetList, defaultCurrencies, computeFiatAmount])
 
-  const priceHistory = React.useMemo(() => {
-    if (parseFloat(fullPortfolioFiatBalance) === 0) {
+  const isZeroBalance = React.useMemo((): boolean => {
+    // In some cases we need to check if the balance is zero
+    return parseFloat(formatAsDouble(fullPortfolioFiatBalance)) === 0
+  }, [fullPortfolioFiatBalance])
+
+  const priceHistory = React.useMemo((): PriceDataObjectType[] => {
+    if (isZeroBalance) {
       return []
     }
     return portfolioPriceHistory
-  }, [portfolioPriceHistory, fullPortfolioFiatBalance])
+  }, [portfolioPriceHistory, isZeroBalance])
 
   // state
   const [filteredAssetList, setfilteredAssetList] = React.useState<UserAssetInfoType[]>(userAssetList)
@@ -226,8 +233,8 @@ export const PortfolioOverview = () => {
         isAsset={false}
         priceData={priceHistory}
         onUpdateBalance={onUpdateBalance}
-        isLoading={parseFloat(fullPortfolioFiatBalance) === 0 ? false : isFetchingPortfolioPriceHistory}
-        isDisabled={parseFloat(fullPortfolioFiatBalance) === 0}
+        isLoading={isZeroBalance ? false : isFetchingPortfolioPriceHistory}
+        isDisabled={isZeroBalance}
       />
 
       <TokenLists

components/brave_wallet_ui/utils/string-utils.test.ts

@@ -1,4 +1,4 @@
-import { isRemoteImageURL, isValidIconExtension } from './string-utils'
+import { isRemoteImageURL, isValidIconExtension, formatAsDouble } from './string-utils'
 
 describe('Checking URL is remote image or not', () => {
   test('HTTP URL should return true', () => {
@@ -43,3 +43,12 @@ describe('Checking URL ends with a valid icon extension', () => {
     expect(isValidIconExtension('https://test.com/')).toEqual(false)
   })
 })
+
+describe('Check toDouble values', () => {
+  test('Value with a USD symbol, should remove the USD symbol', () => {
+    expect(formatAsDouble('$1,689.16')).toEqual('1,689.16')
+  })
+  test('Value with a Euro symbol, should remove the Euro symbol', () => {
+    expect(formatAsDouble('689,16€')).toEqual('689,16')
+  })
+})

components/brave_wallet_ui/utils/string-utils.ts

@@ -29,3 +29,7 @@ export const getRampNetworkPrefix = (chainId: string) => {
       return ''
   }
 }
+
+export const formatAsDouble = (value: string): string =>
+  // Removes all characters except numbers, commas and decimals
+  value.replace(/[^0-9.,]+/g, '')