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

show more details on stats table

This commit is contained in:
tjs 2023-05-02 13:47:26 -04:00
parent b866c5454b
commit fb1199dc83
9 changed files with 45 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/modals/PerpMarketDetailsModal.tsx
View File

@ -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')}

38
components/modals/SpotMarketDetailsModal.tsx
View File

@ -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')}

23
components/stats/PerpMarketSettingsTable.tsx → components/stats/PerpMarketDetailsTable.tsx
View File

@ -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

4
components/stats/PerpMarketsInfoTable.tsx → components/stats/PerpMarketsOverviewTable.tsx
View File

@ -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')

10
components/stats/PerpStats.tsx
View File

@ -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 />
}
}

4
components/stats/TokenDetailsTable.tsx
View File

@ -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

4
components/stats/TokenOverviewTable.tsx
View File

@ -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

2
components/trade/AdvancedMarketHeader.tsx
View File

@ -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
components/trade/MarketSelectDropdown.tsx
View File

@ -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'