utils#shortenTx TypeScript Examples

The following examples show how to use utils#shortenTx. 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: 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>
  );
}