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'
import { IconButton } from '@components/shared/Button'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
const SimpleAreaChart = dynamic(
() => import('@components/shared/SimpleAreaChart'),
{ ssr: false }
)
const PerpMarketsTable = ({
setShowPerpDetails,
}: {
setShowPerpDetails: (x: string) => void
}) => {
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()
console.log(coingeckoPrices.find((asset) => asset.symbol === 'soBTC'))
return (
{market.name} {formatFixedDecimals(market.uiPrice, true)} {t('unavailable')} {fundingRate}
{market.openInterest.toString()}{' '}
{market.name.slice(0, -5)}
{formatFixedDecimals(
market.openInterest.toNumber() * market.uiPrice,
true
)}
) : (
{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')}
) ) : ( )}