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

add funding tooltip to stats page

This commit is contained in:
tjs 2023-04-17 17:34:33 -04:00
parent e9d3e80d24
commit 7f70915650
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/stats/PerpMarketsTable.tsx
View File

@ -21,6 +21,7 @@ import Tooltip from '@components/shared/Tooltip'
import { PerpStatsItem } from 'types' import { PerpStatsItem } from 'types'
import useMangoGroup from 'hooks/useMangoGroup' import useMangoGroup from 'hooks/useMangoGroup'
import { NextRouter, useRouter } from 'next/router' import { NextRouter, useRouter } from 'next/router'
import { InformationCircleIcon } from '@heroicons/react/24/outline'
const SimpleAreaChart = dynamic( const SimpleAreaChart = dynamic(
() => import('@components/shared/SimpleAreaChart'), () => import('@components/shared/SimpleAreaChart'),
{ ssr: false } { ssr: false }
@ -188,13 +189,30 @@ const PerpMarketsTable = () => {
</div> </div>
</Td> </Td>
<Td> <Td>
<div className="flex flex-col text-right"> <div className="flex items-center justify-end">
<p> <p className="">{fundingRate}</p>
{fundingRate} <Tooltip
<span className="mx-1">|</span> content={
{fundingRateApr}{' '} <>
<span className="font-body text-th-fgd-3">APR</span> {fundingRateApr ? (
</p> <div className="">
The 1hr rate as an APR is {fundingRateApr}.
</div>
) : null}
<div className="mt-2">
Funding is paid continuously. The 1hr rate
displayed is a rolling average of the past 60
mins.
</div>
<div className="mt-2">
When positive, longs will pay shorts and when
negative shorts pay longs.
</div>
</>
}
>
<InformationCircleIcon className="ml-2 h-4 w-4" />
</Tooltip>
</div> </div>
</Td> </Td>
<Td> <Td>

2
components/trade/PerpFundingRate.tsx
View File

@ -1,5 +1,5 @@
import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4' import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4'
import { InformationCircleIcon } from '@heroicons/react/20/solid' import { InformationCircleIcon } from '@heroicons/react/24/outline'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import useMangoGroup from 'hooks/useMangoGroup' import useMangoGroup from 'hooks/useMangoGroup'
import useSelectedMarket from 'hooks/useSelectedMarket' import useSelectedMarket from 'hooks/useSelectedMarket'