@material-ui/core#Grid TypeScript Examples

AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}

PDF: React.FC<ContentProps> = (props:ContentProps) => {
  assert(props.content.type === 'pdf')
  const memberRef = useRef<Member>(new Member())
  const member = memberRef.current
  member.newProps = props
  const refCanvas = useRef<HTMLCanvasElement>(null)
  const refTextDiv = useRef<HTMLDivElement>(null)
  const refAnnotationDiv = useRef<HTMLDivElement>(null)
  const editing = useObserver(() => props.stores.contents.editing === props.content.id)

  useEffect(()=>{
    member.canvas = refCanvas.current
    member.textDiv = refTextDiv.current
    member.annotationDiv = refAnnotationDiv.current
  // eslint-disable-next-line  react-hooks/exhaustive-deps
  }, [refCanvas.current])

  useEffect(()=>{
    member.updateProps()
  })

  return <div style={{overflow: 'hidden', pointerEvents: 'auto', userSelect: editing? 'text':'none'}}
    onDoubleClick = {(ev) => { if (!editing) {
      ev.stopPropagation()
      ev.preventDefault()
      props.stores.contents.setEditing(props.content.id)
    } }} >
    <canvas style={{ width:`${CANVAS_SCALE*100}%`, height:`${CANVAS_SCALE*100}%`,
      transformOrigin:'top left', transform:`scale(${1/CANVAS_SCALE})`}} ref={refCanvas} />
    <div ref={refTextDiv} style={{position:'absolute', left:0, top:0,
      width:`${CANVAS_SCALE*100}%`, height:`${CANVAS_SCALE*100}%`,
      transformOrigin:'top left', transform:`scale(${1/CANVAS_SCALE})`, lineHeight: 1,
      overflow:'hidden'}} />
    <div ref={refAnnotationDiv} />
    <div style={{position:'absolute', top:0, left:0, width:'100%', height:40}}
      onPointerEnter={()=>{member.showTop = true}} onPointerLeave={()=>{member.showTop = false}}>
      <Observer>{()=>
        <Collapse in={member.showTop} style={{position:'absolute', top:0, left:0, width:'100%'}}>
          <Grid container alignItems="center">
            <Grid item >
              <IconButton size="small" color={member.pageNum>0?'primary':'default'} {...stopper}
                onClick={(ev) => { ev.stopPropagation(); member.updateUrl(member.pageNum - 1) }}
                onDoubleClick={(ev) => {ev.stopPropagation() }} >
              <NavigateBeforeIcon />
              </IconButton>
            </Grid>
            <Grid item xs={1}>
              <TextField value={member.pageText} {...stopper}
                inputProps={{min: 0, style: { textAlign: 'center' }}}
                onChange={(ev)=> { member.pageText = ev.target.value}}
                onBlur={(ev) => {
                  const num = Number(member.pageText)
                  if (num > 0) { member.updateUrl(num-1) }
                }}
                onKeyPress={(ev)=>{
                  if (ev.key === 'Enter'){
                    const num = Number(member.pageText)
                    if (num > 0) { member.updateUrl(num-1) }
                  }
                }}
              />
            </Grid>
            <Grid item style={{fontSize:15}}>/ {member.numPages}</Grid>
            <Grid item >
              <IconButton size="small" color={member.pageNum<member.numPages-1?'primary':'default'} {...stopper}
                onClick={(ev) => { ev.stopPropagation(); member.updateUrl(member.pageNum + 1) }}
                onDoubleClick={(ev) => {ev.stopPropagation() }} >
              <NavigateNextIcon />
              </IconButton>
            </Grid>
          </Grid>
        </Collapse>
      }</Observer>
    </div>
  </div>
}

