hourly account interest chart
This commit is contained in:
Tyler Shipe
parent
5824d71db1
commit
76bf0a0320
|
|
@ -1,6 +1,9 @@
|
|||
import { getTokenBySymbol } from '@blockworks-foundation/mango-client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import Chart from '../Chart'
|
||||
import Loading from '../Loading'
|
||||
import Select from '../Select'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '../TableElements'
|
||||
|
||||
interface InterestStats {
|
||||
|
|
@ -14,19 +17,48 @@ const AccountInterest = () => {
|
|||
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
|
||||
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
|
||||
const [interestStats, setInterestStats] = useState<any>([])
|
||||
const [hourlyInterestStats, setHourlyInterestStats] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [selectedAsset, setSelectedAsset] = useState<string>('USDC')
|
||||
|
||||
const mangoAccountPk = useMemo(() => {
|
||||
return mangoAccount.publicKey.toString()
|
||||
}, [mangoAccount])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchInterestStats = async () => {
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/total-interest-earned?mango-account=${mangoAccount.publicKey}`
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/total-interest-earned?mango-account=${mangoAccountPk}`
|
||||
)
|
||||
const parsedResponse: InterestStats = await response.json()
|
||||
|
||||
setInterestStats(Object.entries(parsedResponse))
|
||||
}
|
||||
|
||||
const fetchHourlyInterestStats = async () => {
|
||||
setLoading(true)
|
||||
const response = await fetch(
|
||||
`https://mango-transaction-log.herokuapp.com/v3/stats/hourly-interest?mango-account=${mangoAccountPk}`
|
||||
)
|
||||
const parsedResponse = await response.json()
|
||||
|
||||
const assets = Object.keys(parsedResponse)
|
||||
|
||||
const stats = {}
|
||||
for (const asset of assets) {
|
||||
const x = Object.entries(parsedResponse[asset])
|
||||
stats[asset] = x.map(([key, value]) => {
|
||||
// @ts-ignore
|
||||
return { ...value, time: key }
|
||||
})
|
||||
}
|
||||
setLoading(false)
|
||||
setHourlyInterestStats(stats)
|
||||
}
|
||||
|
||||
fetchHourlyInterestStats()
|
||||
fetchInterestStats()
|
||||
}, [mangoAccount])
|
||||
}, [mangoAccountPk])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -34,6 +66,7 @@ const AccountInterest = () => {
|
|||
Total Interest Earned/Paid
|
||||
</div>
|
||||
{mangoAccount ? (
|
||||
<div>
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
|
|
@ -54,7 +87,10 @@ const AccountInterest = () => {
|
|||
</TrBody>
|
||||
) : (
|
||||
interestStats.map(([symbol, stats], index) => {
|
||||
const decimals = getTokenBySymbol(groupConfig, symbol).decimals
|
||||
const decimals = getTokenBySymbol(
|
||||
groupConfig,
|
||||
symbol
|
||||
).decimals
|
||||
return (
|
||||
<TrBody index={index} key={symbol}>
|
||||
<Td>
|
||||
|
|
@ -71,7 +107,8 @@ const AccountInterest = () => {
|
|||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
{stats.total_deposit_interest.toFixed(decimals)} {symbol}
|
||||
{stats.total_deposit_interest.toFixed(decimals)}{' '}
|
||||
{symbol}
|
||||
</Td>
|
||||
<Td>
|
||||
{stats.total_borrow_interest.toFixed(decimals)} {symbol}
|
||||
|
|
@ -89,6 +126,86 @@ const AccountInterest = () => {
|
|||
)}
|
||||
</tbody>
|
||||
</Table>
|
||||
<>
|
||||
{hourlyInterestStats && !loading ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between my-4 w-full">
|
||||
<Select
|
||||
value={selectedAsset}
|
||||
onChange={(a) => setSelectedAsset(a)}
|
||||
className="w-24 sm:hidden"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{Object.keys(hourlyInterestStats).map((token: string) => (
|
||||
<Select.Option
|
||||
key={token}
|
||||
value={token}
|
||||
className={`bg-th-bkg-1 relative rounded-md w-full px-3 py-3 cursor-pointer default-transition flex hover:bg-th-bkg-3 focus:outline-none`}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
{token}
|
||||
</div>
|
||||
</Select.Option>
|
||||
))}
|
||||
</div>
|
||||
</Select>
|
||||
<div className="hidden sm:flex pb-4 sm:pb-0">
|
||||
{Object.keys(hourlyInterestStats).map((token: string) => (
|
||||
<div
|
||||
className={`px-2 py-1 ml-2 rounded-md cursor-pointer default-transition bg-th-bkg-3
|
||||
${
|
||||
selectedAsset === token
|
||||
? `ring-1 ring-inset ring-th-primary text-th-primary`
|
||||
: `text-th-fgd-1 opacity-50 hover:opacity-100`
|
||||
}
|
||||
`}
|
||||
onClick={() => setSelectedAsset(token)}
|
||||
key={token}
|
||||
>
|
||||
{token}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-flow-col grid-cols-1 grid-rows-4 gap-2 sm:gap-4">
|
||||
<div
|
||||
className="border border-th-bkg-4 relative md:mb-0 p-4 rounded-md"
|
||||
style={{ height: '330px' }}
|
||||
>
|
||||
<Chart
|
||||
title="Hourly Deposit Interest"
|
||||
xAxis="time"
|
||||
yAxis="deposit_interest"
|
||||
data={hourlyInterestStats[selectedAsset]}
|
||||
labelFormat={(x) => x.toFixed(6)}
|
||||
type="area"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="border border-th-bkg-4 relative p-4 rounded-md"
|
||||
style={{ height: '330px' }}
|
||||
>
|
||||
<Chart
|
||||
title="Hourly Borrow Interest"
|
||||
xAxis="time"
|
||||
yAxis="borrow_interest"
|
||||
data={hourlyInterestStats[selectedAsset]}
|
||||
labelFormat={(x) => x.toFixed(6)}
|
||||
type="area"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : loading ? (
|
||||
<div className="flex justify-center my-8">
|
||||
<div>
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
<div>Connect wallet</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue