@mui/material#Paper TypeScript Examples

function CreateContractModalInner() {
    const dispatch = useDispatch();
    const selected = useSelector(selectAPI);
    const unselect =
        selected === null ? null : (
            <Button onClick={() => dispatch(select_api(null))}>Back</Button>
        );

    return (
        <Paper square={true} className="PluginPage">
            <div>
                {unselect}
                <Typography variant="h3">Applications</Typography>
                <PluginSelector />
            </div>
        </Paper>
    );
}

export function Analyzer() {
  // Short cuts will then only be available when this page is <Analyzer/> is open
  useShortcuts();

  return (
    <SettingsModalProvider>
      <SettingsModal />
      <Stack
        sx={{
          p: 2,
          flexGrow: 1,
          height: "100%",
        }}
        gap={2}
      >
        <GameCanvas />
        <Paper elevation={1} sx={{ boxShadow: "none" }}>
          <PlayBar />
        </Paper>
      </Stack>
    </SettingsModalProvider>
  );
}

export default function ChartCard({ className, title, right, children }: ChartCardProps) {
  return (
    <Paper className={clsx(s.root, className)}>
      <div className={s.title}>
        <Text element="h3">{title}</Text>
        {right}
      </div>
      <div className={s.content}>{children}</div>
    </Paper>
  );
}

export function HelpBox(props: Pick<HelpModalProps, "onClose">) {
  const { onClose } = props;
  return (
    <Paper sx={{ px: 2, py: 2, display: "flex", flexDirection: "column" }}>
      {/*MenuBar could be reused*/}
      <Stack sx={{ alignItems: "center" }} direction={"row"} gap={1}>
        <Help />
        <Typography fontWeight={"bolder"}>Help</Typography>
        <Box flexGrow={1} />
        <IconButton onClick={onClose}>
          <Close />
        </IconButton>
      </Stack>
      <Divider />

      <PlaybarNavigationShortcuts />
      {/*<OtherResources />*/}
      {/*Footer*/}
      <Divider />
      <Stack sx={{ paddingTop: 1 }}>
        <PromotionFooter />
      </Stack>
    </Paper>
  );
}

Container = styled(Paper)(({ theme }) => ({
  position: 'absolute',
  background: theme.palette.secondary.dark,
  color: theme.palette.getContrastText(theme.palette.secondary.dark),
  zIndex: 99999999,
  bottom: 10,
  right: -60,
  padding: theme.spacing(2, 10),
  transform: 'rotate(-45deg)'
}))

export function AppNavbar(props: {
    relayout: () => void;
    contract: ContractModel;
    bitcoin_node_manager: BitcoinNodeManager;
}): JSX.Element {
    const dispatch = useDispatch();

    return (
        <Paper className="AppNavBar" square={true}>
            <List sx={{ textAlign: 'center' }}>
                <MainScreens></MainScreens>
            </List>
            <Divider />
            <List>
                <ContractMenu relayout={props.relayout} />
                <NodeMenu bitcoin_node_manager={props.bitcoin_node_manager} />
                <Simulator />
            </List>
            <Divider />
            <List>
                <SettingsMenuItem />
            </List>
            <Divider />
        </Paper>
    );
}

function PlaybarSettingsSection() {
  const { playbarSettingsStore } = useCommonManagers();
  const settings = useObservable(() => playbarSettingsStore.settings$, DEFAULT_PLAY_BAR_SETTINGS);

  return (
    <Paper elevation={1} sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Playbar</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.difficultyGraphEnabled}
                onChange={(event) =>
                  playbarSettingsStore.changeSettings((s) => (s.difficultyGraphEnabled = event.target.checked))
                }
              />
            }
            label={"Show difficulty graph"}
          />
        </FormGroup>
      </Stack>
    </Paper>
  );
}

export default function CallNotificationIncoming(props: {
	caller?: string,
	onDecline?: VoidFunction,
	onAccept?: VoidFunction,
	loading?: boolean
}) {
	return (
		<Paper sx={{
			padding: 2,
			width: 400,
			boxSizing: "border-box"
		}} elevation={3}>
			<Stack direction="column" alignItems="stretch" spacing={2}>
				<Typography>Incoming FaceTime call from {props.caller}</Typography>
				<Stack direction="row" spacing={2}>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="error" disabled={props.loading} onClick={props.onDecline}>Decline</Button>
					<Button sx={{flexBasis: 0, flexGrow: 1}} variant="contained" color="success" disabled={props.loading} onClick={props.onAccept}>Accept</Button>
				</Stack>
			</Stack>
		</Paper>
	);
}

