@material-ui/lab#Skeleton TypeScript Examples

export default function FieldSkeleton(props: SkeletonProps) {
  const theme = useTheme();
  return (
    <Skeleton
      variant="rect"
      width="100%"
      height={56}
      animation="wave"
      style={{ borderRadius: theme.shape.borderRadius }}
      {...props}
    />
  );
}

export default function SenderAccountsLoading() {
  const classes = useStyles();
  return (
    <Box display="flex" flexDirection="column" alignItems="center" className={classes.skeleton}>
      <Skeleton animation="wave" width="100%" height={50} />
      <Skeleton animation="wave" width="100%" height={50} />
      <Skeleton animation="wave" width="100%" height={300} />
    </Box>
  );
}

function RebaseTimer() {
    const currentBlockTime = useSelector<IReduxState, number>(state => {
        return state.app.currentBlockTime;
    });

    const nextRebase = useSelector<IReduxState, number>(state => {
        return state.app.nextRebase;
    });

    const timeUntilRebase = useMemo(() => {
        if (currentBlockTime && nextRebase) {
            const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
            return prettifySeconds(seconds);
        }
    }, [currentBlockTime, nextRebase]);

    return (
        <Box className="rebase-timer">
            <p>
                {currentBlockTime ? (
                    timeUntilRebase ? (
                        <>
                            <strong>{timeUntilRebase}</strong> to Next Rebase
                        </>
                    ) : (
                        <strong>Rebasing</strong>
                    )
                ) : (
                    <Skeleton width="200px" />
                )}
            </p>
        </Box>
    );
}

SkeletonList: React.FunctionComponent = () => {
  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  return (
    <Box height={1} overflow="auto">
      {list.map((i) => (
        <Box p={0.2} key={i}>
          <Skeleton variant="rect" height={80} />
        </Box>
      ))}
    </Box>
  );
}

export function SkeletonLoader() {
    const toLoad: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    return (
        <>
            {
                toLoad.map((index) => (
                    <ListItem key={index}>
                        <Avatar>
                            <Skeleton variant="circle" width={40} height={40}/>
                        </Avatar>
                        <ListItemText primary={
                            <React.Fragment>
                                <Skeleton variant="text"/>
                            </React.Fragment>
                        }
                                      secondary={
                                          <React.Fragment>
                                              <Skeleton variant="text"/>
                                          </React.Fragment>
                                      }/>
                    </ListItem>
                ))
            }
        </>
    )
}

function WarmUpTimer() {
  const currentBlockTime = useSelector<IReduxState, number>(state => {
    return state.app.currentBlockTime;
  });

  const nextRebase = useSelector<IReduxState, number>(state => {
    return state.app.nextRebase;
  });

  const timeUntilRebase = useMemo(() => {
    if (currentBlockTime && nextRebase) {
      const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
      return prettifySeconds(seconds);
    }
  }, [currentBlockTime, nextRebase]);

  return (
    <Box className="rebase-timer">
      <p>
        {currentBlockTime ? (
          timeUntilRebase ? (
            <>
              <strong>{timeUntilRebase}</strong> till claimable
            </>
          ) : (
            <strong>Rebasing</strong>
          )
        ) : (
          <Skeleton width="200px" />
        )}
      </p>
    </Box>
  );
}

AnalyticsPairs: React.FC = () => {
  const classes = useStyles();
  const [topPairs, updateTopPairs] = useState<any[] | null>(null);

  useEffect(() => {
    const fetchTopPairs = async () => {
      updateTopPairs(null);
      const [newPrice] = await getEthPrice();
      const pairs = await getTopPairs(500);
      const formattedPairs = pairs
        ? pairs.map((pair: any) => {
            return pair.id;
          })
        : [];
      const pairData = await getBulkPairData(formattedPairs, newPrice);
      if (pairData) {
        updateTopPairs(pairData);
      }
    };
    fetchTopPairs();
  }, [updateTopPairs]);

  return (
    <Box width='100%' mb={3}>
      <Typography>All Pairs</Typography>
      <Box mt={4} className={classes.panel}>
        {topPairs ? (
          <PairTable data={topPairs} />
        ) : (
          <Skeleton variant='rect' width='100%' height={150} />
        )}
      </Box>
    </Box>
  );
}

function RebaseTimer() {
    const currentBlockTime = useSelector<IReduxState, number>(state => {
        return state.app.currentBlock;
    });

    const nextRebase = useSelector<IReduxState, number>(state => {
        return state.app.nextRebase;
    });

    const timeUntilRebase = useMemo(() => {
        if (currentBlockTime && nextRebase) {
            const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
            return prettifySeconds(seconds);
        }
    }, [currentBlockTime, nextRebase]);

    return (
        <Box className="rebase-timer">
            <p>
                {currentBlockTime ? (
                    timeUntilRebase ? (
                        <>
                            <strong>{timeUntilRebase}</strong> to Next Rebase
                        </>
                    ) : (
                        <strong>Rebasing</strong>
                    )
                ) : (
                    <Skeleton width="200px" />
                )}
            </p>
        </Box>
    );
}

HeroSection: React.FC<{ globalData: any }> = ({ globalData }) => {
  const classes = useStyles();
  const history = useHistory();
  const { account } = useActiveWeb3React();
  const { ethereum } = window as any;
  const toggleWalletModal = useWalletModalToggle();

  return (
    <Box className={classes.heroSection}>
      <Typography variant='body2' style={{ fontWeight: 'bold' }}>
        Total Value Locked
      </Typography>
      {globalData ? (
        <Box display='flex' pt='5px'>
          <Typography variant='h3'>$</Typography>
          <Typography variant='h1'>
            {Number(globalData.totalLiquidityUSD).toLocaleString(undefined, {
              maximumFractionDigits: 0,
            })}
          </Typography>
        </Box>
      ) : (
        <Box my={1}>
          <Skeleton variant='rect' width={400} height={72} />
        </Box>
      )}
      <Typography variant='h5'>
        Top Asset Exchange on the Polygon Network
      </Typography>
      <Box mt={2} width={200} height={48}>
        <Button
          fullWidth
          style={{
            backgroundColor: '#004ce6',
            borderRadius: '30px',
            height: '100%',
            fontSize: 16,
            fontWeight: 500,
          }}
          onClick={() => {
            ethereum && !isSupportedNetwork(ethereum)
              ? addMaticToMetamask()
              : account
              ? history.push('/swap')
              : toggleWalletModal();
          }}
        >
          {ethereum && !isSupportedNetwork(ethereum)
            ? 'Switch to Polygon'
            : account
            ? 'Enter App'
            : 'Connect Wallet'}
        </Button>
      </Box>
    </Box>
  );
}

