@mui/material/colors#red TypeScript Examples

theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
})

theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#2e45ba',
    },
    secondary: {
      main: '#004990',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
  typography: {
    fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
    // Material-UI uses rem units for the font size. This will change the base size for the entire search page
    // More info at https://material-ui.com/customization/typography/#font-size
    fontSize: 17,
  },
})

theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6'
    },
    secondary: {
      main: '#19857b'
    },
    error: {
      main: red.A400
    }
  }
})

dracula = {
  background: '#282a36',
  currentLine: '#44475a',
  selection: '#44475a',
  white: '#f8f8f2',
  comment: '#6272a4',
  cyan: '#8be9fd',
  green: '#50fa7b',
  orange: '#ffb86c',
  pink: '#ff79c6',
  purple: '#bd93f9',
  red: '#ff5555',
  yellow: '#f1fa8c',
}

makeTheme = (variant: ThemeOptions): Theme => {
  const common: ThemeOptions = {
    palette: {
      error: {
        main: red.A400,
      },
      dracula,
      gradient: {
        primary:
          'linear-gradient(140deg, rgb(57, 45, 209) 0%, rgb(142, 41, 149) 100%);',
      },
    },
    shape: {
      borderRadius: 8,
    },
    typography: {
      fontFamily: [
        'Fira Sans Regular',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
    },

    components: {
      MuiCssBaseline: {
        styleOverrides: `
          @font-face {
            font-family: Fira Sans Regular;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraRegular}) format(truetype);
          }
          @font-face {
            font-family: Fira Code;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraCode}) format('woOpenTypeff2')
            local('Open Sans Regular'),
            local('OpenSans-Regular');
          }
        `,
      },
      MuiLink: {
        defaultProps: {
          underline: 'hover',
        },
      },
    },
  }

  const theme = createTheme(deepMerge(common, variant))
  return responsiveFontSizes(theme)
}

theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiButton: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiIconButton: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiCheckbox: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiFormControl: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiSelect: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiToggleButtonGroup: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiAutocomplete: {
      defaultProps: {
        size: 'small',
      },
    },
    MuiToolbar: {
      defaultProps: {
        variant: 'dense',
      },
    },
    MuiList: {
      defaultProps: {
        dense: true,
      },
    },
    MuiDataGrid: {
      defaultProps: {
        density: 'compact',
      },
    },
    MuiSvgIcon: {
      defaultProps: {
        fontSize: 'small',
      },
    },
  },
  palette: {
    // mode: 'dark',
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
})

export function CurrentlyViewedEntity(props: CurrentylViewedEntityProps) {
    const theme = useTheme();
    const dispatch = useDispatch();
    const [width, setWidth] = React.useState('20em');
    const onMouseUp = (e: MouseEvent) => {
        e.preventDefault();
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    };
    const onMouseMove = (e: MouseEvent) => {
        e.preventDefault();
        const width = (window.innerWidth - e.clientX).toString() + 'px';
        setWidth(width);
    };
    const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
        e.preventDefault();
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    };

    return (
        <div
            className="EntityViewerFrame"
            style={{
                backgroundColor: Color(theme.palette.background.default)
                    .fade(0.2)
                    .toString(),
            }}
        >
            <div className="EntityViewerResize" onMouseDown={onMouseDown}></div>
            <div>
                <Tooltip title="Close Entity Viewer">
                    <IconButton
                        aria-label="close-entity-viewer"
                        onClick={() => dispatch(deselect_entity())}
                    >
                        <CancelOutlinedIcon style={{ color: red[500] }} />
                    </IconButton>
                </Tooltip>
                <div
                    className="EntityViewer"
                    style={{
                        width: width,
                    }}
                >
                    <TransactionDetail
                        current_contract={props.current_contract}
                        find_tx_model={(a: Buffer, b: number) =>
                            props.current_contract.lookup_utxo_model(a, b)
                        }
                    />
                    <UTXODetail contract={props.current_contract} />
                </div>
            </div>
        </div>
    );
}

