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/locales/bg-BG/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Използване на максимална сума",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Полезно за копачи или DeFi употреба.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Версия",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Налична е версия {{ newVersion }}. Кликнете върху \"Актуализиране\" за да избегнете проблеми с портфейла.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.",

apps/desktop-wallet/locales/de-DE/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Maximalbetrag verwenden",
   "Use optional passphrase": "Optionale Passphrase verwenden",
   "Useful for miners or DeFi use.": "Nützlich für Miner oder DeFi.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Version",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Version {{ newVersion }} ist verfügbar. Bitte laden Sie sie herunter und installieren Sie diese, um Probleme mit der Wallet zu vermeiden.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} ist verfügbar. Bitte laden Sie sie herunter und installieren Sie sie, um Probleme mit der Brieftasche zu vermeiden.",

apps/desktop-wallet/locales/en-US/translation.json

@@ -405,7 +405,7 @@
   "Use max amount": "Use max amount",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Useful for miners or DeFi use.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Version",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.",

apps/desktop-wallet/locales/es-ES/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Utilizar la cantidad máxima",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Útil para mineros o uso DeFi.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Versión",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "La versión {{ newVersion }} está disponible. Haga clic en \"Actualizar\" para evitar problemas con la billetera.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.",

apps/desktop-wallet/locales/fr-FR/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Utiliser le montant max",
   "Use optional passphrase": "Utiliser la phrase de passe optionnelle",
   "Useful for miners or DeFi use.": "Utile pour les mineurs ou l'usage DeFi.",
-  "Value today": "Valeur aujourd'hui",
+  "Value today (ALPH)": "Valeur aujourd'hui (ALPH)",
   "Version": "Version",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "La version {{ newVersion }} est disponible. Cliquez sur \"Mettre à jour\" afin d'éviter tout problème de fonctionnement.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "La version {{ newVersion }} est disponible. Téléchargez et installez la afin d'éviter tout problème de fonctionnement.",

apps/desktop-wallet/locales/id-ID/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Gunakan jumlah maksimum",
   "Use optional passphrase": "Gunakan frasa sandi opsional",
   "Useful for miners or DeFi use.": "Berguna untuk penambang atau penggunaan DeFi.",
-  "Value today": "Nilai hari ini",
+  "Value today (ALPH)": "Nilai hari ini (ALPH)",
   "Version": "Versi",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Versi {{ newVersion }} telah tersedia. Klik \"Perbarui\" untuk menghindari masalah dompet.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Versi {{ newVersion }} telah tersedia. Silakan, unduh dan instal untuk menghindari masalah dompet.",

apps/desktop-wallet/locales/it-IT/translation.json

@@ -402,7 +402,7 @@
   "Use max amount": "Usa l'importo massimo",
   "Use optional passphrase": "Usa passphrase opzionale",
   "Useful for miners or DeFi use.": "Utile per minatori o uso DeFi.",
-  "Value today": "Valore oggi",
+  "Value today (ALPH)": "Valore oggi (ALPH)",
   "Version": "Versione",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Versione {{ newVersion }} è disponibile. Clic \"Update\" per evitare qualsiasi problema con il portafoglio.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Versione {{ newVersion }} è disponibile. Per favore, scaricalo e installalo per evitare qualsiasi problema con il portafoglio.",

apps/desktop-wallet/locales/pt-PT/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Usar o montante máximo",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Útil para os mineradores ou uso DeFi.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Versão",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "A versão {{ newVersion }} está disponível. Clique em \"Atualizar\" para evitar qualquer problema com a carteira.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.",

apps/desktop-wallet/locales/ru-RU/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Использовать максимальную сумму",
   "Use optional passphrase": "Использовать дополнительную парольную фразу",
   "Useful for miners or DeFi use.": "Пригодится для майнеров или для использования в DeFi.",
-  "Value today": "Стоимость на сегодня",
+  "Value today (ALPH)": "Стоимость на сегодня (ALPH)",
   "Version": "Версия",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Версия {{ newVersion }} уже доступна. Нажмите, \"Обновить\", чтобы избежать проблем с кошельком.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Доступна версия {{ newVersion }}. Пожалуйста, скачайте и установите ее, чтобы избежать проблем с кошельком.",

