show more details on stats table
This commit is contained in:
parent
b866c5454b
commit
fb1199dc83
|
@ -5,7 +5,7 @@ import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
|||
import Button from '@components/shared/Button'
|
||||
import useOracleProvider from 'hooks/useOracleProvider'
|
||||
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
|
||||
// import Tooltip from '@components/shared/Tooltip'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
|
||||
interface PerpMarketDetailsModalProps {
|
||||
market: PerpMarket | undefined
|
||||
|
@ -83,8 +83,7 @@ const PerpMarketDetailsModal = ({
|
|||
<p className="text-th-fgd-2">{oracleProvider}</p>
|
||||
)}
|
||||
</div>
|
||||
{/* Uncomment when insurance fund is ready */}
|
||||
{/* <div className="flex justify-between">
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', { tokenOrMarket: market.name })}
|
||||
>
|
||||
|
@ -95,7 +94,7 @@ const PerpMarketDetailsModal = ({
|
|||
<p className="text-th-fgd-2">
|
||||
{market.groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="mt-6 w-full" onClick={onClose}>
|
||||
{t('close')}
|
||||
|
|
|
@ -6,11 +6,9 @@ import { Serum3Market } from '@blockworks-foundation/mango-v4'
|
|||
import Button from '@components/shared/Button'
|
||||
import useOracleProvider from 'hooks/useOracleProvider'
|
||||
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
|
||||
// import useMangoGroup from 'hooks/useMangoGroup'
|
||||
// import { useMemo } from 'react'
|
||||
// import Tooltip from '@components/shared/Tooltip'
|
||||
|
||||
// Uncomment code when insurance fund is ready
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import { useMemo } from 'react'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
|
||||
interface SpotMarketDetailsModalProps {
|
||||
market: Serum3Market | undefined
|
||||
|
@ -26,21 +24,21 @@ const SpotMarketDetailsModal = ({
|
|||
const { t } = useTranslation(['common', 'trade'])
|
||||
const { serumOrPerpMarket } = useSelectedMarket()
|
||||
const { oracleProvider, oracleLinkPath } = useOracleProvider()
|
||||
// const { group } = useMangoGroup()
|
||||
const { group } = useMangoGroup()
|
||||
|
||||
// const [baseBank, quoteBank] = useMemo(() => {
|
||||
// if (!group || !market) return [undefined, undefined]
|
||||
// const base = group.getFirstBankByTokenIndex(market.baseTokenIndex)
|
||||
// const quote = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
|
||||
// return [base, quote]
|
||||
// }, [group, market])
|
||||
const [baseBank, quoteBank] = useMemo(() => {
|
||||
if (!group || !market) return [undefined, undefined]
|
||||
const base = group.getFirstBankByTokenIndex(market.baseTokenIndex)
|
||||
const quote = group.getFirstBankByTokenIndex(market.quoteTokenIndex)
|
||||
return [base, quote]
|
||||
}, [group, market])
|
||||
|
||||
// const [baseMintInfo, quoteMintInfo] = useMemo(() => {
|
||||
// if (!baseBank || !quoteBank) return [undefined, undefined]
|
||||
// const base = group!.mintInfosMapByMint.get(baseBank.mint.toString())
|
||||
// const quote = group!.mintInfosMapByMint.get(quoteBank.mint.toString())
|
||||
// return [base, quote]
|
||||
// }, [baseBank, quoteBank])
|
||||
const [baseMintInfo, quoteMintInfo] = useMemo(() => {
|
||||
if (!baseBank || !quoteBank) return [undefined, undefined]
|
||||
const base = group!.mintInfosMapByMint.get(baseBank.mint.toString())
|
||||
const quote = group!.mintInfosMapByMint.get(quoteBank.mint.toString())
|
||||
return [base, quote]
|
||||
}, [baseBank, quoteBank])
|
||||
|
||||
return market && serumOrPerpMarket ? (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
|
@ -80,7 +78,7 @@ const SpotMarketDetailsModal = ({
|
|||
<p className="text-th-fgd-2">{oracleProvider}</p>
|
||||
)}
|
||||
</div>
|
||||
{/* {baseMintInfo ? (
|
||||
{baseMintInfo ? (
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', {
|
||||
|
@ -111,7 +109,7 @@ const SpotMarketDetailsModal = ({
|
|||
{quoteMintInfo.groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div>
|
||||
) : null} */}
|
||||
) : null}
|
||||
</div>
|
||||
<Button className="mt-6 w-full" onClick={onClose}>
|
||||
{t('close')}
|
||||
|
|
|
@ -9,11 +9,11 @@ import {
|
|||
ArrowTopRightOnSquareIcon,
|
||||
ChevronDownIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
// import Tooltip from '@components/shared/Tooltip'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
import { getOracleProvider } from 'hooks/useOracleProvider'
|
||||
|
||||
const PerpMarketSettingsTable = () => {
|
||||
const PerpMarketDetailsTable = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const perpMarkets = mangoStore((s) => s.perpMarkets)
|
||||
const { width } = useViewport()
|
||||
|
@ -33,8 +33,7 @@ const PerpMarketSettingsTable = () => {
|
|||
<Th className="text-right">{t('fees')}</Th>
|
||||
<Th className="text-right">{t('trade:funding-limits')}</Th>
|
||||
<Th className="text-right">{t('trade:oracle')}</Th>
|
||||
{/* Uncomment when insurance fund is ready */}
|
||||
{/* <Th className="text-right">
|
||||
<Th className="text-right">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', { tokenOrMarket: '' })}
|
||||
>
|
||||
|
@ -42,7 +41,7 @@ const PerpMarketSettingsTable = () => {
|
|||
{t('trade:insured', { token: '' })}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Th> */}
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -55,7 +54,7 @@ const PerpMarketSettingsTable = () => {
|
|||
maintBaseLiabWeight,
|
||||
makerFee,
|
||||
takerFee,
|
||||
// groupInsuranceFund,
|
||||
groupInsuranceFund,
|
||||
minFunding,
|
||||
maxFunding,
|
||||
publicKey,
|
||||
|
@ -124,11 +123,11 @@ const PerpMarketSettingsTable = () => {
|
|||
<p className="text-right font-body">{oracleProvider}</p>
|
||||
)}
|
||||
</Td>
|
||||
{/* <Td>
|
||||
<Td>
|
||||
<p className="text-right">
|
||||
{groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</Td> */}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
|
@ -145,7 +144,7 @@ const PerpMarketSettingsTable = () => {
|
|||
maintBaseLiabWeight,
|
||||
makerFee,
|
||||
takerFee,
|
||||
// groupInsuranceFund,
|
||||
groupInsuranceFund,
|
||||
minFunding,
|
||||
maxFunding,
|
||||
publicKey,
|
||||
|
@ -267,7 +266,7 @@ const PerpMarketSettingsTable = () => {
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* <div className="col-span-1">
|
||||
<div className="col-span-1">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', {
|
||||
tokenOrMarket: name,
|
||||
|
@ -281,7 +280,7 @@ const PerpMarketSettingsTable = () => {
|
|||
<p className="font-mono text-th-fgd-1">
|
||||
{groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
|
@ -296,4 +295,4 @@ const PerpMarketSettingsTable = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default PerpMarketSettingsTable
|
||||
export default PerpMarketDetailsTable
|
|
@ -46,7 +46,7 @@ const goToPerpMarketDetails = (market: PerpMarket, router: NextRouter) => {
|
|||
router.push({ pathname: router.pathname, query })
|
||||
}
|
||||
|
||||
const PerpMarketsTable = () => {
|
||||
const PerpMarketsOverviewTable = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const perpMarkets = mangoStore((s) => s.perpMarkets)
|
||||
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
||||
|
@ -258,7 +258,7 @@ const PerpMarketsTable = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default PerpMarketsTable
|
||||
export default PerpMarketsOverviewTable
|
||||
|
||||
const MobilePerpMarketItem = ({ market }: { market: PerpMarket }) => {
|
||||
const { t } = useTranslation('common')
|
|
@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import SecondaryTabBar from '@components/shared/SecondaryTabBar'
|
||||
import PerpMarketsInfoTable from './PerpMarketsInfoTable'
|
||||
import PerpMarketSettingsTable from './PerpMarketSettingsTable'
|
||||
import PerpMarketsOverviewTable from './PerpMarketsOverviewTable'
|
||||
import PerpMarketsDetailsTable from './PerpMarketDetailsTable'
|
||||
|
||||
export const TABS = ['overview', 'details']
|
||||
|
||||
|
@ -33,11 +33,11 @@ const PerpStats = () => {
|
|||
const TabContent = ({ activeTab }: { activeTab: string }) => {
|
||||
switch (activeTab) {
|
||||
case TABS[0]:
|
||||
return <PerpMarketsInfoTable />
|
||||
return <PerpMarketsOverviewTable />
|
||||
case TABS[1]:
|
||||
return <PerpMarketSettingsTable />
|
||||
return <PerpMarketsDetailsTable />
|
||||
default:
|
||||
return <PerpMarketsInfoTable />
|
||||
return <PerpMarketsOverviewTable />
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@ import useMangoGroup from 'hooks/useMangoGroup'
|
|||
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
||||
import { getOracleProvider } from 'hooks/useOracleProvider'
|
||||
|
||||
const TokenSettingsTable = () => {
|
||||
const TokenDetailsTable = () => {
|
||||
const { t } = useTranslation(['common', 'activity', 'token', 'trade'])
|
||||
const { group } = useMangoGroup()
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
|
@ -263,4 +263,4 @@ const TokenSettingsTable = () => {
|
|||
) : null
|
||||
}
|
||||
|
||||
export default TokenSettingsTable
|
||||
export default TokenDetailsTable
|
||||
|
|
|
@ -21,7 +21,7 @@ import BankAmountWithValue from '@components/shared/BankAmountWithValue'
|
|||
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
||||
import Decimal from 'decimal.js'
|
||||
|
||||
const TokenMarketInfoTable = () => {
|
||||
const TokenOverviewTable = () => {
|
||||
const { t } = useTranslation(['common', 'token'])
|
||||
const { group } = useMangoGroup()
|
||||
const { mangoTokens } = useJupiterMints()
|
||||
|
@ -383,4 +383,4 @@ const TokenMarketInfoTable = () => {
|
|||
) : null
|
||||
}
|
||||
|
||||
export default TokenMarketInfoTable
|
||||
export default TokenOverviewTable
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
||||
import { IconButton, LinkButton } from '@components/shared/Button'
|
||||
import Change from '@components/shared/Change'
|
||||
import { getOneDayPerpStats } from '@components/stats/PerpMarketsInfoTable'
|
||||
import { getOneDayPerpStats } from '@components/stats/PerpMarketsOverviewTable'
|
||||
import { ChartBarIcon, InformationCircleIcon } from '@heroicons/react/20/solid'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import Change from '@components/shared/Change'
|
||||
import FavoriteMarketButton from '@components/shared/FavoriteMarketButton'
|
||||
import SheenLoader from '@components/shared/SheenLoader'
|
||||
import { getOneDayPerpStats } from '@components/stats/PerpMarketsInfoTable'
|
||||
import { getOneDayPerpStats } from '@components/stats/PerpMarketsOverviewTable'
|
||||
import { Popover } from '@headlessui/react'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
|
|
Loading…
Reference in New Issue