Merge pull request #52 from BuidlGuidl/fix/minor-fe

Fix/minor fe fixes

Author: escottalexander

packages/hardhat/deploy/00_deploy_whitelist.ts

@@ -11,11 +11,12 @@ const deployWhitelistOracleContracts: DeployFunction = async function (hre: Hard
   const { deployer } = await hre.getNamedAccounts();
   const { deploy } = hre.deployments;
   const { viem } = hre;
+  // Set your own address here
+  const whitelistContractNewOwner = deployer;
 
   const publicClient = await viem.getPublicClient();
 
   console.log("Deploying WhitelistOracle contracts...");
-  const whitelistContractOwner = deployer;
 
   // Get 10 wallet clients (accounts)
   const accounts = await viem.getWalletClients();
@@ -106,13 +107,13 @@ const deployWhitelistOracleContracts: DeployFunction = async function (hre: Hard
   });
   console.log(`Initial median price: ${medianPrice.toString()}`);
 
-  if (deployer !== whitelistContractOwner) {
+  if (deployer !== whitelistContractNewOwner) {
     console.log("Transferring ownership of WhitelistOracle");
     await deployerAccount.writeContract({
       address: whitelistOracleAddress,
       abi: whitelistOracleAbi,
       functionName: "transferOwnership",
-      args: [whitelistContractOwner],
+      args: [whitelistContractNewOwner],
     });
     console.log("Ownership transferred successfully!");
   }

packages/nextjs/components/oracle/NodesTable.tsx

@@ -43,11 +43,14 @@ export const NodesTable = () => {
     functionName: "getNodeAddresses",
   });
 
