compact large numbers
This commit is contained in:
saml33
parent
9a142a0bf8
commit
ef12fb2b7c
|
|
@ -1172,7 +1172,7 @@ const JupiterForm: FunctionComponent = () => {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 xl:w-2/3">
|
||||
<div className="py-4 md:py-0 w-full md:w-1/2 xl:w-2/3">
|
||||
<Tabs
|
||||
activeTab={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@ export const numberFormatter = Intl.NumberFormat('en', {
|
|||
maximumFractionDigits: 5,
|
||||
})
|
||||
|
||||
export const numberCompacter = Intl.NumberFormat('en', {
|
||||
notation: 'compact',
|
||||
maximumFractionDigits: 2,
|
||||
})
|
||||
|
||||
const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
||||
inputTokenId,
|
||||
outputTokenId,
|
||||
|
|
@ -397,14 +402,15 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{inputTokenInfo.market_data?.market_cap ? (
|
||||
{inputTokenInfo.market_data?.market_cap &&
|
||||
inputTokenInfo.market_data?.market_cap?.usd !== 0 ? (
|
||||
<div className="border border-th-bkg-4 m-1 p-3 rounded-md">
|
||||
<div className="text-th-fgd-3 text-xs">
|
||||
Market Cap
|
||||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
$
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
inputTokenInfo.market_data?.market_cap?.usd
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -417,7 +423,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
$
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
inputTokenInfo.market_data.total_volume?.usd
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -429,14 +435,14 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
Token Supply
|
||||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
inputTokenInfo.market_data.circulating_supply
|
||||
)}
|
||||
</div>
|
||||
{inputTokenInfo.market_data?.max_supply ? (
|
||||
<div className="text-th-fgd-2 text-xs">
|
||||
Max Supply:{' '}
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
inputTokenInfo.market_data.max_supply
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -647,14 +653,15 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{outputTokenInfo.market_data?.market_cap ? (
|
||||
{outputTokenInfo.market_data?.market_cap &&
|
||||
outputTokenInfo.market_data?.market_cap?.usd !== 0 ? (
|
||||
<div className="border border-th-bkg-4 m-1 p-3 rounded-md">
|
||||
<div className="text-th-fgd-3 text-xs">
|
||||
Market Cap
|
||||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
$
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
outputTokenInfo.market_data?.market_cap?.usd
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -667,7 +674,7 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
$
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
outputTokenInfo.market_data.total_volume?.usd
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -679,14 +686,14 @@ const SwapTokenInfo: FunctionComponent<SwapTokenInfoProps> = ({
|
|||
Token Supply
|
||||
</div>
|
||||
<div className="font-bold text-th-fgd-1 text-lg">
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
outputTokenInfo.market_data.circulating_supply
|
||||
)}
|
||||
</div>
|
||||
{outputTokenInfo.market_data?.max_supply ? (
|
||||
<div className="text-th-fgd-2 text-xs">
|
||||
Max Supply:{' '}
|
||||
{numberFormatter.format(
|
||||
{numberCompacter.format(
|
||||
outputTokenInfo.market_data.max_supply
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { PublicKey } from '@solana/web3.js'
|
||||
import ButtonGroup from './ButtonGroup'
|
||||
import { numberFormatter } from './SwapTokenInfo'
|
||||
import { numberCompacter } from './SwapTokenInfo'
|
||||
|
||||
const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
||||
const [tokenInsights, setTokenInsights] = useState([])
|
||||
const [filteredTokenInsights, setFilteredTokenInsights] = useState([])
|
||||
const [insightType, setInsightType] = useState('Best')
|
||||
const [filterBy, setFilterBy] = useState('24h Change')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const getTokenInsights = async () => {
|
||||
|
|
@ -22,27 +23,53 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
setTokenInsights(data)
|
||||
}
|
||||
|
||||
console.log(filteredTokenInsights)
|
||||
|
||||
useEffect(() => {
|
||||
if (insightType === 'Best') {
|
||||
if (filterBy === '24h Change') {
|
||||
setFilteredTokenInsights(
|
||||
tokenInsights
|
||||
.sort(
|
||||
(a, b) =>
|
||||
b.price_change_percentage_24h - a.price_change_percentage_24h
|
||||
.sort((a, b) =>
|
||||
insightType === 'Best'
|
||||
? b.price_change_percentage_24h - a.price_change_percentage_24h
|
||||
: a.price_change_percentage_24h - b.price_change_percentage_24h
|
||||
)
|
||||
.slice(0, 10)
|
||||
)
|
||||
} else {
|
||||
setFilteredTokenInsights(
|
||||
tokenInsights
|
||||
.sort(
|
||||
(a, b) =>
|
||||
a.price_change_percentage_24h - b.price_change_percentage_24h
|
||||
.sort((a, b) =>
|
||||
insightType === 'Best'
|
||||
? b.total_volume - a.total_volume
|
||||
: a.total_volume - b.total_volume
|
||||
)
|
||||
.slice(0, 10)
|
||||
)
|
||||
}
|
||||
}, [insightType, tokenInsights])
|
||||
}, [filterBy, insightType, tokenInsights])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (insightType === 'Best') {
|
||||
// setFilteredTokenInsights(
|
||||
// tokenInsights
|
||||
// .sort(
|
||||
// (a, b) =>
|
||||
// b.price_change_percentage_24h - a.price_change_percentage_24h
|
||||
// )
|
||||
// .slice(0, 10)
|
||||
// )
|
||||
// } else {
|
||||
// setFilteredTokenInsights(
|
||||
// tokenInsights
|
||||
// .sort(
|
||||
// (a, b) =>
|
||||
// a.price_change_percentage_24h - b.price_change_percentage_24h
|
||||
// )
|
||||
// .slice(0, 10)
|
||||
// )
|
||||
// }
|
||||
// }, [insightType, tokenInsights])
|
||||
|
||||
useEffect(() => {
|
||||
if (jupiterTokens) {
|
||||
|
|
@ -53,7 +80,14 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
return filteredTokenInsights ? (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="font-bold text-base text-th-fgd-1">24h Change</h2>
|
||||
{/* <h2 className="font-bold text-base text-th-fgd-1">24h Change</h2> */}
|
||||
<div className="w-48">
|
||||
<ButtonGroup
|
||||
activeValue={filterBy}
|
||||
onChange={(t) => setFilterBy(t)}
|
||||
values={['24h Change', '24h Volume']}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-40">
|
||||
<ButtonGroup
|
||||
activeValue={insightType}
|
||||
|
|
@ -65,9 +99,9 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 w-full" />
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 w-full" />
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 w-full" />
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
|
||||
<div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
|
||||
</div>
|
||||
) : (
|
||||
filteredTokenInsights.map((insight) => {
|
||||
|
|
@ -88,10 +122,14 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={`text-xs ${
|
||||
insightType === 'Best' ? 'text-th-green' : 'text-th-red'
|
||||
insight.price_change_percentage_24h >= 0
|
||||
? 'text-th-green'
|
||||
: 'text-th-red'
|
||||
}`}
|
||||
>
|
||||
{insight.price_change_percentage_24h.toFixed(1)}%
|
||||
{insight.price_change_percentage_24h
|
||||
? `${insight.price_change_percentage_24h.toFixed(1)}%`
|
||||
: '?'}
|
||||
</div>
|
||||
{insight.image ? (
|
||||
<img
|
||||
|
|
@ -113,7 +151,7 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
<div className="text-th-fgd-3 text-xs">{insight.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-3 text-right text-xs">
|
||||
<div className="flex pl-2 space-x-3 text-right text-xs">
|
||||
<div>
|
||||
<div className="text-th-fgd-4">Price</div>
|
||||
<div className="text-th-fgd-3">
|
||||
|
|
@ -129,7 +167,16 @@ const SwapTokenInsights = ({ formState, jupiterTokens, setOutputToken }) => {
|
|||
<div className="text-th-fgd-4">M. Cap</div>
|
||||
<div className="text-th-fgd-3">
|
||||
{insight.market_cap > 0
|
||||
? `$${numberFormatter.format(insight.market_cap)}`
|
||||
? `$${numberCompacter.format(insight.market_cap)}`
|
||||
: '?'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-l border-th-bkg-4" />
|
||||
<div>
|
||||
<div className="text-th-fgd-4">Volume</div>
|
||||
<div className="text-th-fgd-3">
|
||||
{insight.total_volume > 0
|
||||
? `$${numberCompacter.format(insight.total_volume)}`
|
||||
: '?'}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue