Crash Verification

import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
import "./styles.css";
import { initialInput } from "./verifier-initial-input";
import type { ChainOutcome, MainVerifyResult } from "./crash/types";
import {
  CHAIN_YIELD_EVERY,
  CRASH_CLIENT_SEED,
  HEX64,
  MAX_CHAIN_HASHES,
} from "./crash/constants";
import {
  chainStepSync,
  getCrashPointFromHash,
  hmacSha256,
  normalizeHex64,
  sha256,
} from "./crash/crypto";
import {
  CrashChainOutcome,
  CrashChainProgress,
  CrashFairnessIntro,
  CrashMainSection,
} from "./crash/components";

type Input = typeof initialInput;

export default function App() {
  const [input, setInput] = useState<Input>({ ...initialInput });
  const [error, setError] = useState<string | null>(null);
  const [mainResult, setMainResult] = useState<MainVerifyResult | null>(null);
  const [chainProgress, setChainProgress] = useState<number | null>(null);
  const [chainOutcome, setChainOutcome] = useState<ChainOutcome>({ kind: "none" });

  const verify = async () => {
    try {
      setError(null);
      setMainResult(null);
      setChainProgress(null);
      setChainOutcome({ kind: "none" });
      const seed = input.seed;
      const divisor = Number(input.divisor);

      if (!seed) {
        throw new Error("Missing seed");
      }
      if (!Number.isInteger(divisor) || divisor < 1) {
        throw new Error("Divisor must be a positive whole number");
      }

      const saltedSeed = await hmacSha256(CRASH_CLIENT_SEED, seed);
      const previousGameHash = await sha256(seed);
      const computedCrashPoint = getCrashPointFromHash(saltedSeed, divisor);
      const crashPointDisplay = computedCrashPoint.toFixed(2);
      const rtp = (1 - 1 / divisor) * 100;

      setMainResult({
        crashPointDisplay,
        divisor,
        rtpPercent: rtp.toFixed(2) + "%",
        previousGameHash,
        saltedSeed,
        clientSeed: CRASH_CLIENT_SEED,
      });

      const tipRaw = input.chainTip.trim();
      if (!tipRaw) {
        setChainOutcome({ kind: "skipped" });
        return;
      }

      const seedNorm = normalizeHex64(seed);
      const tipNorm = normalizeHex64(tipRaw);
      if (!HEX64.test(seedNorm) || !HEX64.test(tipNorm)) {
        setChainOutcome({ kind: "invalid_hex" });
        return;
      }

      let current = seedNorm;
      let applied = 0;
      setChainProgress(0);

      while (true) {
        if (current === tipNorm) {
          setChainProgress(null);
          const gameId = input.gameId;
          let gameIdCheckOk: boolean | null = null;
          if (typeof gameId === "number" && Number.isInteger(gameId) && gameId >= 1) {
            const expected = gameId - 1;
            gameIdCheckOk = applied === expected;
          }
          setChainOutcome({
            kind: "matched",
            applied,
            gameId: typeof gameId === "number" && Number.isInteger(gameId) ? gameId : null,
            gameIdCheckOk,
          });
          return;
        }

        if (applied >= MAX_CHAIN_HASHES) {
          setChainProgress(null);
          setChainOutcome({ kind: "exceeded" });
          return;
        }

        current = chainStepSync(current);
        applied += 1;

        if (applied % CHAIN_YIELD_EVERY === 0) {
          setChainProgress(applied);
          await new Promise<void>((resolve) => {
            requestAnimationFrame(() => resolve());
          });
        }
      }
    } catch (verifyError) {
      setError(verifyError instanceof Error ? verifyError.message : String(verifyError));
      setMainResult(null);
      setChainProgress(null);
      setChainOutcome({ kind: "none" });
    }
  };

  useEffect(() => {
    void verify();
  }, []);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void verify();
  };

  return (
    <main className="verifier">
      <CrashFairnessIntro />
      <form className="verifier-form" onSubmit={onSubmit}>
        <div className="verifier-form-body">
          <div className="verifier-form-group">
            <label className="verifier-field">
              <span className="verifier-label">Seed</span>
              <input
                className="verifier-input"
                name="seed"
                value={input.seed}
                onChange={(event: ChangeEvent<HTMLInputElement>) => {
                  setInput((current) => ({ ...current, seed: event.target.value }));
                }}
              />
            </label>
            <label className="verifier-field">
              <span className="verifier-label">Divisor</span>
              <input
                className="verifier-input"
                name="divisor"
                type="number"
                min={1}
                step={1}
                value={input.divisor}
                onChange={(event: ChangeEvent<HTMLInputElement>) => {
                  setInput((current) => ({
                    ...current,
                    divisor: event.target.value,
                  }));
                }}
              />
            </label>
          </div>
          <hr className="verifier-form-separator" aria-hidden="true" />
          <div className="verifier-form-group">
            <label className="verifier-field">
              <span className="verifier-label">Chain terminal hash (optional)</span>
              <input
                className="verifier-input"
                name="chainTip"
                value={input.chainTip}
                onChange={(event: ChangeEvent<HTMLInputElement>) => {
                  setInput((current) => ({ ...current, chainTip: event.target.value }));
                }}
              />
            </label>
            <label className="verifier-field">
              <span className="verifier-label">Game ID (optional)</span>
              <input
                className="verifier-input"
                name="gameId"
                type="number"
                min={1}
                step={1}
                value={input.gameId ?? ""}
                onChange={(event: ChangeEvent<HTMLInputElement>) => {
                  const raw = event.target.value;
                  setInput((current) => ({
                    ...current,
                    gameId: raw === "" ? null : Number(raw),
                  }));
                }}
              />
            </label>
          </div>
        </div>
        <button type="submit" className="verifier-button">
          Verify
        </button>
      </form>
      {error && <div className="verifier-error">{error}</div>}
      <CrashMainSection data={mainResult} />
      <CrashChainProgress applied={chainProgress} max={MAX_CHAIN_HASHES} />
      <CrashChainOutcome outcome={chainOutcome} />
    </main>
  );
}