fix undefined error

This commit is contained in:
saml33 2022-06-23 21:35:07 +10:00
parent 87428a7233
commit c02ef0ff48
3 changed files with 132 additions and 96 deletions

View File

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

View File

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

View File

@ -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}
/>
)
}