import { ActionsMenu } from '@components/TokenList' import Button from '@components/shared/Button' import Change from '@components/shared/Change' import FormatNumericValue from '@components/shared/FormatNumericValue' import TokenLogo from '@components/shared/TokenLogo' import { goToTokenPage } from '@components/stats/tokens/TokenOverviewTable' import Decimal from 'decimal.js' import useMangoGroup from 'hooks/useMangoGroup' import { useRouter } from 'next/router' import { useTranslation } from 'react-i18next' import { numberCompacter } from 'utils/numbers' import { BankWithMarketData } from './Spot' import Tooltip from '@components/shared/Tooltip' import SimpleAreaChart from '@components/shared/SimpleAreaChart' import { COLORS } from 'styles/colors' import useThemeWrapper from 'hooks/useThemeWrapper' import dayjs from 'dayjs' import TokenReduceOnlyDesc from '@components/shared/TokenReduceOnlyDesc' const SpotCards = ({ tokens }: { tokens: BankWithMarketData[] }) => { const { t } = useTranslation(['common', 'explore', 'trade']) const { group } = useMangoGroup() const { theme } = useThemeWrapper() const router = useRouter() return (
{t('trade:24h-volume')}
{!token.market ? ( '–' ) : token.market?.marketData?.quote_volume_24h ? ( {numberCompacter.format( token.market.marketData.quote_volume_24h, )}{' '} USDC ) : ( 0 USDC )}
{t('available')}
{t('explore:collateral-weight')}
{t('rates')}