feat(web/WIP): adapt for paidFees in the subgraph

Author: alcercu

web/src/pages/Cases/CaseDetails/Appeal/Classic/Options.tsx

@@ -9,11 +9,17 @@ import {
 } from "queries/useClassicAppealQuery";
 import { useAppealCost } from "queries/useAppealCost";
 import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMultipliers";
+import StageExplainer from "./StageExplainer";
 import OptionCard from "../OptionCard";
 
 const ONE_BASIS_POINT = BigNumber.from("1000");
 
-const Options: React.FC = () => {
+interface IOptions {
+  selectedOption: undefined | number;
+  setSelectedOption: (arg0: number) => void;
+}
+
+const Options: React.FC<IOptions> = ({ selectedOption, setSelectedOption }) => {
   const { id } = useParams();
   const { data } = useClassicAppealQuery(id);
   const paidFees = getPaidFees(data?.dispute);
@@ -24,6 +30,7 @@ const Options: React.FC = () => {
   const { data: multipliers } = useDisputeKitClassicMultipliers();
   return (
     <Container>
+      <StageExplainer />
       <label> Which option do you want to fund? </label>
       <OptionsContainer>
         {typeof paidFees !== "undefined" &&
@@ -33,11 +40,12 @@ const Options: React.FC = () => {
               <OptionCard
                 key={answer}
                 text={answer}
+                selected={i === selectedOption}
                 winner={(i + 1).toString() === winningChoice}
                 funding={
                   paidFees[i + 1]
-                    ? paidFees[i + 1]
-                    : BigNumber.from("30000000000000000")
+                    ? BigNumber.from(paidFees[i + 1])
+                    : BigNumber.from(0)
                 }
                 required={
                   (i + 1).toString() === winningChoice
@@ -48,6 +56,7 @@ const Options: React.FC = () => {
                         .mul(appealCost)
                         .div(ONE_BASIS_POINT)
                 }
+                onClick={() => setSelectedOption(i)}
               />
             )
           )}

web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx

@@ -3,18 +3,31 @@ import styled from "styled-components";
 import { Box } from "@kleros/ui-components-library";
 import { secondsToDayHourMinute, getTimeLeft } from "utils/date";
 
-const StageExplainer: React.FC = () => {
-  // const timeLeft = secondsToDayHourMinute(
-  //   getTimeLeft(
-  //     parseInt(dispute?.lastPeriodChange, 10),
-  //     parseInt(dispute?.courtID.timesPerPeriod[index], 10)
-  //   )
-  // );
+interface IStageExplainer {
+  lastPeriodChange: string;
+  appealPeriodDuration: string;
+  loserTimeMultiplier: string;
+}
+
+const StageExplainer: React.FC<IStageExplainer> = ({
+  lastPeriodChange,
+  appealPeriodDuration,
+  loserTimeMultiplier,
+}) => {
+  const timeLeft = secondsToDayHourMinute(
+    getTimeLeft(
+      parseInt(lastPeriodChange, 10),
+      parseInt(loserTimeMultiplier, 10) * parseInt(appealPeriodDuration, 10)
+    )
+  );
   return (
     <StyledBox>
       <StageIndicator />
       <div>
-        <small>One of the losing options must be fully funded.</small>
+        <small>
+          In this stage, at least one of the losing options must be fully funded
+          to proceed.
+        </small>
         <small>
           If no option is fully funded in time, the jury decision is maintained.
         </small>

web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx

@@ -1,21 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useWeb3 } from "hooks/useWeb3";
-import StageExplainer from "./StageExplainer";
 import Options from "./Options";
 import Fund from "./Fund";
 
 const Classic: React.FC = () => {
   const { account } = useWeb3();
   const { id } = useParams();
+  const [selectedOption, setSelectedOption] = useState<number | undefined>();
   return (
     <>
       <h1>Appeal crowdfunding</h1>
       <label>
-        The jury decision is appealed when stages 1 and 2 are fully funded
+        The jury decision is appealed when two options are fully funded.
       </label>
-      <StageExplainer />
-      <Options />
+      <Options {...{ selectedOption, setSelectedOption }} />
       <Fund />
     </>
   );

web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx

@@ -5,7 +5,7 @@ import { Card, Radio, LinearProgress } from "@kleros/ui-components-library";
 import Gavel from "svgs/icons/gavel.svg";
 import { BigNumber, utils } from "ethers";
 
-interface IOptionCard {
+interface IOptionCard extends React.HTMLAttributes<HTMLDivElement> {
   text: string;
   funding: BigNumber;
   required: BigNumber;
@@ -23,7 +23,7 @@ const OptionCard: React.FC<IOptionCard> = ({
 }) => {
   const [ref, { width }] = useMeasure();
   return (
-    <StyledCard ref={ref} {...props}>
+    <StyledCard ref={ref} hover {...props}>
       <TopContainer>
         <div>
           <small className="block">{text}</small>