import { PerpMarket } from '@blockworks-foundation/mango-v4'
import { useTranslation } from 'next-i18next'
import { useTheme } from 'next-themes'
import { useViewport } from '../../hooks/useViewport'
import mangoStore from '@store/mangoStore'
import { COLORS } from '../../styles/colors'
import { formatFixedDecimals } from '../../utils/numbers'
import { breakpoints } from '../../utils/theme'
import ContentBox from '../shared/ContentBox'
import Change from '../shared/Change'
import MarketLogos from '@components/trade/MarketLogos'
import dynamic from 'next/dynamic'
import { useCoingecko } from 'hooks/useCoingecko'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
const SimpleAreaChart = dynamic(
() => import('@components/shared/SimpleAreaChart'),
{ ssr: false }
)
const PerpMarketsTable = () => {
const { t } = useTranslation(['common', 'trade'])
const { isLoading: loadingPrices, data: coingeckoPrices } = useCoingecko()
const perpMarkets = mangoStore((s) => s.perpMarkets)
const { theme } = useTheme()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
const rate = usePerpFundingRate()
return (
{market.name} {formatFixedDecimals(market.uiPrice, true)} {t('unavailable')} {fundingRate} ${market.openInterest.toString()}
) : (
{t('market')}
{t('price')}
{t('trade:funding-rate')}
{t('trade:open-interest')}
{t('rolling-change')}
{!loadingPrices ? (
chartData !== undefined ? (
{market.name}
{formatFixedDecimals(market.uiPrice, true)}
{t('unavailable')}
) ) : ( )}