diff --git a/src/components/HistoricWorthChart.tsx b/src/components/HistoricWorthChart.tsx index e44910a28..91730c81d 100644 --- a/src/components/HistoricWorthChart.tsx +++ b/src/components/HistoricWorthChart.tsx @@ -33,13 +33,14 @@ import { useGetHistoricalPriceQuery } from '@/storage/assets/priceApiSlice' import { AddressHash } from '@/types/addresses' import { ChartLength, DataPoint, LatestAmountPerAddress } from '@/types/chart' import { Currency } from '@/types/settings' +import { CHART_DATE_FORMAT } from '@/utils/constants' interface HistoricWorthChartProps { currency: Currency length: ChartLength onDataPointHover: (dataPoint?: DataPoint) => void onWorthInBeginningOfChartChange: (worthInBeginningOfChart?: DataPoint['worth']) => void - latestWorth: number + latestWorth?: number addressHash?: AddressHash } @@ -76,8 +77,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({ const startingDate = startingDates[length].format('YYYY-MM-DD') const isDataAvailable = addresses.length !== 0 && haveHistoricBalancesLoaded && !!alphPriceHistory - const filteredChartData = getFilteredChartData(chartData, startingDate) - const firstItem = filteredChartData.at(0) + const firstItem = chartData.at(0) useEffect(() => { onWorthInBeginningOfChartChange(firstItem?.worth) @@ -92,7 +92,7 @@ const HistoricWorthChart = memo(function HistoricWorthChart({ const computeChartDataPoints = (): DataPoint[] => { const addressesLatestAmount: LatestAmountPerAddress = {} - return alphPriceHistory.map(({ date, price }) => { + const dataPoints = alphPriceHistory.map(({ date, price }) => { let totalAmountPerDate = BigInt(0) addresses.forEach(({ hash, balanceHistory }) => { @@ -112,6 +112,10 @@ const HistoricWorthChart = memo(function HistoricWorthChart({ worth: price * parseFloat(toHumanReadableAmount(totalAmountPerDate)) } }) + + if (latestWorth !== undefined) dataPoints.push({ date: dayjs().format(CHART_DATE_FORMAT), worth: latestWorth }) + + return dataPoints } const trimInitialZeroDataPoints = (data: DataPoint[]) => data.slice(data.findIndex((point) => point.worth !== 0)) @@ -119,20 +123,20 @@ const HistoricWorthChart = memo(function HistoricWorthChart({ let dataPoints = computeChartDataPoints() dataPoints = trimInitialZeroDataPoints(dataPoints) - setChartData(dataPoints) - }, [addresses, alphPriceHistory, isDataAvailable]) + setChartData(getFilteredChartData(dataPoints, startingDate)) + }, [addresses, alphPriceHistory, isDataAvailable, latestWorth, startingDate]) - if (!isDataAvailable || chartData.length <= 2 || !firstItem) return null + if (!isDataAvailable || chartData.length <= 2 || !firstItem || latestWorth === undefined) return null - const xAxisDatesData = filteredChartData.map(({ date }) => date) - const yAxisWorthData = filteredChartData.map(({ worth }) => worth) + const xAxisDatesData = chartData.map(({ date }) => date) + const yAxisWorthData = chartData.map(({ worth }) => worth) const worthHasGoneUp = firstItem.worth < latestWorth const chartColor = stateUninitialized ? theme.font.tertiary : worthHasGoneUp ? theme.global.valid : theme.global.alert const chartOptions = getChartOptions(chartColor, xAxisDatesData, { mouseMove(e, chart, options) { - onDataPointHover(options.dataPointIndex === -1 ? undefined : filteredChartData[options.dataPointIndex]) + onDataPointHover(options.dataPointIndex === -1 ? undefined : chartData[options.dataPointIndex]) }, mouseLeave() { onDataPointHover(undefined) diff --git a/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx b/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx index c2fa35c16..a89dde151 100644 --- a/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx +++ b/src/pages/UnlockedWallet/OverviewPage/AmountsOverviewPanel.tsx @@ -83,7 +83,8 @@ const AmountsOverviewPanel: FC = ({ 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 = calculateAmountWorth(totalBalance, price ?? 0) + const totalAmountWorth = + price !== undefined && !stateUninitialized ? calculateAmountWorth(totalBalance, price) : undefined const balanceInFiat = worth ?? totalAmountWorth const isOnline = network.status === 'online' @@ -108,7 +109,7 @@ const AmountsOverviewPanel: FC = ({ className, addres stateUninitialized || (hasHistoricBalances && worthInBeginningOfChart === undefined) ? ( - ) : hasHistoricBalances && worthInBeginningOfChart ? ( + ) : hasHistoricBalances && worthInBeginningOfChart && totalAmountWorth !== undefined ? ( ) : null} @@ -173,7 +174,9 @@ const AmountsOverviewPanel: FC = ({ className, addres ({ query: ({ currency, days }) => `/coins/alephium/market_chart?vs_currency=${currency.toLowerCase()}&days=${days}`, - transformResponse: (response: { prices: number[][] }) => - response.prices.map((p) => ({ date: dayjs(p[0]).format(CHART_DATE_FORMAT), price: p[1] })) + transformResponse: (response: { prices: number[][] }) => { + const { prices } = response + const today = dayjs().format(CHART_DATE_FORMAT) + + return prices.reduce((acc, [date, price]) => { + const itemDate = dayjs(date).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 + }) + + return acc + }, [] as HistoricalPriceResult[]) + } }) }) })