add token stats charts
This commit is contained in:
saml33
parent
5102129a49
commit
7b58e9ce6d
|
|
@ -55,6 +55,7 @@ const AccountChart = ({
|
|||
daysToShow={daysToShow}
|
||||
hideChart={hideChart}
|
||||
loading={loading}
|
||||
prefix="$"
|
||||
setDaysToShow={handleDaysToShow}
|
||||
tickFormat={(x) => `$${x.toFixed(2)}`}
|
||||
title={t(chartToShow)}
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ const AccountPage = () => {
|
|||
)}
|
||||
</div>
|
||||
<div className="flex items-center space-x-1.5">
|
||||
<Change change={accountValueChange} isCurrency />
|
||||
<Change change={accountValueChange} prefix="$" />
|
||||
<p className="text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -451,7 +451,7 @@ const AccountPage = () => {
|
|||
{formatFixedDecimals(accountPnl, true)}
|
||||
</p>
|
||||
<div className="flex space-x-1">
|
||||
<Change change={oneDayPnlChange} isCurrency size="small" />
|
||||
<Change change={oneDayPnlChange} prefix="$" size="small" />
|
||||
<p className="text-xs text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -482,7 +482,7 @@ const AccountPage = () => {
|
|||
{formatFixedDecimals(interestTotalValue, true)}
|
||||
</p>
|
||||
<div className="flex space-x-1">
|
||||
<Change change={oneDayInterestChange} isCurrency size="small" />
|
||||
<Change change={oneDayInterestChange} prefix="$" size="small" />
|
||||
<p className="text-xs text-th-fgd-4">{t('today')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,14 @@ import { DownTriangle, UpTriangle } from './DirectionTriangles'
|
|||
|
||||
const Change = ({
|
||||
change,
|
||||
isCurrency,
|
||||
prefix,
|
||||
size,
|
||||
suffix,
|
||||
}: {
|
||||
change: number | typeof NaN
|
||||
isCurrency?: boolean
|
||||
prefix?: string
|
||||
size?: 'small'
|
||||
suffix?: string
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-center space-x-1.5">
|
||||
|
|
@ -39,11 +41,11 @@ const Change = ({
|
|||
: 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
{isCurrency ? '$' : ''}
|
||||
{prefix ? prefix : ''}
|
||||
{isNaN(change)
|
||||
? '0.00'
|
||||
: formatFixedDecimals(Math.abs(change), false, true)}
|
||||
{!isCurrency ? '%' : ''}
|
||||
{suffix ? suffix : ''}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -25,17 +25,22 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
|
|||
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
|
||||
import { formatFixedDecimals } from 'utils/numbers'
|
||||
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
||||
import { AxisDomain } from 'recharts/types/util/types'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
interface DetailedAreaChartProps {
|
||||
data: any[]
|
||||
daysToShow?: string
|
||||
domain?: AxisDomain
|
||||
hideChange?: boolean
|
||||
hideChart?: () => void
|
||||
loading?: boolean
|
||||
prefix?: string
|
||||
setDaysToShow?: (x: string) => void
|
||||
tickFormat?: (x: any) => string
|
||||
small?: boolean
|
||||
suffix?: string
|
||||
tickFormat?: (x: number) => string
|
||||
title?: string
|
||||
xKey: string
|
||||
yKey: string
|
||||
|
|
@ -52,10 +57,14 @@ export const formatDateAxis = (date: string, days: number) => {
|
|||
const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||
data,
|
||||
daysToShow = '1',
|
||||
domain,
|
||||
hideChange,
|
||||
hideChart,
|
||||
loading,
|
||||
prefix = '',
|
||||
setDaysToShow,
|
||||
small,
|
||||
suffix = '',
|
||||
tickFormat,
|
||||
title,
|
||||
xKey,
|
||||
|
|
@ -81,7 +90,6 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
const calculateChartChange = () => {
|
||||
if (data.length) {
|
||||
if (mouseData) {
|
||||
console.log(mouseData)
|
||||
const index = data.findIndex((d: any) => d[xKey] === mouseData[xKey])
|
||||
const change = index >= 0 ? data[index][yKey] - data[0][yKey] : 0
|
||||
return isNaN(change) ? 0 : change
|
||||
|
|
@ -112,66 +120,100 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
</IconButton>
|
||||
) : null}
|
||||
<div>
|
||||
<p className="mb-0.5 text-base text-th-fgd-3">{title}</p>
|
||||
<p
|
||||
className={`${
|
||||
small ? 'text-sm' : 'mb-0.5 text-base'
|
||||
} text-th-fgd-3`}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
{mouseData ? (
|
||||
<div>
|
||||
<div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
|
||||
<div
|
||||
className={`flex ${
|
||||
small
|
||||
? 'h-8 items-center text-2xl'
|
||||
: 'mb-1 items-end text-4xl'
|
||||
} font-bold text-th-fgd-1`}
|
||||
>
|
||||
{animationSettings['number-scroll'] ? (
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
height={24}
|
||||
width={15}
|
||||
play
|
||||
numbers={formatFixedDecimals(mouseData[yKey], true)}
|
||||
numbers={
|
||||
prefix +
|
||||
formatFixedDecimals(mouseData[yKey]) +
|
||||
suffix
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<span>
|
||||
{formatFixedDecimals(mouseData[yKey], true)}
|
||||
{prefix +
|
||||
formatFixedDecimals(mouseData[yKey]) +
|
||||
suffix}
|
||||
</span>
|
||||
)}
|
||||
{!hideChange ? (
|
||||
<span className="ml-3">
|
||||
<Change
|
||||
change={calculateChartChange()}
|
||||
isCurrency
|
||||
prefix={prefix}
|
||||
suffix={suffix}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
<p
|
||||
className={`${
|
||||
small ? 'text-xs' : 'text-sm'
|
||||
} text-th-fgd-4`}
|
||||
>
|
||||
{dayjs(mouseData[xKey]).format('DD MMM YY, h:mma')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
|
||||
<div
|
||||
className={`flex ${
|
||||
small
|
||||
? 'h-8 items-center text-2xl'
|
||||
: 'mb-1 items-end text-4xl'
|
||||
} font-bold text-th-fgd-1`}
|
||||
>
|
||||
{animationSettings['number-scroll'] ? (
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
height={24}
|
||||
width={15}
|
||||
play
|
||||
numbers={formatFixedDecimals(
|
||||
data[data.length - 1][yKey],
|
||||
true
|
||||
)}
|
||||
numbers={
|
||||
prefix +
|
||||
formatFixedDecimals(data[data.length - 1][yKey]) +
|
||||
suffix
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<span>
|
||||
{formatFixedDecimals(
|
||||
data[data.length - 1][yKey],
|
||||
true
|
||||
)}
|
||||
{prefix +
|
||||
formatFixedDecimals(data[data.length - 1][yKey]) +
|
||||
suffix}
|
||||
</span>
|
||||
)}
|
||||
{!hideChange ? (
|
||||
<span className="ml-3">
|
||||
<Change
|
||||
change={calculateChartChange()}
|
||||
isCurrency
|
||||
prefix={prefix}
|
||||
suffix={suffix}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
<p
|
||||
className={`${
|
||||
small ? 'text-xs' : 'text-sm'
|
||||
} text-th-fgd-4`}
|
||||
>
|
||||
{dayjs(data[data.length - 1][xKey]).format(
|
||||
'DD MMM YY, h:mma'
|
||||
)}
|
||||
|
|
@ -248,6 +290,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
<XAxis
|
||||
axisLine={false}
|
||||
dataKey={xKey}
|
||||
minTickGap={20}
|
||||
padding={{ left: 20, right: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
|
|
@ -261,8 +304,9 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
<YAxis
|
||||
axisLine={false}
|
||||
dataKey={yKey}
|
||||
minTickGap={20}
|
||||
type="number"
|
||||
domain={['dataMin', 'dataMax']}
|
||||
domain={domain ? domain : ['dataMin', 'dataMax']}
|
||||
padding={{ top: 20, bottom: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|||
rounded = false,
|
||||
fillWidth = false,
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'swap', 'trade'])
|
||||
const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const SpotMarketsTable = () => {
|
|||
</Td>
|
||||
<Td>
|
||||
<div className="flex flex-col items-end">
|
||||
<Change change={change} />
|
||||
<Change change={change} suffix="%" />
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
|
|
@ -169,7 +169,7 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
|
|||
<p className="font-mono">
|
||||
{bank?.uiPrice ? formatFixedDecimals(bank.uiPrice, true) : '-'}
|
||||
</p>
|
||||
<Change change={change} />
|
||||
<Change change={change} suffix="%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,9 @@ const TokenStats = () => {
|
|||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
actions.fetchTokenStats()
|
||||
if (group && !tokenStats.length) {
|
||||
actions.fetchTokenStats()
|
||||
}
|
||||
}, [group])
|
||||
|
||||
const totalValues = useMemo(() => {
|
||||
|
|
@ -128,6 +130,7 @@ const TokenStats = () => {
|
|||
},
|
||||
])}
|
||||
daysToShow={'999'}
|
||||
prefix="$"
|
||||
tickFormat={(x) => `$${x.toFixed(2)}`}
|
||||
title={t('total-deposit-value')}
|
||||
xKey="date"
|
||||
|
|
@ -152,7 +155,7 @@ const TokenStats = () => {
|
|||
},
|
||||
])}
|
||||
daysToShow={'999'}
|
||||
// setDaysToShow={() => console.log('fuck')}
|
||||
prefix="$"
|
||||
tickFormat={(x) => `$${x.toFixed(2)}`}
|
||||
title={t('total-borrow-value')}
|
||||
xKey="date"
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ const SwapTokenChart = () => {
|
|||
<span
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
||||
>
|
||||
<Change change={calculateChartChange()} />
|
||||
<Change change={calculateChartChange()} suffix="%" />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
|
|
@ -227,7 +227,7 @@ const SwapTokenChart = () => {
|
|||
<span
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
||||
>
|
||||
<Change change={calculateChartChange()} />
|
||||
<Change change={calculateChartChange()} suffix="%" />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const AdvancedMarketHeader = () => {
|
|||
</div>
|
||||
<div className="ml-6 flex-col">
|
||||
<div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
|
||||
<Change change={change} size="small" />
|
||||
<Change change={change} size="small" suffix="%" />
|
||||
</div>
|
||||
{selectedMarket instanceof PerpMarket ? (
|
||||
<div className="ml-6 flex-col">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Change from '@components/shared/Change'
|
||||
import DailyRange from '@components/shared/DailyRange'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import mangoStore, { TokenStatsItem } from '@store/mangoStore'
|
||||
import type { NextPage } from 'next'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
|
|
@ -32,9 +32,14 @@ import { useCoingecko } from 'hooks/useCoingecko'
|
|||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
|
||||
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
||||
import TabButtons from '@components/shared/TabButtons'
|
||||
const PriceChart = dynamic(() => import('@components/token/PriceChart'), {
|
||||
ssr: false,
|
||||
})
|
||||
const DetailedAreaChart = dynamic(
|
||||
() => import('@components/shared/DetailedAreaChart'),
|
||||
{ ssr: false }
|
||||
)
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
|
|
@ -73,6 +78,9 @@ const DEFAULT_COINGECKO_VALUES = {
|
|||
|
||||
const Token: NextPage = () => {
|
||||
const { t } = useTranslation(['common', 'token'])
|
||||
const actions = mangoStore((s) => s.actions)
|
||||
const tokenStats = mangoStore((s) => s.tokenStats.data)
|
||||
const loadingTokenStats = mangoStore((s) => s.tokenStats.loading)
|
||||
const [showFullDesc, setShowFullDesc] = useState(false)
|
||||
const [showDepositModal, setShowDepositModal] = useState(false)
|
||||
const [showBorrowModal, setShowBorrowModal] = useState(false)
|
||||
|
|
@ -87,11 +95,35 @@ const Token: NextPage = () => {
|
|||
const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)
|
||||
const [loadChartData, setLoadChartData] = useState(true)
|
||||
const [daysToShow, setDaysToShow] = useState<string>('1')
|
||||
const [activeDepositsTab, setActiveDepositsTab] = useState('token:deposits')
|
||||
const [activeBorrowsTab, setActiveBorrowsTab] = useState('token:borrows')
|
||||
const [animationSettings] = useLocalStorageState(
|
||||
ANIMATION_SETTINGS_KEY,
|
||||
INITIAL_ANIMATION_SETTINGS
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (group && !tokenStats.length) {
|
||||
actions.fetchTokenStats()
|
||||
}
|
||||
}, [group])
|
||||
|
||||
const statsHistory = useMemo(() => {
|
||||
if (!tokenStats.length) return []
|
||||
return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => {
|
||||
if (c.symbol === token) {
|
||||
const copy = { ...c }
|
||||
copy.deposit_apr = copy.deposit_apr * 100
|
||||
copy.borrow_apr = copy.borrow_apr * 100
|
||||
a.push(copy)
|
||||
}
|
||||
return a.sort(
|
||||
(a, b) =>
|
||||
new Date(a.date_hour).getTime() - new Date(b.date_hour).getTime()
|
||||
)
|
||||
}, [])
|
||||
}, [tokenStats])
|
||||
|
||||
const bank = useMemo(() => {
|
||||
if (group && token) {
|
||||
const bank = group.banksMapByName.get(token.toString())
|
||||
|
|
@ -217,7 +249,7 @@ const Token: NextPage = () => {
|
|||
<div className="pb-20 md:pb-16">
|
||||
{bank ? (
|
||||
<>
|
||||
<div className="flex flex-col border-b border-th-bkg-3 px-6 py-3 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-col border-b border-th-bkg-3 px-6 py-5 md:flex-row md:items-center md:justify-between">
|
||||
<div className="mb-4 md:mb-1">
|
||||
<div className="mb-1.5 flex items-center space-x-2">
|
||||
<Image src={logoURI!} height="20" width="20" />
|
||||
|
|
@ -244,7 +276,7 @@ const Token: NextPage = () => {
|
|||
<span>{formatFixedDecimals(bank.uiPrice, true)}</span>
|
||||
)}
|
||||
{coingeckoData ? (
|
||||
<Change change={price_change_percentage_24h} />
|
||||
<Change change={price_change_percentage_24h} suffix="%" />
|
||||
) : null}
|
||||
</div>
|
||||
{coingeckoData ? (
|
||||
|
|
@ -306,53 +338,97 @@ const Token: NextPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2">
|
||||
<div className="col-span-1 border-b border-r border-th-bkg-3 px-6 py-4 sm:border-b-0">
|
||||
<h2 className="mb-4 text-base">{t('token:lending')}</h2>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 py-4">
|
||||
<p>{t('total-deposits')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{formatFixedDecimals(bank.uiDeposits())}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 py-4">
|
||||
<p>{t('token:total-value')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{formatFixedDecimals(bank.uiDeposits() * bank.uiPrice, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 pt-4">
|
||||
<p>{t('deposit-rate')}</p>
|
||||
<p className="font-mono text-th-up">
|
||||
{formatDecimal(bank.getDepositRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2">
|
||||
<div className="col-span-1 border-b border-th-bkg-3 md:border-r md:border-b-0">
|
||||
<div className="w-full">
|
||||
{statsHistory.length ? (
|
||||
<>
|
||||
<TabButtons
|
||||
activeValue={activeDepositsTab}
|
||||
onChange={(v) => setActiveDepositsTab(v)}
|
||||
showBorders
|
||||
values={[
|
||||
['token:deposits', 0],
|
||||
['token:deposit-rates', 0],
|
||||
]}
|
||||
/>
|
||||
<div className="px-6 pt-5 pb-2">
|
||||
{activeDepositsTab === 'token:deposits' ? (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
daysToShow={'999'}
|
||||
// domain={[0, 'dataMax']}
|
||||
loading={loadingTokenStats}
|
||||
small
|
||||
tickFormat={(x) => x.toFixed(2)}
|
||||
title={`${token} ${t('token:deposits')}`}
|
||||
xKey="date_hour"
|
||||
yKey={'total_deposits'}
|
||||
/>
|
||||
) : (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
daysToShow={'999'}
|
||||
// domain={[0, 'dataMax']}
|
||||
loading={loadingTokenStats}
|
||||
hideChange
|
||||
small
|
||||
suffix="%"
|
||||
tickFormat={(x) => `${x.toFixed(2)}%`}
|
||||
title={`${token} ${t('token:deposit-rates')} (APR)`}
|
||||
xKey="date_hour"
|
||||
yKey={'deposit_apr'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 px-6 py-4">
|
||||
<h2 className="mb-4 text-base">{t('token:borrowing')}</h2>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 py-4">
|
||||
<p>{t('total-borrows')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{formatFixedDecimals(bank.uiBorrows())}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 py-4">
|
||||
<p>{t('token:total-value')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{formatFixedDecimals(bank.uiBorrows() * bank.uiPrice, true)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between border-t border-th-bkg-3 pt-4">
|
||||
<p>{t('borrow-rate')}</p>
|
||||
<p className="font-mono text-th-down">
|
||||
{formatDecimal(bank.getBorrowRateUi(), 2, {
|
||||
fixed: true,
|
||||
})}
|
||||
%
|
||||
</p>
|
||||
<div className="col-span-1">
|
||||
<div className="w-full">
|
||||
{statsHistory.length ? (
|
||||
<>
|
||||
<TabButtons
|
||||
activeValue={activeBorrowsTab}
|
||||
onChange={(v) => setActiveBorrowsTab(v)}
|
||||
showBorders
|
||||
values={[
|
||||
['token:borrows', 0],
|
||||
['token:borrow-rates', 0],
|
||||
]}
|
||||
/>
|
||||
<div className="px-6 pt-5 pb-2">
|
||||
{activeBorrowsTab === 'token:borrows' ? (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
daysToShow={'999'}
|
||||
// domain={[0, 'dataMax']}
|
||||
loading={loadingTokenStats}
|
||||
small
|
||||
tickFormat={(x) => x.toFixed(2)}
|
||||
title={`${token} ${t('token:borrows')}`}
|
||||
xKey="date_hour"
|
||||
yKey={'total_borrows'}
|
||||
/>
|
||||
) : (
|
||||
<DetailedAreaChart
|
||||
data={statsHistory}
|
||||
daysToShow={'999'}
|
||||
// domain={[0, 'dataMax']}
|
||||
loading={loadingTokenStats}
|
||||
small
|
||||
hideChange
|
||||
suffix="%"
|
||||
tickFormat={(x) => `${x.toFixed(2)}%`}
|
||||
title={`${token} ${t('token:borrow-rates')} (APR)`}
|
||||
xKey="date_hour"
|
||||
yKey={'borrow_apr'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -426,8 +502,8 @@ const Token: NextPage = () => {
|
|||
) : (
|
||||
<div className="h-10 w-[104px] animate-pulse rounded bg-th-bkg-3" />
|
||||
)}
|
||||
<div className="grid grid-cols-1 border-b border-th-bkg-3 sm:grid-cols-2">
|
||||
<div className="col-span-1 border-y border-th-bkg-3 px-6 py-4 sm:col-span-2">
|
||||
<div className="grid grid-cols-1 border-b border-th-bkg-3 md:grid-cols-2">
|
||||
<div className="col-span-1 border-y border-th-bkg-3 px-6 py-4 md:col-span-2">
|
||||
<h2 className="text-base">{bank.name} Stats</h2>
|
||||
</div>
|
||||
<div className="col-span-1 border-r border-th-bkg-3 px-6 py-4">
|
||||
|
|
@ -453,7 +529,7 @@ const Token: NextPage = () => {
|
|||
<span className="mr-2">
|
||||
{formatFixedDecimals(ath.usd, true)}
|
||||
</span>
|
||||
<Change change={ath_change_percentage.usd} />
|
||||
<Change change={ath_change_percentage.usd} suffix="%" />
|
||||
</div>
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
{dayjs(ath_date.usd).format('MMM, D, YYYY')} (
|
||||
|
|
@ -461,14 +537,14 @@ const Token: NextPage = () => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between border-b border-t border-th-bkg-3 py-4 sm:border-b-0 sm:pb-0">
|
||||
<div className="flex justify-between border-b border-t border-th-bkg-3 py-4 md:border-b-0 md:pb-0">
|
||||
<p>{t('token:all-time-low')}</p>
|
||||
<div className="flex flex-col items-end">
|
||||
<div className="flex items-center font-mono text-th-fgd-2">
|
||||
<span className="mr-2">
|
||||
{formatFixedDecimals(atl.usd, true)}
|
||||
</span>
|
||||
<Change change={atl_change_percentage.usd} />
|
||||
<Change change={atl_change_percentage.usd} suffix="%" />
|
||||
</div>
|
||||
<p className="text-xs text-th-fgd-4">
|
||||
{dayjs(atl_date.usd).format('MMM, D, YYYY')} (
|
||||
|
|
@ -477,7 +553,7 @@ const Token: NextPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1 px-6 pb-4 sm:pt-4">
|
||||
<div className="col-span-1 px-6 pb-4 md:pt-4">
|
||||
{fully_diluted_valuation.usd ? (
|
||||
<div className="flex justify-between pb-4">
|
||||
<p>{t('token:fdv')}</p>
|
||||
|
|
@ -500,7 +576,7 @@ const Token: NextPage = () => {
|
|||
</div>
|
||||
<div
|
||||
className={`flex justify-between border-t border-th-bkg-3 ${
|
||||
max_supply ? 'py-4' : 'border-b pt-4 sm:pb-4'
|
||||
max_supply ? 'py-4' : 'border-b pt-4 md:pb-4'
|
||||
}`}
|
||||
>
|
||||
<p>{t('token:total-supply')}</p>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
"all-time-high": "All-time High",
|
||||
"all-time-low": "All-time Low",
|
||||
"borrowing": "Borrowing",
|
||||
"borrows": "Borrows",
|
||||
"borrow-rates": "Borrow Rates",
|
||||
"chart-unavailable": "Chart Unavailable",
|
||||
"circulating-supply": "Circulating Supply",
|
||||
"deposits": "Deposits",
|
||||
"deposit-rates": "Deposit Rates",
|
||||
"fdv": "Fully Diluted Value",
|
||||
"go-to-account": "Go To Account",
|
||||
"lending": "Lending",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
"all-time-high": "All-time High",
|
||||
"all-time-low": "All-time Low",
|
||||
"borrowing": "Borrowing",
|
||||
"borrows": "Borrows",
|
||||
"borrow-rates": "Borrow Rates",
|
||||
"chart-unavailable": "Chart Unavailable",
|
||||
"circulating-supply": "Circulating Supply",
|
||||
"deposits": "Deposits",
|
||||
"deposit-rates": "Deposit Rates",
|
||||
"fdv": "Fully Diluted Value",
|
||||
"go-to-account": "Go To Account",
|
||||
"lending": "Lending",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
"all-time-high": "All-time High",
|
||||
"all-time-low": "All-time Low",
|
||||
"borrowing": "Borrowing",
|
||||
"borrows": "Borrows",
|
||||
"borrow-rates": "Borrow Rates",
|
||||
"chart-unavailable": "Chart Unavailable",
|
||||
"circulating-supply": "Circulating Supply",
|
||||
"deposits": "Deposits",
|
||||
"deposit-rates": "Deposit Rates",
|
||||
"fdv": "Fully Diluted Value",
|
||||
"go-to-account": "Go To Account",
|
||||
"lending": "Lending",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
"all-time-high": "All-time High",
|
||||
"all-time-low": "All-time Low",
|
||||
"borrowing": "Borrowing",
|
||||
"borrows": "Borrows",
|
||||
"borrow-rates": "Borrow Rates",
|
||||
"chart-unavailable": "Chart Unavailable",
|
||||
"circulating-supply": "Circulating Supply",
|
||||
"deposits": "Deposits",
|
||||
"deposit-rates": "Deposit Rates",
|
||||
"fdv": "Fully Diluted Value",
|
||||
"go-to-account": "Go To Account",
|
||||
"lending": "Lending",
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
"all-time-high": "All-time High",
|
||||
"all-time-low": "All-time Low",
|
||||
"borrowing": "Borrowing",
|
||||
"borrows": "Borrows",
|
||||
"borrow-rates": "Borrow Rates",
|
||||
"chart-unavailable": "Chart Unavailable",
|
||||
"circulating-supply": "Circulating Supply",
|
||||
"deposits": "Deposits",
|
||||
"deposit-rates": "Deposit Rates",
|
||||
"fdv": "Fully Diluted Value",
|
||||
"go-to-account": "Go To Account",
|
||||
"lending": "Lending",
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ module.exports = {
|
|||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(156, 55%, 26%)',
|
||||
hover: 'hsl(202, 5%, 40%)',
|
||||
hover: 'hsl(156, 55%, 21%)',
|
||||
},
|
||||
link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
|
||||
down: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue