import React, { useMemo } from 'react'
import useMangoStore from '../stores/useMangoStore'
import UiLock from './UiLock'
import ManualRefresh from './ManualRefresh'
import useOraclePrice from '../hooks/useOraclePrice'
import DayHighLow from './DayHighLow'
import {
getPrecisionDigits,
perpContractPrecision,
usdFormatter,
} from '../utils'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from './TradePageGrid'
import { useTranslation } from 'next-i18next'
import SwitchMarketDropdown from './SwitchMarketDropdown'
import Tooltip from './Tooltip'
import { useWallet } from '@solana/wallet-adapter-react'
import { InformationCircleIcon } from '@heroicons/react/solid'
const OraclePrice = () => {
const oraclePrice = useOraclePrice()
const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
const decimals = useMemo(
() =>
selectedMarket?.tickSize !== undefined
? getPrecisionDigits(selectedMarket?.tickSize)
: null,
[selectedMarket]
)
return (
{decimals && oraclePrice && selectedMarket
? oraclePrice.toNumber().toLocaleString(undefined, {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals,
})
: '--'}
)
}
const MarketDetails = () => {
const { t } = useTranslation('common')
const { connected } = useWallet()
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
const baseSymbol = marketConfig.baseSymbol
const selectedMarketName = marketConfig.name
const isPerpMarket = marketConfig.kind === 'perp'
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const marketsInfo = useMangoStore((s) => s.marketsInfo)
const market = useMemo(
() => marketsInfo.find((market) => market.name === selectedMarketName),
[marketsInfo, selectedMarketName]
)
return (
{market ? (
<>
{t('rolling-change')}
0
? `text-th-green`
: market.change24h < 0
? `text-th-red`
: `text-th-fgd-1`
}`}
>
{(market.change24h * 100).toFixed(2) + '%'}
{isPerpMarket ? (
<>
{t('daily-volume')}
{usdFormatter(market?.volumeUsd24h, 0)}
{t('average-funding')}
{`${market?.funding1h.toFixed(4)}% (${(
market?.funding1h *
24 *
365
).toFixed(2)}% APR)`}
{t('open-interest')}
{usdFormatter(market?.openInterestUsd, 0)}
>
) : null}
>
) : (
<>
{isPerpMarket ? (
<>
>
) : null}
>
)}
{!isMobile ? (
) : null}
{!isMobile && connected ? : null}
)
}
export default MarketDetails
export const MarketDataLoader = ({ width }: { width?: string }) => (
)