utils#getFormattedPrice TypeScript Examples
The following examples show how to use
utils#getFormattedPrice.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TokensTable.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
TokensTable: React.FC<TokensTableProps> = ({ data }) => {
const tokenHeadCells = headCells();
const classes = useStyles();
const { palette } = useTheme();
const {
bookmarkTokens,
addBookmarkToken,
removeBookmarkToken,
} = useBookmarkTokens();
const mobileHTML = (token: any, index: number) => {
const tokenCurrency = new Token(
ChainId.MATIC,
getAddress(token.id),
Number(token.decimals),
token.symbol,
token.name,
);
const priceColor = getPriceColor(Number(token.priceChangeUSD), palette);
return (
<Box mt={index === 0 ? 0 : 3}>
<Box display='flex' alignItems='center' mb={1}>
<Box
display='flex'
mr={1}
onClick={() => {
const tokenIndex = bookmarkTokens.indexOf(token.id);
if (tokenIndex === -1) {
addBookmarkToken(token.id);
} else {
removeBookmarkToken(token.id);
}
}}
>
{bookmarkTokens.indexOf(token.id) > -1 ? (
<StarChecked />
) : (
<StarUnchecked />
)}
</Box>
<Link
to={`/analytics/token/${tokenCurrency.address}`}
style={{ textDecoration: 'none' }}
>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={tokenCurrency} size='28px' />
<Box ml={1}>
<Typography
variant='body1'
style={{ color: palette.text.primary }}
>
{token.name}{' '}
<span style={{ color: palette.text.hint }}>
({token.symbol})
</span>
</Typography>
</Box>
</Box>
</Link>
</Box>
<Divider />
<Box className={classes.mobileRow}>
<Typography variant='body1'>Price</Typography>
<Typography variant='body1'>
${formatNumber(token.priceUSD)}
</Typography>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>24H %</Typography>
<Box
className={classes.priceChangeWrapper}
bgcolor={priceColor.bgColor}
color={priceColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(token.priceChangeUSD))}%
</Typography>
</Box>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>24H Volume</Typography>
<Typography variant='body1'>
${Number(token.oneDayVolumeUSD).toLocaleString()}
</Typography>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>Liquidity</Typography>
<Typography variant='body1'>
${Number(token.totalLiquidityUSD).toLocaleString()}
</Typography>
</Box>
</Box>
);
};
const desktopHTML = (token: any) => {
const tokenCurrency = new Token(
ChainId.MATIC,
getAddress(token.id),
Number(token.decimals),
token.symbol,
token.name,
);
const priceColor = getPriceColor(Number(token.priceChangeUSD), palette);
return [
{
html: (
<Box display='flex' alignItems='center'>
<Box
display='flex'
mr={1}
onClick={() => {
const tokenIndex = bookmarkTokens.indexOf(token.id);
if (tokenIndex === -1) {
addBookmarkToken(token.id);
} else {
removeBookmarkToken(token.id);
}
}}
>
{bookmarkTokens.indexOf(token.id) > -1 ? (
<StarChecked />
) : (
<StarUnchecked />
)}
</Box>
<Link
to={`/analytics/token/${tokenCurrency.address}`}
style={{ textDecoration: 'none' }}
>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={tokenCurrency} size='28px' />
<Box ml={1}>
<Typography
variant='body1'
style={{ color: palette.text.primary }}
>
{token.name}{' '}
<span style={{ color: palette.text.hint }}>
({token.symbol})
</span>
</Typography>
</Box>
</Box>
</Link>
</Box>
),
},
{
html: (
<Box>
<Typography>${Number(token.priceUSD).toLocaleString()}</Typography>
</Box>
),
},
{
html: (
<Box
className={classes.priceChangeWrapper}
mr={2}
bgcolor={priceColor.bgColor}
color={priceColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(token.priceChangeUSD))}%
</Typography>
</Box>
),
},
{
html: (
<Box>
<Typography>
${Number(token.oneDayVolumeUSD).toLocaleString()}
</Typography>
</Box>
),
},
{
html: (
<Box>
<Typography>
${Number(token.totalLiquidityUSD).toLocaleString()}
</Typography>
</Box>
),
},
];
};
return (
<CustomTable
defaultOrderBy={tokenHeadCells[liquidityHeadCellIndex]}
defaultOrder='desc'
showPagination={data.length > GlobalConst.utils.ROWSPERPAGE}
headCells={tokenHeadCells}
rowsPerPage={GlobalConst.utils.ROWSPERPAGE}
data={data}
mobileHTML={mobileHTML}
desktopHTML={desktopHTML}
/>
);
}
Example #2
| Source File: AnalyticsPairChart.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsPairChart: React.FC<{ pairData: any }> = ({ pairData }) => {
const classes = useStyles();
const { palette } = useTheme();
const match = useRouteMatch<{ id: string }>();
const pairAddress = match.params.id;
const [pairChartData, setPairChartData] = useState<any[] | null>(null);
const [durationIndex, setDurationIndex] = useState(
GlobalConst.analyticChart.ONE_MONTH_CHART,
);
const usingUtVolume =
pairData &&
pairData.oneDayVolumeUSD === 0 &&
!!pairData.oneDayVolumeUntracked;
const fees =
pairData && (pairData.oneDayVolumeUSD || pairData.oneDayVolumeUSD === 0)
? usingUtVolume
? (
Number(pairData.oneDayVolumeUntracked) *
GlobalConst.utils.FEEPERCENT
).toLocaleString()
: (
Number(pairData.oneDayVolumeUSD) * GlobalConst.utils.FEEPERCENT
).toLocaleString()
: '-';
const [chartIndex, setChartIndex] = useState(CHART_VOLUME);
const chartIndexes = [CHART_VOLUME, CHART_LIQUIDITY, CHART_FEES];
const chartIndexTexts = ['Volume', 'Liquidity', 'Fees'];
const chartData = useMemo(() => {
if (!pairChartData) return;
return pairChartData.map((item: any) => {
switch (chartIndex) {
case CHART_VOLUME:
return Number(item.dailyVolumeUSD);
case CHART_LIQUIDITY:
return Number(item.reserveUSD);
case CHART_FEES:
return Number(item.dailyVolumeUSD) * GlobalConst.utils.FEEPERCENT;
default:
return;
}
});
}, [pairChartData, chartIndex]);
const currentData = useMemo(() => {
if (!pairData) return;
switch (chartIndex) {
case CHART_VOLUME:
return pairData.oneDayVolumeUSD;
case CHART_LIQUIDITY:
return pairData.reserveUSD ?? pairData.trackedReserveUSD;
case CHART_FEES:
return fees;
default:
return;
}
}, [pairData, chartIndex, fees]);
const currentPercent = useMemo(() => {
if (!pairData) return;
switch (chartIndex) {
case CHART_VOLUME:
return pairData.volumeChangeUSD;
case CHART_LIQUIDITY:
return pairData.liquidityChangeUSD;
case CHART_FEES:
return usingUtVolume
? pairData.volumeChangeUntracked
: pairData.volumeChangeUSD;
default:
return;
}
}, [pairData, chartIndex, usingUtVolume]);
useEffect(() => {
async function fetchPairChartData() {
setPairChartData(null);
const chartData = await getPairChartData(
pairAddress,
durationIndex === GlobalConst.analyticChart.ALL_CHART
? 0
: getChartStartTime(durationIndex),
);
if (chartData && chartData.length > 0) {
const newChartData = getLimitedData(
chartData,
GlobalConst.analyticChart.CHART_COUNT,
);
setPairChartData(newChartData);
}
}
fetchPairChartData();
}, [pairAddress, durationIndex]);
const currentPercentColor = getPriceColor(Number(currentPercent), palette);
return (
<>
<Box display='flex' flexWrap='wrap' justifyContent='space-between'>
<Box mt={1.5}>
<Typography variant='caption'>
{chartIndexTexts[chartIndex]}
</Typography>
<Box mt={1}>
{currentPercent && currentData ? (
<>
<Box display='flex' alignItems='center'>
<Typography
variant='h4'
style={{ color: palette.text.primary }}
>
$
{currentData > 100000
? formatCompact(currentData)
: currentData.toLocaleString()}
</Typography>
<Box
className={classes.priceChangeWrapper}
ml={1}
bgcolor={currentPercentColor.bgColor}
color={currentPercentColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(currentPercent))}%
</Typography>
</Box>
</Box>
<Box>
<Typography variant='caption'>
{dayjs().format('MMM DD, YYYY')}
</Typography>
</Box>
</>
) : (
<Skeleton variant='rect' width='120px' height='30px' />
)}
</Box>
</Box>
<Box display='flex' flexDirection='column' alignItems='flex-end'>
<Box mt={1.5}>
<ChartType
chartTypes={chartIndexes}
typeTexts={chartIndexTexts}
chartType={chartIndex}
setChartType={setChartIndex}
/>
</Box>
<Box mt={1.5}>
<ChartType
chartTypes={GlobalData.analytics.CHART_DURATIONS}
typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
chartType={durationIndex}
setChartType={setDurationIndex}
/>
</Box>
</Box>
</Box>
<Box mt={2} width={1}>
{chartData && pairChartData ? (
<AreaChart
data={chartData}
yAxisValues={getYAXISValuesAnalytics(chartData)}
dates={pairChartData.map((value: any) =>
dayjs(value.date * 1000)
.add(1, 'day')
.unix(),
)}
width='100%'
height={240}
categories={getChartDates(pairChartData, durationIndex)}
/>
) : (
<Skeleton variant='rect' width='100%' height={217} />
)}
</Box>
</>
);
}
Example #3
| Source File: AnalyticsTokenChart.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsTokenChart: React.FC<{ token: any }> = ({ token }) => {
const classes = useStyles();
const { palette } = useTheme();
const match = useRouteMatch<{ id: string }>();
const tokenAddress = match.params.id;
const [tokenChartData, updateTokenChartData] = useState<any>(null);
const chartIndexes = [CHART_VOLUME, CHART_LIQUIDITY, CHART_PRICE];
const chartIndexTexts = ['Volume', 'Liquidity', 'Price'];
const [chartIndex, setChartIndex] = useState(CHART_VOLUME);
const [durationIndex, setDurationIndex] = useState(
GlobalConst.analyticChart.ONE_MONTH_CHART,
);
const chartData = useMemo(() => {
if (!tokenChartData) return;
return tokenChartData.map((item: any) => {
switch (chartIndex) {
case CHART_VOLUME:
return Number(item.dailyVolumeUSD);
case CHART_LIQUIDITY:
return Number(item.totalLiquidityUSD);
case CHART_PRICE:
return Number(item.priceUSD);
default:
return;
}
});
}, [tokenChartData, chartIndex]);
const currentData = useMemo(() => {
if (!token) return;
switch (chartIndex) {
case CHART_VOLUME:
return token.oneDayVolumeUSD;
case CHART_LIQUIDITY:
return token.totalLiquidityUSD;
case CHART_PRICE:
return token.priceUSD;
default:
return;
}
}, [token, chartIndex]);
const currentPercent = useMemo(() => {
if (!token) return;
switch (chartIndex) {
case CHART_VOLUME:
return token.volumeChangeUSD;
case CHART_LIQUIDITY:
return token.liquidityChangeUSD;
case CHART_PRICE:
return token.priceChangeUSD;
default:
return;
}
}, [token, chartIndex]);
useEffect(() => {
async function fetchTokenChartData() {
updateTokenChartData(null);
const chartData = await getTokenChartData(
tokenAddress,
durationIndex === GlobalConst.analyticChart.ALL_CHART
? 0
: getChartStartTime(durationIndex),
);
if (chartData) {
const newChartData = getLimitedData(
chartData,
GlobalConst.analyticChart.CHART_COUNT,
);
updateTokenChartData(newChartData);
}
}
fetchTokenChartData();
}, [updateTokenChartData, tokenAddress, durationIndex]);
const currentPercentColor = getPriceColor(Number(currentPercent), palette);
return (
<>
<Box display='flex' flexWrap='wrap' justifyContent='space-between'>
<Box mt={1.5}>
<Typography variant='caption'>
{chartIndexTexts[chartIndex]}
</Typography>
<Box mt={1}>
{currentData && currentPercent ? (
<>
<Box display='flex' alignItems='center'>
<Typography
variant='h4'
style={{ color: palette.text.primary }}
>
$
{currentData > 100000
? formatCompact(currentData)
: formatNumber(currentData)}
</Typography>
<Box
className={classes.priceChangeWrapper}
ml={1}
bgcolor={currentPercentColor.bgColor}
color={currentPercentColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(currentPercent))}%
</Typography>
</Box>
</Box>
<Box>
<Typography variant='caption'>
{dayjs().format('MMM DD, YYYY')}
</Typography>
</Box>
</>
) : (
<Skeleton variant='rect' width='120px' height='30px' />
)}
</Box>
</Box>
<Box display='flex' flexDirection='column' alignItems='flex-end'>
<Box mt={1.5}>
<ChartType
chartTypes={chartIndexes}
typeTexts={chartIndexTexts}
chartType={chartIndex}
setChartType={setChartIndex}
/>
</Box>
<Box mt={1.5}>
<ChartType
chartTypes={GlobalData.analytics.CHART_DURATIONS}
typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
chartType={durationIndex}
setChartType={setDurationIndex}
/>
</Box>
</Box>
</Box>
<Box mt={2} width={1}>
{tokenChartData ? (
<AreaChart
data={chartData}
yAxisValues={getYAXISValuesAnalytics(chartData)}
dates={tokenChartData.map((value: any) =>
dayjs(value.date * 1000)
.add(1, 'day')
.unix(),
)}
width='100%'
height={240}
categories={getChartDates(tokenChartData, durationIndex)}
/>
) : (
<Skeleton variant='rect' width='100%' height={217} />
)}
</Box>
</>
);
}
Example #4
| Source File: AnalyticsTokenDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsTokenDetails: React.FC = () => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const history = useHistory();
const match = useRouteMatch<{ id: string }>();
const tokenAddress = match.params.id;
const [token, setToken] = useState<any>(null);
const { chainId } = useActiveWeb3React();
const currency = token
? new Token(ChainId.MATIC, getAddress(token.id), token.decimals)
: undefined;
const [tokenPairs, updateTokenPairs] = useState<any>(null);
const {
bookmarkTokens,
addBookmarkToken,
removeBookmarkToken,
} = useBookmarkTokens();
useEffect(() => {
async function fetchTokenInfo() {
const [newPrice, oneDayPrice] = await getEthPrice();
const tokenInfo = await getTokenInfo(newPrice, oneDayPrice, tokenAddress);
if (tokenInfo) {
setToken(tokenInfo[0]);
}
}
fetchTokenInfo();
}, [tokenAddress]);
useEffect(() => {
async function fetchTokenPairs() {
const [newPrice] = await getEthPrice();
const tokenPairs = await getTokenPairs2(tokenAddress);
const formattedPairs = tokenPairs
? tokenPairs.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTokenPairs(pairData);
}
}
fetchTokenPairs();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updateTokenPairs, tokenAddress]);
const tokenPercentColor = getPriceColor(
token ? Number(token.priceChangeUSD) : 0,
palette,
);
return (
<>
<AnalyticsHeader type='token' data={token} />
{token ? (
<>
<Box
width={1}
display='flex'
flexWrap='wrap'
justifyContent='space-between'
>
<Box display='flex'>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Box display='flex' alignItems='center'>
<Box display='flex' alignItems='flex-end' mr={0.5}>
<Typography className={classes.heading1}>
{token.name}{' '}
</Typography>
<Typography className={classes.heading2}>
({token.symbol})
</Typography>
</Box>
{bookmarkTokens.includes(token.id) ? (
<StarChecked
onClick={() => removeBookmarkToken(token.id)}
/>
) : (
<StarUnchecked onClick={() => addBookmarkToken(token.id)} />
)}
</Box>
<Box mt={1.25} display='flex' alignItems='center'>
<Typography
variant='h5'
style={{ color: palette.text.primary }}
>
${formatNumber(token.priceUSD)}
</Typography>
<Box
className={classes.priceChangeWrapper}
ml={2}
bgcolor={tokenPercentColor.bgColor}
color={tokenPercentColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(token.priceChangeUSD))}%
</Typography>
</Box>
</Box>
</Box>
</Box>
<Box my={2} display='flex'>
<Box
className={classes.button}
mr={1.5}
border={`1px solid ${palette.primary.main}`}
onClick={() => {
history.push(`/pools?currency0=${token.id}¤cy1=ETH`);
}}
>
<Typography variant='body2'>Add Liquidity</Typography>
</Box>
<Box
className={cx(classes.button, classes.filledButton)}
onClick={() => {
history.push(`/swap?currency0=${token.id}¤cy1=ETH`);
}}
>
<Typography variant='body2'>Swap</Typography>
</Box>
</Box>
</Box>
<Box width={1} className={classes.panel} mt={4}>
<Grid container>
<Grid item xs={12} sm={12} md={6}>
<AnalyticsTokenChart token={token} />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box
my={2}
height={1}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box
width={isMobile ? 1 : 0.8}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
TOTAL LIQUIDITY
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.totalLiquidityUSD.toLocaleString()}
</Typography>
</Box>
<Box width={140}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
7d Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.oneWeekVolumeUSD.toLocaleString()}
</Typography>
</Box>
</Box>
<Box
width={isMobile ? 1 : 0.8}
mt={4}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.oneDayVolumeUSD.toLocaleString()}
</Typography>
</Box>
<Box width={140}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h FEES
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
$
{(
token.oneDayVolumeUSD * GlobalConst.utils.FEEPERCENT
).toLocaleString()}
</Typography>
</Box>
</Box>
<Box
width={isMobile ? 1 : 0.8}
mt={4}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
Contract Address
</Typography>
<Typography
variant='h5'
style={{ color: palette.primary.main }}
>
{chainId ? (
<a
href={getEtherscanLink(
chainId,
token.id,
'address',
)}
target='_blank'
rel='noopener noreferrer'
style={{
color: palette.primary.main,
textDecoration: 'none',
}}
>
{shortenAddress(token.id)}
</a>
) : (
shortenAddress(token.id)
)}
</Typography>
</Box>
</Box>
</Box>
</Grid>
</Grid>
</Box>
<Box width={1} mt={5}>
<Typography variant='body1'>{token.symbol} Pools</Typography>
</Box>
<Box width={1} className={classes.panel} mt={4}>
{tokenPairs ? (
<PairTable data={tokenPairs} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</>
) : (
<Skeleton width='100%' height={100} />
)}
</>
);
}