Table: React.FC<TableProps> = (props) => {
  const { dataSource, columns, size } = props;
  return (
    <TableContainer component={Paper}>
      <MTable sx={{ minWidth: 650 }} size={size}>
        <TableHead>
          <TableRow>
            {columns.map(({ name, field, align = 'left', ...i }) => (
              <StyledTableCell key={field} align={align}>
                {name}
              </StyledTableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {dataSource.map((row, index) => (
            <StyledTableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              {columns.map(({ name, field, align = 'left', render, ...i }) => (
                <StyledTableCell key={field} align={align}>
                  {render ? render(row[field], row, index) : row[field]}
                </StyledTableCell>
              ))}
            </StyledTableRow>
          ))}
        </TableBody>
      </MTable>
      {dataSource.length === 0 && (
        <div className="w-full">
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </div>
      )}
    </TableContainer>
  );
}

export default function SidebarBanner(props: {
	icon: React.ReactNode,
	message: string,
	button?: string,
	onClickButton?: VoidFunction
}) {
	return (
		<Paper variant="outlined" className={props.button != undefined ? styles.rootButton : styles.rootText}>
			<div className={styles.icon}>
				{props.icon}
			</div>
			
			<div className={styles.stack}>
				<Typography display="inline">{props.message}</Typography>
				{props.button !== undefined && (
					<Button color="primary" className={styles.button} onClick={props.onClickButton}>{props.button}</Button>
				)}
			</div>
		</Paper>
	);
}

ExpandableListItem = ({ header, content }: Props) => {
  const [open, setOpen] = useState(false)

  return (
    <List
      sx={{
        my: 0,
        mx: { xs: 0, md: 3 },
        cursor: 'pointer',
      }}>
      <Paper elevation={1} sx={{ borderRadius: 2 }}>
        <Box
          sx={{ display: 'flex', alignItems: 'center', px: 3, py: 1 }}
          onClick={() => setOpen(!open)}>
          <ListItemText
            primary={header}
            primaryTypographyProps={{
              variant: 'subtitle1',
              color: `${withAccentColor(open)}`,
            }}
          />
          {open ? (
            <ExpandLess sx={{ color: `${withAccentColor(open)}` }} />
          ) : (
            <ExpandMore sx={{ color: `${withAccentColor(open)}` }} />
          )}
        </Box>
        <Collapse in={open}>
          <List>
            <Box sx={{ pl: { xs: 3, md: 6 }, pb: 2, pr: 2 }}>{content}</Box>
          </List>
        </Collapse>
      </Paper>
    </List>
  )
}

toast = (props: (SnackbarProps & { autoHideDuration?: number }) | string = { }, type?: AlertColor) => {
  if (typeof props === 'string') props = { message: props }
  if (type) props.children = <Paper elevation={5}><Alert severity={type} sx={{ width: '100%' }} variant={'filled' as any}>{props.message}</Alert></Paper>
  if (!props.autoHideDuration) props.autoHideDuration = 4000
  const obj = toasts[i] = {
    ...props,
    key: i,
    open: true,
    sx: { position: 'relative', top: 0, left: 0, marginBottom: '12px !important' },
    onClose () {
      toasts[obj.key] = { ...obj, open: false }
      update?.(i++)
      setTimeout(() => {
        delete toasts[obj.key]
        update?.(i++)
      }, 500)
    }
  }
  update?.(++i)
}

export default function CustomShapedArrayField({
                                                   property,
                                                   name,
                                                   value,
                                                   setValue,
                                                   customProps,
                                                   touched,
                                                   error,
                                                   isSubmitting,
                                                   showError,
                                                   includeDescription,
                                                   context,
                                                   ...props
                                               }: FieldProps<any[], CustomShapedArrayProps>)
    : ReactElement {

    const properties = customProps.properties;

    return (
        <FormControl fullWidth error={showError}>

            <FormHelperText>{property.title ?? name}</FormHelperText>

            <Paper variant={"outlined"}>
                <Box m={2}>
                    {properties.map((property, index) =>
                        <div key={`array_${index}`}>
                            {buildPropertyField({
                                name: `${name}[${index}]`,
                                property,
                                context
                            })}
                        </div>
                    )}
                </Box>
            </Paper>

            {includeDescription &&
            <FieldDescription property={property}/>}

            {showError
            && typeof error === "string"
            && <FormHelperText>{error}</FormHelperText>}

        </FormControl>

    );

}

function ReplayCursorSettingsSection() {
  const { replayCursorSettingsStore } = useCommonManagers();
  const settings = useObservable(() => replayCursorSettingsStore.settings$, DEFAULT_REPLAY_CURSOR_SETTINGS);

  return (
    <Paper sx={{ boxShadow: "none", p: 2 }}>
      <Stack gap={1}>
        <Typography variant={"h6"}>Replay Cursor</Typography>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={settings.enabled}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.enabled = event.target.checked))
                }
              />
            }
            label={"Enabled"}
          />
        </FormGroup>
        <FormGroup>
          <FormControlLabel
            disabled={!settings.enabled}
            control={
              <Switch
                checked={settings.smoothCursorTrail}
                onChange={(event) =>
                  replayCursorSettingsStore.changeSettings((s) => (s.smoothCursorTrail = event.target.checked))
                }
              />
            }
            label={"Smooth Cursor Trail"}
          />
        </FormGroup>
        <Typography>Scale</Typography>
        <Slider
          value={Math.round(settings.scale * 100)}
          valueLabelFormat={formatToPercent}
          disabled={!settings.enabled}
          min={10}
          max={200}
          onChange={(_, v) => replayCursorSettingsStore.changeSettings((s) => (s.scale = (v as number) / 100))}
          valueLabelDisplay={"auto"}
        />
      </Stack>
    </Paper>
  );
}