createCMSDefaultTheme = (
    { mode, primaryColor, secondaryColor, fontFamily }: {
        mode: "light" | "dark";
        primaryColor?: string;
        secondaryColor?: string;
        fontFamily?: string;
    }): Theme => {

    const original = createTheme({
        palette: {
            mode: mode,
            background: {
                default: mode === "dark" ? "#242424" : "#f6f7f8"
                // default: mode === "dark" ? "#242424" : "rgb(240 240 240)"
            },
            primary: {
                main: primaryColor || "#0070f4"
            },
            secondary: {
                main: secondaryColor || pink["400"]
            },
            error: {
                main: red.A400
            }
        },
        typography: {
            fontFamily: fontFamily || "\"Rubik\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
            fontWeightMedium: 500,
            h6: {
                fontWeight: 500,
                fontSize: "1.15rem"
            }
        },
        components: {
            MuiButton: {
                styleOverrides: {
                    root: {
                        borderRadius: 4
                    }
                }
            },
            MuiTableRow: {
                styleOverrides: {
                    root: {
                        "&:last-child td": {
                            borderBottom: 0
                        }
                    }
                }
            },
            MuiTypography: {
                styleOverrides: {
                    root: {
                        "&.mono": {
                            fontFamily: "'Space Mono', 'Lucida Console', monospace"
                        },
                        "&.weight-500": {
                            fontWeight: 500
                        }
                    }
                }
            },
            MuiInputBase: {
                styleOverrides: {
                    root: {
                        "&.mono": {
                            fontFamily: "'Space Mono', 'Lucida Console', monospace"
                        }
                    }
                }
            }
        }
    });

    return {
        ...original
        // shadows: original.shadows.map((value, index) => {
        //     if (index == 1) return "0 1px 1px 0 rgb(0 0 0 / 16%)";
        //     else return value;
        // })
    };
}

ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
  const dispatch = useDispatch();
  //Local States
  const [records, setRecords] = useState<TransformedEndpointItem[]>([]);
  const [filter, setFilter] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);

  //Effects
  // load records on mount
  useEffect(() => {
    if (isLoading) {
      const fetchRecords = () => {
        api
          .invoke("GET", `/api/v1/admin/notification_endpoints`)
          .then((res: NotificationEndpointsList) => {
            let resNotEndList: NotificationEndpointItem[] = [];
            if (res.notification_endpoints !== null) {
              resNotEndList = res.notification_endpoints;
            }
            setRecords(notificationTransform(resNotEndList));
            setIsLoading(false);
          })
          .catch((err: ErrorResponseHandler) => {
            dispatch(setErrorSnackMessage(err));
            setIsLoading(false);
          });
      };
      fetchRecords();
    }
  }, [isLoading, dispatch]);

  useEffect(() => {
    setIsLoading(true);
  }, []);

  const filteredRecords = records.filter((b: TransformedEndpointItem) => {
    if (filter === "") {
      return true;
    }
    return b.service_name.indexOf(filter) >= 0;
  });

  const statusDisplay = (status: string) => {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <FiberManualRecordIcon
          style={status === "Offline" ? { color: red[500] } : {}}
        />
        {status}
      </div>
    );
  };

  return (
    <Fragment>
      <PageLayout>
        <Grid item xs={12} className={classes.actionsTray}>
          <SearchBox
            placeholder="Search target"
            onChange={setFilter}
            overrideClass={classes.searchField}
            value={filter}
          />
          <div className={classes.rightActionItems}>
            <RBIconButton
              tooltip={"Refresh List"}
              text={"Refresh"}
              variant="outlined"
              color="primary"
              icon={<RefreshIcon />}
              onClick={() => {
                setIsLoading(true);
              }}
            />

            <RBIconButton
              tooltip={"Add Notification Target"}
              text={" Add Notification Target"}
              variant="contained"
              color="primary"
              icon={<AddIcon />}
              onClick={() => {
                history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
              }}
            />
          </div>
        </Grid>
        {isLoading && <LinearProgress />}
        {!isLoading && (
          <Fragment>
            {records.length > 0 && (
              <Fragment>
                <Grid item xs={12} className={classes.tableBlock}>
                  <TableWrapper
                    itemActions={[]}
                    columns={[
                      {
                        label: "Status",
                        elementKey: "status",
                        renderFunction: statusDisplay,
                        width: 150,
                      },
                      { label: "Service", elementKey: "service_name" },
                    ]}
                    isLoading={isLoading}
                    records={filteredRecords}
                    entityName="Notification Endpoints"
                    idField="service_name"
                    customPaperHeight={classes.twHeight}
                  />
                </Grid>
                <Grid item xs={12}>
                  <HelpBox
                    title={"Notification Endpoints"}
                    iconComponent={<LambdaIcon />}
                    help={
                      <Fragment>
                        MinIO bucket notifications allow administrators to send
                        notifications to supported external services on certain
                        object or bucket events. MinIO supports bucket and
                        object-level S3 events similar to the Amazon S3 Event
                        Notifications.
                        <br />
                        <br />
                        You can learn more at our{" "}
                        <a
                          href="https://docs.min.io/minio/baremetal/monitoring/bucket-notifications/bucket-notifications.html?ref=con"
                          target="_blank"
                          rel="noreferrer"
                        >
                          documentation
                        </a>
                        .
                      </Fragment>
                    }
                  />
                </Grid>
              </Fragment>
            )}
            {records.length === 0 && (
              <Grid
                container
                justifyContent={"center"}
                alignContent={"center"}
                alignItems={"center"}
              >
                <Grid item xs={8}>
                  <HelpBox
                    title={"Notification Targets"}
                    iconComponent={<LambdaIcon />}
                    help={
                      <Fragment>
                        MinIO bucket notifications allow administrators to send
                        notifications to supported external services on certain
                        object or bucket events. MinIO supports bucket and
                        object-level S3 events similar to the Amazon S3 Event
                        Notifications.
                        <br />
                        <br />
                        To get started,{" "}
                        <AButton
                          onClick={() => {
                            history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
                          }}
                        >
                          Add a Notification Target
                        </AButton>
                        .
                      </Fragment>
                    }
                  />
                </Grid>
              </Grid>
            )}
          </Fragment>
        )}
      </PageLayout>
    </Fragment>
  );
}

