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 (
{t('oracle-price')}
{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}
{t('daily-range')}
) : ( <> {isPerpMarket ? ( <> ) : null} )}
{!isMobile ? (
) : null}
{!isMobile && connected ? : null}
) } export default MarketDetails export const MarketDataLoader = ({ width }: { width?: string }) => (
)