Fetch token prices & history using new Explorer BE endpoints (rebased and fixed)

.changeset/young-zoos-fry.md

@@ -0,0 +1,5 @@
+---
+'alephium-desktop-wallet': patch
+---
+
+Fetch token prices & ALPH history using new Explorer BE endpoints

apps/desktop-wallet/src/App.tsx

@@ -17,6 +17,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { AddressHash } from '@alephium/shared'
+import { ALPH } from '@alephium/token-list'
 import { AnimatePresence } from 'framer-motion'
 import { difference } from 'lodash'
 import { usePostHog } from 'posthog-js/react'
@@ -34,15 +35,20 @@ import { WalletConnectContextProvider } from '@/contexts/walletconnect'
 import { useAppDispatch, useAppSelector } from '@/hooks/redux'
 import UpdateWalletModal from '@/modals/UpdateWalletModal'
 import Router from '@/routes'
-import { syncAddressesData, syncAddressesHistoricBalances } from '@/storage/addresses/addressesActions'
-import { makeSelectAddressesUnknownTokens, selectAddressIds } from '@/storage/addresses/addressesSelectors'
-import { syncNetworkTokensInfo, syncUnknownTokensInfo } from '@/storage/assets/assetsActions'
-import { selectIsTokensMetadataUninitialized } from '@/storage/assets/assetsSelectors'
+import { syncAddressesAlphHistoricBalances, syncAddressesData } from '@/storage/addresses/addressesActions'
+import {
+  makeSelectAddressesUnknownTokens,
+  selectAddressIds,
+  selectAllAddressVerifiedFungibleTokenSymbols
+} from '@/storage/addresses/addressesSelectors'
+import { syncUnknownTokensInfo, syncVerifiedFungibleTokens } from '@/storage/assets/assetsActions'
+import { selectDoVerifiedFungibleTokensNeedInitialization } from '@/storage/assets/assetsSelectors'
 import {
   devModeShortcutDetected,
   localStorageDataMigrated,
   localStorageDataMigrationFailed
 } from '@/storage/global/globalActions'
+import { syncTokenCurrentPrices, syncTokenPriceHistories } from '@/storage/prices/pricesActions'
 import { apiClientInitFailed, apiClientInitSucceeded } from '@/storage/settings/networkActions'
 import { systemLanguageMatchFailed, systemLanguageMatchSucceeded } from '@/storage/settings/settingsActions'
 import { makeSelectAddressesHashesWithPendingTransactions } from '@/storage/transactions/transactionsSelectors'
@@ -57,6 +63,8 @@ import { useInterval } from '@/utils/hooks'
 import { migrateGeneralSettings, migrateNetworkSettings, migrateWalletData } from '@/utils/migration'
 import { languageOptions } from '@/utils/settings'
 
