Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/components/oracle/optimistic/ExpiredRow.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Address } from "@scaffold-ui/components";
+import { formatEther } from "viem";
+import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
+
+export const ExpiredRow = ({ assertionId }: { assertionId: number }) => {
+  const [isClaiming, setIsClaiming] = useState(false);
+
+  const { data: assertionData } = useScaffoldReadContract({
+    contractName: "OptimisticOracle",
+    functionName: "getAssertion",
+    args: [BigInt(assertionId)],
+  });
+
+  const { writeContractAsync } = useScaffoldWriteContract({
+    contractName: "OptimisticOracle",
+  });
+
+  const handleClaim = async () => {
+    setIsClaiming(true);
+    try {
+      await writeContractAsync({
+        functionName: "claimRefund",
+        args: [BigInt(assertionId)],
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsClaiming(false);
+    }
+  };
+
+  if (!assertionData) return null;
+
+  return (
+    <tr key={assertionId} className={`border-b border-base-300`}>
+      {/* Description Column */}
+      <td>{assertionData.description}</td>
+
+      {/* Asserter Column */}
+      <td>
+        <Address address={assertionData.asserter} format="short" onlyEnsOrAddress disableAddressLink size="sm" />
+      </td>
+
+      {/* Reward Column */}
+      <td>{formatEther(assertionData.reward)} ETH</td>
+
+      {/* Claimed Column */}
+      <td>
+        {assertionData?.claimed ? (
+          <button className="btn btn-primary btn-xs" disabled>
+            Claimed
+          </button>
+        ) : (
+          <button className="btn btn-primary btn-xs" onClick={handleClaim} disabled={isClaiming}>
+            Claim
+          </button>
+        )}
+      </td>
+    </tr>
+  );
+};