import { Bank } from '@blockworks-foundation/mango-v4' import Change from '@components/shared/Change' import FormatNumericValue from '@components/shared/FormatNumericValue' import { ArrowSmallUpIcon } from '@heroicons/react/20/solid' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' import parse from 'html-react-parser' import { useTranslation } from 'next-i18next' import { useMemo, useState } from 'react' dayjs.extend(relativeTime) const DEFAULT_COINGECKO_VALUES = { ath: 0, atl: 0, ath_change_percentage: 0, atl_change_percentage: 0, ath_date: 0, atl_date: 0, high_24h: 0, circulating_supply: 0, fully_diluted_valuation: 0, low_24h: 0, market_cap: 0, max_supply: 0, price_change_percentage_24h: 0, total_supply: 0, total_volume: 0, } const CoingeckoStats = ({ bank, coingeckoData, }: { bank: Bank // TODO: Add Coingecko api types // eslint-disable-next-line @typescript-eslint/no-explicit-any coingeckoData: any }) => { const { t } = useTranslation(['common', 'token']) const [showFullDesc, setShowFullDesc] = useState(false) const { ath, atl, ath_change_percentage, atl_change_percentage, ath_date, atl_date, circulating_supply, fully_diluted_valuation, market_cap, max_supply, total_supply, total_volume, } = coingeckoData ? coingeckoData : DEFAULT_COINGECKO_VALUES const truncateDescription = (desc: string) => desc.substring(0, (desc + ' ').lastIndexOf(' ', 144)) const description = useMemo(() => { const desc = coingeckoData?.description?.en if (!desc) return '' return showFullDesc ? coingeckoData.description.en : truncateDescription(coingeckoData.description.en) }, [coingeckoData, showFullDesc]) return ( <> {description ? (
{parse(description)}
{coingeckoData.description.en.length > description.length || showFullDesc ? ( setShowFullDesc(!showFullDesc)} > {showFullDesc ? 'Less' : 'More'}{t('token:market-cap')}
{market_cap?.usd ? (
{t('token:volume')}
{total_volume?.usd ? (
{t('token:all-time-high')}
{dayjs(ath_date.usd).format('MMM, D, YYYY')} ( {dayjs(ath_date.usd).fromNow()})
{t('token:all-time-low')}
{dayjs(atl_date.usd).format('MMM, D, YYYY')} ( {dayjs(atl_date.usd).fromNow()})
{t('token:fdv')}
{fully_diluted_valuation?.usd ? (
{t('token:circulating-supply')}
{circulating_supply ? (
{t('token:total-supply')}
{total_supply ? (
{t('token:max-supply')}
{max_supply ? (