function Footer() {
  const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
  const stakingAPY = useSelector<IReduxState, number>(state => {
    return state.app.stakingAPY;
  });
  const treasuryBalance = useSelector<IReduxState, number>(state => {
    return state.app.treasuryBalance;
  });
  const circSupply = useSelector<IReduxState, number>(state => {
    return state.app.circSupply;
  });

  const trimmedStakingAPY = trim(stakingAPY * 100, 1);

  return (
    <div className="landing-footer">
      <Grid container spacing={1}>
        <Grid item xs={12} sm={4} md={4} lg={4}>
          <div className="landing-footer-item-wrap">
            <p className="landing-footer-item-title">Total Staked</p>
            <p className="landing-footer-item-value">
              {isAppLoading ? (
                <Skeleton width="180px" />
              ) : (
                new Intl.NumberFormat("en-US", {
                  maximumFractionDigits: 0,
                  minimumFractionDigits: 0,
                }).format(circSupply)
              )}
            </p>
          </div>
        </Grid>
        <Grid item xs={12} sm={4} md={4} lg={4}>
          <div className="landing-footer-item-wrap">
            <p className="landing-footer-item-title">Treasury Balance</p>
            <p className="landing-footer-item-value">
              {isAppLoading ? (
                <Skeleton width="180px" />
              ) : (
                new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "USD",
                  maximumFractionDigits: 0,
                  minimumFractionDigits: 0,
                }).format(treasuryBalance)
              )}
            </p>
          </div>
        </Grid>
        <Grid item xs={12} sm={4} md={4} lg={4}>
          <div className="landing-footer-item-wrap">
            <p className="landing-footer-item-title">Current APY</p>
            <p className="landing-footer-item-value">
              {stakingAPY ? (
                <>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</>
              ) : (
                <Skeleton width="150px" />
              )}
            </p>
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
    const { tokens, loading } = useTokens();

    const [quantity, setQuantity] = useState("");

    const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
        let addressTest = true;

        if (quantity && quantity.length === 42) {
            addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
        }

        let nameTest = true;

        if (quantity && quantity.length < 10) {
            nameTest = name.toLowerCase().includes(quantity.toLowerCase());
        }

        let lpFilter = true;

        if (bond.name === mim.name) {
            lpFilter = mimToken.address !== address;
        }

        if (bond.name === wavax.name) {
            lpFilter = isAvax ? false : wavaxToken.address !== address;
        }

        return nameTest && addressTest && lpFilter;
    });

    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover choose-token-poper">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                </div>
                <Box>
                    <div className="choose-token-poper-header">
                        <p className="choose-token-poper-header-title">Choose token</p>
                        <OutlinedInput
                            placeholder="Search name or paste address"
                            className="choose-token-poper-header-input"
                            value={quantity}
                            onChange={e => setQuantity(e.target.value)}
                            labelWidth={0}
                            startAdornment={
                                <InputAdornment position="start">
                                    <Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
                                        <img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
                                    </Box>
                                </InputAdornment>
                            }
                        />
                    </div>

                    <div className="choose-token-poper-body">
                        {filtredTokens.map(token => (
                            <div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
                                <img className="choose-token-poper-body-item-img" src={token.img} alt="" />
                                <div className="choose-token-poper-body-item-desc">
                                    <p className="choose-token-poper-body-item-name">{token.name}</p>
                                    <div className="choose-token-poper-body-item-balance">{loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Box>
            </Paper>
        </Modal>
    );
}

function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
  const { tokens, loading } = useTokens();

  const [quantity, setQuantity] = useState("");

  const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
    let addressTest = true;

    if (quantity && quantity.length === 42) {
      addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
    }

    let nameTest = true;

    if (quantity && quantity.length < 10) {
      nameTest = name.toLowerCase().includes(quantity.toLowerCase());
    }

    let lpFilter = true;

    if (bond.name === mim.name) {
      lpFilter = mimToken.address !== address;
    }

    // if (bond.name === wavax.name) {
    //   lpFilter = isAvax ? false : wavaxToken.address !== address;
    // }

    return nameTest && addressTest && lpFilter;
  });

  return (
    <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
      <Paper className="ohm-card ohm-popover choose-token-poper">
        <div className="cross-wrap">
          <IconButton onClick={handleClose}>
            <SvgIcon color="primary" component={XIcon} />
          </IconButton>
        </div>
        <Box>
          <div className="choose-token-poper-header">
            <p className="choose-token-poper-header-title">Choose token</p>
            <OutlinedInput
              placeholder="Search name or paste address"
              className="choose-token-poper-header-input"
              value={quantity}
              onChange={e => setQuantity(e.target.value)}
              labelWidth={0}
              startAdornment={
                <InputAdornment position="start">
                  <Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
                    <img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
                  </Box>
                </InputAdornment>
              }
            />
          </div>

          <div className="choose-token-poper-body">
            {filtredTokens.map(token => (
              <div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
                <img className="choose-token-poper-body-item-img" src={token.img} alt="" />
                <div className="choose-token-poper-body-item-desc">
                  <p className="choose-token-poper-body-item-name">{token.name}</p>
                  <div className="choose-token-poper-body-item-balance">
                    {loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Box>
      </Paper>
    </Modal>
  );
}

function Bond({ bond }: IBondProps) {
    const { address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onSlippageChange = (value: any) => {
        return setSlippage(value);
    };

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Fade in={true} mountOnEnter unmountOnExit>
            <Grid className="bond-view">
                <Backdrop open={true}>
                    <Fade in={true}>
                        <div className="bond-card">
                            <BondHeader bond={bond} slippage={slippage} onSlippageChange={onSlippageChange} />
                            {/* @ts-ignore */}
                            <Box direction="row" className="bond-price-data-row">
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">Mint Price</p>
                                    <p className="bond-price-data-value">
                                        {isBondLoading ? <Skeleton /> : bond.isLP || bond.name === "wavax" ? `$${trim(bond.bondPrice, 2)}` : `${trim(bond.bondPrice, 2)} MIM`}
                                    </p>
                                </div>
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">TIME Price</p>
                                    <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                                </div>
                            </Box>

                            <div className="bond-one-table">
                                <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                    <p>Mint</p>
                                </div>
                                <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                    <p>Redeem</p>
                                </div>
                            </div>

                            <TabPanel value={view} index={0}>
                                <BondPurchase bond={bond} slippage={slippage} />
                            </TabPanel>

                            <TabPanel value={view} index={1}>
                                <BondRedeem bond={bond} />
                            </TabPanel>
                        </div>
                    </Fade>
                </Backdrop>
            </Grid>
        </Fade>
    );
}

TradingInfo: React.FC<{ globalData: any }> = ({ globalData }) => {
  const classes = useStyles();
  const lairInfo = useLairInfo();
  const [openStakeModal, setOpenStakeModal] = useState(false);

  const dQUICKAPY = useLairDQUICKAPY(lairInfo);

  const totalRewardsUSD = useTotalRewardsDistributed();

  return (
    <>
      {openStakeModal && (
        <StakeQuickModal
          open={openStakeModal}
          onClose={() => setOpenStakeModal(false)}
        />
      )}
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Typography variant='h3'>
            {Number(globalData.oneDayTxns).toLocaleString()}
          </Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24H TRANSACTIONS</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Box display='flex'>
            <Typography variant='h6'>$</Typography>
            <Typography variant='h3'>
              {formatCompact(globalData.oneDayVolumeUSD)}
            </Typography>
          </Box>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24H TRADING VOLUME</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {totalRewardsUSD ? (
          <Box display='flex'>
            <Typography variant='h6'>$</Typography>
            <Typography variant='h3'>
              {totalRewardsUSD.toLocaleString()}
            </Typography>
          </Box>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24h REWARDS DISTRIBUTED</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Typography variant='h3'>
            {Number(globalData.pairCount).toLocaleString(undefined, {
              maximumFractionDigits: 0,
            })}
          </Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>TOTAL TRADING PAIRS</Typography>
      </Box>
      <Box className={classes.tradingSection} pt='20px'>
        {dQUICKAPY ? (
          <Typography variant='h3'>{dQUICKAPY.toLocaleString()}%</Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>dQUICK APY</Typography>
        <Typography variant='h4' onClick={() => setOpenStakeModal(true)}>
          stake {'>'}
        </Typography>
      </Box>
    </>
  );
}

function Footer() {
    const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
    const stakingAPY = useSelector<IReduxState, number>(state => {
        return state.app.stakingAPY;
    });
    const treasuryBalance = useSelector<IReduxState, number>(state => {
        return state.app.treasuryBalance;
    });
    const circSupply = useSelector<IReduxState, number>(state => {
        return state.app.circSupply;
    });

    const trimmedStakingAPY = trim(stakingAPY * 100, 1);

    return (
        <div className="landing-footer">
            <Grid container spacing={1}>
                <Grid item xs={12} sm={4} md={4} lg={4}>
                    <div className="landing-footer-item-wrap">
                        <p className="landing-footer-item-title">Total Staked</p>
                        <p className="landing-footer-item-value">
                            {isAppLoading ? (
                                <Skeleton width="180px" />
                            ) : (
                                new Intl.NumberFormat("en-US", {
                                    maximumFractionDigits: 0,
                                    minimumFractionDigits: 0,
                                }).format(circSupply)
                            )}
                        </p>
                    </div>
                </Grid>
                <Grid item xs={12} sm={4} md={4} lg={4}>
                    <div className="landing-footer-item-wrap">
                        <p className="landing-footer-item-title">Treasury Balance</p>
                        <p className="landing-footer-item-value">
                            {isAppLoading ? (
                                <Skeleton width="180px" />
                            ) : (
                                new Intl.NumberFormat("en-US", {
                                    style: "currency",
                                    currency: "USD",
                                    maximumFractionDigits: 0,
                                    minimumFractionDigits: 0,
                                }).format(treasuryBalance)
                            )}
                        </p>
                    </div>
                </Grid>
                <Grid item xs={12} sm={4} md={4} lg={4}>
                    <div className="landing-footer-item-wrap">
                        <p className="landing-footer-item-title">Current APY</p>
                        <p className="landing-footer-item-value">
                            {stakingAPY ? <>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</> : <Skeleton width="150px" />}
                        </p>
                    </div>
                </Grid>
            </Grid>
        </div>
    );
}

PlayerListSkeleton: React.FC = () => {
	const classes = useStyles()

	const cards = [...new Array(3)].map((_, index) => (
		<React.Fragment key={index}>
			<Card>
				<CardContent className={classes.cardContentPlayerItem}>
					<Grid container justify="space-between">
						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="30%"
						/>

						<Skeleton
							animation="wave"
							variant="circle"
							height={30}
						/>

						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="10%"
						/>
					</Grid>
				</CardContent>
			</Card>

			<Divider orientation="horizontal" size={2} />
		</React.Fragment>
	))

	return (
		<Grid container direction="column">
			<Divider orientation="horizontal" size={4} />

			<Card>
				<CardContent className={classes.cardContentButton}>
					<Grid container justify="center">
						<Skeleton
							animation="wave"
							variant="rect"
							height={20}
							width="10%"
						/>
					</Grid>
				</CardContent>
			</Card>

			<Divider orientation="horizontal" size={5} />

			{cards}
		</Grid>
	)
}

export function BondTableData({ bond }: IBondProps) {
    const isBondLoading = !bond.bondPrice ?? true;
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();
    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });
    async function onRedeem(autostake: boolean) {
        if (await checkWrongNetwork()) return;

        if (bond.interestDue === 0 || bond.pendingPayout === 0) {
            dispatch(warning({ text: messages.nothing_to_claim }));
            return;
        }

        await dispatch(redeemBond({ address, bond, networkID: chainID, provider, autostake }));
    }
    return (
        <TableRow>
            <TableCell align="left">
                <BondLogo bond={bond} />
                <div className="bond-name">
                    <p className="bond-name-title">{bond.displayName}</p>
                    {bond.isLP && (
                        <Link color="primary" href={bond.lpUrl} target="_blank">
                            <p className="bond-name-title-link">View Contract</p>
                        </Link>
                    )}
                </div>
            </TableCell>
            <TableCell align="center">
                <p className="bond-name-title">
                    <>{isBondLoading ? <Skeleton width="50px" /> : `$${trim(bond.bondPrice, 2)}`}</>
                </p>
            </TableCell>
            <TableCell align="right">
                <p className="bond-name-title">{isBondLoading ? <Skeleton width="50px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
            </TableCell>
            <TableCell align="right">
                <p className="bond-name-title">
                    {isBondLoading ? (
                        <Skeleton width="50px" />
                    ) : (
                        new Intl.NumberFormat("en-US", {
                            style: "currency",
                            currency: "USD",
                            maximumFractionDigits: 0,
                            minimumFractionDigits: 0,
                        }).format(bond.purchased)
                    )}
                </p>
            </TableCell>
            <TableCell>
                <Link component={NavLink} to={`/mints/${bond.name}`}>
                    <div className="bond-table-btn">
                        <p>Mint</p>
                    </div>
                </Link>{" "}
            </TableCell>
        </TableRow>
    );
}

LoadingSkeleton: FC<LoadingSkeletonProps> = ({
  loading,
  children,
  variant,
  width,
  height,
  lines,
  image,
  dark = true,
  className,
  longText,
  textHeight,
}) => {
  const classes = useStyles({ image, textHeight });
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
  const [lineWidths, setLineWidths] = useState<
    { key: number; width: number }[]
  >([]);
  const rectSkeletonProps: SkeletonProps =
    variant === "rect" &&
    (typeof width !== "undefined" || typeof height !== "undefined")
      ? { width, height }
      : {};

  useEffect(() => {
    if (typeof lines === "number") {
      setLineWidths(
        times(lines, (i) => ({
          key: i,
          width: random(
            longText || isMobile ? 50 : 20,
            longText || isMobile ? 100 : 40
          ),
        }))
      );
    }
  }, [isMobile, lines, longText]);

  if (!loading) {
    return <>{children}</>;
  }

  if (variant === "text" && typeof lines === "number" && lineWidths.length) {
    return (
      <>
        {lineWidths.map(({ key, width: lineWidth }) => (
          <Skeleton
            animation="wave"
            className={classNames(classes.root, classes.textHeight, className, {
              [classes.dark]: dark,
            })}
            key={key}
            variant={variant}
            width={width || `${lineWidth}%`}
          />
        ))}
      </>
    );
  }

  return (
    <Skeleton
      animation="wave"
      className={classNames(classes.root, classes.image, className, {
        [classes.dark]: dark,
      })}
      variant={variant}
      {...rectSkeletonProps}
    />
  );
}

GameListSkeleton: React.FC = () => {
	const classes = useStyles()

	const cards = [...new Array(3)].map((_, index) => (
		<React.Fragment key={index}>
			<Card>
				<CardContent className={classes.cardContentGameItem}>
					<Grid container justify="space-between">
						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="30%"
						/>

						<Skeleton
							animation="wave"
							variant="circle"
							height={30}
						/>

						<Skeleton
							animation="wave"
							variant="rect"
							height={30}
							width="10%"
						/>
					</Grid>
				</CardContent>
			</Card>

			<Divider orientation="horizontal" size={2} />
		</React.Fragment>
	))

	return (
		<Grid container direction="column">
			<Skeleton
				animation="wave"
				variant="rect"
				height={30}
				width="30%"
			/>

			<Divider orientation="horizontal" size={5} />

			{cards}
		</Grid>
	)
}

function Bond({ bond }: IBondProps) {
    const { provider, address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);
    const [recipientAddress, setRecipientAddress] = useState(address);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onRecipientAddressChange = (e: any) => {
        return setRecipientAddress(e.target.value);
    };

    const onSlippageChange = (e: any) => {
        return setSlippage(e.target.value);
    };

    useEffect(() => {
        if (address) setRecipientAddress(address);
    }, [provider, address]);

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Grid className="bond-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <BondHeader
                            bond={bond}
                            slippage={slippage}
                            recipientAddress={recipientAddress}
                            onSlippageChange={onSlippageChange}
                            onRecipientAddressChange={onRecipientAddressChange}
                        />
                        {/* @ts-ignore */}
                        <Box direction="row" className="bond-price-data-row">
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">Mint Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.bondPrice, 2)}`}</p>
                            </div>
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">{TOKEN_NAME} Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                            </div>
                        </Box>

                        <div className="bond-one-table">
                            <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                <p>Mint</p>
                            </div>
                            <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                <p>Redeem</p>
                            </div>
                        </div>

                        <TabPanel value={view} index={0}>
                            <BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
                        </TabPanel>

                        <TabPanel value={view} index={1}>
                            <BondRedeem bond={bond} />
                        </TabPanel>
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}

AnalyticsTokens: React.FC = () => {
  const classes = useStyles();
  const { palette } = useTheme();
  const [tokensFilter, setTokensFilter] = useState(0);

  const [topTokens, updateTopTokens] = useState<any[] | null>(null);
  const { bookmarkTokens } = useBookmarkTokens();

  const favoriteTokens = useMemo(() => {
    if (topTokens) {
      return topTokens.filter(
        (token: any) => bookmarkTokens.indexOf(token.id) > -1,
      );
    } else {
      return [];
    }
  }, [topTokens, bookmarkTokens]);

  useEffect(() => {
    const fetchTopTokens = async () => {
      updateTopTokens(null); //set top tokens as null to show loading status when fetching tokens data
      const [newPrice, oneDayPrice] = await getEthPrice();
      const topTokensData = await getTopTokens(newPrice, oneDayPrice, 200);
      if (topTokensData) {
        updateTopTokens(topTokensData);
      }
    };
    fetchTopTokens();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [updateTopTokens]);

  return (
    <Box width='100%' mb={3}>
      <TopMovers background={palette.grey.A700} hideArrow={true} />
      <Box my={4} px={2} display='flex' flexWrap='wrap' alignItems='center'>
        <Box
          className={classes.tokensFilter}
          onClick={() => setTokensFilter(0)}
          color={
            tokensFilter === 0 ? palette.primary.main : palette.text.disabled
          }
        >
          <Typography variant='h6'>All Cryptos</Typography>
        </Box>
        <Box
          className={classes.tokensFilter}
          color={
            tokensFilter === 1 ? palette.primary.main : palette.text.disabled
          }
          onClick={() => setTokensFilter(1)}
        >
          <Typography variant='h6'>Favourites</Typography>
        </Box>
        <Box
          className={classes.tokensFilter}
          color={
            tokensFilter === 2 ? palette.primary.main : palette.text.disabled
          }
          onClick={() => setTokensFilter(2)}
        >
          <Typography variant='h6'>New Listing</Typography>
        </Box>
      </Box>
      <Box className={classes.panel}>
        {topTokens && topTokens.length === 200 ? (
          <TokensTable data={tokensFilter === 0 ? topTokens : favoriteTokens} />
        ) : (
          <Skeleton variant='rect' width='100%' height={150} />
        )}
      </Box>
    </Box>
  );
}

skeleton = <Skeleton animation="wave" variant="text" height={40} />

function Calculator() {
    const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
    const marketPrice = useSelector<IReduxState, number>(state => {
        return state.app.marketPrice;
    });
    const stakingAPY = useSelector<IReduxState, number>(state => {
        return state.app.stakingAPY;
    });
    const memoBalance = useSelector<IReduxState, string>(state => {
        return state.account.balances && state.account.balances.memo;
    });

    const trimmedStakingAPY = trim(stakingAPY * 100, 1);
    const trimmedMemoBalance = trim(Number(memoBalance), 6);
    const trimeMarketPrice = trim(marketPrice, 2);

    const [memoAmount, setMemoAmount] = useState(trimmedMemoBalance);
    const [rewardYield, setRewardYield] = useState(trimmedStakingAPY);
    const [priceAtPurchase, setPriceAtPurchase] = useState(trimeMarketPrice);
    const [futureMarketPrice, setFutureMarketPrice] = useState(trimeMarketPrice);
    const [days, setDays] = useState(30);

    const [rewardsEstimation, setRewardsEstimation] = useState("0");
    const [potentialReturn, setPotentialReturn] = useState("0");

    const calcInitialInvestment = () => {
        const memo = Number(memoAmount) || 0;
        const price = parseFloat(priceAtPurchase) || 0;
        const amount = memo * price;
        return trim(amount, 2);
    };

    const calcCurrentWealth = () => {
        const memo = Number(memoAmount) || 0;
        const price = parseFloat(trimeMarketPrice);
        const amount = memo * price;
        return trim(amount, 2);
    };

    const [initialInvestment, setInitialInvestment] = useState(calcInitialInvestment());

    useEffect(() => {
        const newInitialInvestment = calcInitialInvestment();
        setInitialInvestment(newInitialInvestment);
    }, [memoAmount, priceAtPurchase]);

    const calcNewBalance = () => {
        let value = parseFloat(rewardYield) / 100;
        value = Math.pow(value - 1, 1 / (365 * 3)) - 1 || 0;
        let balance = Number(memoAmount);
        for (let i = 0; i < days * 3; i++) {
            balance += balance * value;
        }
        return balance;
    };

    useEffect(() => {
        const newBalance = calcNewBalance();
        setRewardsEstimation(trim(newBalance, 6));
        const newPotentialReturn = newBalance * (parseFloat(futureMarketPrice) || 0);
        setPotentialReturn(trim(newPotentialReturn, 2));
    }, [days, rewardYield, futureMarketPrice, memoAmount]);

    return (
        <div className="calculator-view">
            <Zoom in={true}>
                <div className="calculator-card">
                    <Grid className="calculator-card-grid" container direction="column" spacing={2}>
                        <Grid item>
                            <div className="calculator-card-header">
                                <p className="calculator-card-header-title">Calculator</p>
                                <p className="calculator-card-header-subtitle">Estimate your returns</p>
                            </div>
                        </Grid>
                        <Grid item>
                            <div className="calculator-card-metrics">
                                <Grid container spacing={2}>
                                    <Grid item xs={12} sm={4} md={4} lg={4}>
                                        <div className="calculator-card-apy">
                                            <p className="calculator-card-metrics-title">TIME Price</p>
                                            <p className="calculator-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trimeMarketPrice}`}</p>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6} sm={4} md={4} lg={4}>
                                        <div className="calculator-card-tvl">
                                            <p className="calculator-card-metrics-title">Current APY</p>
                                            <p className="calculator-card-metrics-value">
                                                {isAppLoading ? <Skeleton width="100px" /> : <>{new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%</>}
                                            </p>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6} sm={4} md={4} lg={4}>
                                        <div className="calculator-card-index">
                                            <p className="calculator-card-metrics-title">Your MEMO Balance</p>
                                            <p className="calculator-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : <>{trimmedMemoBalance} MEMO</>}</p>
                                        </div>
                                    </Grid>
                                </Grid>
                            </div>
                        </Grid>

                        <div className="calculator-card-area">
                            <div>
                                <div className="calculator-card-action-area">
                                    <Grid container spacing={3}>
                                        <Grid item xs={12} sm={6}>
                                            <div className="calculator-card-action-area-inp-wrap">
                                                <p className="calculator-card-action-area-inp-wrap-title">MEMO Amount</p>
                                                <OutlinedInput
                                                    type="number"
                                                    placeholder="Amount"
                                                    className="calculator-card-action-input"
                                                    value={memoAmount}
                                                    onChange={e => setMemoAmount(e.target.value)}
                                                    labelWidth={0}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <div onClick={() => setMemoAmount(trimmedMemoBalance)} className="stake-card-action-input-btn">
                                                                <p>Max</p>
                                                            </div>
                                                        </InputAdornment>
                                                    }
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <div className="calculator-card-action-area-inp-wrap">
                                                <p className="calculator-card-action-area-inp-wrap-title">APY (%)</p>
                                                <OutlinedInput
                                                    type="number"
                                                    placeholder="Amount"
                                                    className="calculator-card-action-input"
                                                    value={rewardYield}
                                                    onChange={e => setRewardYield(e.target.value)}
                                                    labelWidth={0}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <div onClick={() => setRewardYield(trimmedStakingAPY)} className="stake-card-action-input-btn">
                                                                <p>Current</p>
                                                            </div>
                                                        </InputAdornment>
                                                    }
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <div className="calculator-card-action-area-inp-wrap">
                                                <p className="calculator-card-action-area-inp-wrap-title">TIME price at purchase ($)</p>
                                                <OutlinedInput
                                                    type="number"
                                                    placeholder="Amount"
                                                    className="calculator-card-action-input"
                                                    value={priceAtPurchase}
                                                    onChange={e => setPriceAtPurchase(e.target.value)}
                                                    labelWidth={0}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <div onClick={() => setPriceAtPurchase(trimeMarketPrice)} className="stake-card-action-input-btn">
                                                                <p>Current</p>
                                                            </div>
                                                        </InputAdornment>
                                                    }
                                                />
                                            </div>
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <div className="calculator-card-action-area-inp-wrap">
                                                <p className="calculator-card-action-area-inp-wrap-title">Future TIME market price ($)</p>
                                                <OutlinedInput
                                                    type="number"
                                                    placeholder="Amount"
                                                    className="calculator-card-action-input"
                                                    value={futureMarketPrice}
                                                    onChange={e => setFutureMarketPrice(e.target.value)}
                                                    labelWidth={0}
                                                    endAdornment={
                                                        <InputAdornment position="end">
                                                            <div onClick={() => setFutureMarketPrice(trimeMarketPrice)} className="stake-card-action-input-btn">
                                                                <p>Current</p>
                                                            </div>
                                                        </InputAdornment>
                                                    }
                                                />
                                            </div>
                                        </Grid>
                                    </Grid>
                                </div>
                                <div className="calculator-days-slider-wrap">
                                    <p className="calculator-days-slider-wrap-title">{`${days} day${days > 1 ? "s" : ""}`}</p>
                                    <Slider className="calculator-days-slider" min={1} max={365} value={days} onChange={(e, newValue: any) => setDays(newValue)} />
                                </div>
                                <div className="calculator-user-data">
                                    <div className="data-row">
                                        <p className="data-row-name">Your initial investment</p>
                                        <p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${initialInvestment}</>}</p>
                                    </div>
                                    <div className="data-row">
                                        <p className="data-row-name">Current wealth</p>
                                        <p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${calcCurrentWealth()}</>}</p>
                                    </div>
                                    <div className="data-row">
                                        <p className="data-row-name">TIME rewards estimation</p>
                                        <p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>{rewardsEstimation} TIME</>}</p>
                                    </div>
                                    <div className="data-row">
                                        <p className="data-row-name">Potential return</p>
                                        <p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>${potentialReturn}</>}</p>
                                    </div>
                                    <div className="data-row">
                                        <p className="data-row-name">Potential number of lambos</p>
                                        <p className="data-row-value">{isAppLoading ? <Skeleton width="80px" /> : <>{Math.floor(Number(potentialReturn) / 220000)}</>}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Grid>
                </div>
            </Zoom>
        </div>
    );
}

