44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
};
|