add modal for spot market details
This commit is contained in:
parent
4eea086ef6
commit
727cf53d7d
|
@ -1,75 +1,79 @@
|
|||
import { ModalProps } from '../../types/modal'
|
||||
import Modal from '../shared/Modal'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
||||
import Button from '@components/shared/Button'
|
||||
// import Tooltip from '@components/shared/Tooltip'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
|
||||
const PerpMarketDetailsModal = ({ isOpen, onClose }: ModalProps) => {
|
||||
interface PerpMarketDetailsModalProps {
|
||||
market: PerpMarket | undefined
|
||||
}
|
||||
|
||||
type ModalCombinedProps = PerpMarketDetailsModalProps & ModalProps
|
||||
|
||||
const PerpMarketDetailsModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
market,
|
||||
}: ModalCombinedProps) => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
|
||||
return selectedMarket instanceof PerpMarket ? (
|
||||
return market ? (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<h2 className="text-center text-lg">
|
||||
{t('trade:market-details', { market: selectedMarket.name })}
|
||||
{t('trade:market-details', { market: market.name })}
|
||||
</h2>
|
||||
<div className="mt-4 space-y-2.5">
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:min-order-size')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{selectedMarket.minOrderSize}
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">{market.minOrderSize}</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:tick-size')}</p>
|
||||
<p className="font-mono text-th-fgd-2">{selectedMarket.tickSize}</p>
|
||||
<p className="font-mono text-th-fgd-2">{market.tickSize}</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:init-leverage')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{(1 / (selectedMarket.initBaseLiabWeight.toNumber() - 1)).toFixed(
|
||||
2
|
||||
)}
|
||||
x
|
||||
{(1 / (market.initBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:max-leverage')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{(1 / (selectedMarket.maintBaseLiabWeight.toNumber() - 1)).toFixed(
|
||||
2
|
||||
)}
|
||||
x
|
||||
{(1 / (market.maintBaseLiabWeight.toNumber() - 1)).toFixed(2)}x
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('fees')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{(100 * selectedMarket.makerFee.toNumber()).toFixed(2)}%{' '}
|
||||
{(100 * market.makerFee.toNumber()).toFixed(2)}%{' '}
|
||||
<span className="font-body text-th-fgd-3">{t('trade:maker')}</span>
|
||||
<span className="mx-1">|</span>
|
||||
{(100 * selectedMarket.takerFee.toNumber()).toFixed(2)}%{' '}
|
||||
{(100 * market.takerFee.toNumber()).toFixed(2)}%{' '}
|
||||
<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">
|
||||
{(100 * selectedMarket.minFunding.toNumber()).toFixed(2)}%{' '}
|
||||
{(100 * market.minFunding.toNumber()).toFixed(2)}%{' '}
|
||||
<span className="font-body text-th-fgd-3">to</span>{' '}
|
||||
{(100 * selectedMarket.maxFunding.toNumber()).toFixed(2)}%
|
||||
{(100 * market.maxFunding.toNumber()).toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="flex justify-between">
|
||||
<Tooltip content={t('trade:tooltip-insured')}>
|
||||
<p className="tooltip-underline">{t('trade:insured')}</p>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', { tokenOrMarket: market.name })}
|
||||
>
|
||||
<p className="tooltip-underline">
|
||||
{t('trade:insured', { token: '' })}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="text-th-fgd-2">
|
||||
{selectedMarket.groupInsuranceFund ? t('yes') : t('no')}
|
||||
{market.groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="mt-6 w-full" onClick={onClose}>
|
||||
{t('close')}
|
||||
|
|
|
@ -0,0 +1,102 @@
|
|||
import { ModalProps } from '../../types/modal'
|
||||
import Modal from '../shared/Modal'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import useSelectedMarket from 'hooks/useSelectedMarket'
|
||||
import { Serum3Market } from '@blockworks-foundation/mango-v4'
|
||||
import Button from '@components/shared/Button'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import { useMemo } from 'react'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
|
||||
interface SpotMarketDetailsModalProps {
|
||||
market: Serum3Market | undefined
|
||||
}
|
||||
|
||||
type ModalCombinedProps = SpotMarketDetailsModalProps & ModalProps
|
||||
|
||||
const SpotMarketDetailsModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
market,
|
||||
}: ModalCombinedProps) => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const { serumOrPerpMarket } = useSelectedMarket()
|
||||
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 [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}>
|
||||
<h2 className="text-center text-lg">
|
||||
{t('trade:market-details', { market: market.name })}
|
||||
</h2>
|
||||
<div className="mt-4 space-y-2.5">
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:min-order-size')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{serumOrPerpMarket.minOrderSize}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:tick-size')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{serumOrPerpMarket.tickSize}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('trade:max-leverage')}</p>
|
||||
<p className="font-mono text-th-fgd-2">5x</p>
|
||||
</div>
|
||||
{baseMintInfo ? (
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', {
|
||||
tokenOrMarket: baseBank!.name,
|
||||
})}
|
||||
>
|
||||
<p className="tooltip-underline">
|
||||
{t('trade:insured', { token: baseBank!.name })}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{baseMintInfo.groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
{quoteMintInfo ? (
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', {
|
||||
tokenOrMarket: quoteBank!.name,
|
||||
})}
|
||||
>
|
||||
<p className="tooltip-underline">
|
||||
{t('trade:insured', { token: quoteBank!.name })}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{quoteMintInfo.groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Button className="mt-6 w-full" onClick={onClose}>
|
||||
{t('close')}
|
||||
</Button>
|
||||
</Modal>
|
||||
) : null
|
||||
}
|
||||
|
||||
export default SpotMarketDetailsModal
|
|
@ -7,7 +7,7 @@ import ContentBox from '../shared/ContentBox'
|
|||
import MarketLogos from '@components/trade/MarketLogos'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
// import Tooltip from '@components/shared/Tooltip'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { PerpStatsItem } from 'types'
|
||||
import { NextRouter, useRouter } from 'next/router'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
|
@ -55,13 +55,15 @@ const PerpMarketSettingsTable = () => {
|
|||
<Th className="text-right">{t('trade:max-leverage')}</Th>
|
||||
<Th className="text-right">{t('fees')}</Th>
|
||||
<Th className="text-right">{t('trade:funding-limits')}</Th>
|
||||
{/* <Th className="text-right">
|
||||
<Tooltip content={t('trade:tooltip-insured')}>
|
||||
<Th className="text-right">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured', { tokenOrMarket: '' })}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('trade:insured')}
|
||||
{t('trade:insured', { token: '' })}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Th> */}
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -74,7 +76,7 @@ const PerpMarketSettingsTable = () => {
|
|||
maintBaseLiabWeight,
|
||||
makerFee,
|
||||
takerFee,
|
||||
// groupInsuranceFund,
|
||||
groupInsuranceFund,
|
||||
minFunding,
|
||||
maxFunding,
|
||||
publicKey,
|
||||
|
@ -128,11 +130,11 @@ const PerpMarketSettingsTable = () => {
|
|||
{(100 * maxFunding.toNumber()).toFixed(2)}%
|
||||
</p>
|
||||
</Td>
|
||||
{/* <Td>
|
||||
<Td>
|
||||
<p className="text-right">
|
||||
{groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</Td> */}
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
|
@ -149,7 +151,7 @@ const PerpMarketSettingsTable = () => {
|
|||
maintBaseLiabWeight,
|
||||
makerFee,
|
||||
takerFee,
|
||||
// groupInsuranceFund,
|
||||
groupInsuranceFund,
|
||||
minFunding,
|
||||
maxFunding,
|
||||
publicKey,
|
||||
|
@ -246,19 +248,21 @@ const PerpMarketSettingsTable = () => {
|
|||
{(100 * maxFunding.toNumber()).toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="col-span-1">
|
||||
<div className="col-span-1">
|
||||
<Tooltip
|
||||
content={t('trade:tooltip-insured')}
|
||||
content={t('trade:tooltip-insured', {
|
||||
tokenOrMarket: name,
|
||||
})}
|
||||
placement="top-start"
|
||||
>
|
||||
<p className="tooltip-underline text-xs text-th-fgd-3">
|
||||
{t('trade:insured')}
|
||||
{t('trade:insured', { token: '' })}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{groupInsuranceFund ? t('yes') : t('no')}
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
|
|
|
@ -21,6 +21,7 @@ import SheenLoader from '@components/shared/SheenLoader'
|
|||
import usePrevious from '@components/shared/usePrevious'
|
||||
import PerpMarketDetailsModal from '@components/modals/PerpMarketDetailsModal'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import SpotMarketDetailsModal from '@components/modals/SpotMarketDetailsModal'
|
||||
|
||||
const AdvancedMarketHeader = ({
|
||||
showChart,
|
||||
|
@ -218,17 +219,15 @@ const AdvancedMarketHeader = ({
|
|||
) : null}
|
||||
</div>
|
||||
<div className="ml-6 flex items-center space-x-4">
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<LinkButton
|
||||
className="flex items-center whitespace-nowrap text-th-fgd-3"
|
||||
onClick={() => setShowMarketDetails(true)}
|
||||
>
|
||||
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 md:mr-1.5 md:h-4 md:w-4" />
|
||||
<span className="hidden text-xs md:inline">
|
||||
{t('trade:market-details', { market: '' })}
|
||||
</span>
|
||||
</LinkButton>
|
||||
) : null}
|
||||
<LinkButton
|
||||
className="flex items-center whitespace-nowrap text-th-fgd-3"
|
||||
onClick={() => setShowMarketDetails(true)}
|
||||
>
|
||||
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 md:mr-1.5 md:h-4 md:w-4" />
|
||||
<span className="hidden text-xs md:inline">
|
||||
{t('trade:market-details', { market: '' })}
|
||||
</span>
|
||||
</LinkButton>
|
||||
{setShowChart ? (
|
||||
<IconButton
|
||||
className={showChart ? 'text-th-active' : 'text-th-fgd-2'}
|
||||
|
@ -242,10 +241,19 @@ const AdvancedMarketHeader = ({
|
|||
</div>
|
||||
</div>
|
||||
{showMarketDetails ? (
|
||||
<PerpMarketDetailsModal
|
||||
isOpen={showMarketDetails}
|
||||
onClose={() => setShowMarketDetails(false)}
|
||||
/>
|
||||
selectedMarket instanceof PerpMarket ? (
|
||||
<PerpMarketDetailsModal
|
||||
isOpen={showMarketDetails}
|
||||
onClose={() => setShowMarketDetails(false)}
|
||||
market={selectedMarket}
|
||||
/>
|
||||
) : (
|
||||
<SpotMarketDetailsModal
|
||||
isOpen={showMarketDetails}
|
||||
onClose={() => setShowMarketDetails(false)}
|
||||
market={selectedMarket}
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
"interval-seconds": "Interval (seconds)",
|
||||
"insured": "Insured",
|
||||
"insured": "{{token}} Insured",
|
||||
"limit-price": "Limit Price",
|
||||
"long": "Long",
|
||||
"maker": "Maker",
|
||||
|
@ -67,7 +67,7 @@
|
|||
"tick-size": "Tick Size",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
"tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
|
||||
"tooltip-volume-alert": "Volume Alert Settings",
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
"interval-seconds": "Interval (seconds)",
|
||||
"insured": "Insured",
|
||||
"insured": "{{token}} Insured",
|
||||
"limit-price": "Limit Price",
|
||||
"long": "Long",
|
||||
"maker": "Maker",
|
||||
|
@ -67,7 +67,7 @@
|
|||
"tick-size": "Tick Size",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
"tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
|
||||
"tooltip-volume-alert": "Volume Alert Settings",
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
"interval-seconds": "Interval (seconds)",
|
||||
"insured": "Insured",
|
||||
"insured": "{{token}} Insured",
|
||||
"limit-price": "Limit Price",
|
||||
"long": "Long",
|
||||
"maker": "Maker",
|
||||
|
@ -67,7 +67,7 @@
|
|||
"tick-size": "Tick Size",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
"tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
|
||||
"tooltip-volume-alert": "Volume Alert Settings",
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
"interval-seconds": "Interval (seconds)",
|
||||
"insured": "Insured",
|
||||
"insured": "{{token}} Insured",
|
||||
"limit-price": "Limit Price",
|
||||
"long": "Long",
|
||||
"maker": "Maker",
|
||||
|
@ -67,7 +67,7 @@
|
|||
"tick-size": "Tick Size",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
"tooltip-slippage": "An estimate of the difference between the current price and the price your trade will be executed at",
|
||||
"tooltip-volume-alert": "Volume Alert Settings",
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
"in-orders": "在掛單中",
|
||||
"init-leverage": "初始槓桿",
|
||||
"instantaneous-funding": "瞬時資金費率",
|
||||
"insured": "Insured",
|
||||
"insured": "{{token}} Insured",
|
||||
"interval-seconds": "間隔(秒)",
|
||||
"limit-price": "限價價格",
|
||||
"long": "做多",
|
||||
|
@ -67,7 +67,7 @@
|
|||
"tick-size": "波動單位",
|
||||
"tooltip-enable-margin": "為此交易啟用保證金",
|
||||
"tooltip-ioc": "IOC交易若不吃單就會被取消。任何無法立刻成交的部分將被取消",
|
||||
"tooltip-insured": "In the event of bankruptcies {{tokenOrMarket}} losses can be recovered from the insurance fund.",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post交易若不掛單就會被取消。",
|
||||
"tooltip-slippage": "當前價格與您的交易將執行的價格之間的差值的估計",
|
||||
"tooltip-stable-price": "穩定價格用於一個安全機制。此機制可以限制用戶在預言機價格快速波動時下風險高的訂單",
|
||||
|
|
Loading…
Reference in New Issue