export default function Notes(props: Props) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const [notes, setNotes] = useState<Note[]>([]);
  const [notesListElement, setNotesListElement] = useState<HTMLElement>(null);
  const [forceUpdate, setForceUpdate] = useState<number>(Date.now());
  const searchValue = props.searchValue;
  const orderBy = props.orderBy;
  const orderDirection = props.orderDirection;
  const selectedNote = props.selectedNote;
  const setSelectedNote = props.setSelectedNote;

  useEffect(() => {
    const pinned: Note[] = [];
    const unpinned: Note[] = [];
    props.notes.forEach((note) => {
      if (searchValue.trim().length) {
        const regexp = new RegExp(
          "(" +
            searchValue
              .trim()
              .split(/\s+/g)
              .map((s) => s.replace(/[.!@#$%^&*()_+\-=[\]]/g, (x) => `\\${x}`)) // escape special regexp characters
              .join("|") +
            ")",
          "i"
        );

        if (note.markdown.match(regexp) || note.filePath.match(regexp)) {
          if (note.config.pinned) {
            pinned.push(note);
          } else {
            unpinned.push(note);
          }
        }
      } else {
        if (note.config.pinned) {
          pinned.push(note);
        } else {
          unpinned.push(note);
        }
      }
    });

    const sort = (notes: Note[]) => {
      if (orderBy === OrderBy.ModifiedAt) {
        if (orderDirection === OrderDirection.DESC) {
          notes.sort(
            (a, b) =>
              b.config.modifiedAt.getTime() - a.config.modifiedAt.getTime()
          );
        } else {
          notes.sort(
            (a, b) =>
              a.config.modifiedAt.getTime() - b.config.modifiedAt.getTime()
          );
        }
      } else if (orderBy === OrderBy.CreatedAt) {
        if (orderDirection === OrderDirection.DESC) {
          notes.sort(
            (a, b) =>
              b.config.createdAt.getTime() - a.config.createdAt.getTime()
          );
        } else {
          notes.sort(
            (a, b) =>
              a.config.createdAt.getTime() - b.config.createdAt.getTime()
          );
        }
      } else if (orderBy === OrderBy.Title) {
        if (orderDirection === OrderDirection.DESC) {
          notes.sort((a, b) =>
            (
              (b.config.encryption && b.config.encryption.title) ||
              getHeaderFromMarkdown(b.markdown)
            ).localeCompare(
              (a.config.encryption && a.config.encryption.title) ||
                getHeaderFromMarkdown(a.markdown)
            )
          );
        } else {
          notes.sort((a, b) =>
            (
              (a.config.encryption && a.config.encryption.title) ||
              getHeaderFromMarkdown(a.markdown)
            ).localeCompare(
              (b.config.encryption && b.config.encryption.title) ||
                getHeaderFromMarkdown(b.markdown)
            )
          );
        }
      }
      return notes;
    };

    setNotes([...sort(pinned), ...sort(unpinned)]);
  }, [props.notes, searchValue, orderBy, orderDirection]);

  useEffect(() => {
    if (
      notes &&
      notes.length > 0 &&
      (!selectedNote || selectedNote.notebookPath !== notes[0].notebookPath)
    ) {
      setSelectedNote(notes[0]);
    }
  }, [notes, selectedNote]);

  useEffect(() => {
    if (selectedNote) {
      const message: Message = {
        action: MessageAction.OpenNoteIfNoNoteSelected,
        data: selectedNote,
      };
      vscode.postMessage(message);
    }
  }, [selectedNote]);

  /*
  useEffect(() => {
    if (notesListElement) {
      const keyDownHandler = (event: KeyboardEvent) => {
        const selectedNote = crossnoteContainer.selectedNote;
        if (!selectedNote || !notes.length) {
          return;
        }
        const currentIndex = notes.findIndex(
          (n) => n.filePath === selectedNote.filePath
        );
        if (currentIndex < 0) {
          crossnoteContainer.setSelectedNote(notes[0]);
        } else if (event.which === 40) {
          // Up
          if (currentIndex >= 0 && currentIndex < notes.length - 1) {
            crossnoteContainer.setSelectedNote(notes[currentIndex + 1]);
          }
        } else if (event.which === 38) {
          // Down
          if (currentIndex > 0 && currentIndex < notes.length) {
            crossnoteContainer.setSelectedNote(notes[currentIndex - 1]);
          }
        }
      };
      notesListElement.addEventListener("keydown", keyDownHandler);
      return () => {
        notesListElement.removeEventListener("keydown", keyDownHandler);
      };
    }
  }, [notesListElement, notes, crossnoteContainer.selectedNote]);
  */

  useEffect(() => {
    if (notesListElement) {
      // Hack: fix note cards not displaying bug when searchValue is not empty
      const hack = () => {
        const initialHeight = notesListElement.style.height;
        const initialFlex = notesListElement.style.flex;
        notesListElement.style.flex = "initial";
        notesListElement.style.height = "10px";
        notesListElement.scrollTop += 1;
        notesListElement.scrollTop -= 1;
        notesListElement.style.height = initialHeight;
        notesListElement.style.flex = initialFlex;
      };
      window.addEventListener("resize", hack);
      hack();
      return () => {
        window.removeEventListener("resize", hack);
      };
    }
  }, [notes, notesListElement]);

  /*
  useInterval(() => {
    if (crossnoteContainer.needsToRefreshNotes) {
      crossnoteContainer.setNeedsToRefreshNotes(false);
      setForceUpdate(Date.now());
    }
  }, 15000);
  */

  return (
    <div
      className={clsx(classes.notesList)}
      ref={(element: HTMLElement) => {
        setNotesListElement(element);
      }}
    >
      {/*crossnoteContainer.selectedNotebook &&
        crossnoteContainer.selectedNotebook.localSha !==
          crossnoteContainer.selectedNotebook.remoteSha && (
          <Box className={clsx(classes.updatePanel)}>
            <Typography style={{ marginBottom: "8px" }}>
              {"?  " + t("general/notebook-updates-found")}
            </Typography>
            <Button
              color={"primary"}
              variant={"outlined"}
              onClick={pullNotebook}
              disabled={
                crossnoteContainer.isPullingNotebook ||
                crossnoteContainer.isPushingNotebook
              }
            >
              <CloudDownloadOutline
                style={{ marginRight: "8px" }}
              ></CloudDownloadOutline>
              {t("general/update-the-notebook")}
            </Button>
          </Box>
            )*/}
      {(notes || []).map((note) => {
        return (
          <LazyLoad
            key={"lazy-load-note-card-" + note.filePath}
            placeholder={
              <Box
                style={{
                  textAlign: "center",
                  height: `${lazyLoadPlaceholderHeight}px`,
                  paddingTop: "16px",
                  paddingBottom: "16px",
                  boxSizing: "border-box",
                }}
              >
                <Skeleton />
                <Skeleton animation={false} />
                <Skeleton animation="wave" />
              </Box>
            }
            height={lazyLoadPlaceholderHeight}
            overflow={true}
            once={true}
            scrollContainer={notesListElement}
            resize={true}
          >
            <NoteCard
              key={"note-card-" + note.filePath}
              note={note}
              selectedNote={selectedNote}
              setSelectedNote={setSelectedNote}
            ></NoteCard>
          </LazyLoad>
        );
      })}
      {
        /*crossnoteContainer.initialized &&
        !crossnoteContainer.isLoadingNotebook &&*/
        notes.length === 0 && (
          <Typography
            style={{
              textAlign: "center",
              marginTop: "32px",
            }}
            variant={"body2"}
          >
            {"? " + t("general/no-notes-found")}
          </Typography>
        )
      }
    </div>
  );
}

function ChooseBond() {
    const { bonds } = useBonds();
    const isSmallScreen = useMediaQuery("(max-width: 733px)"); // change to breakpoint query

    const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
    const marketPrice = useSelector<IReduxState, number>(state => {
        return state.app.marketPrice;
    });

    const treasuryBalance = useSelector<IReduxState, number>(state => {
        return state.app.treasuryBalance;
    });

    return (
        <div className="choose-bond-view">
            <Zoom in={true}>
                <div className="choose-bond-view-card">
                    <div className="choose-bond-view-card-header">
                        <p className="choose-bond-view-card-title"> Mint (?, ?)</p>
                    </div>

                    <Grid container item xs={12} spacing={2} className="choose-bond-view-card-metrics">
                        <Grid item xs={12} sm={6}>
                            <Box textAlign="center">
                                <p className="choose-bond-view-card-metrics-title">Treasury Balance</p>
                                <p className="choose-bond-view-card-metrics-value">
                                    {isAppLoading ? (
                                        <Skeleton width="180px" />
                                    ) : (
                                        new Intl.NumberFormat("en-US", {
                                            style: "currency",
                                            currency: "USD",
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(treasuryBalance)
                                    )}
                                </p>
                            </Box>
                        </Grid>

                        <Grid item xs={12} sm={6}>
                            <Box textAlign="center">
                                <p className="choose-bond-view-card-metrics-title">TIME Price</p>
                                <p className="choose-bond-view-card-metrics-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trim(marketPrice, 2)}`}</p>
                            </Box>
                        </Grid>
                    </Grid>

                    {!isSmallScreen && (
                        <Grid container item>
                            <TableContainer className="choose-bond-view-card-table">
                                <Table>
                                    <TableHead>
                                        <TableRow>
                                            <TableCell align="center">
                                                <p className="choose-bond-view-card-table-title">Mint</p>
                                            </TableCell>
                                            <TableCell align="center">
                                                <p className="choose-bond-view-card-table-title">Price</p>
                                            </TableCell>
                                            <TableCell align="center">
                                                <p className="choose-bond-view-card-table-title">ROI</p>
                                            </TableCell>
                                            <TableCell align="right">
                                                <p className="choose-bond-view-card-table-title">Purchased</p>
                                            </TableCell>
                                            <TableCell align="right"></TableCell>
                                        </TableRow>
                                    </TableHead>
                                    <TableBody>
                                        {bonds.map(bond => (
                                            <BondTableData key={bond.name} bond={bond} />
                                        ))}
                                    </TableBody>
                                </Table>
                            </TableContainer>
                        </Grid>
                    )}
                </div>
            </Zoom>

            {isSmallScreen && (
                <div className="choose-bond-view-card-container">
                    <Grid container item spacing={2}>
                        {bonds.map(bond => (
                            <Grid item xs={12} key={bond.name}>
                                <BondDataCard key={bond.name} bond={bond} />
                            </Grid>
                        ))}
                    </Grid>
                </div>
            )}
        </div>
    );
}

TableSkeleton: React.FC = () => {
	const classes = useStyles()

	return (
		<Grid container style={{ height: "100%", overflow: "hidden" }}>
			<Grid container>
				<Grid item xs={1}>

				</Grid>
				<Grid item xs={10}>
					<Grid container justify="center" alignItems="center">
						<Card>
							<CardContent className={classes.cardContentCardDeckPlaceholder}>
								<Skeleton
									variant="rect"
									height={50}
									width={100}
								/>
							</CardContent>
						</Card>
					</Grid>
				</Grid>
				<Grid item xs={1}>
					<Skeleton
						variant="rect"
						height={50}
						width="10%"
					/>
				</Grid>
			</Grid>
			<Grid container alignItems="center">
				<Grid item xs={2}>
					<Grid container justify="flex-start">
						<Card>
							<CardContent className={classes.cardContentCardDeckPlaceholder}>
								<Skeleton
									variant="rect"
									height={50}
									width={100}
								/>
							</CardContent>
						</Card>
					</Grid>
				</Grid>
				<Grid item xs={8}>
					<Grid container justify="center" alignItems="center">
						<Card>
							<CardContent className={classes.cardContentCardDeckPlaceholder}>
								<Skeleton
									variant="circle"
									height={100}
									width={100}
								/>
							</CardContent>
						</Card>
					</Grid>
				</Grid>
				<Grid item xs={2}>
					<Grid container justify="flex-end">
						<Card>
							<CardContent className={classes.cardContentCardDeckPlaceholder}>
								<Skeleton
									variant="rect"
									height={50}
									width={100}
								/>
							</CardContent>
						</Card>
					</Grid>
				</Grid>
			</Grid>
			<Grid container alignItems="flex-end">
				<Grid item xs={1}></Grid>
				<Grid item xs={10}>
					<Grid container justify="center">
						<Card>
							<CardContent className={classes.cardContentCardDeckPlaceholder}>
								<Skeleton
									variant="rect"
									height={50}
									width={100}
								/>
							</CardContent>
						</Card>
					</Grid>
				</Grid>
				<Grid item xs={1}></Grid>
			</Grid>
		</Grid>
	)
}

function BondRedeem({ bond }: IBondRedeem) {
    const dispatch = useDispatch();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const currentBlockTime = useSelector<IReduxState, number>(state => {
        return state.app.currentBlockTime;
    });

    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    const bondingState = useSelector<IReduxState, IBondDetails>(state => {
        return state.bonding && state.bonding[bond.name];
    });

    const bondDetails = useSelector<IReduxState, IUserBondDetails>(state => {
        return state.account.bonds && state.account.bonds[bond.name];
    });

    async function onRedeem(autostake: boolean) {
        if (await checkWrongNetwork()) return;

        if (bond.interestDue === 0 || bond.pendingPayout === 0) {
            dispatch(warning({ text: messages.nothing_to_claim }));
            return;
        }

        await dispatch(redeemBond({ address, bond, networkID: chainID, provider, autostake }));
    }

    const vestingTime = () => {
        if (!bondDetails) {
            return "";
        }
        return prettyVestingPeriod(currentBlockTime, bondDetails.bondMaturationBlock);
    };

    const vestingPeriod = () => {
        return prettifySeconds(bondingState.vestingTerm, "day");
    };

    return (
        <Box display="flex" flexDirection="column">
            <Box display="flex" justifyContent="space-around" flexWrap="wrap">
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name)) return;
                        onRedeem(false);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name, "Claim")}</p>
                </div>
                <div
                    className="transaction-button bond-approve-btn"
                    onClick={() => {
                        if (isPendingTxn(pendingTransactions, "redeem_bond_" + bond.name + "_autostake")) return;
                        onRedeem(true);
                    }}
                >
                    <p>{txnButtonText(pendingTransactions, "redeem_bond_" + bond.name + "_autostake", "Claim and Autostake")}</p>
                </div>
            </Box>

            <Slide direction="right" in={true} mountOnEnter unmountOnExit {...{ timeout: 533 }}>
                <Box className="bond-data">
                    <div className="data-row">
                        <p className="bond-balance-title">Pending Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.interestDue, 4)} TIME`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Claimable Rewards</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.pendingPayout, 4)} TIME`}</p>
                    </div>
                    <div className="data-row">
                        <p className="bond-balance-title">Time until fully vested</p>
                        <p className="price-data bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingTime()}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">ROI</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                    </div>

                    <div className="data-row">
                        <p className="bond-balance-title">Vesting Term</p>
                        <p className="bond-balance-title">{isBondLoading ? <Skeleton width="100px" /> : vestingPeriod()}</p>
                    </div>
                </Box>
            </Slide>
        </Box>
    );
}