Profiler: React.FC = () => {
  const plugin = usePlugin()
  const theme = useTheme()
  const globalData = useGlobalData()
  const [tab, setTab] = useState(0)
  const [key, setTKey] = useState(0)
  const [status, setStatus] = useState(!!globalData.profilerStarted)
  useEffect(() => {
    const off = plugin.on('profiler:status', setStatus)
    return () => { off() }
  }, [])

  const transitionDuration = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen
  }
  const Elm = components[tab]

  const createFab = (onClick: any, children: any, show: boolean) => <Zoom
    in={show}
    timeout={transitionDuration}
    style={{ transitionDelay: (show ? transitionDuration.exit : 0) + 'ms' }}
    unmountOnExit
  >
    <Fab
      color='primary'
      sx={{ position: 'fixed', bottom: { xs: 16, sm: 40 }, right: { xs: 16, sm: 40 }, zIndex: 3 }}
      onClick={onClick}
    >{children}</Fab>
  </Zoom>

  return <Box sx={{ minHeight: status || !tab ? '100%' : undefined }}>
    <Toolbar />
    <Paper square variant='outlined' sx={{ margin: '0 -1px', position: 'fixed', width: 'calc(100% + 1px)', zIndex: 3 }}>
      <Tabs value={tab} onChange={(_, it) => setTab(it)} variant='scrollable' scrollButtons='auto'>
        <Tab label={lang.profiler.summary} />
        <Tab label='Timings' disabled={!globalData.hasTimings} />
        <Tab label={lang.profiler.plugins} />
        <Tab label={lang.profiler.carbageCollection} />
        <Tab label={lang.profiler.entities} />
        <Tab label={lang.profiler.heap} />
        <Tab label={lang.profiler.threads} />
      </Tabs>
    </Paper>
    <Tabs />
    {tab < 4 && !status ? <Box sx={{ textAlign: 'center', marginTop: '40vh' }}>{lang.profiler.notStarted}</Box> : Elm && <Elm key={key} />}
    {createFab(() => plugin.emit('profiler:status', !status), status ? <Stop /> : <PlayArrow />, tab < 4)}
    {createFab(() => setTKey(key + 1), <Refresh />, tab >= 4)}
  </Box>
}