Dashboard: React.FC = () => {
  const plugin = usePlugin()
  const { version, hasGeoIP } = useGlobalData()
  const [status, setStatus] = useState<Status[]>([])
  const [current, setCurrent] = useState<CurrentStatus | undefined>()

  useEffect(() => {
    const offSetStatus = plugin.once('dashboard:info', setStatus)
    const offCurrent = plugin.on('dashboard:current', (data: CurrentStatus) => setCurrent(old => {
      if (old && isEqual(old.players, data.players)) data.players = old.players
      return data
    }))
    plugin.switchPage('dashboard')
    return () => {
      offSetStatus()
      offCurrent()
    }
  }, [])

  const playerCount = current?.players?.length || 0
  const prev = status[status.length - 1]?.players || 0
  const percent = (prev ? playerCount / prev - 1 : playerCount) * 100
  const tpsColor = !current || current.tps >= 18 ? green : current.tps >= 15 ? yellow : red
  return <Box sx={{ minHeight: '100%', py: 3 }}>
    <Toolbar />
    <Container maxWidth={false}>
      <Grid container spacing={3}>
        <Grid item lg={3} sm={6} xl={3} xs={12}>
          <TopCard
            title={lang.dashboard.version}
            content={current ? version : <Skeleton animation='wave' width={150} />}
            icon={<Handyman />}
            color={orange[600]}
          >
            <Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
              {!current || current.behinds < 0
                ? <Refresh htmlColor={blue[900]} />
                : current?.behinds === 0
                  ? <Check htmlColor={green[900]} />
                  : <Update htmlColor={yellow[900]} />}
              <Typography color='textSecondary' variant='caption'>&nbsp;{!current || current.behinds === -3
                ? lang.dashboard.updateChecking
                : current.behinds < 0
                  ? <Link underline='hover' color='inherit' sx={{ cursor: 'pointer' }} onClick={() => {
                    toast(lang.dashboard.updateChecking)
                    plugin.emit('dashboard:checkUpdate')
                  }}>{lang.dashboard.updateFailed}</Link>
                  : current.behinds === 0 ? lang.dashboard.updated : lang.dashboard.behinds(current.behinds)}</Typography>
            </Box>
          </TopCard>
        </Grid>
        <Grid item lg={3} sm={6} xl={3} xs={12}>
          <TopCard
            title={lang.dashboard.onlinePlayers}
            content={current ? playerCount : <Skeleton animation='wave' width={150} />}
            icon={<People />}
            color={deepPurple[600]}
          >
            <Box sx={{ pt: 2, display: 'flex', alignItems: 'flex-end' }}>
              {percent === 0 ? <Remove color='primary' /> : percent < 0 ? <ArrowDownward color='error' /> : <ArrowUpward color='success' />}
              <Typography
                sx={{ color: (percent === 0 ? blue : percent < 0 ? red : green)[900], mr: 1 }}
                variant='body2'
              >{Math.abs(percent).toFixed(0)}%</Typography>
              <Typography color='textSecondary' variant='caption'>{lang.dashboard.lastHour}</Typography>
            </Box>
          </TopCard>
        </Grid>
        <Grid item lg={3} sm={6} xl={3} xs={12}>
          <TopCard
            title='TPS'
            content={current ? (current.tps === -1 ? '?' : current.tps.toFixed(2)) : <Skeleton animation='wave' width={150} />}
            icon={!current || current.tps >= 18 || current.tps === -1
              ? <SentimentVerySatisfied />
              : current.tps >= 15 ? <SentimentSatisfied /> : <SentimentDissatisfied />}
            color={tpsColor[600]}
          >
            <Box sx={{ pt: 2.1, display: 'flex', alignItems: 'flex-end' }}>
              <Typography
                sx={{ color: tpsColor[900], mr: 1 }}
                variant='body2'
              >{!current || current.mspt === -1 ? '?' : current.mspt.toFixed(2) + 'ms'}</Typography>
              <Typography color='textSecondary' variant='caption'>{lang.dashboard.mspt}</Typography>
            </Box>
          </TopCard>
        </Grid>
        <Grid item lg={3} sm={6} xl={3} xs={12}>
          <TopCard
            title={lang.dashboard.uptime}
            content={current ? <Uptime time={current.time} /> : <Skeleton animation='wave' width={150} />}
            icon={<AccessTime />}
            color={blue[600]}
          >
            <Box sx={{ pt: 2.7, display: 'flex', alignItems: 'center' }}>
              <Typography color='textSecondary' variant='caption' sx={{ marginRight: 1 }}>{lang.dashboard.memory}</Typography>
              <Tooltip title={current?.totalMemory ? prettyBytes(current.memory) + ' / ' + prettyBytes(current.totalMemory) : ''}>
                <LinearProgress
                  variant='determinate'
                  value={current?.totalMemory ? current.memory / current.totalMemory * 100 : 0}
                  sx={{ flex: '1' }}
                />
              </Tooltip>
            </Box>
          </TopCard>
        </Grid>
        <Grid item lg={8} md={12} xl={9} xs={12}>{useMemo(() => <Charts data={status} />, [status])}</Grid>
        <Grid item lg={4} md={12} xl={3} xs={12}><Players players={current?.players} /></Grid>
        {hasGeoIP && current?.players && typeof current.players[0] !== 'string' && <Grid item xs={12}>
          <Accordion TransitionProps={{ unmountOnExit: true }} disableGutters>
            <AccordionSummary expandIcon={<ExpandMore />}>
              <Typography>{lang.dashboard.playersDistribution}</Typography>
            </AccordionSummary>
            <Divider />
            <WorldMap players={current.players as Player[]} />
          </Accordion>
        </Grid>}
      </Grid>
    </Container>
  </Box>
}