Coins = (props: Props): React.ReactElement => {
  const { showReceiveFunds, showSendFunds } = props
  const classes = useStyles()
  const columns = generateColumns()
  const autoColumns = columns.filter((c) => !c.custom)
  const selectedCurrency = useSelector(currentCurrencySelector)
  const currencyRate = useSelector(currencyRateSelector)
  const activeTokens = useSelector(extendedSafeTokensSelector)
  const currencyValues = useSelector(safeFiatBalancesListSelector)
  const granted = useSelector(grantedSelector)

  const filteredData: List<BalanceData> = useMemo(
    () => getBalanceData(activeTokens, selectedCurrency, currencyValues, currencyRate),
    [activeTokens, selectedCurrency, currencyValues, currencyRate],
  )

  return (
    <TableContainer>
      <Table
        columns={columns}
        data={filteredData}
        defaultFixed
        defaultOrderBy={BALANCE_TABLE_ASSET_ID}
        defaultRowsPerPage={10}
        label="Balances"
        size={filteredData.size}
      >
        {(sortedData) =>
          sortedData.map((row, index) => (
            <TableRow className={classes.hide} data-testid={BALANCE_ROW_TEST_ID} key={index} tabIndex={-1}>
              {autoColumns.map((column) => {
                const { align, id, width } = column
                let cellItem
                switch (id) {
                  case BALANCE_TABLE_ASSET_ID: {
                    cellItem = <AssetTableCell asset={row[id]} />
                    break
                  }
                  case BALANCE_TABLE_BALANCE_ID: {
                    cellItem = <div data-testid={`balance-${row[BALANCE_TABLE_ASSET_ID].symbol}`}>{row[id]}</div>
                    break
                  }
                  case BALANCE_TABLE_VALUE_ID: {
                    // If there are no values for that row but we have balances, we display as '0.00 {CurrencySelected}'
                    // In case we don't have balances, we display a skeleton
                    const showCurrencyValueRow = row[id] || row[BALANCE_TABLE_BALANCE_ID]
                    const valueWithCurrency = row[id] ? row[id] : `0.00 ${selectedCurrency}`
                    cellItem =
                      showCurrencyValueRow && selectedCurrency ? (
                        <div className={classes.currencyValueRow}>
                          {valueWithCurrency}
                          <CurrencyTooltip
                            valueWithCurrency={valueWithCurrency}
                            balanceWithSymbol={row[BALANCE_TABLE_BALANCE_ID]}
                          />
                        </div>
                      ) : (
                        <Skeleton animation="wave" />
                      )
                    break
                  }
                  default: {
                    cellItem = null
                    break
                  }
                }
                return (
                  <TableCell align={align} component="td" key={id} style={cellWidth(width)}>
                    {cellItem}
                  </TableCell>
                )
              })}
              <TableCell component="td">
                <Row align="end" className={classes.actions}>
                  {granted && (
                    <Button
                      className={classes.send}
                      color="primary"
                      onClick={() => showSendFunds(row.asset.address)}
                      size="small"
                      testId="balance-send-btn"
                      variant="contained"
                    >
                      {/* <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} /> */}
                      Send
                    </Button>
                  )}
                  <Button
                    className={classes.receive}
                    color="primary"
                    onClick={showReceiveFunds}
                    size="small"
                    variant="contained"
                  >
                    {/* <CallReceived
                      alt="Receive Transaction"
                      className={classNames(classes.leftIcon, classes.iconSmall)}
                    /> */}
                    Receive
                  </Button>
                </Row>
              </TableCell>
            </TableRow>
          ))
        }
      </Table>
    </TableContainer>
  )
}

