585 lines
20 KiB
TypeScript
585 lines
20 KiB
TypeScript
import { I80F48 } from '@blockworks-foundation/mango-client'
|
|
import Chart from '../Chart'
|
|
import { tokenPrecision } from '../../utils'
|
|
import { useViewport } from '../../hooks/useViewport'
|
|
import { breakpoints } from '../TradePageGrid'
|
|
import { Table, Td, Th, TrBody, TrHead } from '../TableElements'
|
|
import { ExpandableRow, Row } from '../TableElements'
|
|
|
|
function formatNumberString(x: number, decimals): string {
|
|
return new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: decimals,
|
|
maximumFractionDigits: decimals,
|
|
}).format(x)
|
|
}
|
|
|
|
export default function StatsTotals({ latestStats, stats }) {
|
|
const startTimestamp = 1622905200000
|
|
const { width } = useViewport()
|
|
const isMobile = width ? width < breakpoints.sm : false
|
|
|
|
const trimmedStats = stats.filter(
|
|
(stat) => new Date(stat.hourly).getTime() >= startTimestamp
|
|
)
|
|
|
|
// get deposit and borrow values from stats
|
|
const depositValues = []
|
|
const borrowValues = []
|
|
|
|
for (let i = 0; i < trimmedStats.length; i++) {
|
|
const depositValue =
|
|
trimmedStats[i].name === 'USDC'
|
|
? trimmedStats[i].totalDeposits
|
|
: trimmedStats[i].totalDeposits * trimmedStats[i].baseOraclePrice
|
|
|
|
const borrowValue =
|
|
trimmedStats[i].name === 'USDC'
|
|
? trimmedStats[i].totalBorrows
|
|
: trimmedStats[i].totalBorrows * trimmedStats[i].baseOraclePrice
|
|
|
|
depositValues.push({
|
|
name: trimmedStats[i].name,
|
|
value: depositValue,
|
|
time: trimmedStats[i].hourly,
|
|
})
|
|
|
|
if (borrowValue) {
|
|
borrowValues.push({
|
|
name: trimmedStats[i].name,
|
|
value: borrowValue,
|
|
time: trimmedStats[i].hourly,
|
|
})
|
|
}
|
|
}
|
|
|
|
const formatValues = (values) => {
|
|
// get value for each symbol every hour
|
|
const hours = values.reduce((acc, d) => {
|
|
const found = acc.find((a) => a.time === d.time && a.name === d.name)
|
|
const value = {
|
|
value: d.value,
|
|
name: d.name,
|
|
time: d.time,
|
|
}
|
|
if (!found) {
|
|
acc.push(value)
|
|
} else {
|
|
found.value = d.value
|
|
}
|
|
return acc
|
|
}, [])
|
|
|
|
// sum the values for each hour
|
|
const holder = {}
|
|
|
|
hours.forEach(function (d) {
|
|
if (d.time in holder) {
|
|
holder[d.time] = holder[d.time] + d.value
|
|
} else {
|
|
holder[d.time] = d.value
|
|
}
|
|
})
|
|
|
|
const points = []
|
|
|
|
for (const prop in holder) {
|
|
points.push({ time: prop, value: holder[prop] })
|
|
}
|
|
return points
|
|
}
|
|
|
|
const dailyStartTime = new Date(
|
|
Date.now() - 1 * 24 * 60 * 60 * 1000
|
|
).getTime()
|
|
const weeklyStartTime = new Date(
|
|
Date.now() - 7 * 24 * 60 * 60 * 1000
|
|
).getTime()
|
|
const monthlyStartTime = new Date(
|
|
Date.now() - 30 * 24 * 60 * 60 * 1000
|
|
).getTime()
|
|
|
|
const getAverageStats = (stats, startFrom, symbol, type) => {
|
|
const selectedStatsData = stats.filter((s) => s.name === symbol)
|
|
const timeFilteredStats = selectedStatsData.filter(
|
|
(d) => new Date(d.time).getTime() > startFrom
|
|
)
|
|
const sum = timeFilteredStats.map((s) => s[type]).reduce((a, b) => a + b, 0)
|
|
const avg = sum / timeFilteredStats.length || 0
|
|
|
|
return (avg * 100).toFixed(4)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-4 pb-8">
|
|
<div
|
|
className="border border-th-bkg-3 relative md:mb-0 p-4 rounded-md"
|
|
style={{ height: '300px' }}
|
|
>
|
|
<Chart
|
|
title="Total Deposit Value"
|
|
xAxis="time"
|
|
yAxis="value"
|
|
data={formatValues(depositValues)}
|
|
labelFormat={(x) =>
|
|
x &&
|
|
'$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
}
|
|
type="area"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="border border-th-bkg-3 relative p-4 rounded-md"
|
|
style={{ height: '300px' }}
|
|
>
|
|
<Chart
|
|
title="Total Borrow Value"
|
|
xAxis="time"
|
|
yAxis="value"
|
|
data={formatValues(borrowValues)}
|
|
labelFormat={(x) =>
|
|
x &&
|
|
'$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
}
|
|
type="area"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{!isMobile ? (
|
|
<>
|
|
<div className="pb-8">
|
|
<div className="pb-4 text-th-fgd-1 text-lg">Current Stats</div>
|
|
{latestStats.length > 0 ? (
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th>Asset</Th>
|
|
<Th>Total Deposits</Th>
|
|
<Th>Total Borrows</Th>
|
|
<Th>Deposit Rate</Th>
|
|
<Th>Borrow Rate</Th>
|
|
<Th>Utilization</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{latestStats.map((stat, index) => (
|
|
<TrBody key={stat.name} index={index}>
|
|
<Td>
|
|
<div className="flex items-center">
|
|
<img
|
|
alt=""
|
|
width="20"
|
|
height="20"
|
|
src={`/assets/icons/${stat.name.toLowerCase()}.svg`}
|
|
className={`mr-2.5`}
|
|
/>
|
|
{stat.name}
|
|
</div>
|
|
</Td>
|
|
<Td>
|
|
{formatNumberString(
|
|
stat.totalDeposits,
|
|
tokenPrecision[stat.name]
|
|
)}
|
|
</Td>
|
|
<Td>
|
|
{formatNumberString(
|
|
stat.totalBorrows,
|
|
tokenPrecision[stat.name]
|
|
)}
|
|
</Td>
|
|
<Td>
|
|
<span className="text-th-green">
|
|
{formatNumberString(
|
|
stat.depositInterest.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</span>
|
|
</Td>
|
|
<Td>
|
|
<span className="text-th-red">
|
|
{formatNumberString(
|
|
stat.borrowInterest.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</span>
|
|
</Td>
|
|
<Td>
|
|
{formatNumberString(
|
|
stat.utilization
|
|
.mul(I80F48.fromNumber(100))
|
|
.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</Td>
|
|
</TrBody>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="pb-8">
|
|
<div className="pb-4 text-th-fgd-1 text-lg">
|
|
Average Deposit Rates
|
|
</div>
|
|
{stats.length > 1 ? (
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th>Asset</Th>
|
|
<Th>24h</Th>
|
|
<Th>7d</Th>
|
|
<Th>30d</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{latestStats.map((stat, index) => (
|
|
<TrBody key={stat.name} index={index}>
|
|
<Td>
|
|
<div className="flex items-center">
|
|
<img
|
|
alt=""
|
|
width="20"
|
|
height="20"
|
|
src={`/assets/icons/${stat.name.toLowerCase()}.svg`}
|
|
className={`mr-2.5`}
|
|
/>
|
|
{stat.name}
|
|
</div>
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
dailyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
weeklyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
monthlyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
</TrBody>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="pb-4 text-th-fgd-1 text-lg">Average Borrow Rates</div>
|
|
{stats.length > 1 ? (
|
|
<Table>
|
|
<thead>
|
|
<TrHead>
|
|
<Th>Asset</Th>
|
|
<Th>24h</Th>
|
|
<Th>7d</Th>
|
|
<Th>30d</Th>
|
|
</TrHead>
|
|
</thead>
|
|
<tbody>
|
|
{latestStats.map((stat, index) => (
|
|
<TrBody key={stat.name} index={index}>
|
|
<Td>
|
|
<div className="flex items-center">
|
|
<img
|
|
alt=""
|
|
width="20"
|
|
height="20"
|
|
src={`/assets/icons/${stat.name.toLowerCase()}.svg`}
|
|
className={`mr-2.5`}
|
|
/>
|
|
{stat.name}
|
|
</div>
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
dailyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
weeklyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
<Td>
|
|
{getAverageStats(
|
|
stats,
|
|
monthlyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</Td>
|
|
</TrBody>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="pb-8">
|
|
<div className="pb-4 text-th-fgd-1 text-lg">Current Stats</div>
|
|
{latestStats.map((stat, index) =>
|
|
latestStats.length > 0 ? (
|
|
<ExpandableRow
|
|
buttonTemplate={
|
|
<div className="col-span-11">
|
|
<div className="col-span-11 flex items-center pb-4 text-fgd-1">
|
|
<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="grid grid-cols-11 grid-rows-1 gap-4">
|
|
<div className="col-span-6 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
|
Total Deposits
|
|
</div>
|
|
{formatNumberString(stat.totalDeposits, 0)}
|
|
</div>
|
|
<div className="col-span-5 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
|
Total Borrows
|
|
</div>
|
|
{formatNumberString(stat.totalBorrows, 0)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
key={stat.name}
|
|
index={index}
|
|
panelTemplate={
|
|
<>
|
|
<div className="col-span-1 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
|
Deposit Rate
|
|
</div>
|
|
<span className="text-th-green">
|
|
{formatNumberString(
|
|
stat.depositInterest.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</span>
|
|
</div>
|
|
<div className="col-span-1 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
|
Borrow Rate
|
|
</div>
|
|
<span className="text-th-red">
|
|
{formatNumberString(
|
|
stat.borrowInterest.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</span>
|
|
</div>
|
|
<div className="col-span-1 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">
|
|
Utilization
|
|
</div>
|
|
{formatNumberString(
|
|
stat.utilization
|
|
.mul(I80F48.fromNumber(100))
|
|
.toNumber(),
|
|
2
|
|
)}
|
|
%
|
|
</div>
|
|
</>
|
|
}
|
|
/>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="pb-8">
|
|
<div className="pb-4 text-th-fgd-1 text-lg">
|
|
Average Deposit Rates
|
|
</div>
|
|
{latestStats.map((stat, index) =>
|
|
stats.length > 1 ? (
|
|
<Row key={stat.name} index={index}>
|
|
<div className="col-span-12">
|
|
<div className="col-span-12 flex items-center pb-4 text-fgd-1">
|
|
<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="grid grid-cols-12 grid-rows-1 gap-4">
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">24h</div>
|
|
{getAverageStats(
|
|
stats,
|
|
dailyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</div>
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
|
|
{getAverageStats(
|
|
stats,
|
|
weeklyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</div>
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">30d</div>
|
|
{getAverageStats(
|
|
stats,
|
|
monthlyStartTime,
|
|
stat.name,
|
|
'depositRate'
|
|
)}
|
|
%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Row>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="pb-4 text-th-fgd-1 text-lg">Average Borrow Rates</div>
|
|
{latestStats.map((stat, index) =>
|
|
stats.length > 1 ? (
|
|
<Row key={stat.name} index={index}>
|
|
<div className="col-span-12">
|
|
<div className="col-span-12 flex items-center pb-4 text-fgd-1">
|
|
<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="grid grid-cols-12 grid-rows-1 gap-4">
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">24h</div>
|
|
{getAverageStats(
|
|
stats,
|
|
dailyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</div>
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
|
|
{getAverageStats(
|
|
stats,
|
|
weeklyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</div>
|
|
<div className="col-span-4 text-left">
|
|
<div className="pb-0.5 text-th-fgd-3 text-xs">30d</div>
|
|
{getAverageStats(
|
|
stats,
|
|
monthlyStartTime,
|
|
stat.name,
|
|
'borrowRate'
|
|
)}
|
|
%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Row>
|
|
) : (
|
|
<>
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
<div className="animate-pulse bg-th-bkg-3 h-8 mt-1 rounded w-full" />
|
|
</>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|