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

show hourly stats when only 1 day of data

This commit is contained in:
saml33 2021-12-18 22:19:57 +11:00
parent 6ea9a2b37e
commit 7c857ca974
3 changed files with 140 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Chart.tsx
View File

@ -7,6 +7,7 @@ import { numberCompactFormatter } from '../utils'
interface ChartProps { interface ChartProps {
data: any data: any
daysRange?: number
hideRangeFilters?: boolean hideRangeFilters?: boolean
title?: string title?: string
xAxis: string xAxis: string
@ -22,6 +23,7 @@ const Chart: FunctionComponent<ChartProps> = ({
xAxis, xAxis,
yAxis, yAxis,
data, data,
daysRange,
labelFormat, labelFormat,
tickFormat, tickFormat,
type, type,
@ -29,7 +31,7 @@ const Chart: FunctionComponent<ChartProps> = ({
yAxisWidth, yAxisWidth,
}) => { }) => {
const [mouseData, setMouseData] = useState<string | null>(null) const [mouseData, setMouseData] = useState<string | null>(null)
const [daysToShow, setDaysToShow] = useState(30) const [daysToShow, setDaysToShow] = useState(daysRange || 30)
const { observe, width, height } = useDimensions() const { observe, width, height } = useDimensions()
const { theme } = useTheme() const { theme } = useTheme()
@ -186,7 +188,13 @@ const Chart: FunctionComponent<ChartProps> = ({
<BarChart <BarChart
width={width} width={width}
height={height} height={height}
data={data ? handleDaysToShow(daysToShow) : null} data={
data
? hideRangeFilters
? data
: handleDaysToShow(daysToShow)
: null
}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >

159
components/account_page/AccountFunding.tsx
View File

@ -27,7 +27,8 @@ const AccountFunding = () => {
const [fundingStats, setFundingStats] = useState<any>([]) const [fundingStats, setFundingStats] = useState<any>([])
const [hourlyFunding, setHourlyFunding] = useState<any>([]) const [hourlyFunding, setHourlyFunding] = useState<any>([])
const [selectedAsset, setSelectedAsset] = useState<string>('BTC') const [selectedAsset, setSelectedAsset] = useState<string>('BTC')
const [loading, setLoading] = useState(false) const [loadHourlyStats, setLoadHourlyStats] = useState(false)
const [loadTotalStats, setLoadTotalStats] = useState(false)
const { const {
paginatedData, paginatedData,
setData, setData,
@ -43,6 +44,7 @@ const AccountFunding = () => {
false false
) )
const [chartData, setChartData] = useState([]) const [chartData, setChartData] = useState([])
const [showHours, setShowHours] = useState(false)
const mangoAccountPk = useMemo(() => { const mangoAccountPk = useMemo(() => {
return mangoAccount.publicKey.toString() return mangoAccount.publicKey.toString()
@ -83,6 +85,7 @@ const AccountFunding = () => {
useEffect(() => { useEffect(() => {
const hideDust = [] const hideDust = []
const fetchFundingStats = async () => { const fetchFundingStats = async () => {
setLoadTotalStats(true)
const response = await fetch( const response = await fetch(
`https://mango-transaction-log.herokuapp.com/v3/stats/total-funding?mango-account=${mangoAccountPk}` `https://mango-transaction-log.herokuapp.com/v3/stats/total-funding?mango-account=${mangoAccountPk}`
) )
@ -95,14 +98,16 @@ const AccountFunding = () => {
hideDust.push(r) hideDust.push(r)
} }
}) })
setLoadTotalStats(false)
setFundingStats(hideDust) setFundingStats(hideDust)
} else { } else {
setLoadTotalStats(false)
setFundingStats(Object.entries(parsedResponse)) setFundingStats(Object.entries(parsedResponse))
} }
} }
const fetchHourlyFundingStats = async () => { const fetchHourlyFundingStats = async () => {
setLoading(true) setLoadHourlyStats(true)
const response = await fetch( const response = await fetch(
`https://mango-transaction-log.herokuapp.com/v3/stats/hourly-funding?mango-account=${mangoAccountPk}` `https://mango-transaction-log.herokuapp.com/v3/stats/hourly-funding?mango-account=${mangoAccountPk}`
) )
@ -139,7 +144,7 @@ const AccountFunding = () => {
.reverse() .reverse()
} }
setLoading(false) setLoadHourlyStats(false)
setHourlyFunding(stats) setHourlyFunding(stats)
} }
@ -173,12 +178,25 @@ const AccountFunding = () => {
found.funding = found.funding + newFunding found.funding = found.funding + newFunding
} else { } else {
dailyFunding.push({ dailyFunding.push({
time: new Date(d.time).getTime(), time: d.time,
funding: d.total_funding, funding: d.total_funding,
}) })
} }
}) })
setChartData(dailyFunding.reverse()) if (dailyFunding.length <= 1) {
const chartFunding = []
hourlyFunding[selectedAsset].forEach((a) => {
chartFunding.push({
funding: a.total_funding,
time: a.time,
})
})
setShowHours(true)
setChartData(chartFunding.reverse())
} else {
setShowHours(false)
setChartData(dailyFunding.reverse())
}
} }
}, [hourlyFunding, selectedAsset]) }, [hourlyFunding, selectedAsset])
@ -188,8 +206,6 @@ const AccountFunding = () => {
} }
}, [hourlyFunding]) }, [hourlyFunding])
const increaseYAxisWidth = !!chartData.find((data) => data.value < 0.001)
return ( return (
<> <>
<div className="flex items-center justify-between pb-4"> <div className="flex items-center justify-between pb-4">
@ -215,64 +231,72 @@ const AccountFunding = () => {
</div> </div>
{mangoAccount ? ( {mangoAccount ? (
<div> <div>
<Table> {loadTotalStats ? (
<thead> <div className="space-y-2">
<TrHead> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<Th>{t('token')}</Th> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<Th>{t('total-funding')} (USDC)</Th> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
</TrHead> </div>
</thead> ) : (
<tbody> <Table>
{fundingStats.length === 0 ? ( <thead>
<TrBody index={0}> <TrHead>
<td colSpan={4}> <Th>{t('token')}</Th>
<div className="flex"> <Th>{t('total-funding')} (USDC)</Th>
<div className="mx-auto py-4 text-th-fgd-3"> </TrHead>
{t('no-funding')} </thead>
<tbody>
{fundingStats.length === 0 ? (
<TrBody index={0}>
<td colSpan={4}>
<div className="flex">
<div className="mx-auto py-4 text-th-fgd-3">
{t('no-funding')}
</div>
</div> </div>
</div> </td>
</td> </TrBody>
</TrBody> ) : (
) : ( fundingStats.map(([symbol, stats], index) => {
fundingStats.map(([symbol, stats], index) => { return (
return ( <TrBody index={index} key={symbol}>
<TrBody index={index} key={symbol}> <Td className="w-1/2">
<Td> <div className="flex items-center">
<div className="flex items-center"> <img
<img alt=""
alt="" width="20"
width="20" height="20"
height="20" src={`/assets/icons/${symbol.toLowerCase()}.svg`}
src={`/assets/icons/${symbol.toLowerCase()}.svg`} className={`mr-2.5`}
className={`mr-2.5`} />
/> {symbol}-PERP
{symbol}-PERP </div>
</div> </Td>
</Td> <Td className="w-1/2">
<Td> <div
<div className={`${
className={`${ stats.total_funding > 0
stats.total_funding > 0 ? 'text-th-green'
? 'text-th-green' : stats.total_funding < 0
: stats.total_funding < 0 ? 'text-th-red'
? 'text-th-red' : 'text-th-fgd-3'
: 'text-th-fgd-3' }`}
}`} >
> {stats.total_funding
{stats.total_funding ? `${stats.total_funding?.toFixed(6)}`
? `${stats.total_funding?.toFixed(6)}` : '-'}
: '-'} </div>
</div> </Td>
</Td> </TrBody>
</TrBody> )
) })
}) )}
)} </tbody>
</tbody> </Table>
</Table> )}
<> <>
{!isEmpty(hourlyFunding) && !loading ? ( {!isEmpty(hourlyFunding) && !loadHourlyStats ? (
<> <>
<div className="flex items-center justify-between pb-4 pt-6 w-full"> <div className="flex items-center justify-between pb-4 pt-6 w-full">
<div className="text-th-fgd-1 text-lg">{t('history')}</div> <div className="text-th-fgd-1 text-lg">{t('history')}</div>
@ -320,6 +344,7 @@ const AccountFunding = () => {
style={{ height: '330px' }} style={{ height: '330px' }}
> >
<Chart <Chart
daysRange={showHours ? 1 : 30}
hideRangeFilters hideRangeFilters
title={t('funding-chart-title', { title={t('funding-chart-title', {
symbol: selectedAsset, symbol: selectedAsset,
@ -335,7 +360,7 @@ const AccountFunding = () => {
} }
tickFormat={handleDustTicks} tickFormat={handleDustTicks}
type="bar" type="bar"
yAxisWidth={increaseYAxisWidth ? 70 : 50} yAxisWidth={70}
/> />
</div> </div>
</div> </div>
@ -357,8 +382,10 @@ const AccountFunding = () => {
return ( return (
<TrBody index={index} key={stat.time}> <TrBody index={index} key={stat.time}>
<Td>{dayjs(utc).format('DD/MM/YY, h:mma')}</Td> <Td className="w-1/2">
<Td> {dayjs(utc).format('DD/MM/YY, h:mma')}
</Td>
<Td className="w-1/2">
{stat.total_funding.toFixed( {stat.total_funding.toFixed(
QUOTE_DECIMALS + 1 QUOTE_DECIMALS + 1
)} )}
@ -384,7 +411,7 @@ const AccountFunding = () => {
/> />
</div> </div>
</> </>
) : loading ? ( ) : loadHourlyStats ? (
<div className="pt-8 space-y-2"> <div className="pt-8 space-y-2">
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" /> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" /> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />

47
components/account_page/AccountInterest.tsx
View File

@ -58,9 +58,11 @@ const AccountInterest = () => {
const [interestStats, setInterestStats] = useState<any>([]) const [interestStats, setInterestStats] = useState<any>([])
const [hourlyInterestStats, setHourlyInterestStats] = useState<any>({}) const [hourlyInterestStats, setHourlyInterestStats] = useState<any>({})
// const [totalInterestValue, setTotalInterestValue] = useState(null) // const [totalInterestValue, setTotalInterestValue] = useState(null)
const [loading, setLoading] = useState(false) const [loadHourlyStats, setLoadHourlyStats] = useState(false)
const [loadTotalStats, setLoadTotalStats] = useState(false)
const [selectedAsset, setSelectedAsset] = useState<string>('') const [selectedAsset, setSelectedAsset] = useState<string>('')
const [chartData, setChartData] = useState([]) const [chartData, setChartData] = useState([])
const [showHours, setShowHours] = useState(false)
const { const {
paginatedData, paginatedData,
setData, setData,
@ -135,6 +137,7 @@ const AccountInterest = () => {
useEffect(() => { useEffect(() => {
const hideDust = [] const hideDust = []
const fetchInterestStats = async () => { const fetchInterestStats = async () => {
setLoadTotalStats(true)
const response = await fetch( const response = await fetch(
`https://mango-transaction-log.herokuapp.com/v3/stats/total-interest-earned?mango-account=${mangoAccountPk}` `https://mango-transaction-log.herokuapp.com/v3/stats/total-interest-earned?mango-account=${mangoAccountPk}`
) )
@ -154,6 +157,7 @@ const AccountInterest = () => {
hideDust.push(r) hideDust.push(r)
} }
}) })
setLoadTotalStats(false)
setInterestStats(hideDust) setInterestStats(hideDust)
} else { } else {
const stats = Object.entries(parsedResponse) const stats = Object.entries(parsedResponse)
@ -165,12 +169,13 @@ const AccountInterest = () => {
stats.total_deposit_interest > smallestValue stats.total_deposit_interest > smallestValue
) )
}) })
setLoadTotalStats(false)
setInterestStats(filterMicroBalances) setInterestStats(filterMicroBalances)
} }
} }
const fetchHourlyInterestStats = async () => { const fetchHourlyInterestStats = async () => {
setLoading(true) setLoadHourlyStats(true)
const response = await fetch( const response = await fetch(
`https://mango-transaction-log.herokuapp.com/v3/stats/hourly-interest-prices?mango-account=${mangoAccountPk}` `https://mango-transaction-log.herokuapp.com/v3/stats/hourly-interest-prices?mango-account=${mangoAccountPk}`
) )
@ -213,7 +218,7 @@ const AccountInterest = () => {
delete stats[asset] delete stats[asset]
} }
} }
setLoading(false) setLoadHourlyStats(false)
setHourlyInterestStats(stats) setHourlyInterestStats(stats)
} }
@ -282,7 +287,20 @@ const AccountInterest = () => {
}) })
} }
}) })
setChartData(dailyInterest.reverse()) if (dailyInterest.length <= 1) {
const chartFunding = []
hourlyInterestStats[selectedAsset].forEach((a) => {
chartFunding.push({
funding: a.total_funding,
time: a.time,
})
})
setShowHours(true)
setChartData(chartFunding.reverse())
} else {
setShowHours(false)
setChartData(dailyInterest.reverse())
}
} }
}, [hourlyInterestStats, selectedAsset]) }, [hourlyInterestStats, selectedAsset])
@ -313,7 +331,13 @@ const AccountInterest = () => {
</div> </div>
{mangoAccount ? ( {mangoAccount ? (
<div> <div>
{!isMobile ? ( {loadTotalStats ? (
<div className="space-y-2">
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
</div>
) : !isMobile ? (
<Table> <Table>
<thead> <thead>
<TrHead> <TrHead>
@ -454,7 +478,7 @@ const AccountInterest = () => {
</div> </div>
) : null} */} ) : null} */}
<> <>
{!isEmpty(hourlyInterestStats) && !loading ? ( {!isEmpty(hourlyInterestStats) && !loadHourlyStats ? (
<> <>
<div className="flex items-center justify-between pb-4 pt-8 w-full"> <div className="flex items-center justify-between pb-4 pt-8 w-full">
<div className="text-th-fgd-1 text-lg">{t('history')}</div> <div className="text-th-fgd-1 text-lg">{t('history')}</div>
@ -502,6 +526,7 @@ const AccountInterest = () => {
style={{ height: '330px' }} style={{ height: '330px' }}
> >
<Chart <Chart
daysRange={showHours ? 1 : 30}
hideRangeFilters hideRangeFilters
title={t('interest-chart-title', { title={t('interest-chart-title', {
symbol: selectedAsset, symbol: selectedAsset,
@ -556,8 +581,10 @@ const AccountInterest = () => {
const utc = dayjs.utc(stat.time).format() const utc = dayjs.utc(stat.time).format()
return ( return (
<TrBody index={index} key={stat.time}> <TrBody index={index} key={stat.time}>
<Td>{dayjs(utc).format('DD/MM/YY, h:mma')}</Td> <Td className="w-1/3">
<Td> {dayjs(utc).format('DD/MM/YY, h:mma')}
</Td>
<Td className="w-1/3">
{stat.borrow_interest > 0 {stat.borrow_interest > 0
? `-${stat.borrow_interest.toFixed( ? `-${stat.borrow_interest.toFixed(
token.decimals + 1 token.decimals + 1
@ -567,7 +594,7 @@ const AccountInterest = () => {
)}{' '} )}{' '}
{selectedAsset} {selectedAsset}
</Td> </Td>
<Td> <Td className="w-1/3">
{stat.borrow_interest > 0 {stat.borrow_interest > 0
? `-$${( ? `-$${(
stat.borrow_interest * stat.price stat.borrow_interest * stat.price
@ -597,7 +624,7 @@ const AccountInterest = () => {
/> />
</div> </div>
</> </>
) : loading ? ( ) : loadHourlyStats ? (
<div className="pt-8 space-y-2"> <div className="pt-8 space-y-2">
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" /> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" /> <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />