@mui/material/colors#green TypeScript Examples

export function OutpointDetail(props: { txid: string; n: number }) {
    const dispatch = useDispatch();
    return (
        <div className="OutpointDetail">
            <Hex
                className="txhex"
                label="Outpoint"
                value={props.txid.toString() + ':' + props.n}
            />
            <Tooltip title="Go To the Transaction that created this.">
                <IconButton
                    aria-label="goto-creating-txn"
                    onClick={() => dispatch(select_txn(props.txid))}
                >
                    <DoubleArrowIcon style={{ color: green[500] }} />
                </IconButton>
            </Tooltip>
        </div>
    );
}

export function RefOutpointDetail(props: { txid: string; n: number }) {
    const dispatch = useDispatch();
    return (
        <div className="OutpointDetail">
            <Hex
                className="txhex"
                label="Outpoint"
                value={props.txid.toString() + ':' + props.n}
            />
            <Tooltip title="Go to this outpoint">
                <IconButton
                    aria-label="goto-this-outpoint"
                    onClick={() =>
                        dispatch(
                            select_utxo({
                                hash: props.txid,
                                nIn: props.n,
                            })
                        )
                    }
                >
                    <DoubleArrowIcon style={{ color: green[500] }} />
                </IconButton>
            </Tooltip>
        </div>
    );
}

export function OutputDetail(props: OutputDetailProps) {
    const dispatch = useDispatch();
    const opts = props.txoutput.getOptions();
    const decomp =
        Bitcoin.script.decompile(opts.utxo.script) ?? Buffer.from('');
    const script = Bitcoin.script.toASM(decomp);

    return (
        <div className="OutputDetail">
            <PrettyAmountField amount={opts.utxo.amount} />
            <Hex className="txhex" value={script} label="Script" />
            <Tooltip title="Go To the Transaction that created this.">
                <IconButton
                    aria-label="goto-creating-txn"
                    onClick={() =>
                        dispatch(
                            select_utxo({
                                hash: opts.txn.get_txid(),
                                nIn: opts.utxo.index,
                            })
                        )
                    }
                >
                    <DoubleArrowIcon style={{ color: green[500] }} />
                </IconButton>
            </Tooltip>
        </div>
    );
}

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 UTXODetailInner(props: UTXODetailProps) {
    const theme = useTheme();
    const dispatch = useDispatch();
    const select_continuations = useSelector(selectContinuation);
    const opts = props.entity.getOptions();
    const txid = opts.txn.get_txid();
    const idx = opts.utxo.index;
    const object_metadata = props.contract.object_metadata[`${txid}:${idx}`];
    const outpoint = { hash: txid, nIn: idx };

    const external_utxo = useSelector(selectUTXO)(outpoint);
    const flash = useSelector(selectUTXOFlash);
    const this_is_mock = is_mock_outpoint(outpoint);
    const is_confirmed = external_utxo && external_utxo.confirmations > 0;
    const decomp =
        external_utxo?.scriptPubKey.address ??
        Bitcoin.script.toASM(
            Bitcoin.script.decompile(opts.utxo.script) ?? Buffer.from('')
        );
    // first attempt to get the address from the extenral utxo if it's present,
    // otherwise attempt to read if from the utxo model
    let address = external_utxo?.scriptPubKey.address;
    let asm = external_utxo?.scriptPubKey.asm ?? null;
    if (!address) {
        address = 'UNKNOWN';
        try {
            asm = Bitcoin.script.toASM(opts.utxo.script);
            address = Bitcoin.address.fromOutputScript(
                opts.utxo.script,
                /// TODO: Read from preferences?
                Bitcoin.networks.regtest
            );
        } catch {
            // TODO: Recovery?
        }
    }
    const spends = opts.utxo.spends.map((elt, i) => (
        <div key={get_wtxid_backwards(elt.tx)} className="Spend">
            <Hex value={elt.get_txid()} label="TXID" />
            <Tooltip title="Go To The Spending Transaction">
                <IconButton
                    aria-label="goto-spending-txn"
                    onClick={() => dispatch(select_txn(elt.get_txid()))}
                >
                    <DoubleArrowIcon style={{ color: green[500] }} />
                </IconButton>
            </Tooltip>
        </div>
    ));
    const creator =
        !this_is_mock || is_confirmed ? null : (
            <Tooltip title="Create Contract">
                <IconButton
                    aria-label="create-contract"
                    onClick={() =>
                        dispatch(
                            create(opts.txn.tx, props.entity, props.contract)
                        )
                    }
                >
                    <AddCircleOutlineIcon style={{ color: green[500] }} />
                </IconButton>
            </Tooltip>
        );
    const check_exists =
        this_is_mock || is_confirmed ? null : (
            <Tooltip title="Check if Coin Exists">
                <IconButton
                    aria-label="check-coin-exists"
                    onClick={() => dispatch(fetch_utxo(outpoint))}
                >
                    <CloudDownloadIcon style={{ color: purple[500] }} />
                </IconButton>
            </Tooltip>
        );
    const title =
        opts.txn instanceof PhantomTransactionModel ? (
            <p>External UTXO</p>
        ) : (
            <PrettyAmountField amount={opts.utxo.amount} />
        );
    const obj = select_continuations(`${txid}:${idx}`);
    const continuations = obj
        ? Object.entries(obj).map(([k, v]) => {
              return <ContinuationOption key={k} v={v} />;
          })
        : null;
    const cont = continuations ? (
        <div>
            <Typography variant="h5" color={theme.palette.text.primary}>
                Continuations
            </Typography>
            {continuations}
        </div>
    ) : null;

    return (
        <div className="UTXODetail">
            <div>{flash}</div>
            <div>
                {creator}
                {check_exists}
            </div>
            {title}
            {cont}
            {object_metadata && (
                <OutputMetadataTable metadata={object_metadata} />
            )}
            <OutpointDetail txid={txid} n={idx} />
            <ASM className="txhex" value={address} label="Address" />
            <ASM className="txhex" value={asm ?? 'UNKNOWN'} label="ASM" />
            {asm}
            <Typography variant="h5" color={theme.palette.text.primary}>
                Spent By
            </Typography>
            {spends}
        </div>
    );
}