Fetch token prices

src/components/HistoricWorthChart.tsx

@@ -26,10 +26,11 @@ import styled, { useTheme } from 'styled-components'
 import { useAppSelector } from '@/hooks/redux'
 import {
   makeSelectAddresses,
+  makeSelectAddressesKnownFungibleTokens,
   selectHaveHistoricBalancesLoaded,
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
-import { useGetHistoricalPriceQuery } from '@/storage/assets/priceApiSlice'
+import { getTokensApiIds, useGetHistoricalPriceQuery } from '@/storage/assets/priceApiSlice'
 import { AddressHash } from '@/types/addresses'
 import { ChartLength, DataPoint, LatestAmountPerAddress } from '@/types/chart'
 import { Currency } from '@/types/settings'
@@ -69,14 +70,26 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
   const haveHistoricBalancesLoaded = useAppSelector(selectHaveHistoricBalancesLoaded)
   const stateUninitialized = useAppSelector(selectIsStateUninitialized)
 
-  const { data: alphPriceHistory } = useGetHistoricalPriceQuery({ currency, days: 365 })
+  const selectAddressesKnownFungibleTokens = useMemo(makeSelectAddressesKnownFungibleTokens, [])
+  const knownFungibleTokens = useAppSelector((s) =>
+    selectAddressesKnownFungibleTokens(
+      s,
+      addresses.map((a) => a.hash)
+    )
+  )
+
+  const { data: priceHistory } = useGetHistoricalPriceQuery({
+    assetIds: ['alephium', ...getTokensApiIds(knownFungibleTokens)],
+    currency,
+    days: 365
+  })
 
   const theme = useTheme()
 
   const [chartData, setChartData] = useState<DataPoint[]>([])
 
   const startingDate = startingDates[length].format('YYYY-MM-DD')
-  const isDataAvailable = addresses.length !== 0 && haveHistoricBalancesLoaded && !!alphPriceHistory
+  const isDataAvailable = addresses.length !== 0 && haveHistoricBalancesLoaded && !!priceHistory
   const firstItem = chartData.at(0)
 
   useEffect(() => {
@@ -92,7 +105,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
     const computeChartDataPoints = (): DataPoint[] => {
       const addressesLatestAmount: LatestAmountPerAddress = {}
 
-      const dataPoints = alphPriceHistory.map(({ date, price }) => {
+      const dataPoints = priceHistory.alephium.map(({ date, price }) => {
         let totalAmountPerDate = BigInt(0)
 
         addresses.forEach(({ hash, balanceHistory }) => {
@@ -124,7 +137,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
     dataPoints = trimInitialZeroDataPoints(dataPoints)
 
     setChartData(getFilteredChartData(dataPoints, startingDate))
-  }, [addresses, alphPriceHistory, isDataAvailable, latestWorth, startingDate])
+  }, [addresses, priceHistory, isDataAvailable, latestWorth, startingDate])
 
   if (!isDataAvailable || chartData.length < 2 || !firstItem || latestWorth === undefined) return null
 

src/pages/UnlockedWallet/AddressesPage/AddressGridRow.tsx

@@ -37,7 +37,7 @@ import {
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
 import { selectIsTokensMetadataUninitialized } from '@/storage/assets/assetsSelectors'
-import { useGetPriceQuery } from '@/storage/assets/priceApiSlice'
+import { useGetPricesQuery } from '@/storage/assets/priceApiSlice'
 import { AddressHash } from '@/types/addresses'
 import { currencies } from '@/utils/currencies'
 import { onEnterOrSpace } from '@/utils/misc'
@@ -57,7 +57,12 @@ const AddressGridRow = ({ addressHash, className }: AddressGridRowProps) => {
   const stateUninitialized = useAppSelector(selectIsStateUninitialized)
   const isTokensMetadataUninitialized = useAppSelector(selectIsTokensMetadataUninitialized)
   const fiatCurrency = useAppSelector((s) => s.settings.fiatCurrency)
-  const { data: price, isLoading: isPriceLoading } = useGetPriceQuery(currencies[fiatCurrency].ticker)
+  const { data: priceRes, isLoading: isPriceLoading } = useGetPricesQuery({
+    assets: ['alephium'],
+    currency: currencies[fiatCurrency].ticker
+  })
+
+  const price = priceRes?.alephium
 
   const [isAddressDetailsModalOpen, setIsAddressDetailsModalOpen] = useState(false)
 

src/pages/UnlockedWallet/OverviewPage/AddressesContactsList.tsx

@@ -36,7 +36,7 @@ import { useAppSelector } from '@/hooks/redux'
 import AddressDetailsModal from '@/modals/AddressDetailsModal'
 import ModalPortal from '@/modals/ModalPortal'
 import { selectAllAddresses, selectIsStateUninitialized } from '@/storage/addresses/addressesSelectors'
-import { useGetPriceQuery } from '@/storage/assets/priceApiSlice'
+import { useGetPricesQuery } from '@/storage/assets/priceApiSlice'
 import { Address } from '@/types/addresses'
 import { currencies } from '@/utils/currencies'
 
@@ -78,11 +78,13 @@ const AddressesContactsList = ({ className, maxHeightInPx }: AddressesContactsLi
 const AddressesList = ({ className, isExpanded, onExpand, onAddressClick }: AddressListProps) => {
   const addresses = useAppSelector(selectAllAddresses)
   const fiatCurrency = useAppSelector((s) => s.settings.fiatCurrency)
-  const { data: price } = useGetPriceQuery(currencies[fiatCurrency].ticker)
+  const { data: priceRes } = useGetPricesQuery({ assets: ['alephium'], currency: currencies[fiatCurrency].ticker })
   const stateUninitialized = useAppSelector(selectIsStateUninitialized)
 
   const [selectedAddress, setSelectedAddress] = useState<Address>()
 
+  const price = priceRes?.alephium
+
   const handleRowClick = (address: Address) => {
     onAddressClick()
     setSelectedAddress(address)

src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx

@@ -33,10 +33,11 @@ import { UnlockedWalletPanel } from '@/pages/UnlockedWallet/UnlockedWalletLayout
 import {
   makeSelectAddresses,
   makeSelectAddressesHaveHistoricBalances,
+  makeSelectAddressesKnownFungibleTokens,
   selectAddressIds,
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
-import { useGetPriceQuery } from '@/storage/assets/priceApiSlice'
+import { symbolCoinGeckoMapping, useGetPricesQuery } from '@/storage/assets/priceApiSlice'
 import { AddressHash } from '@/types/addresses'
 import { ChartLength, chartLengths, DataPoint } from '@/types/chart'
 import { getAvailableBalance } from '@/utils/addresses'
@@ -67,12 +68,24 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
   const isLoadingBalances = useAppSelector((s) => s.addresses.loadingBalances)
   const isBalancesInitialized = useAppSelector((s) => s.addresses.balancesStatus === 'initialized')
 
+  const selectAddressesKnownFungibleTokens = useMemo(makeSelectAddressesKnownFungibleTokens, [])
+  const knownFungibleTokens = useAppSelector((s) => selectAddressesKnownFungibleTokens(s, addressHashes))
+  const knownFungibleTokenIds = knownFungibleTokens.flatMap((t) => (t.symbol ? symbolCoinGeckoMapping[t.symbol] : []))
+
   const selectAddressesHaveHistoricBalances = useMemo(makeSelectAddressesHaveHistoricBalances, [])
   const hasHistoricBalances = useAppSelector((s) => selectAddressesHaveHistoricBalances(s, addressHashes))
   const fiatCurrency = useAppSelector((s) => s.settings.fiatCurrency)
-  const { data: price, isLoading: isPriceLoading } = useGetPriceQuery(currencies[fiatCurrency].ticker, {
-    pollingInterval: 60000
-  })
+  const { data: assetPrices, isLoading: arePricesLoading } = useGetPricesQuery(
+    {
+      assets: ['alephium', ...knownFungibleTokenIds],
+      currency: currencies[fiatCurrency].ticker
+    },
+    {
+      pollingInterval: 60000
+    }
+  )
+
+  const alphPrice = assetPrices?.alephium
 
   const [hoveredDataPoint, setHoveredDataPoint] = useState<DataPoint>()
   const [chartLength, setChartLength] = useState<ChartLength>('1m')
@@ -83,7 +96,7 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
   const totalBalance = addresses.reduce((acc, address) => acc + BigInt(address.balance), BigInt(0))
   const totalAvailableBalance = addresses.reduce((acc, address) => acc + getAvailableBalance(address), BigInt(0))
   const totalLockedBalance = addresses.reduce((acc, address) => acc + BigInt(address.lockedBalance), BigInt(0))
-  const totalAmountWorth = price !== undefined ? calculateAmountWorth(totalBalance, price) : undefined
+  const totalAmountWorth = alphPrice !== undefined ? calculateAmountWorth(totalBalance, alphPrice) : undefined
   const balanceInFiat = worth ?? totalAmountWorth
 
   const isOnline = network.status === 'online'
@@ -97,14 +110,14 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
           <BalancesRow>
             <BalancesColumn>
               <Today>{date ? dayjs(date).format('DD/MM/YYYY') : t('Value today')}</Today>
-              {isPriceLoading || showBalancesSkeletonLoader ? (
+              {arePricesLoading || showBalancesSkeletonLoader ? (
                 <SkeletonLoader height="32px" style={{ marginBottom: 7, marginTop: 7 }} />
               ) : (
                 <FiatTotalAmount tabIndex={0} value={balanceInFiat} isFiat suffix={currencies[fiatCurrency].symbol} />
               )}
               <Opacity fadeOut={isHoveringChart}>
                 <FiatDeltaPercentage>
-                  {isPriceLoading ||
+                  {arePricesLoading ||
                   stateUninitialized ||
                   (hasHistoricBalances && worthInBeginningOfChart === undefined) ? (
                     <SkeletonLoader height="18px" width="70px" style={{ marginBottom: 6 }} />
@@ -116,7 +129,7 @@ const AmountsOverviewPanel: FC<AmountsOverviewPanelProps> = ({ className, addres
 
               <ChartLengthBadges>
                 {chartLengths.map((length) =>
-                  isPriceLoading || stateUninitialized ? (
+                  arePricesLoading || stateUninitialized ? (
                     <SkeletonLoader
                       key={length}
                       height="25px"

src/pages/UnlockedWallet/OverviewPage/AssetsList.tsx

@@ -16,7 +16,7 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Asset } from '@alephium/sdk'
+import { Asset, calculateAmountWorth } from '@alephium/sdk'
 import { motion } from 'framer-motion'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -42,8 +42,10 @@ import {
   makeSelectAddressesNFTs,
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
+import { symbolCoinGeckoMapping, useGetPricesQuery } from '@/storage/assets/priceApiSlice'
 import { deviceBreakPoints } from '@/style/globalStyles'
 import { AddressHash } from '@/types/addresses'
+import { currencies } from '@/utils/currencies'
 
 interface AssetsListProps {
   className?: string
@@ -169,6 +171,19 @@ const TokenListRow = ({ asset, isExpanded }: TokenListRowProps) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const stateUninitialized = useAppSelector(selectIsStateUninitialized)
+  const fiatCurrency = useAppSelector((s) => s.settings.fiatCurrency)
+
+  const assetApiId = asset.symbol ? symbolCoinGeckoMapping[asset.symbol] : undefined
+
+  const { data: priceRes } = useGetPricesQuery(
+    { assets: assetApiId ? [assetApiId] : [], currency: currencies[fiatCurrency].ticker },
+    {
+      skip: !asset.symbol,
+      pollingInterval: 60000
+    }
+  )
+
+  const price = priceRes && assetApiId ? priceRes[assetApiId] : NaN
 
   return (
     <TableRow key={asset.id} role="row" tabIndex={isExpanded ? 0 : -1}>
@@ -211,6 +226,11 @@ const TokenListRow = ({ asset, isExpanded }: TokenListRowProps) => {
                 </AmountSubtitle>
               )}
               {!asset.symbol && <AmountSubtitle>{t('Raw amount')}</AmountSubtitle>}
+              {price && !isNaN(price) ? (
+                <Price>
+                  <Amount value={calculateAmountWorth(asset.balance, price)} isFiat suffix={fiatCurrency} />
+                </Price>
+              ) : null}
             </>
           )}
         </TableCellAmount>
@@ -292,6 +312,11 @@ const AmountSubtitle = styled.div`
   font-size: 10px;
 `
 
+const Price = styled.div`
+  font-size: 11px;
+  color: ${({ theme }) => theme.font.secondary};
+`
+
 const NameColumn = styled(Column)`
   margin-right: 50px;
 `

src/pages/UnlockedWallet/OverviewPage/GreetingMessages.tsx

@@ -25,7 +25,7 @@ import styled from 'styled-components'
 import { fadeInOut } from '@/animations'
 import { useAppSelector } from '@/hooks/redux'
 import TimeOfDayMessage from '@/pages/UnlockedWallet/OverviewPage/TimeOfDayMessage'
-import { useGetPriceQuery } from '@/storage/assets/priceApiSlice'
+import { useGetPricesQuery } from '@/storage/assets/priceApiSlice'
 import { currencies } from '@/utils/currencies'
 
 interface GreetingMessagesProps {
@@ -39,9 +39,17 @@ const GreetingMessages = ({ className }: GreetingMessagesProps) => {
   const activeWallet = useAppSelector((s) => s.activeWallet)
 
   const fiatCurrency = useAppSelector((s) => s.settings.fiatCurrency)
-  const { data: price, isLoading: isPriceLoading } = useGetPriceQuery(currencies[fiatCurrency].ticker, {
-    pollingInterval: 60000
-  })
+  const { data: priceRes, isLoading: isPriceLoading } = useGetPricesQuery(
+    {
+      assets: ['alephium'],
+      currency: currencies[fiatCurrency].ticker
+    },
+    {
+      pollingInterval: 60000
+    }
+  )
+
+  const price = priceRes?.alephium
 
   const [currentComponentIndex, setCurrentComponentIndex] = useState(0)
   const [lastClickTime, setLastChangeTime] = useState(Date.now())