History properly fetched and shown

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'
@@ -47,7 +48,7 @@ import {
   localStorageDataMigrated,
   localStorageDataMigrationFailed
 } from '@/storage/global/globalActions'
-import { syncTokenPrices } from '@/storage/prices/pricesActions'
+import { syncTokenPrices, syncTokenPricesHistory } from '@/storage/prices/pricesActions'
 import { apiClientInitFailed, apiClientInitSucceeded } from '@/storage/settings/networkActions'
 import { systemLanguageMatchFailed, systemLanguageMatchSucceeded } from '@/storage/settings/settingsActions'
 import { makeSelectAddressesHashesWithPendingTransactions } from '@/storage/transactions/transactionsSelectors'
@@ -201,6 +202,8 @@ const App = () => {
 
               restorePendingTransactions(mempoolTxHashes, storedPendingTxs)
             })
+
+          dispatch(syncTokenPricesHistory({ tokenSymbol: ALPH.symbol.toLowerCase(), currency: settings.fiatCurrency }))
         }
       } else if (addressesStatus === 'initialized') {
         if (!isTokensMetadataUninitialized && !isLoadingTokensMetadata) {

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

@@ -29,6 +29,7 @@ import {
   selectHaveHistoricBalancesLoaded,
   selectIsStateUninitialized
 } from '@/storage/addresses/addressesSelectors'
+import { selectAlphPriceHistory } from '@/storage/prices/pricesSelectors'
 import { ChartLength, DataPoint, LatestAmountPerAddress } from '@/types/chart'
 import { Currency } from '@/types/settings'
 import { CHART_DATE_FORMAT } from '@/utils/constants'
@@ -66,12 +67,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: priceHistory } = useGetHistoricalPriceQuery({
-    assetIds: ['alephium'],
-    currency,
-    days: 365
-  })
+  const priceHistory = useAppSelector(selectAlphPriceHistory)
 
   const theme = useTheme()
 
@@ -94,7 +90,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({
     const computeChartDataPoints = (): DataPoint[] => {
       const addressesLatestAmount: LatestAmountPerAddress = {}
 
-      const dataPoints = priceHistory.alephium.map(({ date, price }) => {
+      const dataPoints = priceHistory.history.map(({ date, price }) => {
         let totalAmountPerDate = BigInt(0)
 
         addresses.forEach(({ hash, balanceHistory }) => {

apps/desktop-wallet/src/storage/prices/pricesActions.ts

@@ -44,24 +44,22 @@ export const syncTokenPrices = createAsyncThunk(
 export const syncTokenPricesHistory = createAsyncThunk(
   'assets/syncTokenPricesHistory',
   async ({ tokenSymbol, currency }: { tokenSymbol: string; currency: string }) => {
-    const rawHistory = await client.explorer.market.getMarketPricesIdCharts(tokenSymbol, {
+    const rawHistory = (await client.explorer.market.getMarketPricesIdCharts(tokenSymbol, {
       currency: currency.toLowerCase()
-    })
-
-    console.log(rawHistory)
+    })) as unknown as [number, number][] // TODO: fix type explorer backend type...
 
     const today = dayjs().format(CHART_DATE_FORMAT)
 
     return {
       id: tokenSymbol,
       history: rawHistory.reduce((acc, v) => {
-        const itemDate = dayjs(v._1).format(CHART_DATE_FORMAT)
+        const itemDate = dayjs(v[0]).format(CHART_DATE_FORMAT)
         const isDuplicatedItem = !!acc.find(({ date }) => dayjs(date).format(CHART_DATE_FORMAT) === itemDate)
 
         if (!isDuplicatedItem && itemDate !== today)
           acc.push({
             date: itemDate,
-            price: v._2
+            price: v[1]
           })
 
         return acc

apps/desktop-wallet/src/storage/prices/pricesHistorySlice.ts

@@ -16,14 +16,13 @@ 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 { Tuple2LongDouble } from '@alephium/web3/dist/src/api/api-explorer'
 import { createSlice, EntityState } from '@reduxjs/toolkit'
 
 import { syncTokenPricesHistory } from '@/storage/prices/pricesActions'
 import { tokenPricesHistoryAdapter } from '@/storage/prices/pricesAdapter'
 
 export interface HistoricalPrice {
-  date: string // CHART_DATE_FORMAT
+  date: string
   price: number
 }
 export interface PriceHistoryEntity {

apps/desktop-wallet/src/storage/prices/pricesSelectors.ts

@@ -16,13 +16,23 @@ 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 { ALPH } from '@alephium/token-list'
 import { createSelector } from '@reduxjs/toolkit'
 
-import { tokenPricesAdapter } from '@/storage/prices/pricesAdapter'
+import { tokenPricesAdapter, tokenPricesHistoryAdapter } from '@/storage/prices/pricesAdapter'
 import { RootState } from '@/storage/store'
 
 export const { selectAll: selectAllPrices, selectById: selectPriceById } = tokenPricesAdapter.getSelectors<RootState>(
   (state) => state.tokenPrices
 )
 
-export const selectAlphPrice = createSelector(selectAllPrices, (prices) => prices.find((price) => price.id === 'alph'))
+export const selectAlphPrice = createSelector(selectAllPrices, (p) =>
+  p.find((price) => price.id === ALPH.symbol.toLowerCase())
+)
+
+export const { selectAll: selectAllPricesHistories, selectById: selectPriceHistoryById } =
+  tokenPricesHistoryAdapter.getSelectors<RootState>((state) => state.tokenPricesHistory)
+
+export const selectAlphPriceHistory = createSelector(selectAllPricesHistories, (p) =>
+  p.find((price) => price.id === ALPH.symbol.toLowerCase())
+)

apps/desktop-wallet/src/storage/store.ts

@@ -53,7 +53,6 @@ export const store = configureStore({
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware()
-      .concat(priceHistoryApi.middleware)
       .concat(settingsListenerMiddleware.middleware)
       .concat(networkListenerMiddleware.middleware)
       .concat(pendingTransactionsListenerMiddleware.middleware)