import { Serum3Market } from '@blockworks-foundation/mango-v4'
import { useTranslation } from 'next-i18next'
import { useTheme } from 'next-themes'
import { useMemo } from 'react'
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'
const SimpleAreaChart = dynamic(
() => import('@components/shared/SimpleAreaChart'),
{ ssr: false }
)
const SpotMarketsTable = () => {
const { t } = useTranslation('common')
const coingeckoPrices = mangoStore((s) => s.coingeckoPrices.data)
const loadingCoingeckoPrices = mangoStore((s) => s.coingeckoPrices.loading)
const group = mangoStore((s) => s.group)
const serumMarkets = mangoStore((s) => s.serumMarkets)
const { theme } = useTheme()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
return (
{market.name} {formatFixedDecimals(oraclePrice!, true)} {t('unavailable')}
) : (
{serumMarkets.map((market) => {
const bank = group?.getFirstBankByTokenIndex(
market.baseTokenIndex
)
const oraclePrice = bank?.uiPrice
const coingeckoData = coingeckoPrices.find((asset) =>
bank?.name === 'soETH'
? asset.symbol === 'ETH'
: asset.symbol === bank?.name
)
const change = coingeckoData
? ((coingeckoData.prices[coingeckoData.prices.length - 1][1] -
coingeckoData.prices[0][1]) /
coingeckoData.prices[0][1]) *
100
: 0
const chartData = coingeckoData ? coingeckoData.prices : undefined
return (
{t('market')}
{t('price')}
{t('rolling-change')}
)
})}
{!loadingCoingeckoPrices ? (
chartData !== undefined ? (
{market.name}
{formatFixedDecimals(bank?.uiPrice!, true)}
{t('unavailable')}
) ) : ( )}