apps/desktop-wallet/locales/tr-TR/translation.json

@@ -408,7 +408,7 @@
   "Use max amount": "Tüm miktarı kullan",
   "Use optional passphrase": "Use optional passphrase",
   "Useful for miners or DeFi use.": "Madenciler ya da DeFi kullanımı için faydalıdır.",
-  "Value today": "Value today",
+  "Value today (ALPH)": "Value today (ALPH)",
   "Version": "Sürüm",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "{{ newVersion }} sürümü mevcut. Cüzdan ile ilgili sorun yaşamamak için \"Güncelle\" kısmına tıklayın.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.",

apps/desktop-wallet/locales/vi-VN/translation.json

@@ -406,7 +406,7 @@
   "Use max amount": "Sử dụng tất cả số dư",
   "Use optional passphrase": "Sử dụng cụm từ khôi phục tuỳ chỉnh",
   "Useful for miners or DeFi use.": "Hữu ích cho thợ đào (miner) hoặc sử dụng DeFi.",
-  "Value today": "Giá trị hôm nay",
+  "Value today (ALPH)": "Giá trị hôm nay (ALPH)",
   "Version": "Phiên bản",
   "Version {{ newVersion }} is available. Click \"Update\" to avoid any issues with the wallet.": "Phiên bản {{ newVersion }} vừa mới được phát hành. Vui lòng nhấn \"Cập nhật\" để khắc phục những lỗi đang hiện có.",
   "Version {{ newVersion }} is available. Please, download it and install it to avoid any issues with the wallet.": "Phiên bản {{ newVersion }} vừa mới được phát hành. Vui lòng tải về và cài đặt để khắc phục các lỗi hiện đang có.",

apps/desktop-wallet/package.json

@@ -51,8 +51,8 @@
     "@alephium/shared": "workspace:*",
     "@alephium/token-list": "^0.0.12",
     "@alephium/typescript-config": "workspace:*",
-    "@alephium/walletconnect-provider": "0.28.1",
-    "@alephium/web3": "0.28.1",
+    "@alephium/walletconnect-provider": "0.29.1",
+    "@alephium/web3": "0.29.1",
     "@electron/notarize": "^1.2.3",
     "@json-rpc-tools/utils": "^1.7.6",
     "@reduxjs/toolkit": "^1.9.1",

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 { selectAreVerifiedFungibleTokensInitialized } 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'
@@ -65,7 +71,7 @@ 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 fungibleTokens = useAppSelector((s) => s.fungibleTokens)
   const loading = useAppSelector((s) => s.global.loading)
   const settings = useAppSelector((s) => s.settings)
   const wallets = useAppSelector((s) => s.global.wallets)
@@ -74,12 +80,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 areVerifiedFungibleTokensInitialized = useAppSelector(selectAreVerifiedFungibleTokensInitialized)
+  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 +183,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 +194,76 @@ const App = () => {
 
               restorePendingTransactions(mempoolTxHashes, storedPendingTxs)
             })
-          dispatch(syncAddressesHistoricBalances())
+
+          dispatch(syncAddressesAlphHistoricBalances())
         }
       } else if (addressesStatus === 'initialized') {
-        if (!isTokensMetadataUninitialized && !isLoadingTokensMetadata && newUnknownTokens.length > 0) {
+        if (areVerifiedFungibleTokensInitialized && !isLoadingUnverifiedFungibleTokens && newUnknownTokens.length > 0) {
           dispatch(syncUnknownTokensInfo(newUnknownTokens))
         }
       }
     }
   }, [
     addressHashes.length,
     addressesStatus,
-    assetsInfo.status,
+    areVerifiedFungibleTokensInitialized,
     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 (fungibleTokens.status === 'uninitialized') {
+        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,
+    fungibleTokens.status,
+    isLoadingVerifiedFungibleTokens,
+    network.status,
+    settings.fiatCurrency,
+    verifiedFungibleTokenSymbols.uninitialized
+  ])
+
+  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,
+    60000,
+    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
 }