Feat/gsteenkamp/managed disputer (#259)

Author: gsteenkamp89

src/components/LivenessProgressBar.tsx

@@ -12,6 +12,7 @@ interface Props {
   endTime: number;
   fontSize?: number;
   marginBottom?: number;
+  endedLabel?: string;
 }
 /**
  * A progress bar that shows the time remaining until a request or assertion
@@ -24,6 +25,7 @@ export function LivenessProgressBar({
   endTime,
   fontSize,
   marginBottom,
+  endedLabel = "Ended",
 }: Props) {
   const [now, setNow] = useState(new Date());
 
@@ -67,7 +69,7 @@ export function LivenessProgressBar({
           } as CSSProperties
         }
       >
-        {isEnded ? "Ended" : timeRemainingString}
+        {isEnded ? endedLabel : timeRemainingString}
       </Text>
       <_Root value={normalizedPercent}>
         <_Indicator

src/components/OracleQueryList/ItemDetails.tsx

@@ -25,7 +25,9 @@ export function ItemDetails({
     reward,
     valueText,
     proposeOptions,
+    oracleType,
   } = item;
+  const isManaged = oracleType === "Managed Optimistic Oracle V2";
 
   const valuesToShow = Array.isArray(valueText)
     ? valueText
@@ -55,12 +57,17 @@ export function ItemDetails({
       {livenessEndsMilliseconds !== undefined &&
       timeMilliseconds !== undefined ? (
         <ItemDetailsInnerWrapper>
-          <ItemDetailsText>Challenge Period Left</ItemDetailsText>
+          <ItemDetailsText>
+            {isManaged
+              ? "Minimum Challenge Period Left"
+              : "Challenge Period Left"}
+          </ItemDetailsText>
           <LivenessProgressBar
             startTime={timeMilliseconds}
             endTime={livenessEndsMilliseconds}
             fontSize={12}
             marginBottom={0}
+            endedLabel={isManaged ? "Challenge Period Extended" : undefined}
           />
         </ItemDetailsInnerWrapper>
       ) : undefined}

src/components/OracleQueryTable/Headers.tsx

@@ -6,7 +6,7 @@ import styled from "styled-components";
  * @param page - the page of the app, used to determine which columns to show
  */
 export function Headers({ page }: { page: PageName }) {
-  const verify = ["Query", "Proposal", "Bond", "Challenge period left"];
+  const verify = ["Query", "Proposal", "Bond", "Minimum challenge period left"];
 
   const propose = ["Query", "Type", "Bond", "Reward"];
 

src/components/OracleQueryTable/VerifyCells.tsx

@@ -15,7 +15,9 @@ export function VerifyCells({
   bond,
   chainId,
   tokenAddress,
+  oracleType,
 }: OracleQueryUI) {
+  const isManaged = oracleType === "Managed Optimistic Oracle V2";
   const valuesToShow = Array.isArray(valueText)
     ? valueText
     : [maybeGetValueTextFromOptions(valueText, proposeOptions)];
@@ -48,6 +50,7 @@ export function VerifyCells({
           <LivenessProgressBar
             startTime={timeMilliseconds}
             endTime={livenessEndsMilliseconds}
+            endedLabel={isManaged ? "Challenge Period Extended" : undefined}
           />
         </TD>
       ) : undefined}

src/components/Panel/Actions/Details.tsx

@@ -8,8 +8,10 @@ export function Details({
   formattedLivenessEndsIn,
   tokenAddress,
   chainId,
+  oracleType,
 }: OracleQueryUI) {
   const hasReward = reward !== null;
+  const isManaged = oracleType === "Managed Optimistic Oracle V2";
 
   return (
     <div className="mb-4 bg-white rounded-md py-2 px-3">
@@ -45,7 +47,9 @@ export function Details({
       )}
       <TextWrapper>
         <Text>
-          Challenge period ends
+          {isManaged
+            ? "Minimum challenge period ends"
+            : "Challenge period ends"}
           <InformationIcon content={livenessInformation} />
         </Text>
         <Text>{formattedLivenessEndsIn}</Text>

src/helpers/converters.ts

@@ -21,6 +21,7 @@ import type {
   Assertion,
   ChainId,
   ChainName,
+  OracleType,
   ParsedOOV1GraphEntity,
   ParsedOOV2GraphEntity,
   Request,
@@ -146,7 +147,10 @@ export function isSupportedChain(chainId: number): chainId is ChainId {
   return chainId in chainsById;
 }
 
-function getRequestActionType(state: RequestState | undefined): ActionType {
+function getRequestActionType(
+  state: RequestState | undefined,
+  oracleType: OracleType,
+): ActionType {
   // goes to `propose` page
   if (state === "Requested") {
     return "propose";
@@ -155,6 +159,10 @@ function getRequestActionType(state: RequestState | undefined): ActionType {
   if (state === "Proposed") {
     return "dispute";
   }
+  // MOOv2 requests may still be disputed after challenge period ends
+  if (state === "Expired" && oracleType === "Managed Optimistic Oracle V2") {
+    return "dispute";
+  }
   // also goes to `verify` page
   if (state === "Disputed" || state === "Expired") {
     return "settle";
@@ -696,7 +704,7 @@ export function requestToOracleQuery(request: Request): OracleQueryUI {
     oracleType,
     oracleAddress,
     chainName: getChainName(chainId),
-    actionType: getRequestActionType(state),
+    actionType: getRequestActionType(state, oracleType),
     moreInformation: [],
     project: "Unknown",
   };

src/helpers/util.ts

@@ -258,7 +258,7 @@ export function isValidChainId(
 export function isValidOracleType(
   oracleType: string | undefined,
 ): oracleType is OracleType {
-  return !!oracleType && oracleType in oracleTypes;
+  return !!oracleType && oracleTypes.includes(oracleType as OracleType);
 }
 
 export function isWagmiAddress(