+  const tooltipText =
+    "This table displays registered oracle nodes that provide price data to the system. Nodes are displayed as inactive if they don't have enough ETH staked. You can edit the skip probability and price variance of an oracle node with the slider.";
+
   return (
     <div className="flex flex-col gap-2">
       <h2 className="text-xl font-bold">Oracle Nodes</h2>
       <div className="bg-base-100 rounded-lg p-4 relative">
-        <TooltipInfo top={0} right={0} infoText="TODO: Update this tooltip" />
+        <TooltipInfo top={0} right={0} infoText={tooltipText} />
         <div className="overflow-x-auto">
           <table className="table w-full">
             <thead>

packages/nextjs/components/oracle/PriceWidget.tsx

@@ -51,20 +51,18 @@ export const PriceWidget = ({ contractName }: PriceWidgetProps) => {
         <TooltipInfo
           top={0}
           right={0}
-          infoText="Displays the median price. If an error occurs, it means that no oracle nodes have reported prices in the last 10 seconds."
+          infoText="Displays the median price. If no oracle nodes have reported prices in the last 10 seconds, it will display 'No fresh price'."
         />
         <div className={`rounded-lg transition-colors duration-1000 ${highlight ? highlightColor : ""}`}>
-          <div className="text-4xl font-bold">
+          <div className="font-bold h-10 text-4xl flex items-center justify-center">
             {isError ? (
-              <div className="text-error">Error</div>
-            ) : currentPrice !== undefined ? (
-              `$${parseFloat(formatEther(currentPrice)).toFixed(2)}`
+              <div className="text-error text-xl">No fresh price</div>
             ) : isLoading || currentPrice === undefined ? (
               <div className="animate-pulse">
                 <div className="h-10 bg-secondary rounded-md w-32"></div>
               </div>
             ) : (
-              <div className="text-error">Error</div>
+              `$${parseFloat(formatEther(currentPrice)).toFixed(2)}`
             )}
           </div>
         </div>

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

@@ -2,11 +2,29 @@
 
 import { useState } from "react";
 import { parseEther } from "viem";
+import { usePublicClient } from "wagmi";
 import TooltipInfo from "~~/components/TooltipInfo";
 import { IntegerInput } from "~~/components/scaffold-eth";
 import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { getRandomQuestion } from "~~/utils/helpers";
+import { notification } from "~~/utils/scaffold-eth";
+
+const MINIMUM_REWARD = 0.21;
+const MINIMUM_ASSERTION_WINDOW = 3;
+
+const getStartTimestamp = (timestamp: bigint, startInMinutes: string) => {
+  if (startInMinutes.length === 0) return 0n;
+  if (Number(startInMinutes) === 0) return 0n;
+  return timestamp + BigInt(startInMinutes) * 60n;
+};
+
+const getEndTimestamp = (timestamp: bigint, startTimestamp: bigint, durationInMinutes: string) => {
+  if (durationInMinutes.length === 0) return 0n;
+  if (Number(durationInMinutes) === MINIMUM_ASSERTION_WINDOW) return 0n;
+  if (startTimestamp === 0n) return timestamp + BigInt(durationInMinutes) * 60n;
+  return startTimestamp + BigInt(durationInMinutes) * 60n;
+};
 
 interface SubmitAssertionModalProps {
   isOpen: boolean;
@@ -16,11 +34,12 @@ interface SubmitAssertionModalProps {
 const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) => {
   const { timestamp } = useGlobalState();
   const [isLoading, setIsLoading] = useState(false);
+  const publicClient = usePublicClient();
 
   const [description, setDescription] = useState("");
   const [reward, setReward] = useState<string>("");
-  const [startTime, setStartTime] = useState<string>("");
-  const [endTime, setEndTime] = useState<string>("");
+  const [startInMinutes, setStartInMinutes] = useState<string>("");
+  const [durationInMinutes, setDurationInMinutes] = useState<string>("");
 
   const { writeContractAsync } = useScaffoldWriteContract({ contractName: "OptimisticOracle" });
 
@@ -30,21 +49,44 @@ const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) =>
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (durationInMinutes.length > 0 && Number(durationInMinutes) < MINIMUM_ASSERTION_WINDOW) {
+      notification.error(
+        `Duration must be at least ${MINIMUM_ASSERTION_WINDOW} minutes or leave blank to use default value`,
+      );
+      return;
+    }
+
+    if (Number(reward) < MINIMUM_REWARD) {
+      notification.error(`Reward must be at least ${MINIMUM_REWARD} ETH`);
+      return;
+    }
+
+    if (!publicClient) {
+      notification.error("Public client not found");
+      return;
+    }
+
     try {
       setIsLoading(true);
-      const startTimeFormatted = startTime.length === 0 ? 0n : BigInt(startTime);
-      const endTimeFormatted = endTime.length === 0 ? 0n : BigInt(endTime);
+      let recentTimestamp = timestamp;
+      if (!recentTimestamp) {
+        const block = await publicClient.getBlock();
+        recentTimestamp = block.timestamp;
+      }
+
+      const startTimestamp = getStartTimestamp(recentTimestamp, startInMinutes);
+      const endTimestamp = getEndTimestamp(recentTimestamp, startTimestamp, durationInMinutes);
 
       await writeContractAsync({
         functionName: "assertEvent",
-        args: [description.trim(), startTimeFormatted, endTimeFormatted],
+        args: [description.trim(), startTimestamp, endTimestamp],
         value: parseEther(reward),
       });
       // Reset form after successful submission
       setDescription("");
       setReward("");
-      setStartTime("");
-      setEndTime("");
+      setStartInMinutes("");
+      setDurationInMinutes("");
       onClose();
     } catch (error) {
       console.log("Error with submission", error);
@@ -58,8 +100,8 @@ const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) =>
     // Reset form when closing
     setDescription("");
     setReward("");
-    setStartTime("");
-    setEndTime("");
+    setStartInMinutes("");
+    setDurationInMinutes("");
   };
 
   if (!isOpen) return null;
@@ -82,7 +124,7 @@ const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) =>
             <TooltipInfo
               top={-2}
               right={5}
-              infoText="Create a new assertion with your reward stake. Leave timestamps blank to use default values."
+              infoText="Create a new assertion with your reward stake. Leave time inputs blank to use default values."
             />
           </div>
 
@@ -133,36 +175,35 @@ const SubmitAssertionModal = ({ isOpen, onClose }: SubmitAssertionModalProps) =>
                 </label>
                 <IntegerInput
                   name="reward"
-                  placeholder="0.22"
+                  placeholder={`Minimum ${MINIMUM_REWARD} ETH`}
                   value={reward}
                   onChange={newValue => setReward(newValue)}
                   disableMultiplyBy1e18
                 />
               </div>
               {/* Start Time and End Time Inputs */}
-              {timestamp && <div className="!mt-6 px-1 text-sm">Current Timestamp: {timestamp}</div>}
-              <div className="grid grid-cols-2 gap-4 !mt-0">
+              <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label className="label">
-                    <span className="label-text font-medium">Start Time</span>
+                    <span className="label-text font-medium">Start in (minutes)</span>
                   </label>
                   <IntegerInput
                     name="startTime"
-                    placeholder="0"
-                    value={startTime}
-                    onChange={newValue => setStartTime(newValue)}
+                    placeholder="blank = now"
+                    value={startInMinutes}
+                    onChange={newValue => setStartInMinutes(newValue)}
                     disableMultiplyBy1e18
                   />
                 </div>
                 <div>
                   <label className="label">
-                    <span className="label-text font-medium">End Time</span>
+                    <span className="label-text font-medium">Duration (minutes)</span>
                   </label>
                   <IntegerInput
                     name="endTime"
-                    placeholder="0"
-                    value={endTime}
-                    onChange={newValue => setEndTime(newValue)}
+                    placeholder={`minimum ${MINIMUM_ASSERTION_WINDOW} minutes`}
+                    value={durationInMinutes}
+                    onChange={newValue => setDurationInMinutes(newValue)}
                     disableMultiplyBy1e18
                   />
                 </div>

packages/nextjs/components/oracle/whitelist/WhitelistTable.tsx

@@ -22,7 +22,7 @@ const LoadingRow = () => {
 const NoNodesRow = () => {
   return (
     <tr>
-      <td colSpan={6} className="text-center">
+      <td colSpan={3} className="text-center">
         No nodes found
       </td>
     </tr>
@@ -58,7 +58,7 @@ export const WhitelistTable = () => {
     }))
     ?.filter(item => !oraclesRemoved?.some(removedOracle => removedOracle?.args?.oracleAddress === item.address));
 
-  const tooltipText = `This table displays authorized oracle nodes that provide price data to the system. Nodes are considered active if they've reported within the last 10 seconds. You can edit the price of an oracle node by clicking on the price cell.`;
+  const tooltipText = `This table displays registered oracle nodes that provide price data to the system. Nodes are considered active if they've reported within the last 10 seconds. You can add a new oracle node by clicking the "Add Oracle Node" button or edit the price of an oracle node.`;
 
   return (
     <div className="flex flex-col gap-2">