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