LatestBlock = (props: {block: BlockInfo}) => {

    return (
        <Card>
            <CardHeader title="Latest block"/>
            <CardContent>
                <Grid container alignItems="center">
                    <Grid item md={6} xs={12}>
                        <Typography variant="h6">Block number:</Typography>
                        <Typography variant="subtitle2">{props.block.number}</Typography>
                        <Divider light/>
                        <Box m={"0.5rem"}/>
                        <Typography variant="h6">Hash:</Typography>
                        <Typography variant="subtitle2">{props.block.hash}</Typography>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
}

ClientsWidget = () => {
  const clientsData: clientsObject[] = useRecoilValue(getPreviousClientListData) as clientsObject[]
  const mapData: mapObject = useRecoilValue(getMapData) as mapObject

  const [selectedItem, setSelectedItem] = useState<clientsObject>(clientsData[0])

  useEffect(() => {
    // results
    // console.log(`Result: ${JSON.stringify(clientsResults[0])}`)
    // console.log(`Result: ${JSON.stringify(mapResults.mapFeatures[0])}`)
  })
  return (
    <>
      {clientsData?.length > 0 && mapData.mapFeatures.length > 0 ? (
        <>
          <Grid container>
            <Grid item xs={3}>
              <ClientList data={clientsData} setSelectedItem={setSelectedItem} />
            </Grid>
            <Grid item xs={8}>
              <WorldMap mapData={mapData} clientsData={clientsData} selectedItem={selectedItem} setSelectedItem={setSelectedItem} scale={200} cx={0} cy={100} initRotation={100} rotationSpeed={0.3} />
            </Grid>
          </Grid>
          <ClientListDetail selectedItem={selectedItem} data={clientsData} setSelectedItem={setSelectedItem} paddingTop={400} />
        </>
      ) : (
        <>Loading!</>
      )}
    </>
  )
}

/** Shared message component. */
export function Message(props: Props): JSX.Element {
  return (
    <Grid
      container
      spacing={2}
      className={classes(
        localStyles.message,
        props.asError ? localStyles.error : localStyles.info
      )}
    >
      <Grid item sm={1} style={{ display: 'flex', alignItems: 'center' }}>
        {props.asActivity ? (
          <Progress />
        ) : props.asError ? (
          <RedError />
        ) : (
          <BlueInfo />
        )}
      </Grid>
      <Grid item sm={10} style={{ display: 'flex', alignItems: 'center' }}>
        {props.children ? props.children : props.text}
      </Grid>
    </Grid>
  );
}

InfoPanel = (props: Props) => {
  const classes = useStyles(props);
  const { title, message, children } = props;

  return (
    <Accordion className={classes.panel}>
      <AccordionSummary
        expandIcon={<ExpandMoreIconStyled />}
        className={classes.summary}
      >
        <ErrorOutlineStyled />
        <Typography className={classes.summaryText} variant="subtitle1">
          {title}
        </Typography>
      </AccordionSummary>
      {(message || children) && (
        <AccordionDetails>
          <Grid container>
            {message && (
              <Grid item xs={12}>
                <Typography className={classes.message} variant="body1">
                  {message}
                </Typography>
              </Grid>
            )}
            {children && (
              <Grid item xs={12} className={classes.details}>
                {children}
              </Grid>
            )}
          </Grid>
        </AccordionDetails>
      )}
    </Accordion>
  );
}

AllowStartOnLoginPage: OnboardingPage = props => {
    return (
        <>
            <DialogTitle>Allow SpaceEye to start automatically?</DialogTitle>
            <DialogContent>
                <DialogContentText>
                    If you have to restart your computer or log out/log back in, SpaceEye can
                    automatically start and continue running in the background.
                </DialogContentText>
                <Grid container direction="column" justify="center" alignItems="center">
                    <Box my={0.5} />
                    <Button
                        variant="contained"
                        color="primary"
                        onClick={() => {
                            ipc.callMain<boolean>(SET_START_ON_LOGIN, true)
                            props.next()
                        }}
                    >
                        Yes
                    </Button>
                    <Box my={0.5} />
                    <Button
                        variant="text"
                        color="default"
                        onClick={() => {
                            ipc.callMain<boolean>(SET_START_ON_LOGIN, false)
                            props.next()
                        }}
                    >
                        No, thanks
                    </Button>
                </Grid>
            </DialogContent>
        </>
    )
}

function Airdrop({ merkleIndex }: any) {
    return (
        <Grid className="airdrop-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <AirdropHeader />
                        <AirdropClaim merkleIndex={merkleIndex} />
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}

BankAccountListItem: React.FC<BankAccountListItemProps> = ({
  bankAccount,
  deleteBankAccount,
}) => {
  return (
    <ListItem data-test={`bankaccount-list-item-${bankAccount.id}`}>
      <Grid container direction="row" justify="space-between" alignItems="flex-start">
        <Grid item>
          <Typography variant="body1" color="primary" gutterBottom>
            {bankAccount.bankName} {bankAccount.isDeleted ? "(Deleted)" : undefined}
          </Typography>
        </Grid>
        {!bankAccount.isDeleted && (
          <Grid item>
            <Button
              variant="contained"
              color="secondary"
              size="large"
              data-test="bankaccount-delete"
              onClick={() => {
                deleteBankAccount({ id: bankAccount.id });
              }}
            >
              Delete
            </Button>
          </Grid>
        )}
      </Grid>
    </ListItem>
  );
}

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

  return (
    <Box width='100%' mb={3}>
      <Box
        mb={2}
        display='flex'
        alignItems='center'
        justifyContent='space-between'
        width='100%'
      >
        <Typography variant='h4'>Pool</Typography>
        <Box className={classes.helpWrapper}>
          <Typography variant='body2'>Help</Typography>
          <HelpIcon />
        </Box>
      </Box>
      <Grid container spacing={4}>
        <Grid item xs={12} sm={12} md={5}>
          <Box className={classes.wrapper}>
            <SupplyLiquidity />
          </Box>
        </Grid>
        <Grid item xs={12} sm={12} md={7}>
          <Box className={classes.wrapper}>
            <YourLiquidityPools />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

//import Swap from "@rugenerous/interface/src/pages/Swap"
function Swap() {
  const [anchorEl, setAnchorEl] = useState(null);

  const dispatch = useDispatch();
  const { provider, address, connect, chainID, checkWrongNetwork } = useWeb3Context();

  const [view, setView] = useState(0);
  const [quantity, setQuantity] = useState<string>("");

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

  const handleClick = (event: any) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);

  return (
    <div className="stake-view">
      <Zoom in={true}>
        <div className="stake-card">
          <Grid className="stake-card-grid" container direction="column" spacing={2}>
            {/* <Swap /> */}
          </Grid>
        </div>
      </Zoom>
    </div>
  );
}

function LoadingSpinner({message}: LoadingSpinnerProps): JSX.Element {
  const gridClasses = gridStyles();
  const typographyClasses = typographyStyles();

  return (
    <Grid classes={gridClasses}>
      <LoadingIcon height="10rem" />
      {message && (
        <Typography classes={typographyClasses} variant="subtitle1">
          {message}
        </Typography>
      )}
    </Grid>
  );
}

HomeComponent = () => {
    const {theme} = useThemeContext();
    const {user} = useAuthContext();

    useEffect(() => {
        document.title = 'Home | FLM'
    }, []);

    return (
        <div className={generateColorMode(theme)}
             style={{width: "100%", height: "calc(100% - 64px)", textAlign: "center"}}>
            <Box p={2}>
                <Grid container spacing={2}>
                    <Grid item xs={12}>
                        <h3>Welcome {user ? 'back ' + user.username : 'visitor'} !</h3>
                        {
                            user ?
                                <p>You have 0 unread messages</p>
                                :
                                <div>To start using FastLiteMessage, please register <RouterLink
                                    className={"lnk clrcstm"} to={"/register"}><span style={{color: "#005fc7"}}>here</span></RouterLink>
                                </div>
                        }
                    </Grid>
                </Grid>
            </Box>
        </div>
    )
}

ProviderInfo = ({ order }: { order: Order }) => {
	const theme = useTheme()
	const history = useHistory()
	const [provider, isLoading] = useDocumentListen<Provider>(Provider, Provider.collectionReference().doc(order.providedBy))

	if (isLoading) {
		return (
			<Paper>
				<DataLoading />
			</Paper>
		)
	}

	if (!provider) {
		return (
			<></>
		)
	}

	return (
		<Box padding={2} onClick={() => history.push(`/providers/${provider.id}`)}>
			<Grid container wrap="nowrap" spacing={2}>
				<Grid item>
					<Avatar variant="rounded" src={provider.coverImageURL()} alt={provider.name} style={{
						height: theme.spacing(8),
						width: theme.spacing(8)
					}}>
						<ImageIcon />
					</Avatar>
				</Grid>
				<Grid item xs zeroMinWidth>
					<Typography variant="subtitle1" gutterBottom>{provider.name}</Typography>
					<Typography variant="body1" color="textSecondary">{provider.caption}</Typography>
					<Divider style={{
						marginTop: theme.spacing(1),
						marginBottom: theme.spacing(1),
					}} />
					<Typography variant="body2" color="textSecondary">{provider.description}</Typography>
				</Grid>
			</Grid>
		</Box>
	)
}

/**
 * Display an empty state message with sensible defaults.
 * By default, height is `100%`.
 * Override with props that are passed to the root MUI `Grid` component.
 */
export default function EmptyState({
  message = "Nothing here",
  description,
  Icon = ErrorIcon,
  fullScreen = false,
  basic = false,
  ...props
}: IEmptyStateProps) {
  const classes = useStyles({});

  if (basic)
    return (
      <Grid container alignItems="center" spacing={1} {...props}>
        <Grid item>
          <Icon className={classes.basicIcon} />
        </Grid>

        <Grid item>
          {message}
          {description && ": "}
          {description}
        </Grid>
      </Grid>
    );

  return (
    <Grid
      container
      direction="column"
      justify="center"
      alignItems="center"
      component={fullScreen ? Div100vh : "div"}
      style={{ height: fullScreen ? "100rvh" : "100%" }}
      {...props}
      className={clsx(classes.root, props.className)}
    >
      <Grid item className={classes.content}>
        <Icon className={classes.icon} />

        <Typography
          variant="h6"
          className={classes.message}
          color="textSecondary"
          gutterBottom
        >
          {message}
        </Typography>

        {description && (
          <Typography color="textSecondary" variant="body2">
            {description}
          </Typography>
        )}
      </Grid>
    </Grid>
  );
}

SigninSignupPage = ({ variant }: SigninSignupPageProps) => {
  const classes = useStyles();

  const isSm = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));

  const location = useLocation();
  const from = (location?.state as any)?.from?.pathname || APP_LANDING;

  const resetPasswordMatch = useRouteMatch({
    path: RESET_PASSWORD_PATH,
  });

  const { user } = useSession();
  // if user authed, redirect to home dashboard
  if (user?.emailVerified) {
    return <Redirect to={from} />;
  }

  let component = null;
  let Img = LoginImg;

  if (resetPasswordMatch) {
    component = <ResetPassword />;
    Img = ForgotPasswordImg;
  } else if (user) {
    component = <EmailVerification />;
    Img = NewEmailImg;
  } else {
    component = <SigninSignupForm variant={variant} from={from} />;
    Img = variant === "signin" ? LoginImg : NewAccountImg;
  }

  return (
    <AuthContainer>
      <Grid container>
        <Grid item xs={12} md={6} lg={5} className={classes.contentContainer}>
          <Logo className={classes.logo} />
          {component}
        </Grid>
        {!isSm && (
          <Grid item md={6} lg={7} className={classes.imgContainer}>
            <Img className={classes.img} />
          </Grid>
        )}
      </Grid>
    </AuthContainer>
  );
}

