components#CustomTable TypeScript Examples
The following examples show how to use
components#CustomTable.
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: PairsTable.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
PairTable: React.FC<TokensTableProps> = ({ data }) => {
const pairHeadCells = headCells();
const {
bookmarkPairs,
addBookmarkPair,
removeBookmarkPair,
} = useBookmarkPairs();
const mobileHTML = (pair: any, index: number) => {
const token0 = new Token(
ChainId.MATIC,
getAddress(pair.token0.id),
Number(pair.token0.decimals),
pair.token0.symbol,
);
const token1 = new Token(
ChainId.MATIC,
getAddress(pair.token1.id),
Number(pair.token1.decimals),
pair.token1.symbol,
);
const liquidity = pair.trackedReserveUSD
? pair.trackedReserveUSD
: pair.reserveUSD;
const oneDayVolume = pair.oneDayVolumeUSD
? pair.oneDayVolumeUSD
: pair.oneDayVolumeUntracked;
const oneWeekVolume = pair.oneWeekVolumeUSD
? pair.oneWeekVolumeUSD
: pair.oneWeekVolumeUntracked;
const oneDayFee = (
Number(oneDayVolume) * GlobalConst.utils.FEEPERCENT
).toLocaleString();
return (
<Box mt={index === 0 ? 0 : 3}>
<Box display='flex' alignItems='center' mb={1}>
<Box
display='flex'
mr={1}
onClick={() => {
const pairIndex = bookmarkPairs.indexOf(pair.id);
if (pairIndex === -1) {
addBookmarkPair(pair.id);
} else {
removeBookmarkPair(pair.id);
}
}}
>
{bookmarkPairs.indexOf(pair.id) > -1 ? (
<StarChecked />
) : (
<StarUnchecked />
)}
</Box>
<Link
to={`/analytics/pair/${pair.id}`}
style={{ textDecoration: 'none' }}
>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={token0}
currency1={token1}
size={28}
/>
<Box ml={1}>
<Typography variant='body1' color='textPrimary'>
{token0.symbol} / {token1.symbol}
</Typography>
</Box>
</Box>
</Link>
</Box>
<Divider />
<Box
mt={1}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body1'>Liquidity</Typography>
<Typography variant='body1'>
${Number(liquidity).toLocaleString()}
</Typography>
</Box>
<Box
mt={1}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body1'>24h Volume</Typography>
<Typography variant='body1'>
${Number(oneDayVolume).toLocaleString()}
</Typography>
</Box>
<Box
mt={1}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body1'>7d Volume</Typography>
<Typography variant='body1'>
${Number(oneWeekVolume).toLocaleString()}
</Typography>
</Box>
<Box
mt={1}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body1'>24h Fees</Typography>
<Typography variant='body1'>
${Number(oneDayFee).toLocaleString()}
</Typography>
</Box>
</Box>
);
};
const desktopHTML = (pair: any) => {
const token0 = new Token(
ChainId.MATIC,
getAddress(pair.token0.id),
Number(pair.token0.decimals),
pair.token0.symbol,
);
const token1 = new Token(
ChainId.MATIC,
getAddress(pair.token1.id),
Number(pair.token1.decimals),
pair.token1.symbol,
);
const liquidity = pair.trackedReserveUSD
? pair.trackedReserveUSD
: pair.reserveUSD;
const oneDayVolume =
pair.oneDayVolumeUSD && !isNaN(pair.oneDayVolumeUSD)
? pair.oneDayVolumeUSD
: pair.oneDayVolumeUntracked && !isNaN(pair.oneDayVolumeUntracked)
? pair.oneDayVolumeUntracked
: 0;
const oneWeekVolume =
pair.oneWeekVolumeUSD && !isNaN(pair.oneWeekVolumeUSD)
? pair.oneWeekVolumeUSD
: pair.oneWeekVolumeUntracked && !isNaN(pair.oneWeekVolumeUntracked)
? pair.oneWeekVolumeUntracked
: 0;
const oneDayFee = (
Number(oneDayVolume) * GlobalConst.utils.FEEPERCENT
).toLocaleString();
return [
{
html: (
<Box display='flex' alignItems='center'>
<Box
display='flex'
mr={1}
onClick={() => {
const pairIndex = bookmarkPairs.indexOf(pair.id);
if (pairIndex === -1) {
addBookmarkPair(pair.id);
} else {
removeBookmarkPair(pair.id);
}
}}
>
{bookmarkPairs.indexOf(pair.id) > -1 ? (
<StarChecked />
) : (
<StarUnchecked />
)}
</Box>
<Link
to={`/analytics/pair/${pair.id}`}
style={{ textDecoration: 'none' }}
>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={token0}
currency1={token1}
size={28}
/>
<Box ml={1}>
<Typography variant='body1' color='textPrimary'>
{token0.symbol} / {token1.symbol}
</Typography>
</Box>
</Box>
</Link>
</Box>
),
},
{
html: (
<Typography variant='body1'>
${Number(liquidity).toLocaleString()}
</Typography>
),
},
{
html: (
<Typography variant='body1'>
${Number(oneDayVolume).toLocaleString()}
</Typography>
),
},
{
html: (
<Typography variant='body1'>
${Number(oneWeekVolume).toLocaleString()}
</Typography>
),
},
{
html: <Typography variant='body1'>${oneDayFee}</Typography>,
},
];
};
return (
<CustomTable
defaultOrderBy={pairHeadCells[liquidityHeadCellIndex]}
defaultOrder='desc'
showPagination={data.length > GlobalConst.utils.ROWSPERPAGE}
headCells={pairHeadCells}
rowsPerPage={GlobalConst.utils.ROWSPERPAGE}
data={data}
mobileHTML={mobileHTML}
desktopHTML={desktopHTML}
/>
);
}
Example #2
| 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 #3
| Source File: TransactionsTable.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
const [txFilter, setTxFilter] = useState(-1);
const txHeadCells = headCells(txFilter, setTxFilter);
const classes = useStyles();
const { chainId } = useActiveWeb3React();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const { t } = useTranslation();
const getTxString = (txn: any) => {
const messageData = {
token0Symbol: txn.pair.token1.symbol,
token1Symbol: txn.pair.token0.symbol,
};
if (txn.type === TxnType.SWAP) {
return t('txnSwapMessage', messageData);
} else if (txn.type === TxnType.ADD) {
return t('txnAddMessage', messageData);
} else if (txn.type === TxnType.REMOVE) {
return t('txnRemoveMessage', messageData);
}
return '';
};
const mobileHTML = (txn: any, index: number) => {
return (
<Box mt={index === 0 ? 0 : 3} key={index}>
<Box mb={1}>
{chainId ? (
<a
href={getEtherscanLink(
chainId,
txn.transaction.id,
'transaction',
)}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}
>
<Typography
variant='body1'
style={{ color: palette.primary.main }}
>
{getTxString(txn)}
</Typography>
</a>
) : (
<Typography variant='body1' style={{ color: palette.primary.main }}>
{getTxString(txn)}
</Typography>
)}
</Box>
<Divider />
<Box className={classes.mobileRow}>
<Typography variant='body1'>Total Value</Typography>
<Typography variant='body1' color='textPrimary'>
${Number(txn.amountUSD).toLocaleString()}
</Typography>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>Token Amount</Typography>
<Typography variant='body1' color='textPrimary'>
{formatNumber(txn.amount0)} {txn.pair.token0.symbol}
</Typography>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>Token Amount</Typography>
<Typography variant='body1' color='textPrimary'>
{formatNumber(txn.amount1)} {txn.pair.token1.symbol}
</Typography>
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>TXN</Typography>
{chainId ? (
<a
href={getEtherscanLink(
chainId,
txn.transaction.id,
'transaction',
)}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}
>
<Typography
variant='body1'
style={{ color: palette.primary.main }}
>
{shortenTx(txn.transaction.id)}
</Typography>
</a>
) : (
<Typography variant='body1' style={{ color: palette.primary.main }}>
{shortenTx(txn.transaction.id)}
</Typography>
)}
</Box>
<Box className={classes.mobileRow}>
<Typography variant='body1'>Time</Typography>
<Typography variant='body1' color='textPrimary'>
{dayjs(Number(txn.transaction.timestamp) * 1000).fromNow()}
</Typography>
</Box>
</Box>
);
};
const desktopHTML = (txn: any) => {
return [
{
html: chainId ? (
<a
href={getEtherscanLink(chainId, txn.transaction.id, 'transaction')}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}
>
<Typography variant='body1' style={{ color: palette.primary.main }}>
{getTxString(txn)}
</Typography>
</a>
) : (
<Typography variant='body1' style={{ color: palette.primary.main }}>
{getTxString(txn)}
</Typography>
),
},
{
html: (
<Typography variant='body1' color='textPrimary'>
${Number(txn.amountUSD).toLocaleString()}
</Typography>
),
},
{
html: (
<Typography variant='body1' color='textPrimary'>
{formatNumber(txn.amount1)} {txn.pair.token1.symbol}
</Typography>
),
},
{
html: (
<Typography variant='body1' color='textPrimary'>
{formatNumber(txn.amount0)} {txn.pair.token0.symbol}
</Typography>
),
},
{
html: chainId ? (
<a
href={getEtherscanLink(chainId, txn.transaction.id, 'transaction')}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}
>
<Typography variant='body1' style={{ color: palette.primary.main }}>
{shortenTx(txn.transaction.id)}
</Typography>
</a>
) : (
<Typography variant='body1' style={{ color: palette.primary.main }}>
{shortenTx(txn.transaction.id)}
</Typography>
),
},
{
html: (
<Typography variant='body1' color='textPrimary'>
{dayjs(Number(txn.transaction.timestamp) * 1000).fromNow()}
</Typography>
),
},
];
};
return (
<Box position='relative'>
{isMobile && (
<Box
display='flex'
alignItems='center'
position='absolute'
top={-48}
right={0}
>
<Box padding={1} onClick={() => setTxFilter(-1)}>
<Typography
variant='body1'
color={txFilter === -1 ? 'textPrimary' : 'textSecondary'}
>
All
</Typography>
</Box>
<Box padding={1} onClick={() => setTxFilter(TxnType.SWAP)}>
<Typography
variant='body1'
color={
txFilter === TxnType.SWAP ? 'textPrimary' : 'textSecondary'
}
>
Swap
</Typography>
</Box>
<Box padding={1} onClick={() => setTxFilter(TxnType.ADD)}>
<Typography
variant='body1'
color={txFilter === TxnType.ADD ? 'textPrimary' : 'textSecondary'}
>
Add
</Typography>
</Box>
<Box padding={1} onClick={() => setTxFilter(TxnType.REMOVE)}>
<Typography
variant='body1'
color={
txFilter === TxnType.REMOVE ? 'textPrimary' : 'textSecondary'
}
>
Remove
</Typography>
</Box>
</Box>
)}
<CustomTable
showPagination={data.length > 10}
headCells={txHeadCells}
defaultOrderBy={txHeadCells[5]}
rowsPerPage={10}
data={data.filter((item) =>
txFilter === -1 ? true : item.type === txFilter,
)}
mobileHTML={mobileHTML}
desktopHTML={desktopHTML}
/>
</Box>
);
}