export function SimulationController(props: {
    contract: ContractModel;
    engine: DiagramEngine;
    hide: () => void;
}) {
    const theme = useTheme();
    const dispatch = useDispatch();
    const network = useSelector(selectNetwork);
    // Start at 0 to make scaling work riht away
    const [min_time_ms, setMinTimeMs] = React.useState(Date.now());
    const [max_time_ms, setMaxTimeMs] = React.useState(
        Date.now() + 365 * 24 * 60 * 60 * 1000
    );
    const pct_to_value = (p: number, max: number, min: number) =>
        Math.round((max - min) * (p / 100.0) + min);
    const [first_tx_time_ms, setFirstTxTime] = React.useState(
        pct_to_value(33, max_time_ms, min_time_ms)
    );
    const [current_time_ms, setCurrentTxTime] = React.useState(
        pct_to_value(50, max_time_ms, min_time_ms)
    );
    const is_regtest = network === 'Regtest' || network === 'Signet';
    const current_year = Math.round(
        (new Date().getFullYear() - 2008) * 144 * 365 - (144 * 365) / 2
    );
    const [min_blocks, setMinBlocks] = React.useState(
        is_regtest ? 100 : current_year
    );
    const [max_blocks, setMaxBlocks] = React.useState(
        is_regtest ? 1000 : current_year + 365 * 144
    );
    const [first_tx_block, setFirstTxBlockPct] = React.useState(
        pct_to_value(33, max_blocks, min_blocks)
    );
    const [current_block, setCurrentBlockPct] = React.useState(
        pct_to_value(66, max_blocks, min_blocks)
    );
    const clear = () => {
        dispatch(set_unreachable({}));
    };
    const wrapper =
        (f: (input: HTMLInputElement) => void) => (e: FormEvent) => {
            const input = e.currentTarget as HTMLInputElement;
            f(input);
        };

    const updateMinTime = (e: ChangeEvent<HTMLInputElement>) => {
        setMinTimeMs(Date.parse(e.currentTarget.value) ?? max_time_ms);
    };
    const updateBlocks = (
        e: Event,
        n: number | number[],
        activeThumb: number
    ) => {
        if (typeof n !== 'number') {
            if (n.length === 2) {
                setFirstTxBlockPct(n[0]!);
                setCurrentBlockPct(n[1]!);
            }
        }
    };
    const updateTimes = (
        e: Event,
        n: number | number[],
        activeThumb: number
    ) => {
        if (typeof n !== 'number') {
            if (n.length === 2) {
                setFirstTxTime(n[0]!);
                setCurrentTxTime(n[1]!);
            }
        }
    };
    const updateMaxTime = (e: ChangeEvent<HTMLInputElement>) => {
        setMaxTimeMs(Date.parse(e.currentTarget.value) ?? max_time_ms);
    };
    const updateMinBlocks = wrapper((input: HTMLInputElement) => {
        setMinBlocks(input.valueAsNumber);
    });
    const updateMaxBlocks = wrapper((input: HTMLInputElement) => {
        setMaxBlocks(input.valueAsNumber);
    });
    React.useEffect(() => {
        const unreachable = props.contract.reachable_at_time(
            current_time_ms / 1000,
            current_block,
            first_tx_time_ms / 1000,
            first_tx_block
        );
        const r: Record<TXID, null> = {};
        for (const model of unreachable) {
            r[model.get_txid()] = null;
        }
        dispatch(set_unreachable(r));
    }, [
        first_tx_block,
        first_tx_time_ms,
        max_blocks,
        min_blocks,
        max_time_ms,
        min_time_ms,
        current_time_ms,
        current_block,
    ]);

    const snapBlocks = () => {
        const new_first_tx_block = first_tx_block;
        const new_current_block = current_block;
        if (new_first_tx_block === new_current_block) return;

        let new_start = Math.min(new_first_tx_block, new_current_block);
        // at least one day...
        let new_end = Math.max(
            new_first_tx_block,
            new_current_block,
            new_start + 144
        );
        const delta = Math.abs(new_current_block - new_first_tx_block);
        new_start = Math.max(new_start - delta, 0);
        new_end += delta;

        setMinBlocks(Math.round(new_start));
        setMaxBlocks(Math.round(new_end));
        setFirstTxBlockPct(
            pct_to_value(
                new_current_block > new_first_tx_block ? 33 : 66,
                Math.round(new_end),
                Math.round(new_start)
            )
        );
        setCurrentBlockPct(
            pct_to_value(
                new_current_block > new_first_tx_block ? 66 : 33,
                Math.round(new_end),
                Math.round(new_start)
            )
        );
    };
    const snapTime = () => {
        // work in seconds
        const new_first_tx_time = first_tx_time_ms / 1000;
        const new_current_time = current_time_ms / 1000;
        if (new_first_tx_time === new_current_time) return;

        let new_start = Math.min(new_first_tx_time, new_current_time);
        // at least one day...
        let new_end = Math.max(
            new_first_tx_time,
            new_current_time,
            new_start + 24 * 60 * 60
        );
        const delta = Math.abs(new_current_time - new_first_tx_time);
        new_start -= delta;
        new_end += delta;

        setMinTimeMs(new_start * 1000);
        setMaxTimeMs(new_end * 1000);
        setCurrentTxTime(
            pct_to_value(
                new_current_time > new_first_tx_time ? 66 : 33,
                new_end * 1000,
                new_start * 1000
            )
        );
        setFirstTxTime(
            pct_to_value(
                new_current_time > new_first_tx_time ? 33 : 66,
                new_end * 1000,
                new_start * 1000
            )
        );
    };
    const first_tx_time_str = new Date(first_tx_time_ms).toLocaleString(
        undefined,
        {
            timeZone: 'UTC',
        }
    );
    const current_time_str = new Date(current_time_ms).toLocaleString(
        undefined,
        {
            timeZone: 'UTC',
        }
    );
    const to_time_str = (t: Date) =>
        `${t.getUTCFullYear()}-${t
            .getUTCMonth()
            .toString()
            .padStart(2, '0')}-${t.getUTCDay().toString().padStart(2, '0')}T${t
            .getUTCHours()
            .toString()
            .padStart(2, '0')}:${t
            .getUTCMinutes()
            .toString()
            .padStart(2, '0')}`;
    const max_time_str = to_time_str(new Date(max_time_ms));
    const min_time_str = to_time_str(new Date(min_time_ms));
    const ClockControl = (
        <div className="Controler">
            <div className="ControlerSliders">
                <Slider
                    value={[first_tx_time_ms, current_time_ms]}
                    valueLabelFormat={(value: number, index: number) => {
                        const d = new Date(value);
                        return (
                            <div>
                                <Typography>
                                    {d.toLocaleDateString()}
                                </Typography>
                                <p>{d.toLocaleTimeString()}</p>
                            </div>
                        );
                    }}
                    step={1000}
                    min={min_time_ms}
                    max={max_time_ms}
                    valueLabelDisplay="on"
                    onChange={updateTimes}
                />
            </div>
            <div className="ControlerSettings">
                <h6> Date</h6>
                <TextField
                    label="Start Time"
                    type="datetime-local"
                    defaultValue={min_time_str}
                    onChange={updateMinTime}
                    InputLabelProps={{
                        shrink: true,
                    }}
                />
                <TextField
                    label="End Time"
                    type="datetime-local"
                    defaultValue={max_time_str}
                    onChange={updateMaxTime}
                    InputLabelProps={{
                        shrink: true,
                    }}
                />

                <Tooltip title="Click to Snap Time">
                    <IconButton aria-label="snap-time" onClick={snapTime}>
                        <MoreHorizOutlinedIcon style={{ color: green[500] }} />
                    </IconButton>
                </Tooltip>
            </div>
        </div>
    );

    const BlockControl = (
        <div className="Controler">
            <div className="ControlerSliders">
                <Slider
                    value={[first_tx_block, current_block]}
                    min={min_blocks}
                    max={max_blocks}
                    valueLabelDisplay="on"
                    onChange={updateBlocks}
                />
            </div>
            <div className="ControlerSettings">
                <h6> Height</h6>
                <div>
                    <TextField
                        label="Start Height"
                        value={min_blocks}
                        type="number"
                        onChange={updateMinBlocks}
                    />
                </div>
                <div>
                    <TextField
                        label="End Height"
                        value={max_blocks}
                        type="number"
                        onChange={updateMaxBlocks}
                    />
                </div>

                <Tooltip title="Click to Snap Blocks">
                    <IconButton aria-label="snap-blocks" onClick={snapBlocks}>
                        <MoreHorizOutlinedIcon style={{ color: green[500] }} />
                    </IconButton>
                </Tooltip>
            </div>
        </div>
    );
    return (
        <form
            onSubmit={(e: React.FormEvent) => e.preventDefault()}
            className="Simulation"
            style={{
                backgroundColor: Color(theme.palette.background.default)
                    .fade(0.2)
                    .toString(),
            }}
        >
            <Tooltip title="Close Simulator">
                <IconButton aria-label="close-sim" onClick={props.hide}>
                    <CancelOutlinedIcon style={{ color: red[500] }} />
                </IconButton>
            </Tooltip>
            <Tooltip title="Hide Simulator Results">
                <IconButton aria-label="hide-sim" onClick={clear}>
                    <VisibilityOffOutlinedIcon style={{ color: pink[500] }} />
                </IconButton>
            </Tooltip>
            <div className="Controlers">
                {BlockControl}
                {ClockControl}
            </div>
        </form>
    );
}

