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 ( + + {showTableView ? ( + + + + + + + + + + + {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')}
+
+ +

{market.name}

+
+
+
+

{formatFixedDecimals(oraclePrice!, true)}

+
+
+ {!loadingCoingeckoPrices ? ( + chartData !== undefined ? ( + = 0 + ? COLORS.GREEN[theme] + : COLORS.RED[theme] + } + data={chartData} + height={40} + name={bank!.name} + width={104} + xKey="0" + yKey="1" + /> + ) : bank?.name === 'USDC' || + bank?.name === 'USDT' ? null : ( +

{t('unavailable')}

+ ) + ) : ( +
+ )} +
+
+ +
+
+ ) : ( +
+ {serumMarkets.map((market) => { + return ( + + ) + })} +
+ )} +
+ ) +} + +export default SpotMarketsTable + +const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => { + 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 { theme } = useTheme() + const bank = group?.getFirstBankByTokenIndex(market.baseTokenIndex) + + const coingeckoData = useMemo(() => { + if (!loadingCoingeckoPrices && bank) { + return coingeckoPrices.find((asset) => + bank.name === 'soETH' + ? asset.symbol === 'ETH' + : asset.symbol === bank?.name + ) + } + return null + }, [loadingCoingeckoPrices, bank]) + + const change = useMemo(() => { + if (coingeckoData) { + return ( + ((coingeckoData.prices[coingeckoData.prices.length - 1][1] - + coingeckoData.prices[0][1]) / + coingeckoData.prices[0][1]) * + 100 + ) + } + return 0 + }, [coingeckoData]) + + const chartData = useMemo(() => { + if (coingeckoData) { + return coingeckoData.prices + } + return undefined + }, [coingeckoData]) + + return ( +
+
+
+ +
+

{market.name}

+
+

+ {formatFixedDecimals(bank?.uiPrice!, true)} +

+ +
+
+
+ {!loadingCoingeckoPrices ? ( + chartData !== undefined ? ( + = 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]} + data={chartData} + height={40} + name={bank!.name} + width={104} + xKey="0" + yKey="1" + /> + ) : bank?.name === 'USDC' || bank?.name === 'USDT' ? null : ( +

{t('unavailable')}

+ ) + ) : ( +
+ )} +
+
+ ) +} diff --git a/components/stats/StatsPage.tsx b/components/stats/StatsPage.tsx new file mode 100644 index 00000000..16937976 --- /dev/null +++ b/components/stats/StatsPage.tsx @@ -0,0 +1,37 @@ +import TabButtons from '@components/shared/TabButtons' +import { useMemo, useState } from 'react' +import SpotMarketsTable from './SpotMarketsTable' +import TokenStats from './TokenStats' + +const TABS = ['tokens', 'spot'] + +const StatsPage = () => { + const [activeTab, setActiveTab] = useState('tokens') + const tabsWithCount: [string, number][] = useMemo(() => { + return TABS.map((t) => [t, 0]) + }, []) + return ( +
+ setActiveTab(v)} + values={tabsWithCount} + showBorders + /> + +
+ ) +} + +export default StatsPage + +const TabContent = ({ activeTab }: { activeTab: string }) => { + switch (activeTab) { + case 'tokens': + return + case 'spot': + return + default: + return + } +} diff --git a/components/stats/TokenStats.tsx b/components/stats/TokenStats.tsx index 7a543594..f67f54ec 100644 --- a/components/stats/TokenStats.tsx +++ b/components/stats/TokenStats.tsx @@ -69,7 +69,7 @@ const TokenList = () => { play delay={0.05} duration={1} - numbers={formatFixedDecimals(totalDepositValue!, true)} + numbers={formatFixedDecimals(totalDepositValue || 0.0, true)} />
@@ -84,7 +84,7 @@ const TokenList = () => { play delay={0.05} duration={1} - numbers={formatFixedDecimals(totalBorrowValue!, true)} + numbers={formatFixedDecimals(totalBorrowValue || 0.0, true)} /> @@ -94,7 +94,6 @@ const TokenList = () => { {t('token')} - {t('price')} {t('total-deposits')} {t('total-borrows')} @@ -132,7 +131,6 @@ const TokenList = () => { {banks.map(({ key, value }) => { const bank = value[0] - const oraclePrice = bank.uiPrice let logoURI if (jupiterTokens.length) { @@ -155,12 +153,6 @@ const TokenList = () => {

{bank.name}

- -
-

{formatFixedDecimals(oraclePrice!, true)}

-
- -

{formatFixedDecimals(bank.uiDeposits())}

@@ -221,7 +213,6 @@ const TokenList = () => {
{banks.map(({ key, value }) => { const bank = value[0] - const oraclePrice = bank.uiPrice let logoURI if (jupiterTokens.length) { logoURI = jupiterTokens.find( @@ -281,12 +272,6 @@ const TokenList = () => { leaveTo="opacity-0" >
-
-

{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 ( -

-
-
- -
-
-
- ) + return } export default Stats diff --git a/public/locales/en/common.json b/public/locales/en/common.json index c81f95c5..c1602e52 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -73,6 +73,7 @@ "sell": "Sell", "settings": "Settings", "show-zero-balances": "Show Zero Balances", + "spot": "Spot", "stats": "Stats", "swap": "Swap", "time": "Time", @@ -90,6 +91,7 @@ "transaction": "Transaction", "unavailable": "Unavailable", "update": "Update", + "updating-account-name": "Updating Account Name...", "utilization": "Utilization", "value": "Value", "wallet-balance": "Wallet Balance", diff --git a/public/locales/es/common.json b/public/locales/es/common.json index c81f95c5..c1602e52 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -73,6 +73,7 @@ "sell": "Sell", "settings": "Settings", "show-zero-balances": "Show Zero Balances", + "spot": "Spot", "stats": "Stats", "swap": "Swap", "time": "Time", @@ -90,6 +91,7 @@ "transaction": "Transaction", "unavailable": "Unavailable", "update": "Update", + "updating-account-name": "Updating Account Name...", "utilization": "Utilization", "value": "Value", "wallet-balance": "Wallet Balance", diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index c81f95c5..c1602e52 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -73,6 +73,7 @@ "sell": "Sell", "settings": "Settings", "show-zero-balances": "Show Zero Balances", + "spot": "Spot", "stats": "Stats", "swap": "Swap", "time": "Time", @@ -90,6 +91,7 @@ "transaction": "Transaction", "unavailable": "Unavailable", "update": "Update", + "updating-account-name": "Updating Account Name...", "utilization": "Utilization", "value": "Value", "wallet-balance": "Wallet Balance", diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json index c81f95c5..c1602e52 100644 --- a/public/locales/zh_tw/common.json +++ b/public/locales/zh_tw/common.json @@ -73,6 +73,7 @@ "sell": "Sell", "settings": "Settings", "show-zero-balances": "Show Zero Balances", + "spot": "Spot", "stats": "Stats", "swap": "Swap", "time": "Time", @@ -90,6 +91,7 @@ "transaction": "Transaction", "unavailable": "Unavailable", "update": "Update", + "updating-account-name": "Updating Account Name...", "utilization": "Utilization", "value": "Value", "wallet-balance": "Wallet Balance",