export function BaseSettingsModal(props: SettingsProps) {
  const { onClose, tabs, opacity, onOpacityChange, tabIndex, onTabIndexChange } = props;

  const handleTabChange = (event: any, newValue: any) => {
    onTabIndexChange(newValue);
  };

  const displayedTab = tabs[tabIndex].component;

  return (
    <Paper
      sx={{
        filter: `opacity(${opacity}%)`,
        height: "100%",
        display: "flex",
        flexDirection: "column",
        position: "relative",
      }}
      elevation={2}
    >
      <Stack sx={{ py: 1, px: 2, alignItems: "center" }} direction={"row"} gap={1}>
        <SettingsIcon />
        <Typography fontWeight={"bolder"}>Settings</Typography>
        <Box flexGrow={1} />
        <IconButton onClick={onClose}>
          <Close />
        </IconButton>
      </Stack>
      <Divider />
      <Stack direction={"row"} sx={{ flexGrow: 1, overflow: "auto" }}>
        {/*TODO: Holy moly, the CSS here needs to be changed a bit*/}
        <Tabs
          orientation="vertical"
          variant="scrollable"
          value={tabIndex}
          onChange={handleTabChange}
          sx={{ borderRight: 1, borderColor: "divider", position: "absolute" }}
        >
          {tabs.map(({ label }, index) => (
            <Tab label={label} key={index} tabIndex={index} sx={{ textTransform: "none" }} />
          ))}
        </Tabs>
        <Box sx={{ marginLeft: "90px" }}>{displayedTab}</Box>
      </Stack>
      <Divider />
      <Stack sx={{ px: 2, py: 1, flexDirection: "row", alignItems: "center" }}>
        <PromotionFooter />
        <Box flexGrow={1} />
        <Stack direction={"row"} alignItems={"center"} gap={2}>
          <IconButton onClick={() => onOpacityChange(MIN_OPACITY)}>
            <VisibilityOff />
          </IconButton>
          <Slider
            value={opacity}
            onChange={(_, v) => onOpacityChange(v as number)}
            step={5}
            min={MIN_OPACITY}
            max={MAX_OPACITY}
            valueLabelFormat={(value: number) => `${value}%`}
            sx={{ width: "12em" }}
            valueLabelDisplay={"auto"}
          />
          <IconButton onClick={() => onOpacityChange(MAX_OPACITY)}>
            <Visibility />
          </IconButton>
        </Stack>
      </Stack>
    </Paper>
  );
}

IdentityProvider = () => {
  const dispatch = useDispatch();
  const classes = useStyles();

  const idpSelection = useSelector(
    (state: AppState) => state.createTenant.fields.identityProvider.idpSelection
  );

  return (
    <Paper className={classes.paperWrapper}>
      <div className={classes.headerElement}>
        <h3 className={classes.h3Section}>Identity Provider</h3>
        <span className={classes.descriptionText}>
          Access to the tenant can be controlled via an external Identity
          Manager.
        </span>
      </div>
      <Grid item xs={12} className={classes.protocolRadioOptions}>
        <label>Protocol</label>
        <RadioGroupSelector
          currentSelection={idpSelection}
          id="idp-options"
          name="idp-options"
          label=" "
          onChange={(e) => {
            dispatch(setIDP(e.target.value));
          }}
          selectorOptions={[
            { label: "Built-in", value: "Built-in" },
            { label: "OpenID", value: "OpenID" },
            { label: "Active Directory", value: "AD" },
          ]}
        />
      </Grid>
      {idpSelection === "Built-in" && <IDPBuiltIn />}
      {idpSelection === "OpenID" && <IDPOpenID />}
      {idpSelection === "AD" && <IDPActiveDirectory />}
    </Paper>
  );
}

Template: Story<SettingsProps> = (args) => (
  <Paper elevation={2} sx={{ width: 560 }}>
    <BaseSettingsModal {...args} />
  </Paper>
)