render() {
    if (!this.props.connectSignerContainer.connectionStatus) {
      return (
        <div style={{ flexGrow: 1 }}>
          <Typography align={'center'} variant={'h5'}>
            Connect Signer to site?
          </Typography>

          <Box mt={8}>
            <Grid
              container
              spacing={4}
              justify={'center'}
              alignItems={'center'}
            >
              <Grid item>
                <Button
                  variant="contained"
                  color="secondary"
                  onClick={() => {
                    this.props.connectSignerContainer.cancel();
                  }}
                >
                  Cancel
                </Button>
              </Grid>
              <Grid item>
                <Button
                  onClick={() =>
                    this.props.connectSignerContainer.connectToSite()
                  }
                  variant="contained"
                  color="primary"
                >
                  Connect
                </Button>
              </Grid>
            </Grid>
          </Box>
        </div>
      );
    } else {
      return <Redirect to={Pages.Home} />;
    }
  }

Challenge = (props: IChallengeContainerProps) => {

  const [flag, _setFlag] = useState("");
  const [warning, setWarning] = useState("");
  const { setChallengesDone } = useContext(LayoutContext);
  const history = useHistory();

  const challengeData = props.obj || { description: "", explanation: "", name: "", objective: "", url: "" };
  const Component = props.obj.component;


  const setFlag = (flg: string) => {
    if (validFlag(flg)) {
      _setFlag(flg);
      ProgressService.updateProgress(props.obj.url, flg);
    }

    setChallengesDone(ProgressService.done());
  };

  const resetChallenge = () => {
    _setFlag("");
    ProgressService.updateProgress(props.obj.url, "");
    setChallengesDone(ProgressService.done());
  };

  const onGoToDocsClicked = (path: string) => {
    return () => history.push(path);
  };

  const displayWarning = () => {
    return (
      <Box>
        <AppBar position="static" className={classes.warningTitle}>
          <Typography variant="h6">Warning</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.warning}>
          {warning.split("\n").map((l, i) => <Typography key={i}>{l}</Typography>)}
        </Paper>
      </Box>
    );
  };

  useEffect(() => {
    const f = ProgressService.getFoundFlag(props.obj.url);
    setFlag(f);
  }, []);


  const classes = useStyles();

  return (
    <Grid container spacing={3}>
      <Grid item md={8}>

        <Paper className={classes.mainContainer}>
          <Typography variant="h4" gutterBottom className={classes.title}> {challengeData.name}</Typography>
          <Component flag={flag} setFlag={setFlag} setWarning={setWarning} />
        </Paper>
      </Grid>
      <Grid item md={4}>
        <Flag flag={flag} resetChallenge={resetChallenge} />

        {warning ? displayWarning() : ""}

        <AppBar position="static" className={classes.documentationTitle}>
          <Typography variant="h6">Docs</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.documentation}>
          <Typography>If you are having trouble with this challenge take a look at our documentation <Link to={"docs" + props.obj.url}>here</Link> </Typography>
        </Paper>
      </Grid>
    </Grid>
  );
}

