diff --git a/components/borrow/AssetsBorrowsTable.tsx b/components/borrow/AssetsBorrowsTable.tsx index 9278d0fd..a53fcf87 100644 --- a/components/borrow/AssetsBorrowsTable.tsx +++ b/components/borrow/AssetsBorrowsTable.tsx @@ -5,7 +5,7 @@ import { } from '@heroicons/react/20/solid' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' -import { useCallback, useEffect, useState } from 'react' +import { useCallback, useState } from 'react' import { useViewport } from '../../hooks/useViewport' import { formatNumericValue } from '../../utils/numbers' import { breakpoints } from '../../utils/theme' @@ -14,7 +14,6 @@ import Tooltip from '@components/shared/Tooltip' import useJupiterMints from 'hooks/useJupiterMints' import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements' import useMangoGroup from 'hooks/useMangoGroup' -import mangoStore from '@store/mangoStore' import BorrowRepayModal from '@components/modals/BorrowRepayModal' import BankAmountWithValue from '@components/shared/BankAmountWithValue' import useBanksWithBalances from 'hooks/useBanksWithBalances' @@ -25,8 +24,6 @@ const AssetsBorrowsTable = () => { const { t } = useTranslation(['common', 'token']) const [showBorrowModal, setShowBorrowModal] = useState(false) const [selectedToken, setSelectedToken] = useState('') - const actions = mangoStore.getState().actions - const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad) const { group } = useMangoGroup() const { mangoTokens } = useJupiterMints() const { width } = useViewport() @@ -38,12 +35,6 @@ const AssetsBorrowsTable = () => { setShowBorrowModal(true) }, []) - useEffect(() => { - if (group && !initialStatsLoad) { - actions.fetchTokenStats() - } - }, [group]) - return ( <> {showTableView ? ( diff --git a/components/stats/TokenStatsCharts.tsx b/components/stats/TokenStatsCharts.tsx index af6b9cc9..0533210b 100644 --- a/components/stats/TokenStatsCharts.tsx +++ b/components/stats/TokenStatsCharts.tsx @@ -4,22 +4,14 @@ import { useEffect, useMemo, useState } from 'react' import dayjs from 'dayjs' import { formatYAxis } from 'utils/formatting' import useBanksWithBalances from 'hooks/useBanksWithBalances' -import { TokenStatsItem } from 'types' import useMangoGroup from 'hooks/useMangoGroup' import { toUiDecimals } from '@blockworks-foundation/mango-v4' import DetailedAreaChart from '@components/shared/DetailedAreaChart' -interface TotalValueItem { - date: string - borrowValue: number - depositValue: number - feesCollected: number -} - const TokenStatsCharts = () => { const { t } = useTranslation(['common', 'token', 'trade']) const { group } = useMangoGroup() - const tokenStats = mangoStore((s) => s.tokenStats.data) + const mangoStats = mangoStore((s) => s.tokenStats.mangoStats) const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad) const loadingStats = mangoStore((s) => s.tokenStats.loading) const [borrowDaysToShow, setBorrowDaysToShow] = useState('30') @@ -33,38 +25,6 @@ const TokenStatsCharts = () => { } }, [group, initialStatsLoad]) - const tokenStatsValues = useMemo(() => { - if (!tokenStats || !banks.length) return [] - const values: TotalValueItem[] = tokenStats.reduce( - (a: TotalValueItem[], c: TokenStatsItem) => { - const bank = banks.find( - (b) => b.bank.tokenIndex === c.token_index - )?.bank - const hasDate = a.find((d: TotalValueItem) => d.date === c.date_hour) - if (!hasDate) { - a.push({ - date: c.date_hour, - depositValue: Math.floor(c.total_deposits * c.price), - borrowValue: Math.floor(c.total_borrows * c.price), - feesCollected: c.collected_fees * bank!.uiPrice, - }) - } else { - hasDate.depositValue = - hasDate.depositValue + Math.floor(c.total_deposits * c.price) - hasDate.borrowValue = - hasDate.borrowValue + Math.floor(c.total_borrows * c.price) - hasDate.feesCollected = - hasDate.feesCollected + c.collected_fees * bank!.uiPrice - } - return a.sort( - (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime() - ) - }, - [] - ) - return values - }, [banks, tokenStats]) - const [ currentTotalDepositValue, currentTotalBorrowValue, @@ -86,11 +46,11 @@ const TokenStatsCharts = () => { return [0, 0, 0] }, [banks]) - return tokenStatsValues.length ? ( + return ( <>
{
{
{ />
- ) : null + ) } export default TokenStatsCharts diff --git a/components/token/ChartTabs.tsx b/components/token/ChartTabs.tsx index 833bd9d4..f1c80edb 100644 --- a/components/token/ChartTabs.tsx +++ b/components/token/ChartTabs.tsx @@ -1,3 +1,4 @@ +import { Bank } from '@blockworks-foundation/mango-v4' import TabButtons from '@components/shared/TabButtons' import mangoStore from '@store/mangoStore' import useMangoGroup from 'hooks/useMangoGroup' @@ -7,7 +8,7 @@ import { TokenStatsItem } from 'types' import { formatYAxis } from 'utils/formatting' import DetailedAreaChart from '@components/shared/DetailedAreaChart' -const ChartTabs = ({ token }: { token: string }) => { +const ChartTabs = ({ bank }: { bank: Bank }) => { const { t } = useTranslation('token') const [activeDepositsTab, setActiveDepositsTab] = useState('token:deposits') const [activeBorrowsTab, setActiveBorrowsTab] = useState('token:borrows') @@ -30,11 +31,7 @@ const ChartTabs = ({ token }: { token: string }) => { const statsHistory = useMemo(() => { if (!tokenStats?.length) return [] return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => { - if ( - c.symbol === token || - // ETH needs to be renamed ETH (Portal) in tokenStats db - (c.symbol === 'ETH' && token === 'ETH (Portal)') - ) { + if (c.token_index === bank.tokenIndex) { const copy = { ...c } copy.deposit_apr = copy.deposit_apr * 100 copy.borrow_apr = copy.borrow_apr * 100 @@ -45,22 +42,7 @@ const ChartTabs = ({ token }: { token: string }) => { new Date(a.date_hour).getTime() - new Date(b.date_hour).getTime() ) }, []) - }, [tokenStats]) - - // const filterStats = (daysToShow: string) => { - // if (!statsHistory.length) return [] - // if (daysToShow !== '30') { - // const seconds = Number(daysToShow) * 86400 - // const data = statsHistory.filter((d) => { - // const dataTime = new Date(d.date_hour).getTime() / 1000 - // const now = new Date().getTime() / 1000 - // const limit = now - seconds - // return dataTime >= limit - // }) - // return data - // } - // return statsHistory - // } + }, [tokenStats, bank]) return (
@@ -87,7 +69,7 @@ const ChartTabs = ({ token }: { token: string }) => { loading={loadingTokenStats} small tickFormat={(x) => formatYAxis(x)} - title={`${token} ${t('token:deposits')}`} + title={`${bank?.name} ${t('token:deposits')}`} xKey="date_hour" yKey={'total_deposits'} /> @@ -98,13 +80,12 @@ const ChartTabs = ({ token }: { token: string }) => { setDaysToShow={setDepositRateDaysToShow} heightClass="h-64" loaderHeightClass="h-[334px]" - // domain={[0, 'dataMax']} loading={loadingTokenStats} hideChange small suffix="%" tickFormat={(x) => `${x.toFixed(2)}%`} - title={`${token} ${t('token:deposit-rates')} APR`} + title={`${bank?.name} ${t('token:deposit-rates')} APR`} xKey="date_hour" yKey={'deposit_apr'} /> @@ -135,7 +116,7 @@ const ChartTabs = ({ token }: { token: string }) => { loading={loadingTokenStats} small tickFormat={(x) => formatYAxis(x)} - title={`${token} ${t('token:borrows')}`} + title={`${bank?.name} ${t('token:borrows')}`} xKey="date_hour" yKey={'total_borrows'} /> @@ -146,13 +127,12 @@ const ChartTabs = ({ token }: { token: string }) => { setDaysToShow={setBorrowRateDaysToShow} heightClass="h-64" loaderHeightClass="h-[334px]" - // domain={[0, 'dataMax']} loading={loadingTokenStats} small hideChange suffix="%" tickFormat={(x) => `${x.toFixed(2)}%`} - title={`${token} ${t('token:borrow-rates')} APR`} + title={`${bank?.name} ${t('token:borrow-rates')} APR`} xKey="date_hour" yKey={'borrow_apr'} /> diff --git a/components/token/TokenPage.tsx b/components/token/TokenPage.tsx index 42988c0d..3203dcca 100644 --- a/components/token/TokenPage.tsx +++ b/components/token/TokenPage.tsx @@ -173,7 +173,7 @@ const TokenPage = () => {
- +
()( }, tokenStats: { initialLoad: false, - loading: false, + loading: true, data: [], + mangoStats: [], }, tradeForm: DEFAULT_TRADE_FORM, tradingView: { @@ -838,9 +841,47 @@ const mangoStore = create()( `${MANGO_DATA_API_URL}/token-historical-stats?mango-group=${group?.publicKey.toString()}` ) const data = await response.json() - + let mangoStats: MangoTokenStatsItem[] = [] + if (data && data.length) { + mangoStats = data.reduce( + (a: MangoTokenStatsItem[], c: TokenStatsItem) => { + const banks = Array.from(group.banksMapByMint) + .map(([_mintAddress, banks]) => banks) + .map((b) => b[0]) + const bank: Bank | undefined = banks.find( + (b) => b.tokenIndex === c.token_index + ) + const hasDate = a.find( + (d: MangoTokenStatsItem) => d.date === c.date_hour + ) + if (!hasDate) { + a.push({ + date: c.date_hour, + depositValue: Math.floor(c.total_deposits * c.price), + borrowValue: Math.floor(c.total_borrows * c.price), + feesCollected: c.collected_fees * bank!.uiPrice, + }) + } else { + hasDate.depositValue = + hasDate.depositValue + + Math.floor(c.total_deposits * c.price) + hasDate.borrowValue = + hasDate.borrowValue + + Math.floor(c.total_borrows * c.price) + hasDate.feesCollected = + hasDate.feesCollected + c.collected_fees * bank!.uiPrice + } + return a.sort( + (a, b) => + new Date(a.date).getTime() - new Date(b.date).getTime() + ) + }, + [] + ) + } set((state) => { state.tokenStats.data = data + state.tokenStats.mangoStats = mangoStats state.tokenStats.initialLoad = true state.tokenStats.loading = false }) diff --git a/types/index.ts b/types/index.ts index 3f4dcd30..e63f7c07 100644 --- a/types/index.ts +++ b/types/index.ts @@ -342,6 +342,13 @@ export interface TokenStatsItem { total_deposits: number } +export interface MangoTokenStatsItem { + date: string + borrowValue: number + depositValue: number + feesCollected: number +} + export interface TradeForm { side: 'buy' | 'sell' price: string | undefined