Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/components/oracle/TotalSlashedWidget.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import TooltipInfo from "~~/components/TooltipInfo";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+
+export const TotalSlashedWidget = () => {
+  const { data: slashedEvents, isLoading } = useScaffoldEventHistory({
+    contractName: "StakingOracle",
+    eventName: "NodeSlashed",
+    watch: true,
+  });
+
+  const totalSlashedWei = useMemo(() => {
+    if (!slashedEvents) return 0n;
+    return slashedEvents.reduce((acc: bigint, current) => {
+      const amount = (current?.args?.amount as bigint | undefined) ?? 0n;
+      return acc + amount;
+    }, 0n);
+  }, [slashedEvents]);
+
+  const totalSlashedOraFormatted = useMemo(() => {
+    // ORA uses 18 decimals (same as ETH), but we intentionally display whole tokens only.
+    const wholeOra = totalSlashedWei / 10n ** 18n;
+    return new Intl.NumberFormat("en-US").format(wholeOra);
+  }, [totalSlashedWei]);
+
+  const tooltipText = "Aggregated ORA slashed across all nodes. Sums the amount from every NodeSlashed event.";
+
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <h2 className="text-xl font-bold">Total Slashed</h2>
+      <div className="bg-base-100 rounded-lg p-4 relative w-full h-full min-h-[140px]">
+        <TooltipInfo top={0} right={0} infoText={tooltipText} className="tooltip-left" />
+        <div className="flex flex-col gap-1 h-full items-center justify-center">
+          {isLoading ? (
+            <div className="animate-pulse h-10 bg-secondary rounded-md w-32" />
+          ) : (
+            <div className="font-bold text-4xl">{totalSlashedOraFormatted} ORA</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};