render() {
    const comments = this.props.commentsList.map((comment, index) => (
      <div key={index}>
        <Comment reviewComment={comment} file={this.props.file} />
        <Divider />
      </div>
    ));
    const reviewTimeStamp = timeAgo(
      new Date().getTime(),
      this.props.reviewRequest.timestamp
    );
    return (
      <List
        subheader={
          <Grid container direction="column" spacing={0}>
            <Grid container direction="row" spacing={0}>
              <Grid item style={style.reviewIcon}>
                <RateReviewIcon color="primary" />
              </Grid>
              <Grid item>
                <Typography
                  color="primary"
                  style={style.commentListHeader}
                  gutterBottom
                >
                  {'Review requested: ' + this.props.reviewRequest.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography
                color="primary"
                style={style.commentListDescription}
                gutterBottom
              >
                {'Requested by: ' + this.props.reviewRequest.requester}
              </Typography>
            </Grid>
            <Grid item>
              <Typography color="primary" style={style.commentListDescription}>
                {'Opened ' + reviewTimeStamp}
              </Typography>
            </Grid>
          </Grid>
        }
      >
        {' '}
        {comments}{' '}
      </List>
    );
  }

Settings: React.FC<SettingsProps> = props => {
    const {
        onClickBack,
        onClickQuit,
        onClickStartOnLoginSwitch,
        onClickAutoUpdateSwitch,
        openAboutApp,
        closeAboutApp,
        shouldStartOnLogin,
        autoUpdate,
        aboutAppVisible
    } = props

    return (
        <SettingsContainer>
            <SectionsContainer>
                <SectionsColumn>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Typography variant="h5">SpaceEye</Typography>
                    </Grid>
                    <Box my={1} />
                    <Grid container direction="row" justify="center">
                        <Button variant="outlined" color="primary" onClick={onClickBack}>
                            Back
                        </Button>
                    </Grid>
                    <Spacer />
                    <Grid container direction="column" justify="center" alignItems="center">
                        <Link
                            component="button"
                            variant="body2"
                            color="textSecondary"
                            onClick={openAboutApp}
                        >
                            About
                        </Link>
                        <Box my={0.5} />
                        <Button variant="outlined" color="secondary" onClick={onClickQuit}>
                            Quit
                        </Button>
                    </Grid>
                    <Box my={1} />
                </SectionsColumn>
            </SectionsContainer>
            <SettingsColumn>
                <Box my={2} />
                <Grid container direction="row" justify="center">
                    <Typography variant="h6">Settings</Typography>
                </Grid>
                <Box my={2} mx={1}>
                    <Divider variant="fullWidth" />
                </Box>
                <Grid container direction="column" justify="flex-start" alignContent="flex-start">
                    <SettingsSwitch
                        isChecked={shouldStartOnLogin}
                        onChange={onClickStartOnLoginSwitch}
                        label="Start on Login"
                    />
                    {/* Don't show auto-update option if downloaded from an app store */}
                    {!process.mas && !process.windowsStore && (
                        <SettingsSwitch
                            isChecked={autoUpdate}
                            onChange={onClickAutoUpdateSwitch}
                            label="Auto update"
                        />
                    )}
                </Grid>
            </SettingsColumn>
            <AboutThisApp onClickDone={closeAboutApp} visible={aboutAppVisible} />
        </SettingsContainer>
    )
}

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>
    );
}

