63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
};
|