+const PRICES_REFRESH_INTERVAL = 60000
+
 const App = () => {
   const { newVersion, newVersionDownloadTriggered } = useGlobalContext()
   const dispatch = useAppDispatch()
@@ -65,7 +73,6 @@ const App = () => {
   const addressesWithPendingTxs = useAppSelector(selectAddressesHashesWithPendingTransactions)
   const network = useAppSelector((s) => s.network)
   const theme = useAppSelector((s) => s.global.theme)
-  const assetsInfo = useAppSelector((s) => s.assetsInfo)
   const loading = useAppSelector((s) => s.global.loading)
   const settings = useAppSelector((s) => s.settings)
   const wallets = useAppSelector((s) => s.global.wallets)
@@ -74,12 +81,14 @@ const App = () => {
 
   const addressesStatus = useAppSelector((s) => s.addresses.status)
   const isSyncingAddressData = useAppSelector((s) => s.addresses.syncingAddressData)
-  const isTokensMetadataUninitialized = useAppSelector(selectIsTokensMetadataUninitialized)
-  const isLoadingTokensMetadata = useAppSelector((s) => s.assetsInfo.loading)
+  const verifiedFungibleTokensNeedInitialization = useAppSelector(selectDoVerifiedFungibleTokensNeedInitialization)
+  const isLoadingVerifiedFungibleTokens = useAppSelector((s) => s.fungibleTokens.loadingVerified)
+  const isLoadingUnverifiedFungibleTokens = useAppSelector((s) => s.fungibleTokens.loadingUnverified)
+  const verifiedFungibleTokenSymbols = useAppSelector(selectAllAddressVerifiedFungibleTokenSymbols)
 
   const selectAddressesUnknownTokens = useMemo(makeSelectAddressesUnknownTokens, [])
   const unknownTokens = useAppSelector(selectAddressesUnknownTokens)
-  const checkedUnknownTokenIds = useAppSelector((s) => s.assetsInfo.checkedUnknownTokenIds)
+  const checkedUnknownTokenIds = useAppSelector((s) => s.fungibleTokens.checkedUnknownTokenIds)
   const unknownTokenIds = unknownTokens.map((token) => token.id)
   const newUnknownTokens = difference(unknownTokenIds, checkedUnknownTokenIds)
 
@@ -175,9 +184,6 @@ const App = () => {
 
   useEffect(() => {
     if (network.status === 'online') {
-      if (assetsInfo.status === 'uninitialized' && !isLoadingTokensMetadata) {
-        dispatch(syncNetworkTokensInfo())
-      }
       if (addressesStatus === 'uninitialized') {
         if (!isSyncingAddressData && addressHashes.length > 0) {
           const storedPendingTxs = getStoredPendingTransactions()
@@ -189,26 +195,80 @@ const App = () => {
 
               restorePendingTransactions(mempoolTxHashes, storedPendingTxs)
             })
-          dispatch(syncAddressesHistoricBalances())
+
+          dispatch(syncAddressesAlphHistoricBalances())
         }
       } else if (addressesStatus === 'initialized') {
-        if (!isTokensMetadataUninitialized && !isLoadingTokensMetadata && newUnknownTokens.length > 0) {
+        if (
+          !verifiedFungibleTokensNeedInitialization &&
+          !isLoadingUnverifiedFungibleTokens &&
+          newUnknownTokens.length > 0
+        ) {
           dispatch(syncUnknownTokensInfo(newUnknownTokens))
         }
       }
     }
   }, [
     addressHashes.length,
     addressesStatus,
-    assetsInfo.status,
+    verifiedFungibleTokensNeedInitialization,
     dispatch,
+    isLoadingUnverifiedFungibleTokens,
     isSyncingAddressData,
-    isLoadingTokensMetadata,
-    isTokensMetadataUninitialized,
     network.status,
     newUnknownTokens
   ])
 
+  // Fetch verified tokens from GitHub token-list and sync current and historical prices for each verified fungible
+  // token found in each address
+  useEffect(() => {
+    if (network.status === 'online' && !isLoadingVerifiedFungibleTokens) {
+      if (verifiedFungibleTokensNeedInitialization) {
+        dispatch(syncVerifiedFungibleTokens())
+      } else if (verifiedFungibleTokenSymbols.uninitialized.length > 0) {
+        const symbols = verifiedFungibleTokenSymbols.uninitialized
+
+        dispatch(syncTokenCurrentPrices({ verifiedFungibleTokenSymbols: symbols, currency: settings.fiatCurrency }))
+        dispatch(syncTokenPriceHistories({ verifiedFungibleTokenSymbols: symbols, currency: settings.fiatCurrency }))
+      }
+    }
+  }, [
+    dispatch,
+    isLoadingVerifiedFungibleTokens,
+    network.status,
+    settings.fiatCurrency,
+    verifiedFungibleTokenSymbols.uninitialized,
+    verifiedFungibleTokensNeedInitialization
+  ])
+
+  useEffect(() => {
+    if (
+      network.status === 'online' &&
+      !isLoadingVerifiedFungibleTokens &&
+      verifiedFungibleTokenSymbols.uninitialized.length > 1
+    ) {
+      console.log(
+        'TODO: Sync address verified tokens balance histories for',
+        verifiedFungibleTokenSymbols.uninitialized.filter((symbol) => symbol !== ALPH.symbol)
+      )
+    }
+  }, [isLoadingVerifiedFungibleTokens, network.status, verifiedFungibleTokenSymbols.uninitialized])
+
+  const refreshTokensLatestPrice = useCallback(() => {
+    dispatch(
+      syncTokenCurrentPrices({
+        verifiedFungibleTokenSymbols: verifiedFungibleTokenSymbols.withPriceHistory,
+        currency: settings.fiatCurrency
+      })
+    )
+  }, [dispatch, settings.fiatCurrency, verifiedFungibleTokenSymbols.withPriceHistory])
+
+  useInterval(
+    refreshTokensLatestPrice,
+    PRICES_REFRESH_INTERVAL,
+    network.status !== 'online' || verifiedFungibleTokenSymbols.withPriceHistory.length === 0
+  )
+
   const refreshAddressesData = useCallback(() => {
     dispatch(syncAddressesData(addressesWithPendingTxs))
   }, [dispatch, addressesWithPendingTxs])

apps/desktop-wallet/src/api/addresses.ts

@@ -30,7 +30,9 @@ import {
 
 const PAGE_LIMIT = 100
 
-export const fetchAddressesTokens = async (addressHashes: AddressHash[]): Promise<AddressTokensSyncResult[]> => {
+export const fetchAddressesTokensBalances = async (
+  addressHashes: AddressHash[]
+): Promise<AddressTokensSyncResult[]> => {
   const results = []
 
   for (const hash of addressHashes) {

apps/desktop-wallet/src/components/AssetBadge.tsx

@@ -22,7 +22,7 @@ import styled, { css } from 'styled-components'
 import Amount from '@/components/Amount'
 import AssetLogo from '@/components/AssetLogo'
 import { useAppSelector } from '@/hooks/redux'
-import { selectAssetInfoById, selectNFTById } from '@/storage/assets/assetsSelectors'
+import { selectFungibleTokenById, selectNFTById } from '@/storage/assets/assetsSelectors'
 
 interface AssetBadgeProps {
   assetId: Asset['id']
@@ -34,28 +34,28 @@ interface AssetBadgeProps {
 }
 
 const AssetBadge = ({ assetId, amount, simple, className }: AssetBadgeProps) => {
-  const assetInfo = useAppSelector((s) => selectAssetInfoById(s, assetId))
+  const fungibleToken = useAppSelector((s) => selectFungibleTokenById(s, assetId))
   const nftInfo = useAppSelector((s) => selectNFTById(s, assetId))
 
   return (
     <div
       className={className}
       data-tooltip-id="default"
-      data-tooltip-content={assetInfo?.name ?? nftInfo?.name ?? assetId}
+      data-tooltip-content={fungibleToken?.name ?? nftInfo?.name ?? assetId}
     >
       <AssetLogo
         assetId={assetId}
-        assetImageUrl={assetInfo?.logoURI || nftInfo?.image}
+        assetImageUrl={fungibleToken?.logoURI || nftInfo?.image}
         size={20}
-        assetName={assetInfo?.name}
+        assetName={fungibleToken?.name}
         isNft={!!nftInfo}
       />
       {nftInfo?.name ? (
         <AssetSymbol>{nftInfo?.name}</AssetSymbol>
       ) : amount !== undefined ? (
-        <Amount value={amount} suffix={assetInfo?.symbol} decimals={assetInfo?.decimals} />
+        <Amount value={amount} suffix={fungibleToken?.symbol} decimals={fungibleToken?.decimals} />
       ) : (
-        !simple && assetInfo?.symbol && <AssetSymbol>{assetInfo.symbol}</AssetSymbol>
+        !simple && fungibleToken?.symbol && <AssetSymbol>{fungibleToken.symbol}</AssetSymbol>
       )}
     </div>
   )

apps/desktop-wallet/src/components/AssetLogo.tsx

@@ -16,18 +16,18 @@ 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 { AssetInfo, NFT } from '@alephium/shared'
+import { FungibleToken, NFT } from '@alephium/shared'
 import { ALPH } from '@alephium/token-list'
 import { HelpCircle } from 'lucide-react'
 import styled, { css } from 'styled-components'
 
 import AlephiumLogoSVG from '@/images/alephium_logo_monochrome.svg'
 
 interface AssetLogoProps {
-  assetId: AssetInfo['id']
-  assetImageUrl: AssetInfo['logoURI'] | NFT['image']
+  assetId: FungibleToken['id']
+  assetImageUrl: FungibleToken['logoURI'] | NFT['image']
   size: number
-  assetName?: AssetInfo['name']
+  assetName?: FungibleToken['name']
   isNft?: boolean
   className?: string
 }

apps/desktop-wallet/src/components/HistoricWorthChart.tsx

@@ -29,12 +29,10 @@ import {
   selectHaveHistoricBalancesLoaded,
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
-import { useGetHistoricalPriceQuery } from '@/storage/assets/priceApiSlice'
+import { selectAlphPriceHistory } from '@/storage/prices/pricesSelectors'
 import { ChartLength, DataPoint, LatestAmountPerAddress } from '@/types/chart'
-import { Currency } from '@/types/settings'
 
 interface HistoricWorthChartProps {
-  currency: Currency
   length: ChartLength
   onDataPointHover: (dataPoint?: DataPoint) => void
   onWorthInBeginningOfChartChange: (worthInBeginningOfChart?: DataPoint['worth']) => void
@@ -57,7 +55,6 @@ const startingDates: Record<ChartLength, Dayjs> = {
 const HistoricWorthChart = memo(function HistoricWorthChart({
   addressHash,
   latestWorth,
-  currency,
   length = '1y',
   onDataPointHover,
   onWorthInBeginningOfChartChange
@@ -66,8 +63,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
   const addresses = useAppSelector((s) => selectAddresses(s, addressHash ?? (s.addresses.ids as AddressHash[])))
   const haveHistoricBalancesLoaded = useAppSelector(selectHaveHistoricBalancesLoaded)
   const stateUninitialized = useAppSelector(selectIsStateUninitialized)
-
-  const { data: alphPriceHistory } = useGetHistoricalPriceQuery({ currency, days: 365 })
+  const alphPriceHistory = useAppSelector(selectAlphPriceHistory)
 
   const theme = useTheme()
 
@@ -90,11 +86,11 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
     const computeChartDataPoints = (): DataPoint[] => {
       const addressesLatestAmount: LatestAmountPerAddress = {}
 
-      const dataPoints = alphPriceHistory.map(({ date, price }) => {
+      const dataPoints = alphPriceHistory.map(({ date, value }) => {
         let totalAmountPerDate = BigInt(0)
 
-        addresses.forEach(({ hash, balanceHistory }) => {
-          const amountOnDate = balanceHistory.entities[date]?.balance
+        addresses.forEach(({ hash, alphBalanceHistory }) => {
+          const amountOnDate = alphBalanceHistory.entities[date]?.balance
 
           if (amountOnDate !== undefined) {
             const amount = BigInt(amountOnDate)
@@ -107,7 +103,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
 
         return {
           date,
-          worth: price * parseFloat(toHumanReadableAmount(totalAmountPerDate))
+          worth: value * parseFloat(toHumanReadableAmount(totalAmountPerDate))
         }
       })
 

apps/desktop-wallet/src/modals/AddressSelectModal.tsx

@@ -46,7 +46,7 @@ const AddressSelectModal = ({
   hideAddressesWithoutAssets
 }: AddressSelectModalProps) => {
   const { t } = useTranslation()
-  const assetsInfo = useAppSelector((state) => state.assetsInfo.entities)
+  const fungibleTokens = useAppSelector((state) => state.fungibleTokens.entities)
 
   const addresses = hideAddressesWithoutAssets ? filterAddressesWithoutAssets(options) : options
   const [filteredAddresses, setFilteredAddresses] = useState(addresses)
@@ -76,7 +76,7 @@ const AddressSelectModal = ({
   }
 
   const handleSearch = (searchInput: string) =>
-    setFilteredAddresses(filterAddresses(addresses, searchInput.toLowerCase(), assetsInfo))
+    setFilteredAddresses(filterAddresses(addresses, searchInput.toLowerCase(), fungibleTokens))
 
   return (
     <SelectOptionsModal

apps/desktop-wallet/src/modals/SendModals/CheckAmountsBox.tsx

@@ -42,7 +42,7 @@ const CheckAmountsBox = ({ assetAmounts, className }: CheckAmountsBoxProps) => {
   const { t } = useTranslation()
   const userSpecifiedAlphAmount = assetAmounts.find((asset) => asset.id === ALPH.id)?.amount
   const { attoAlphAmount, tokens, extraAlphForDust } = getTransactionAssetAmounts(assetAmounts)
-  const assetsInfo = useAppSelector((s) => s.assetsInfo.entities)
+  const fungibleTokens = useAppSelector((s) => s.fungibleTokens.entities)
   const nfts = useAppSelector((s) => s.nfts.entities)
 
   const alphAsset = { id: ALPH.id, amount: attoAlphAmount }
@@ -51,7 +51,7 @@ const CheckAmountsBox = ({ assetAmounts, className }: CheckAmountsBoxProps) => {
   return (
     <Box className={className}>
       {assets.map((asset, index) => {
-        const assetInfo = assetsInfo[asset.id]
+        const fungibleToken = fungibleTokens[asset.id]
         const nftInfo = nfts[asset.id]
 
         return (
@@ -60,15 +60,15 @@ const CheckAmountsBox = ({ assetAmounts, className }: CheckAmountsBoxProps) => {
             <AssetAmountRow>
               <AssetLogo
                 assetId={asset.id}
-                assetImageUrl={assetInfo?.logoURI ?? nftInfo?.image}
+                assetImageUrl={fungibleToken?.logoURI ?? nftInfo?.image}
                 size={30}
-                assetName={assetInfo?.name}
+                assetName={fungibleToken?.name}
               />
               <AssetAmountStyled
                 value={BigInt(asset.amount)}
-                suffix={assetInfo?.symbol}
-                decimals={assetInfo?.decimals}
-                isUnknownToken={!assetInfo?.symbol}
+                suffix={fungibleToken?.symbol}
+                decimals={fungibleToken?.decimals}
+                isUnknownToken={!fungibleToken?.symbol}
                 fullPrecision
               />
               {asset.id === ALPH.id && !!extraAlphForDust && (