export function PSBTDetail(props: IProps) {
    const psbt_selection_form = React.useRef<HTMLSelectElement>(null);
    const [psbt, setPSBT] = React.useState<Bitcoin.Psbt>(props.psbts[0]!);
    const [flash, setFlash] = React.useState<JSX.Element | null>(null);
    if (props.psbts.length === 0) return null;
    function show_flash(
        msg: string | JSX.Element,
        color: string,
        onclick?: () => void
    ) {
        const click = onclick ?? (() => null);
        const elt = (
            <h3 style={{ color: color }} onClick={click}>
                {msg}
            </h3>
        );
        setFlash(elt);
        setTimeout(() => setFlash(<div></div>), 2000);
    }
    const psbt_handler = new PSBTHandler(show_flash);

    const selectable_psbts = props.psbts.map((w, i) => (
        <MenuItem key={i} value={i}>
            {i} -- {w.toBase64().substr(0, 16)}...
        </MenuItem>
    ));
    const [idx, set_idx] = React.useState(0);
    React.useEffect(() => {
        if (idx < props.psbts.length && idx >= 0) {
            setPSBT(props.psbts[idx]!);
        }
    }, [idx, props.psbts]);
    // missing horizontal
    return (
        <div className="PSBTDetail">
            <InputLabel id="label-select-psbt">PSBT Selection</InputLabel>
            <Select
                labelId="label-select-psbt"
                label="PSBT Selection"
                variant="outlined"
                ref={psbt_selection_form}
                onChange={() => {
                    const idx: number =
                        parseInt(psbt_selection_form.current?.value ?? '0') ??
                        0;
                    set_idx(idx);
                }}
            >
                {selectable_psbts}
            </Select>
            {flash}
            <Hex
                className="txhex"
                value={psbt.toBase64()}
                label="Selected PSBT"
            ></Hex>
            <div className="PSBTActions">
                <Tooltip title="Save PSBT to Disk">
                    <IconButton
                        aria-label="save-psbt-disk"
                        onClick={() => psbt_handler.save_psbt(psbt.toBase64())}
                    >
                        <SaveIcon style={{ color: red[500] }} />
                    </IconButton>
                </Tooltip>
                <Tooltip title="Sign PSBT using Node">
                    <IconButton
                        aria-label="sign-psbt-node"
                        onClick={async () => {
                            const new_psbt = await psbt_handler.sign_psbt(
                                psbt.toBase64()
                            );
                            // TODO: Confirm this saves to model?
                            psbt.combine(new_psbt);
                            setPSBT(psbt);
                        }}
                    >
                        <VpnKeyIcon style={{ color: yellow[500] }} />
                    </IconButton>
                </Tooltip>
                <Tooltip title="Combine PSBT from File">
                    <IconButton
                        aria-label="combine-psbt-file"
                        onClick={async () => {
                            // TODO: Confirm this saves to model?
                            await psbt_handler.combine_psbt(psbt);
                            setPSBT(psbt);
                        }}
                    >
                        <MergeTypeIcon style={{ color: purple[500] }} />
                    </IconButton>
                </Tooltip>
                <Tooltip title="Finalize and Broadcast PSBT with Node">
                    <IconButton
                        aria-label="combine-psbt-file"
                        onClick={async () => {
                            await psbt_handler.finalize_psbt(psbt.toBase64());
                            setPSBT(psbt);
                        }}
                    >
                        <SendIcon style={{ color: orange[500] }} />
                    </IconButton>
                </Tooltip>
                <div></div>
            </div>
        </div>
    );
}