LoginCallback = ({ classes }: ILoginCallBackProps) => {
  const [error, setError] = useState<string>("");
  const [errorDescription, setErrorDescription] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    if (loading) {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const code = urlParams.get("code");
      const state = urlParams.get("state");
      const error = urlParams.get("error");
      const errorDescription = urlParams.get("errorDescription");
      if (error || errorDescription) {
        setError(error || "");
        setErrorDescription(errorDescription || "");
        setLoading(false);
      } else {
        api
          .invoke("POST", "/api/v1/login/oauth2/auth", { code, state })
          .then(() => {
            // We push to history the new URL.
            let targetPath = "/";
            if (
              localStorage.getItem("redirect-path") &&
              localStorage.getItem("redirect-path") !== ""
            ) {
              targetPath = `${localStorage.getItem("redirect-path")}`;
              localStorage.setItem("redirect-path", "");
            }
            setLoading(false);
            history.push(targetPath);
          })
          .catch((error) => {
            setError(error.errorMessage);
            setErrorDescription(error.detailedError);
            setLoading(false);
          });
      }
    }
  }, [loading]);
  return error !== "" || errorDescription !== "" ? (
    <React.Fragment>
      <Paper className={classes.paper}>
        <Grid container className={classes.mainContainer}>
          <Grid item xs={7} className={classes.theOcean}>
            <div className={classes.oceanBg} />
          </Grid>
          <Grid item xs={5} className={classes.theLogin}>
            <div className={classes.errorTitle}>
              <span className={classes.messageIcon}>
                <ErrorOutlineIcon />
              </span>
              <span className={classes.errorLabel}>Error from IDP</span>
            </div>
            <div className={classes.simpleError}>{error}</div>
            <Typography
              variant="body1"
              gutterBottom
              component="div"
              className={classes.extraDetailsContainer}
            >
              {errorDescription}
            </Typography>
            <Button
              component={"a"}
              href={`${baseUrl}login`}
              type="submit"
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Back to Login
            </Button>
          </Grid>
        </Grid>
      </Paper>
    </React.Fragment>
  ) : null;
}

