Refactor/sdk and voting tab improvements

kleros-sdk/src/dataMappings/utils/populateTemplate.ts

@@ -11,9 +11,18 @@ export const populateTemplate = (mustacheTemplate: string, data: any): DisputeDe
     throw validation.error;
   }
 
-  // Filter out any existing answer with id 0 and add our standard Refuse to Arbitrate option
+  const templateRTAAnswer = (dispute as DisputeDetails).answers.find(
+    (answer) => answer.id && BigInt(answer.id) === BigInt(0)
+  );
+
+  const CustomRTA: DisputeDetails["answers"][number] = {
+    ...RefuseToArbitrateAnswer,
+    description: templateRTAAnswer?.description ?? RefuseToArbitrateAnswer.description,
+  };
+
+  // Filter out any existing answer with id 0 and add customised Refuse to Arbitrate option
   (dispute as DisputeDetails).answers = [
-    RefuseToArbitrateAnswer,
+    CustomRTA,
     ...((dispute as DisputeDetails).answers.filter((answer) => answer.id && BigInt(answer.id) !== BigInt(0)) || []),
   ];
 

web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import ReactMarkdown from "react-markdown";
 import { useParams } from "react-router-dom";
 
-import { Button } from "@kleros/ui-components-library";
+import { Button, Tooltip } from "@kleros/ui-components-library";
 
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { isUndefined } from "utils/index";
@@ -17,6 +17,8 @@ import { Answer } from "@kleros/kleros-sdk";
 const MainContainer = styled.div`
   width: 100%;
   height: auto;
+  display: flex;
+  flex-direction: column;
 `;
 
 const OptionsContainer = styled.div`
@@ -40,6 +42,9 @@ const RefuseToArbitrateContainer = styled.div`
   justify-content: center;
 `;
 
+const StyledEnsureChain = styled(EnsureChain)`
+  align-self: center;
+`;
 interface IOptions {
   arbitrable: `0x${string}`;
   handleSelection: (arg0: bigint) => Promise<void>;
@@ -53,6 +58,12 @@ const Options: React.FC<IOptions> = ({ arbitrable, handleSelection, justificatio
   const [chosenOption, setChosenOption] = useState(BigInt(-1));
   const [isSending, setIsSending] = useState(false);
 
+  // if RTA not found in dispute.answers, show RTA. shows RTA in case of invalid dispute too
+  const showRTA = useMemo(
+    () => isUndefined(disputeDetails?.answers?.find((answer) => BigInt(answer.id) === BigInt(0))),
+    [disputeDetails]
+  );
+
   const onClick = useCallback(
     async (id: bigint) => {
       setIsSending(true);
@@ -71,32 +82,38 @@ const Options: React.FC<IOptions> = ({ arbitrable, handleSelection, justificatio
         {!isUndefined(justification) && !isUndefined(setJustification) ? (
           <JustificationArea {...{ justification, setJustification }} />
         ) : null}
-        <OptionsContainer>
-          {disputeDetails?.answers?.map((answer: Answer) => {
-            return (
-              <EnsureChain key={answer.title}>
-                <Button
-                  text={answer.title}
-                  disabled={isSending}
-                  isLoading={chosenOption === BigInt(answer.id)}
-                  onClick={() => onClick(BigInt(answer.id))}
-                />
-              </EnsureChain>
-            );
-          })}
-        </OptionsContainer>
+        {isUndefined(disputeDetails?.answers) ? null : (
+          <StyledEnsureChain>
+            <OptionsContainer>
+              {disputeDetails?.answers?.map((answer: Answer) => {
+                return (
+                  <Tooltip text={answer.description} key={answer.title}>
+                    <Button
+                      text={answer.title}
+                      disabled={isSending}
+                      isLoading={chosenOption === BigInt(answer.id)}
+                      onClick={() => onClick(BigInt(answer.id))}
+                    />
+                  </Tooltip>
+                );
+              })}
+            </OptionsContainer>
+          </StyledEnsureChain>
+        )}
       </MainContainer>
-      <RefuseToArbitrateContainer>
-        <EnsureChain>
-          <Button
-            variant="secondary"
-            text="Refuse to Arbitrate"
-            disabled={isSending}
-            isLoading={chosenOption === BigInt(0)}
-            onClick={() => onClick(BigInt(0))}
-          />
-        </EnsureChain>
-      </RefuseToArbitrateContainer>
+      {showRTA ? (
+        <RefuseToArbitrateContainer>
+          <EnsureChain>
+            <Button
+              variant="secondary"
+              text="Refuse to Arbitrate"
+              disabled={isSending}
+              isLoading={chosenOption === BigInt(0)}
+              onClick={() => onClick(BigInt(0))}
+            />
+          </EnsureChain>
+        </RefuseToArbitrateContainer>
+      ) : null}
     </>
   ) : null;
 };

web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx

@@ -21,6 +21,7 @@ import InfoCard from "components/InfoCard";
 
 import JustificationArea from "./JustificationArea";
 import { Answer } from "@kleros/kleros-sdk";
+import { EnsureChain } from "components/EnsureChain";
 
 const Container = styled.div`
   width: 100%;
@@ -35,6 +36,10 @@ const StyledButton = styled(Button)`
   margin: 16px auto;
 `;
 
+const StyledEnsureChain = styled(EnsureChain)`
+  margin: 8px auto;
+`;
+
 const ReactMarkdownWrapper = styled.div``;
 interface IReveal {
   arbitrable: `0x${string}`;
@@ -106,13 +111,15 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isR
             <ReactMarkdown>{disputeDetails?.question ?? ""}</ReactMarkdown>
           </ReactMarkdownWrapper>
           <JustificationArea {...{ justification, setJustification }} />
-          <StyledButton
-            variant="secondary"
-            text="Justify & Reveal"
-            disabled={isSending || isUndefined(disputeDetails)}
-            isLoading={isSending}
-            onClick={handleReveal}
-          />
+          <StyledEnsureChain>
+            <StyledButton
+              variant="secondary"
+              text="Justify & Reveal"
+              disabled={isSending || isUndefined(disputeDetails)}
+              isLoading={isSending}
+              onClick={handleReveal}
+            />
+          </StyledEnsureChain>
         </>
       ) : (
         <StyledInfoCard msg="Your vote was successfully commited, please wait until reveal period to reveal it." />

web/src/utils/getVoteChoice.ts

@@ -1,5 +1,6 @@
 import { Answer } from "@kleros/kleros-sdk";
 import { isUndefined } from ".";
+import { RefuseToArbitrateAnswer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema";
 
 export const getVoteChoice = (vote: string, answers: Answer[]) => {
   // answer.id is hexadecimal number
@@ -8,6 +9,6 @@ export const getVoteChoice = (vote: string, answers: Answer[]) => {
   if (!isUndefined(selectedAnswer)) {
     return selectedAnswer.title;
   } else {
-    return `Answer 0x${vote}`;
+    return BigInt(vote) === BigInt(0) ? RefuseToArbitrateAnswer.title : `Answer 0x${vote}`;
   }
 };