function Dashboard() {
    const isAppLoading = useSelector<IReduxState, boolean>(state => state.app.loading);
    const app = useSelector<IReduxState, IAppSlice>(state => state.app);

    const trimmedStakingAPY = trim(app.stakingAPY * 100, 1);

    return (
        <div className="dashboard-view">
            <div className="dashboard-infos-wrap">
                <Zoom in={true}>
                    <Grid container spacing={4}>
                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">TIME Price</p>
                                <p className="card-value">{isAppLoading ? <Skeleton width="100px" /> : `$${trim(app.marketPrice, 2)}`}</p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Market Cap</p>
                                <p className="card-value">
                                    {isAppLoading ? (
                                        <Skeleton width="160px" />
                                    ) : (
                                        new Intl.NumberFormat("en-US", {
                                            style: "currency",
                                            currency: "USD",
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.marketCap)
                                    )}
                                </p>
                            </div>
                        </Grid>

                        {/* <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Supply (Staked/Total)</p>
                                <p className="card-value">
                                    {isAppLoading ? (
                                        <Skeleton width="250px" />
                                    ) : (
                                        `${new Intl.NumberFormat("en-US", {
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.circSupply)}
                                        /
                                        ${new Intl.NumberFormat("en-US", {
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.totalSupply)}`
                                    )}
                                </p>
                            </div>
                        </Grid> */}

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">TVL</p>
                                <p className="card-value">
                                    {isAppLoading ? (
                                        <Skeleton width="250px" />
                                    ) : (
                                        new Intl.NumberFormat("en-US", {
                                            style: "currency",
                                            currency: "USD",
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.stakingTVL)
                                    )}
                                </p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">APY</p>
                                <p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${new Intl.NumberFormat("en-US").format(Number(trimmedStakingAPY))}%`}</p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Current Index</p>
                                <p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${trim(Number(app.currentIndex), 2)} TIME`}</p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Treasury Balance</p>
                                <p className="card-value">
                                    {isAppLoading ? (
                                        <Skeleton width="250px" />
                                    ) : (
                                        new Intl.NumberFormat("en-US", {
                                            style: "currency",
                                            currency: "USD",
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.treasuryBalance)
                                    )}
                                </p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Backing per $TIME</p>
                                <p className="card-value">
                                    {isAppLoading ? (
                                        <Skeleton width="250px" />
                                    ) : (
                                        new Intl.NumberFormat("en-US", {
                                            style: "currency",
                                            currency: "USD",
                                            maximumFractionDigits: 0,
                                            minimumFractionDigits: 0,
                                        }).format(app.rfv)
                                    )}
                                </p>
                            </div>
                        </Grid>

                        <Grid item lg={6} md={6} sm={6} xs={12}>
                            <div className="dashboard-card">
                                <p className="card-title">Runway</p>
                                <p className="card-value">{isAppLoading ? <Skeleton width="250px" /> : `${trim(Number(app.runway), 1)} Days`}</p>
                            </div>
                        </Grid>
                    </Grid>
                </Zoom>
            </div>
        </div>
    );
}