2023-03-28 19:01:53 -07:00
|
|
|
import { ModalProps } from '../../types/modal'
|
|
|
|
import Modal from '../shared/Modal'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
|
|
|
import Button from '@components/shared/Button'
|
2023-04-30 21:42:29 -07:00
|
|
|
import useOracleProvider from 'hooks/useOracleProvider'
|
|
|
|
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
|
2023-05-02 10:47:26 -07:00
|
|
|
import Tooltip from '@components/shared/Tooltip'
|
2023-05-24 20:59:41 -07:00
|
|
|
import { useRouter } from 'next/router'
|
2023-03-28 19:01:53 -07:00
|
|
|
|
2023-04-26 20:39:49 -07:00
|
|
|
interface PerpMarketDetailsModalProps {
|
|
|
|
market: PerpMarket | undefined
|
|
|
|
}
|
|
|
|
|
|
|
|
type ModalCombinedProps = PerpMarketDetailsModalProps & ModalProps
|
|
|
|
|
|
|
|
const PerpMarketDetailsModal = ({
|
|
|
|
isOpen,
|
|
|
|
onClose,
|
|
|
|
market,
|
|
|
|
}: ModalCombinedProps) => {
|
2023-03-28 19:01:53 -07:00
|
|
|
const { t } = useTranslation(['common', 'trade'])
|
2023-04-30 21:42:29 -07:00
|
|
|
const { oracleProvider, oracleLinkPath } = useOracleProvider()
|
2023-05-24 20:59:41 -07:00
|
|
|
const router = useRouter()
|
2023-04-30 21:42:29 -07:00
|
|
|
|
2023-05-24 20:59:41 -07:00
|
|
|
const goToPerpDetails = (marketName: string) => {
|
|
|
|
router.push(`/stats?market=${marketName}`, undefined, { shallow: true })
|
|
|
|
}
|
2023-03-28 19:01:53 -07:00
|
|
|
|
2023-04-26 20:39:49 -07:00
|
|
|
return market ? (
|
2023-03-28 19:01:53 -07:00
|
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
|
|
<h2 className="text-center text-lg">
|
2023-04-26 20:39:49 -07:00
|
|
|
{t('trade:market-details', { market: market.name })}
|
2023-03-28 19:01:53 -07:00
|
|
|
</h2>
|
|
|
|
<div className="mt-4 space-y-2.5">
|
|
|
|
<div className="flex justify-between">
|
|
|
|
<p>{t('trade:min-order-size')}</p>
|
2023-04-26 20:39:49 -07:00
|
|
|
<p className="font-mono text-th-fgd-2">{market.minOrderSize}</p>
|
2023-03-28 19:01:53 -07:00
|
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
|
|
<p>{t('trade:tick-size')}</p>
|
2023-04-26 20:39:49 -07:00
|
|
|
<p className="font-mono text-th-fgd-2">{market.tickSize}</p>
|
2023-03-28 19:01:53 -07:00
|
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
2023-04-26 19:33:03 -07:00
|
|
|
<p>{t('trade:init-leverage')}</p>
|
2023-03-28 19:01:53 -07:00
|
|
|
<p className="font-mono text-th-fgd-2">
|
2023-04-26 20:39:49 -07:00
|
|
|
{(1 / (market.initBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
|
2023-03-28 19:01:53 -07:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
2023-04-26 19:33:03 -07:00
|
|
|
<p>{t('trade:max-leverage')}</p>
|
2023-03-28 19:01:53 -07:00
|
|
|
<p className="font-mono text-th-fgd-2">
|
2023-04-26 20:39:49 -07:00
|
|
|
{(1 / (market.maintBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
|
2023-03-28 19:01:53 -07:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
|
|
<p>{t('fees')}</p>
|
|
|
|
<p className="font-mono text-th-fgd-2">
|
2023-04-26 20:39:49 -07:00
|
|
|
{(100 * market.makerFee.toNumber()).toFixed(2)}%{' '}
|
2023-03-28 19:01:53 -07:00
|
|
|
<span className="font-body text-th-fgd-3">{t('trade:maker')}</span>
|
|
|
|
<span className="mx-1">|</span>
|
2023-04-26 20:39:49 -07:00
|
|
|
{(100 * market.takerFee.toNumber()).toFixed(2)}%{' '}
|
2023-03-28 19:01:53 -07:00
|
|
|
<span className="font-body text-th-fgd-3">{t('trade:taker')}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
|
|
<p>{t('trade:funding-limits')}</p>
|
|
|
|
<p className="font-mono text-th-fgd-2">
|
2023-04-26 20:39:49 -07:00
|
|
|
{(100 * market.minFunding.toNumber()).toFixed(2)}%{' '}
|
2023-03-28 19:01:53 -07:00
|
|
|
<span className="font-body text-th-fgd-3">to</span>{' '}
|
2023-04-26 20:39:49 -07:00
|
|
|
{(100 * market.maxFunding.toNumber()).toFixed(2)}%
|
2023-03-28 19:01:53 -07:00
|
|
|
</p>
|
|
|
|
</div>
|
2023-04-30 21:42:29 -07:00
|
|
|
<div className="flex justify-between">
|
|
|
|
<p>{t('trade:oracle')}</p>
|
|
|
|
{oracleLinkPath ? (
|
|
|
|
<a
|
|
|
|
className="flex items-center"
|
|
|
|
href={oracleLinkPath}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
<span className="mr-1.5">{oracleProvider}</span>
|
|
|
|
<ArrowTopRightOnSquareIcon className="h-4 w-4" />
|
|
|
|
</a>
|
|
|
|
) : (
|
|
|
|
<p className="text-th-fgd-2">{oracleProvider}</p>
|
|
|
|
)}
|
|
|
|
</div>
|
2023-05-02 10:47:26 -07:00
|
|
|
<div className="flex justify-between">
|
2023-04-26 20:39:49 -07:00
|
|
|
<Tooltip
|
2023-05-02 10:57:53 -07:00
|
|
|
content={
|
|
|
|
<div>
|
|
|
|
{t('trade:tooltip-insured', { tokenOrMarket: market.name })}
|
|
|
|
<a
|
|
|
|
className="mt-2 flex items-center"
|
|
|
|
href="https://docs.mango.markets/mango-markets/insurance-fund"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
target="_blank"
|
|
|
|
>
|
|
|
|
Learn more
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
}
|
2023-04-26 20:39:49 -07:00
|
|
|
>
|
|
|
|
<p className="tooltip-underline">
|
|
|
|
{t('trade:insured', { token: '' })}
|
|
|
|
</p>
|
2023-04-26 19:33:03 -07:00
|
|
|
</Tooltip>
|
|
|
|
<p className="text-th-fgd-2">
|
2023-04-26 20:39:49 -07:00
|
|
|
{market.groupInsuranceFund ? t('yes') : t('no')}
|
2023-04-26 19:33:03 -07:00
|
|
|
</p>
|
2023-05-02 10:47:26 -07:00
|
|
|
</div>
|
2023-03-28 19:01:53 -07:00
|
|
|
</div>
|
2023-05-24 20:59:41 -07:00
|
|
|
<Button
|
|
|
|
className="mt-6 w-full"
|
|
|
|
onClick={() => goToPerpDetails(market.name)}
|
|
|
|
>
|
|
|
|
{t('trade:more-details')}
|
|
|
|
</Button>
|
|
|
|
<Button className="mt-3 w-full" onClick={onClose} secondary>
|
2023-03-28 19:01:53 -07:00
|
|
|
{t('close')}
|
|
|
|
</Button>
|
|
|
|
</Modal>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PerpMarketDetailsModal
|