diff --git a/components/stats/SpotMarketsTable.tsx b/components/stats/SpotMarketsTable.tsx
new file mode 100644
index 00000000..67514233
--- /dev/null
+++ b/components/stats/SpotMarketsTable.tsx
@@ -0,0 +1,197 @@
+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 SimpleAreaChart from '../shared/SimpleAreaChart'
+import MarketLogos from '@components/trade/MarketLogos'
+
+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')}
+ ) + ) : ( + + )} +{bank.name}
-{formatFixedDecimals(oraclePrice!, true)}
-{formatFixedDecimals(bank.uiDeposits())}
@@ -221,7 +213,6 @@ const TokenList = () => {{t('price')}
-- ${formatDecimal(oraclePrice!, 2)} -
-{t('rates')}
diff --git a/pages/stats.tsx b/pages/stats.tsx index 6235af42..6087f11d 100644 --- a/pages/stats.tsx +++ b/pages/stats.tsx @@ -1,8 +1,6 @@ +import StatsPage from '@components/stats/StatsPage' import type { NextPage } from 'next' -import { useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' -import { useRouter } from 'next/router' -import TokenStats from '../components/stats/TokenStats' export async function getStaticProps({ locale }: { locale: string }) { return { @@ -13,19 +11,7 @@ export async function getStaticProps({ locale }: { locale: string }) { } const Stats: NextPage = () => { - const { t } = useTranslation('common') - const router = useRouter() - const { pathname, asPath, query } = router - - return ( -