blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #145 from blockworks-foundation/mango-stats-loading 

format mango stats outside of component
This commit is contained in:
tlrsssss 2023-05-04 13:49:34 -04:00 committed by GitHub
parent 5b88633501 2b13cf8c6c
commit a1d476eeba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 66 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/borrow/AssetsBorrowsTable.tsx
View File

@ -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 ? (

52
components/stats/TokenStatsCharts.tsx
View File

@ -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 (
<>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
<DetailedAreaChart
data={tokenStatsValues.concat([
data={mangoStats.concat([
{
date: dayjs().toISOString(),
depositValue: Math.floor(currentTotalDepositValue),
@ -112,7 +72,7 @@ const TokenStatsCharts = () => {
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
<DetailedAreaChart
data={tokenStatsValues.concat([
data={mangoStats.concat([
{
date: dayjs().toISOString(),
borrowValue: Math.floor(currentTotalBorrowValue),
@ -134,7 +94,7 @@ const TokenStatsCharts = () => {
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r md:pl-6">
<DetailedAreaChart
data={tokenStatsValues.concat([
data={mangoStats.concat([
{
date: dayjs().toISOString(),
borrowValue: Math.floor(currentTotalBorrowValue),
@ -156,7 +116,7 @@ const TokenStatsCharts = () => {
/>
</div>
</>
) : null
)
}
export default TokenStatsCharts

36
components/token/ChartTabs.tsx
View File

@ -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 (
<div className="grid grid-cols-1 md:grid-cols-2">
@ -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'}
/>

2
components/token/TokenPage.tsx
View File

@ -173,7 +173,7 @@ const TokenPage = () => {
</div>
<ActionPanel bank={bank} />
</div>
<ChartTabs token={bankName} />
<ChartTabs bank={bank} />
<div className="flex items-center justify-center border-y border-th-bkg-3 px-6 py-4 text-center">
<Tooltip
content={'The percentage of deposits that have been lent out.'}

45
store/mangoStore.ts
View File

@ -57,6 +57,7 @@ import {
NFT,
TourSettings,
ProfileDetails,
MangoTokenStatsItem,
} from 'types'
import spotBalancesUpdater from './spotBalancesUpdater'
import { PerpMarket } from '@blockworks-foundation/mango-v4/'
@ -211,6 +212,7 @@ export type MangoStore = {
initialLoad: boolean
loading: boolean
data: TokenStatsItem[] | null
mangoStats: MangoTokenStatsItem[]
}
tradeForm: TradeForm
tradingView: {
@ -363,8 +365,9 @@ const mangoStore = create<MangoStore>()(
},
tokenStats: {
initialLoad: false,
loading: false,
loading: true,
data: [],
mangoStats: [],
},
tradeForm: DEFAULT_TRADE_FORM,
tradingView: {
@ -838,9 +841,47 @@ const mangoStore = create<MangoStore>()(
`${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
})

7
types/index.ts
View File

@ -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