import { Serum3Market } from '@blockworks-foundation/mango-v4'
import { useTranslation } from 'next-i18next'
import { useTheme } from 'next-themes'
import { useEffect, 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'
import SheenLoader from '@components/shared/SheenLoader'
const SimpleAreaChart = dynamic(
() => import('@components/shared/SimpleAreaChart'),
{ ssr: false }
)
const SpotMarketsTable = () => {
const { t } = useTranslation('common')
const actions = mangoStore((s) => s.actions)
const group = mangoStore((s) => s.group)
const serumMarkets = mangoStore((s) => s.serumMarkets)
const serumMarketPrices = mangoStore((s) => s.serumMarketPrices.data)
const loadingSerumMarketPrices = mangoStore(
(s) => s.serumMarketPrices.loading
)
const { theme } = useTheme()
const { width } = useViewport()
const showTableView = width ? width > breakpoints.md : false
useEffect(() => {
actions.fetchSerumMarketPrices()
}, [actions])
return (
{market.name} {formatFixedDecimals(oraclePrice!, true)} {t('unavailable')} {t('unavailable')}
) : (
{serumMarkets.map((market) => {
const bank = group?.getFirstBankByTokenIndex(
market.baseTokenIndex
)
const oraclePrice = bank?.uiPrice
const chartData = serumMarketPrices.find(
(m) =>
m.length &&
m[0].address === market.serumMarketExternal.toString()
)
const change = chartData
? ((chartData[chartData.length - 1].value -
chartData[0].value) /
chartData[0].value) *
100
: 'unavailable'
return (
{t('market')}
{t('price')}
{t('rolling-change')}
)
})}
{!loadingSerumMarketPrices ? (
chartData !== undefined ? (
{market.name}
{formatFixedDecimals(bank?.uiPrice!, true)}
{change ? ({t('unavailable')}
)}{t('unavailable')}
) ) : ( )}