anubis/docs/blog/2025-08-28-cpu-core-odd/ProofOfWorkDiagram/index.jsx

import React, { useState, useEffect, useMemo } from 'react';
import styles from './styles.module.css';

// A helper function to perform SHA-256 hashing.
// It takes a string, encodes it, hashes it, and returns a hex string.
async function sha256(message) {
  try {
    const msgBuffer = new TextEncoder().encode(message);
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    return hashHex;
  } catch (error) {
    console.error("Hashing failed:", error);
    return "Error hashing data";
  }
}

// Generates a random hex string of a given byte length
const generateRandomHex = (bytes = 16) => {
  const buffer = new Uint8Array(bytes);
  crypto.getRandomValues(buffer);
  return Array.from(buffer)
    .map(byte => byte.toString(16).padStart(2, '0'))
    .join('');
};


// Icon components for better visual feedback
const CheckIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className={styles.iconGreen} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

const XCircleIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className={styles.iconRed} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

// Main Application Component
export default function App() {
  // State for the challenge, initialized with a random 16-byte hex string.
  const [challenge, setChallenge] = useState(() => generateRandomHex(16));
  // State for the nonce, which is the variable we can change
  const [nonce, setNonce] = useState(0);
  // State to store the resulting hash
  const [hash, setHash] = useState('');
  // A flag to indicate if the current hash is the "winning" one
  const [isMining, setIsMining] = useState(false);
  const [isFound, setIsFound] = useState(false);

  // The mining difficulty, i.e., the required number of leading zeros
  const difficulty = "00";

  // Memoize the combined data to avoid recalculating on every render
  const combinedData = useMemo(() => `${challenge}${nonce}`, [challenge, nonce]);

  // This effect hook recalculates the hash whenever the combinedData changes.
  useEffect(() => {
    let isMounted = true;
    const calculateHash = async () => {
      const calculatedHash = await sha256(combinedData);
      if (isMounted) {
        setHash(calculatedHash);
        setIsFound(calculatedHash.startsWith(difficulty));
      }
    };
    calculateHash();
    return () => { isMounted = false; };
  }, [combinedData, difficulty]);

  // This effect handles the automatic mining process
  useEffect(() => {
    if (!isMining) return;

    let miningNonce = nonce;
    let continueMining = true;

    const mine = async () => {
      while (continueMining) {
        const currentData = `${challenge}${miningNonce}`;
        const currentHash = await sha256(currentData);

        if (currentHash.startsWith(difficulty)) {
          setNonce(miningNonce);
          setIsMining(false);
          break;
        }

        miningNonce++;
        // Update the UI periodically to avoid freezing the browser
        if (miningNonce % 100 === 0) {
          setNonce(miningNonce);
          await new Promise(resolve => setTimeout(resolve, 0)); // Yield to the browser
        }
      }
    };

    mine();

    return () => {
      continueMining = false;
    }
  }, [isMining, challenge, nonce, difficulty]);


  const handleMineClick = () => {
    setIsMining(true);
  }

  const handleStopClick = () => {
    setIsMining(false);
  }

  const handleResetClick = () => {
    setIsMining(false);
    setNonce(0);
  }

  const handleNewChallengeClick = () => {
    setIsMining(false);
    setChallenge(generateRandomHex(16));
    setNonce(0);
  }

  // Helper to render the hash with colored leading characters
  const renderHash = () => {
    if (!hash) return <span>...</span>;
    const prefix = hash.substring(0, difficulty.length);
    const suffix = hash.substring(difficulty.length);
    const prefixColor = isFound ? styles.hashPrefixGreen : styles.hashPrefixRed;
    return (
      <>
        <span className={`${prefixColor} ${styles.hashPrefix}`}>{prefix}</span>
        <span className={styles.hashSuffix}>{suffix}</span>
      </>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.innerContainer}>
        <div className={styles.grid}>
          {/* Challenge Block */}
          <div className={styles.block}>
            <h2 className={styles.blockTitle}>1. Challenge</h2>
            <p className={styles.challengeText}>{challenge}</p>
          </div>

          {/* Nonce Control Block */}
          <div className={styles.block}>
            <h2 className={styles.blockTitle}>2. Nonce</h2>
            <div className={styles.nonceControls}>
              <button onClick={() => setNonce(n => n - 1)} disabled={isMining} className={styles.nonceButton}>
                <svg xmlns="http://www.w3.org/2000/svg" className={styles.iconSmall} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" /></svg>
              </button>
              <span className={styles.nonceValue}>{nonce}</span>
              <button onClick={() => setNonce(n => n + 1)} disabled={isMining} className={styles.nonceButton}>
                <svg xmlns="http://www.w3.org/2000/svg" className={styles.iconSmall} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
              </button>
            </div>
          </div>

          {/* Combined Data Block */}
          <div className={styles.block}>
            <h2 className={styles.blockTitle}>3. Combined Data</h2>
            <p className={styles.combinedDataText}>{combinedData}</p>
          </div>
        </div>

        {/* Arrow pointing down */}
        <div className={styles.arrowContainer}>
          <svg xmlns="http://www.w3.org/2000/svg" className={styles.iconGray} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>

        {/* Hash Output Block */}
        <div className={`${styles.hashContainer} ${isFound ? styles.hashContainerSuccess : styles.hashContainerError}`}>
          <div className={styles.hashContent}>
            <div className={styles.hashText}>
              <h2 className={styles.blockTitle}>4. Resulting Hash (SHA-256)</h2>
              <p className={styles.hashValue}>{renderHash()}</p>
            </div>
            <div className={styles.hashIcon}>
              {isFound ? <CheckIcon /> : <XCircleIcon />}
            </div>
          </div>
        </div>

        {/* Mining Controls */}
        <div className={styles.buttonContainer}>
          {!isMining ? (
            <button onClick={handleMineClick} className={`${styles.button} ${styles.buttonCyan}`}>
              Auto-Mine
            </button>
          ) : (
            <button onClick={handleStopClick} className={`${styles.button} ${styles.buttonYellow}`}>
              Stop Mining
            </button>
          )}
          <button onClick={handleNewChallengeClick} className={`${styles.button} ${styles.buttonIndigo}`}>
            New Challenge
          </button>
          <button onClick={handleResetClick} className={`${styles.button} ${styles.buttonGray}`}>
            Reset Nonce
          </button>
        </div>
      </div>
    </div>
  );
}