fix undefined error
This commit is contained in:
parent
87428a7233
commit
c02ef0ff48
|
@ -32,13 +32,12 @@ const getAverageStats = (
|
|||
symbol: string,
|
||||
type: string
|
||||
): string => {
|
||||
if (stats?.length > 0) {
|
||||
if (stats.length > 0) {
|
||||
const priorDate = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000)
|
||||
const selectedStatsData = stats.filter((s) => s.name === symbol)
|
||||
const timeFilteredStats = selectedStatsData.filter(
|
||||
(d) => new Date(d.time).getTime() >= priorDate.getTime()
|
||||
)
|
||||
|
||||
const oldestStat = timeFilteredStats[0]
|
||||
const latestStat = timeFilteredStats[timeFilteredStats.length - 1]
|
||||
const avg =
|
||||
|
@ -59,13 +58,12 @@ export default function StatsTotals({
|
|||
latestStats,
|
||||
stats,
|
||||
loadHistoricalStats,
|
||||
loadLatestStats,
|
||||
}) {
|
||||
const { t } = useTranslation('common')
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
|
||||
console.log(stats)
|
||||
|
||||
// get deposit and borrow values from stats
|
||||
const [depositValues, borrowValues]: [Values[], Values[]] = useMemo(() => {
|
||||
const depositValues: Values[] = []
|
||||
|
@ -250,17 +248,17 @@ export default function StatsTotals({
|
|||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
) : loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
{stats?.length > 0 ? (
|
||||
<div className="pb-8">
|
||||
<h2 className="mb-4">{t('average-deposit')}</h2>
|
||||
<div className="pb-8">
|
||||
<h2 className="mb-4">{t('average-deposit')}</h2>
|
||||
{stats.length && latestStats.length ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
|
@ -298,17 +296,17 @@ export default function StatsTotals({
|
|||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
) : loadHistoricalStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
{stats?.length > 0 ? (
|
||||
<>
|
||||
<h2 className="mb-4">{t('average-borrow')}</h2>
|
||||
) : loadHistoricalStats || loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<>
|
||||
<h2 className="mb-4">{t('average-borrow')}</h2>
|
||||
{stats.length && latestStats.length ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
|
@ -346,87 +344,104 @@ export default function StatsTotals({
|
|||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</>
|
||||
) : loadHistoricalStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
) : loadHistoricalStats || loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-8 border-b border-th-bkg-4">
|
||||
<h2 className="mb-4">{t('current-stats')}</h2>
|
||||
{latestStats.map((stat) => (
|
||||
<ExpandableRow
|
||||
buttonTemplate={
|
||||
<div className="grid w-full grid-cols-12 grid-rows-2 text-left sm:grid-rows-1 sm:text-right">
|
||||
<div className="text-fgd-1 col-span-12 sm:col-span-6">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${stat.name
|
||||
.split(/-|\//)[0]
|
||||
.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
{stat.name}
|
||||
{latestStats.length ? (
|
||||
latestStats.map((stat) => (
|
||||
<ExpandableRow
|
||||
buttonTemplate={
|
||||
<div className="grid w-full grid-cols-12 grid-rows-2 text-left sm:grid-rows-1 sm:text-right">
|
||||
<div className="text-fgd-1 col-span-12 sm:col-span-6">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
src={`/assets/icons/${stat.name
|
||||
.split(/-|\//)[0]
|
||||
.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
{stat.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-6 sm:col-span-3">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('total-deposits')}
|
||||
</div>
|
||||
{formatNumberString(stat.totalDeposits, 0)}
|
||||
</div>
|
||||
<div className="col-span-6 sm:col-span-3">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('total-borrows')}
|
||||
</div>
|
||||
{formatNumberString(stat.totalBorrows, 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-6 sm:col-span-3">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('total-deposits')}
|
||||
}
|
||||
key={stat.name}
|
||||
panelTemplate={
|
||||
<div className="grid grid-flow-row grid-cols-2 gap-4">
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('deposit-rate')}
|
||||
</div>
|
||||
<span className="text-th-green">
|
||||
{formatNumberString(
|
||||
stat.depositInterest.toNumber(),
|
||||
2
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
{formatNumberString(stat.totalDeposits, 0)}
|
||||
</div>
|
||||
<div className="col-span-6 sm:col-span-3">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('total-borrows')}
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('borrow-rate')}
|
||||
</div>
|
||||
<span className="text-th-red">
|
||||
{formatNumberString(
|
||||
stat.borrowInterest.toNumber(),
|
||||
2
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
{formatNumberString(stat.totalBorrows, 0)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
key={stat.name}
|
||||
panelTemplate={
|
||||
<div className="grid grid-flow-row grid-cols-2 gap-4">
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('deposit-rate')}
|
||||
</div>
|
||||
<span className="text-th-green">
|
||||
{formatNumberString(stat.depositInterest.toNumber(), 2)}
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('utilization')}
|
||||
</div>
|
||||
{formatNumberString(
|
||||
stat.utilization
|
||||
.mul(I80F48.fromNumber(100))
|
||||
.toNumber(),
|
||||
2
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('borrow-rate')}
|
||||
</div>
|
||||
<span className="text-th-red">
|
||||
{formatNumberString(stat.borrowInterest.toNumber(), 2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="pb-0.5 text-xs text-th-fgd-3">
|
||||
{t('utilization')}
|
||||
</div>
|
||||
{formatNumberString(
|
||||
stat.utilization.mul(I80F48.fromNumber(100)).toNumber(),
|
||||
2
|
||||
)}
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
}
|
||||
/>
|
||||
))
|
||||
) : loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{stats?.length > 0 ? (
|
||||
{stats.length && latestStats.length ? (
|
||||
<div className="mb-8 border-b border-th-bkg-4">
|
||||
<h2 className="mb-4">{t('average-deposit')}</h2>
|
||||
{latestStats.map((stat) => (
|
||||
|
@ -462,14 +477,14 @@ export default function StatsTotals({
|
|||
</Row>
|
||||
))}
|
||||
</div>
|
||||
) : loadHistoricalStats ? (
|
||||
) : loadHistoricalStats || loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
</>
|
||||
) : null}
|
||||
{stats?.length > 0 ? (
|
||||
{stats.length && latestStats.length ? (
|
||||
<div className="mb-4 border-b border-th-bkg-4">
|
||||
<h2 className="mb-4">{t('average-borrow')}</h2>
|
||||
{latestStats.map((stat) => (
|
||||
|
@ -505,7 +520,7 @@ export default function StatsTotals({
|
|||
</Row>
|
||||
))}
|
||||
</div>
|
||||
) : loadHistoricalStats ? (
|
||||
) : loadHistoricalStats || loadLatestStats ? (
|
||||
<>
|
||||
<div className="h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
<div className="mt-1 h-8 w-full animate-pulse rounded bg-th-bkg-3" />
|
||||
|
|
|
@ -29,6 +29,7 @@ const useMangoStats = () => {
|
|||
},
|
||||
])
|
||||
const [latestStats, setLatestStats] = useState<any[]>([])
|
||||
const [loadLatestStats, setLoadLatestStats] = useState<boolean>(false)
|
||||
const [loadHistoricalStats, setLoadHistoricalStats] = useState<boolean>(false)
|
||||
const [loadPerpStats, setLoadPerpStats] = useState<boolean>(false)
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
|
@ -38,8 +39,8 @@ const useMangoStats = () => {
|
|||
|
||||
useEffect(() => {
|
||||
const fetchHistoricalStats = async () => {
|
||||
setLoadHistoricalStats(true)
|
||||
try {
|
||||
setLoadHistoricalStats(true)
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/spot_stats_hourly?mango-group=${mangoGroupName}`
|
||||
)
|
||||
|
@ -55,8 +56,8 @@ const useMangoStats = () => {
|
|||
|
||||
useEffect(() => {
|
||||
const fetchHistoricalPerpStats = async () => {
|
||||
setLoadPerpStats(true)
|
||||
try {
|
||||
setLoadPerpStats(true)
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/perp_stats_hourly?mango-group=${mangoGroupName}`
|
||||
)
|
||||
|
@ -73,6 +74,7 @@ const useMangoStats = () => {
|
|||
useEffect(() => {
|
||||
const getLatestStats = async () => {
|
||||
if (mangoGroup) {
|
||||
setLoadLatestStats(true)
|
||||
const rootBanks = await mangoGroup.loadRootBanks(connection)
|
||||
if (!config) return
|
||||
const latestStats = config.tokens.map((token) => {
|
||||
|
@ -109,13 +111,21 @@ const useMangoStats = () => {
|
|||
}
|
||||
})
|
||||
setLatestStats(latestStats)
|
||||
setLoadLatestStats(false)
|
||||
}
|
||||
}
|
||||
|
||||
getLatestStats()
|
||||
}, [mangoGroup])
|
||||
|
||||
return { latestStats, stats, perpStats, loadHistoricalStats, loadPerpStats }
|
||||
return {
|
||||
latestStats,
|
||||
loadLatestStats,
|
||||
stats,
|
||||
perpStats,
|
||||
loadHistoricalStats,
|
||||
loadPerpStats,
|
||||
}
|
||||
}
|
||||
|
||||
export default useMangoStats
|
||||
|
|
|
@ -27,8 +27,14 @@ export async function getStaticProps({ locale }) {
|
|||
export default function StatsPage() {
|
||||
const { t } = useTranslation('common')
|
||||
const TABS = ['Totals', 'Assets', 'Perps']
|
||||
const { latestStats, stats, perpStats, loadHistoricalStats, loadPerpStats } =
|
||||
useMangoStats()
|
||||
const {
|
||||
latestStats,
|
||||
loadLatestStats,
|
||||
stats,
|
||||
perpStats,
|
||||
loadHistoricalStats,
|
||||
loadPerpStats,
|
||||
} = useMangoStats()
|
||||
const [viewIndex, setViewIndex] = useState(0)
|
||||
const [activeTab, setActiveTab] = useState(TABS[0])
|
||||
const { width } = useViewport()
|
||||
|
@ -77,6 +83,7 @@ export default function StatsPage() {
|
|||
stats={stats}
|
||||
loadHistoricalStats={loadHistoricalStats}
|
||||
loadPerpStats={loadPerpStats}
|
||||
loadLatestStats={loadLatestStats}
|
||||
/>
|
||||
) : (
|
||||
<Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
|
||||
|
@ -84,6 +91,7 @@ export default function StatsPage() {
|
|||
latestStats={latestStats}
|
||||
stats={stats}
|
||||
loadHistoricalStats={loadHistoricalStats}
|
||||
loadLatestStats={loadLatestStats}
|
||||
/>
|
||||
<StatsAssets
|
||||
latestStats={latestStats}
|
||||
|
@ -106,6 +114,7 @@ const TabContent = ({
|
|||
stats,
|
||||
loadHistoricalStats,
|
||||
loadPerpStats,
|
||||
loadLatestStats,
|
||||
}) => {
|
||||
switch (activeTab) {
|
||||
case 'Totals':
|
||||
|
@ -114,6 +123,7 @@ const TabContent = ({
|
|||
latestStats={latestStats}
|
||||
stats={stats}
|
||||
loadHistoricalStats={loadHistoricalStats}
|
||||
loadLatestStats={loadLatestStats}
|
||||
/>
|
||||
)
|
||||
case 'Assets':
|
||||
|
@ -132,6 +142,7 @@ const TabContent = ({
|
|||
latestStats={latestStats}
|
||||
stats={stats}
|
||||
loadHistoricalStats={loadHistoricalStats}
|
||||
loadLatestStats={loadLatestStats}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue