104 lines
4.2 KiB
TypeScript
104 lines
4.2 KiB
TypeScript
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>
|
|
);
|
|
};
|