// TODO: Maybe tell which file is actually missing
export function SetupScreen() {
  // TODO: Add a guess for directory path
  const [directoryPath, setDirectoryPath] = useState<string | null>(null);
  const [saveEnabled, setSaveEnabled] = useState(false);

  const [updateOsuDirectory, updateState] = useUpdateOsuDirectoryMutation();
  const [showErrorMessage, setShowErrorMessage] = useState(false);

  const handleConfirmClick = useCallback(() => {
    if (directoryPath) {
      updateOsuDirectory({ osuStablePath: directoryPath });
    }
  }, [updateOsuDirectory, directoryPath]);

  useEffect(() => {
    if (updateState.isSuccess) {
      window.api.reboot();
    } else if (updateState.isError) {
      setShowErrorMessage(true);
    }
  }, [updateState, setShowErrorMessage]);

  const handleOnDirectoryChange = useCallback(
    (path: string | null) => {
      setDirectoryPath(path);
      setShowErrorMessage(false);
    },
    [setShowErrorMessage],
  );

  // Makes sure that the button is only clickable when it's allowed.
  useEffect(() => {
    setSaveEnabled(directoryPath !== null && !updateState.isLoading);
  }, [directoryPath, updateState.isLoading]);

  return (
    <Box
      sx={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Paper elevation={1}>
        <Stack gap={2} sx={{ px: 6, py: 4 }}>
          <RewindLogo />
          {showErrorMessage && (
            <>
              <Alert severity="error">
                <div>Does not look a valid osu! directory!</div>
              </Alert>
            </>
          )}
          <DirectorySelection
            value={directoryPath}
            onChange={handleOnDirectoryChange}
            placeHolder={"Select your osu! directory"}
            badgeOnEmpty={true}
          />
          <Stack direction={"row-reverse"} gap={2}>
            <Button variant={"contained"} startIcon={<Loop />} disabled={!saveEnabled} onClick={handleConfirmClick}>
              Save & Restart
            </Button>
            <Button variant={"text"} onClick={() => window.open(setupWikiUrl)} startIcon={<Help />}>
              Help
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  );
}

StyledPaper = styled(Paper)`
    && {
        background-color: ${({ theme }) => theme.body};
        margin-top: 16px;
    }
`

CustomField = ({
                         property,
                         value,
                         name,
                         tableMode,
                         error,
                         showError,
                         includeDescription,
                         context,
                         setValue,
                     }: FieldProps<object>) => {
    useEffect(() => {
        if (!value) setValue({});
    }, [value, setValue]);

    return (
        <FormControl fullWidth error={showError}>
            {!tableMode && (
                <FormHelperText filled required={property.validation?.required}>
                    <LabelWithIcon property={property} />
                </FormHelperText>
            )}

            <Paper elevation={0}>
                {buildPropertyField({
                    name: `${name}.sample`,
                    property: {
                        title: "Sample",
                        dataType: "string",
                        validation: {
                            required: true,
                        },
                    },
                    context,
                })}
            </Paper>

            {includeDescription && <FieldDescription property={property} />}

            {showError && typeof error === "string" && (
                <FormHelperText>{error}</FormHelperText>
            )}
        </FormControl>
    );
}

EngineDetail: FC = () => {
  const { id = '' } = useParams();

  const [detail, setDetail] = useState<SearchEngineData>(
    {} as SearchEngineData,
  );

  const getDetail = () => {
    getEngineDetailApi(id).then((res) => {
      setDetail(res);
    });
  };

  useEffect(() => {
    getDetail();
  }, []);

  const Item = ({ label, value }: any) => {
    return (
      <li>
        <div className="p-1 pl-6 flex gap-4">
          <span className="w-1/5">{label}</span>
          <span className="flex-grow">{value === undefined ? '-' : value}</span>
        </div>
      </li>
    );
  };

  return (
    <Paper variant="outlined" className="divide-y">
      <div className="p-3 font-bold text-lg">{detail.name}</div>
      <div className="p-3">
        <ul>
          <Item label="URL" value={detail.href} />
          <Item label="简介" value={detail.description} />
          <Item label="使用次数" value={detail.count} />
          <Item label="分类" value={detail.classify?.name} />
          <Item label="是否显示" value={detail.isShow ? '是' : '否'} />
          <Item
            label="创建时间"
            value={dayjs(detail.createdTime).format('YYYY-MM-DD HH:mm:ss')}
          />
          <Item
            label="更新时间"
            value={dayjs(detail.updatedTime).format('YYYY-MM-DD HH:mm:ss')}
          />
        </ul>
      </div>
    </Paper>
  );
}

Template: Story<GameCurrentTimeProps> = (args) => (
  <Paper elevation={1}>
    <BaseCurrentTime {...args} />
  </Paper>
)

/**
 *
 * Simply render the non-editable preview of a field
 *
 * This is one of the internal components that get mapped natively inside forms
 * and tables to the specified properties.
 * @category Form fields
 */
export function ReadOnlyField({
                                  name,
                                                                    value,
                                                                    setValue,
                                                                    error,
                                                                    showError,
                                                                    isSubmitting,
                                                                    touched,
                                                                    tableMode,
                                                                    property,
                                                                    includeDescription,
                                                                    context
                                                                }: FieldProps<any>) {

    return (

        <FormControl fullWidth error={showError}>

            {!tableMode && <FormHelperText filled
                                           required={property.validation?.required}>
                <LabelWithIcon property={property}/>
            </FormHelperText>}

            <Paper
                sx={(theme) => ({
                    minHeight: "64px",
                    elevation: 0,
                    padding: theme.spacing(2),
                    [theme.breakpoints.up("md")]: {
                        padding: theme.spacing(3)
                    }
                })}
                variant={"outlined"}>

                <ErrorBoundary>
                    <PreviewComponent name={name}
                                      value={value}
                                      property={property}
                                      size={"regular"}/>
                </ErrorBoundary>

            </Paper>

            {showError &&
            typeof error === "string" &&
            <FormHelperText>{error}</FormHelperText>}

            {includeDescription &&
            <FieldDescription property={property}/>}

        </FormControl>
    );
}

function GenerateCodePage() {
  const { language } = useParams<{ language: string }>()
  const history = useHistory()

  const onTabChange = useCallback((e: SyntheticEvent<Element, Event>, language: string) => {
    history.replace(language)
  }, [history])

  return (
    <Box sx={{ py: 2, overflow: 'hidden scroll', flexGrow: 1 }}>
      <Container maxWidth="lg">
        <Typography variant="h4" component="h1" gutterBottom>
          Generate Code
        </Typography>
        <Paper>
          <TabContext value={language}>
            <TabList onChange={onTabChange}>
              <Tab label="C++" value="cpp" />
              <Tab label="Rust" value="rs" />
              <Tab label="C# Enum" value="cs" />
              <Tab label="SHV.NET" value="shvdn" />
              <Tab label="RPH" value="rph" />
            </TabList>
            <Divider />
            <TabPanel value="cpp">
              <CPlusPlus />
            </TabPanel>
            <TabPanel value="rs">
              <Rust />
            </TabPanel>
            <TabPanel value="cs">
              <CSharpEnum />
            </TabPanel>
            <TabPanel value="shvdn">
              Soon&trade;
            </TabPanel>
            <TabPanel value="rph">
              Soon&trade;
            </TabPanel>
          </TabContext>
        </Paper>
      </Container>
    </Box>
  )
}

export function BitcoinStatusBar(props: BitcoinStatusBarProps) {
    const theme = useTheme();
    const freq = useSelector(selectNodePollFreq);
    const [balance, setBalance] = React.useState<number>(0);
    const [blockchaininfo, setBlockchaininfo] = React.useState<any>(null);
    React.useEffect(() => {
        let next: ReturnType<typeof setTimeout> | null = null;
        let mounted = true;
        const periodic_update_stats = async () => {
            next = null;
            try {
                const balance = await props.api.check_balance();
                setBalance(balance);
            } catch (err) {
                console.error(err);
                setBalance(0);
            }

            try {
                const info = await props.api.blockchaininfo();
                console.log(balance);
                setBlockchaininfo(info);
            } catch (err) {
                console.error(err);
                setBlockchaininfo(null);
            }

            if (mounted) {
                let prefs = freq;
                prefs = clamp(prefs ?? 0, 5, 5 * 60);
                console.log('StatusBar', 'NEXT PERIODIC CHECK IN ', prefs);
                next = setTimeout(periodic_update_stats, prefs * 1000);
            }
        };

        let prefs = freq;
        prefs = clamp(prefs ?? 0, 5, 5 * 60);
        next = setTimeout(periodic_update_stats, prefs * 1000);
        return () => {
            mounted = false;
            if (next !== null) clearTimeout(next);
        };
    }, []);

    const network = blockchaininfo?.chain ?? 'disconnected';
    const headers = blockchaininfo?.headers ?? '?';
    const blocks = blockchaininfo?.headers ?? '?';
    return (
        <Paper
            square={true}
            sx={{
                top: 'auto',
                bottom: 0,
            }}
            className="BitcoinStatusBar Draggable"
            style={{
                background: theme.palette.background.default,
                color: theme.palette.info.main,
            }}
        >
            <Toolbar variant="dense">
                <Typography variant="h6" color="inherit" component="div">
                    <div>chain: {network}</div>
                </Typography>
                <Typography variant="h6" color="inherit" component="div">
                    <div style={{ marginLeft: '0.5em' }}>
                        balance: {balance} BTC
                    </div>
                </Typography>
                <Typography variant="h6" color="inherit" component="div">
                    <div style={{ marginLeft: '0.5em' }}>
                        processed: {blocks}/{headers}
                    </div>
                </Typography>
            </Toolbar>
        </Paper>
    );
}

function NativeInfoDrawer() {
  const { native: nativeHash } = useParams<{ native?: string }>()
  const history = useHistory()
  const theme = useTheme()

  const handleClose = useCallback(() => {
    history.replace(`/natives${history.location.search}`)
  }, [history])

  return (
    <SwipeableDrawer
      anchor="bottom"
      open={!!nativeHash}
      onOpen={() => { }}
      onClose={handleClose}
      PaperProps={{
        sx: {
          height: `calc(100vh - 5px)`,
          borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px 0px`
        }
      }}
      components={{
        Root: 'section'
      }}
    >
      <Paper 
        sx={{ 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          borderRadius: '0px',
          position: 'sticky',
          top: 0,
          p: 1,
          backdropFilter: 'blur(20px)',
          backgroundColor: alpha(theme.palette.background.default, 0.6),
          ...(theme.palette.mode === 'dark' && {
            backgroundImage: `linear-gradient(${alpha(
              '#fff',
              getOverlayAlpha(4),
            )}, ${alpha('#fff', getOverlayAlpha(4))})`,
          }),
          zIndex: 1
        }}
      >
        <Box sx={{ flexGrow: 1 }} />
        <Typography component="h1" variant="h6" align="center">
          Native Details
        </Typography>
        <Box sx={{ flexGrow: 1 }} />
        <IconButton onClick={handleClose}>
          <CloseIcon />
        </IconButton>
      </Paper>

      <NativeInfo />
    </SwipeableDrawer>
  )
}

MobilePaper = styled(Paper)(({ theme }) =>
    sx({
        padding: { xs: 1, lg: 2 },
        boxShadow: { xs: 0, lg: 1 },
    })
)