Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/components/oracle/PriceWidget.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from "react";
+import TooltipInfo from "../TooltipInfo";
+import { formatEther } from "viem";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const getHighlightColor = (oldPrice: bigint | undefined, newPrice: bigint | undefined): string => {
+  if (oldPrice === undefined || newPrice === undefined) return "";
+
+  const change = Math.abs(parseFloat(formatEther(newPrice)) - parseFloat(formatEther(oldPrice)));
+
+  if (change < 50) return "bg-success";
+  if (change < 100) return "bg-warning";
+  return "bg-error";
+};
+
+interface PriceWidgetProps {
+  contractName: "StakingOracle" | "WhitelistOracle";
+}
+
+export const PriceWidget = ({ contractName }: PriceWidgetProps) => {
+  const [highlight, setHighlight] = useState(false);
+  const [highlightColor, setHighlightColor] = useState("");
+  const prevPrice = useRef<bigint | undefined>(undefined);
+  const prevBucket = useRef<bigint | null>(null);
+  const [showBucketLoading, setShowBucketLoading] = useState(false);
+
+  // Poll getCurrentBucketNumber to detect bucket changes
+  const { data: contractBucketNum } = useScaffoldReadContract({
+    contractName: "StakingOracle",
+    functionName: "getCurrentBucketNumber",
+    watch: true,
+  }) as { data: bigint | undefined };
+
+  useEffect(() => {
+    if (contractBucketNum !== undefined) {
+      // Check if bucket changed
+      if (prevBucket.current !== null && contractBucketNum !== prevBucket.current) {
+        setShowBucketLoading(true);
+        setTimeout(() => setShowBucketLoading(false), 2000); // Show loading for 2 seconds after bucket change
+      }
+      prevBucket.current = contractBucketNum;
+    }
+  }, [contractBucketNum]);
+
+  const isStaking = contractName === "StakingOracle";
+
+  // For WhitelistOracle, check if there are any active oracles (reported within staleness window)
+  const { data: activeOracles } = useScaffoldReadContract({
+    contractName: "WhitelistOracle",
+    functionName: "getActiveOracleNodes",
+    watch: true,
+  }) as { data: readonly `0x${string}`[] | undefined };
+
+  const { data: currentPrice, isError } = useScaffoldReadContract({
+    contractName,
+    functionName: isStaking ? ("getLatestPrice" as any) : ("getPrice" as any),
+    watch: true,
+  }) as { data: bigint | undefined; isError: boolean; isLoading: boolean };
+
+  // For WhitelistOracle: no active oracles means no fresh price
+  // For StakingOracle: rely on error state
+  const noActiveOracles = !isStaking && activeOracles !== undefined && activeOracles.length === 0;
+  const hasValidPrice = !isError && !noActiveOracles && currentPrice !== undefined && currentPrice !== 0n;
+
+  useEffect(() => {
+    if (currentPrice !== undefined && prevPrice.current !== undefined && currentPrice !== prevPrice.current) {
+      setHighlightColor(getHighlightColor(prevPrice.current, currentPrice));
+      setHighlight(true);
+      setTimeout(() => {
+        setHighlight(false);
+        setHighlightColor("");
+      }, 650);
+    }
+    prevPrice.current = currentPrice;
+  }, [currentPrice]);
+
+  return (
+    <div className="flex flex-col gap-2 h-full">
+      <h2 className="text-xl font-bold">Current Price</h2>
+      <div className="bg-base-100 rounded-lg p-4 w-full flex justify-center items-center relative h-full min-h-[140px]">
+        <TooltipInfo
+          top={0}
+          right={0}
+          className="tooltip-left"
+          infoText="Displays the median price. If no oracle nodes have reported prices in the last 24 seconds, it will display 'No fresh price'. Color highlighting indicates how big of a change there was in the price."
+        />
+        <div className={`rounded-lg transition-colors duration-1000 ${highlight ? highlightColor : ""}`}>
+          <div className="font-bold h-10 text-4xl flex items-center justify-center gap-4">
+            {showBucketLoading ? (
+              <div className="animate-pulse">
+                <div className="h-10 bg-secondary rounded-md w-32"></div>
+              </div>
+            ) : hasValidPrice ? (
+              <span>{`$${parseFloat(formatEther(currentPrice)).toFixed(2)}`}</span>
+            ) : (
+              <div className="text-error text-xl">No fresh price</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};