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