EmptyList: React.FC<{ entity: string; children?: React.ReactNode }> = ({
  entity,
  children,
}) => {
  return (
    <Box
      display="flex"
      height={600}
      min-height={600}
      alignItems="center"
      justifyContent="center"
      border={1}
      borderColor={grey[200]}
    >
      <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
        style={{ height: "100%", width: "100%" }}
        spacing={2}
      >
        <Grid item data-test="empty-list-header">
          <Typography component="h2" variant="h6" color="primary" gutterBottom>
            No {entity}
          </Typography>
        </Grid>
        <Grid item>
          <Box
            data-test="empty-list-children"
            display="flex"
            width={300}
            alignItems="center"
            justifyContent="center"
          >
            {children}
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

DragonPage: React.FC = () => {
  const classes = useStyles();
  const { breakpoints } = useTheme();
  const isMobile = useMediaQuery(breakpoints.down('xs'));

  return (
    <Box width='100%' mb={3}>
      <DragonAlert />
      <Grid container spacing={4}>
        <Grid item xs={12} sm={12} md={4}>
          <Box className={classes.dragonWrapper}>
            <Box className={classes.dragonBg}>
              <img src={DragonBg2} alt='Dragon Lair' />
            </Box>
            <img
              src={DragonLairMask}
              alt='Dragon Mask'
              style={{ width: '100%', position: 'absolute', top: 207 }}
            />
            <Box className={classes.dragonTitle}>
              <Typography variant='h5'>Dragon’s Lair</Typography>
              <Typography variant='body2'>Stake QUICK to earn QUICK</Typography>
            </Box>
            <DragonsLair />
          </Box>
        </Grid>
        <Grid item xs={12} sm={12} md={8}>
          <Box className={classes.dragonWrapper}>
            <Box className={classes.dragonBg}>
              <img src={isMobile ? DragonBg2 : DragonBg1} alt='Dragon Syrup' />
            </Box>
            <Box className={classes.dragonTitle}>
              <Typography variant='h5'>Dragon’s Syrup</Typography>
              <Typography variant='body2'>
                Earn tokens of your choice over time
              </Typography>
            </Box>
            <DragonsSyrup />
          </Box>
        </Grid>
      </Grid>
    </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 SQForm<Values extends FormikValues>({
  children,
  enableReinitialize = false,
  initialValues,
  muiGridProps = {},
  onSubmit,
  validationSchema,
}: SQFormProps<Values>): JSX.Element {
  const initialErrors = useInitialRequiredErrors(
    validationSchema,
    initialValues
  );

  // HACK: This is a workaround for: https://github.com/mui-org/material-ui-pickers/issues/2112
  // Remove this reset handler when the issue is fixed.
  const handleReset = () => {
    document &&
      document.activeElement &&
      (document.activeElement as HTMLElement).blur();
  };

  const handleSubmit = useDebouncedCallback(
    (values: Values, formikHelpers: FormikHelpers<Values>) =>
      onSubmit(values, formikHelpers),
    500,
    {leading: true, trailing: false}
  );

  return (
    <Formik<Values>
      enableReinitialize={enableReinitialize}
      initialErrors={initialErrors}
      initialValues={initialValues}
      onSubmit={handleSubmit}
      onReset={handleReset}
      validationSchema={validationSchema}
      validateOnMount={true}
    >
      {(_props) => {
        return (
          <Form>
            <Grid
              {...muiGridProps}
              container
              spacing={muiGridProps.spacing ?? 2}
            >
              {children}
            </Grid>
          </Form>
        );
      }}
    </Formik>
  );
}

HomePage: FunctionComponent = () => {
  const classes = useStyles();

  return (
    <>
      <Head>
        {/* The title of the webpage as displayed in the tab name. */}
        <title>{t('pages:page-title')}</title>
      </Head>
      <Container maxWidth={false} className={clsx(classes.background)}>
        <div className={classes.homeHeader}>
          {/* Use a bare PNG image. No weird WEBP handling should prevent rendering this. */}
          <NextImage
            priority
            src={'/images/logo.png'}
            width={80}
            height={80}
            className={classes.logo}
            alt={t('pages:page-title')}
          />
          <Typography variant="h3">{t('pages:page-title')}</Typography>
        </div>
        <div className={classes.homeBody}>
          <Grid container justify="center" spacing={2}>
            <Grid item xs={4} style={{ display: 'none' }}>
              <Link href="/achievements">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-achievements')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
            <Grid item xs={4}>
              <Link href="/map">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-map')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
          </Grid>
        </div>
        <div className={classes.homeFooter}>
          <Typography className={classes.subtitle}>
            {f('version-format', { version: getApplicationVersion() })}
          </Typography>
        </div>
      </Container>
    </>
  );
}

ApproveRejectButtons: React.FunctionComponent<{
  testRun: TestRun;
}> = ({ testRun }) => {
  const { enqueueSnackbar } = useSnackbar();

  const approve = () => {
    testRunService
      .approveBulk([testRun.id], testRun.merge)
      .then(() =>
        enqueueSnackbar("Approved", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  const reject = () => {
    testRunService
      .rejectBulk([testRun.id])
      .then(() =>
        enqueueSnackbar("Rejected", {
          variant: "success",
        })
      )
      .catch((err) =>
        enqueueSnackbar(err, {
          variant: "error",
        })
      );
  };

  useHotkeys("a", approve, [testRun]);
  useHotkeys("x", reject, [testRun]);

  return (
    <Grid container spacing={2} alignItems="center">
      {testRun.merge && (
        <Grid item>
          <Tooltip title="Will replace target branch baseline if accepted">
            <Chip
              label={`merge into: ${testRun.baselineBranchName}`}
              color="secondary"
              size="small"
            />
          </Tooltip>
        </Grid>
      )}
      <Grid item>
        <Tooltip title={"Hotkey: A"}>
          <Button color="inherit" onClick={approve}>
            Approve
          </Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title={"Hotkey: X"}>
          <Button color="secondary" onClick={reject}>
            Reject
          </Button>
        </Tooltip>
      </Grid>
    </Grid>
  );
}