@material-ui/icons#ArrowForwardIos TypeScript Examples

The following examples show how to use @material-ui/icons#ArrowForwardIos. 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: AnalyticsHeader.tsx From interface-v2 with GNU General Public License v3.0

4 votes

AnalyticsHeader: React.FC<AnalyticHeaderProps> = ({ data, type }) => {
  const classes = useStyles();
  const { palette } = useTheme();
  const history = useHistory();
  const { pathname } = useLocation();

  return (
    <Box width='100%' mb={3}>
      <Box mb={4}>
        <Typography variant='h4'>Quickswap Analytics</Typography>
      </Box>
      <Box
        mb={4}
        position='relative'
        display='flex'
        justifyContent='space-between'
        flexWrap='wrap'
      >
        <Box marginY={1.5} display='flex' alignItems='center'>
          {type && data && (
            <Box display='flex' alignItems='center' color={palette.text.hint}>
              <Typography
                variant='caption'
                className={classes.link}
                onClick={() => {
                  history.push('/analytics');
                }}
              >
                Analytics
              </Typography>
              <ArrowForwardIos style={{ width: 16 }} />
              <Typography
                variant='caption'
                className={classes.link}
                onClick={() => {
                  history.push(`/analytics/${type}s`);
                }}
              >
                {type === 'token' ? 'Tokens' : 'Pairs'}
              </Typography>
              <ArrowForwardIos style={{ width: 16 }} />
              <Typography variant='caption'>
                <span style={{ color: '#b6b9cc' }}>
                  {type === 'token'
                    ? data.symbol
                    : `${data.token0.symbol}/${data.token1.symbol}`}
                </span>
                ({shortenAddress(data.id)})
              </Typography>
            </Box>
          )}
          {!type && (
            <>
              <Box
                className={cx(
                  classes.topTab,
                  pathname.indexOf('pair') === -1 &&
                    pathname.indexOf('token') === -1 &&
                    classes.selectedTab,
                )}
                onClick={() => history.push(`/analytics`)}
              >
                <Typography variant='body1'>Overview</Typography>
              </Box>
              <Box
                className={cx(
                  classes.topTab,
                  pathname.indexOf('token') > -1 && classes.selectedTab,
                )}
                onClick={() => history.push(`/analytics/tokens`)}
              >
                <Typography variant='body1'>Tokens</Typography>
              </Box>
              <Box
                className={cx(
                  classes.topTab,
                  pathname.indexOf('pair') > -1 && classes.selectedTab,
                )}
                onClick={() => history.push(`/analytics/pairs`)}
              >
                <Typography variant='body1'>Pairs</Typography>
              </Box>
            </>
          )}
        </Box>

        <Search />
      </Box>
    </Box>
  );
}

Example #2

Source File: AnalyticsOverview.tsx From interface-v2 with GNU General Public License v3.0

4 votes

AnalyticsOverview: React.FC = () => {
  const classes = useStyles();
  const history = useHistory();
  const { breakpoints } = useTheme();
  const isMobile = useMediaQuery(breakpoints.down('xs'));
  const { globalData, updateGlobalData } = useGlobalData();
  const [topTokens, updateTopTokens] = useState<any[] | null>(null);
  const [topPairs, updateTopPairs] = useState<any[] | null>(null);

  useEffect(() => {
    const fetchGlobalData = async () => {
      const [newPrice, oneDayPrice] = await getEthPrice();
      const globalData = await getGlobalData(newPrice, oneDayPrice);
      if (globalData) {
        updateGlobalData({ data: globalData });
      }
    };
    const fetchTopTokens = async () => {
      updateTopTokens(null);
      const [newPrice, oneDayPrice] = await getEthPrice();
      const topTokensData = await getTopTokens(
        newPrice,
        oneDayPrice,
        GlobalConst.utils.ROWSPERPAGE,
      );
      if (topTokensData) {
        updateTopTokens(topTokensData);
      }
    };
    const fetchTopPairs = async () => {
      updateTopPairs(null);
      const [newPrice] = await getEthPrice();
      const pairs = await getTopPairs(GlobalConst.utils.ROWSPERPAGE);
      const formattedPairs = pairs
        ? pairs.map((pair: any) => {
            return pair.id;
          })
        : [];
      const pairData = await getBulkPairData(formattedPairs, newPrice);
      if (pairData) {
        updateTopPairs(pairData);
      }
    };
    fetchGlobalData();
    fetchTopTokens();
    fetchTopPairs();
  }, [updateGlobalData, updateTopTokens, updateTopPairs]);

  return (
    <Box width='100%' mb={3}>
      <Grid container spacing={4}>
        <Grid item xs={12} sm={12} md={6}>
          <Box className={classes.panel} padding={isMobile ? 1.5 : 3} width={1}>
            <AnalyticsLiquidityChart />
          </Box>
        </Grid>
        <Grid item xs={12} sm={12} md={6}>
          <Box
            className={classes.panel}
            padding={isMobile ? 1.5 : 3}
            width={1}
            height={1}
            display='flex'
            flexDirection='column'
            justifyContent='space-between'
          >
            <AnalyticsVolumeChart />
          </Box>
        </Grid>
      </Grid>
      <Box mt={4}>
        <Box
          display='flex'
          flexWrap='wrap'
          paddingX={4}
          paddingY={1.5}
          className={classes.panel}
        >
          {globalData ? (
            <AnalyticsInfo data={globalData} />
          ) : (
            <Skeleton width='100%' height={20} />
          )}
        </Box>
      </Box>
      <Box mt={4}>
        <Box display='flex' justifyContent='space-between' alignItems='center'>
          <Box className={classes.headingWrapper}>
            <Typography variant='h6'>Top Tokens</Typography>
          </Box>
          <Box
            className={classes.headingWrapper}
            style={{ cursor: 'pointer' }}
            onClick={() => history.push(`/analytics/tokens`)}
          >
            <Typography variant='h6'>See All</Typography>
            <ArrowForwardIos />
          </Box>
        </Box>
      </Box>
      <Box
        mt={3}
        paddingX={isMobile ? 1.5 : 4}
        paddingY={isMobile ? 1.5 : 3}
        className={classes.panel}
      >
        {topTokens ? (
          <TokensTable data={topTokens} />
        ) : (
          <Skeleton variant='rect' width='100%' height={150} />
        )}
      </Box>
      <Box mt={4}>
        <Box display='flex' justifyContent='space-between' alignItems='center'>
          <Box className={classes.headingWrapper}>
            <Typography variant='h6'>Top Pairs</Typography>
          </Box>
          <Box
            className={classes.headingWrapper}
            style={{ cursor: 'pointer' }}
            onClick={() => history.push(`/analytics/pairs`)}
          >
            <Typography variant='h6'>See All</Typography>
            <ArrowForwardIos />
          </Box>
        </Box>
      </Box>
      <Box
        mt={3}
        paddingX={isMobile ? 1.5 : 4}
        paddingY={isMobile ? 1.5 : 3}
        className={classes.panel}
      >
        {topPairs ? (
          <PairTable data={topPairs} />
        ) : (
          <Skeleton variant='rect' width='100%' height={150} />
        )}
      </Box>
    </Box>
  );
}