Merge pull request #1894 from kleros/refactor/sdk-and-voting-tab-improvements

Refactor/sdk and voting tab improvements

Author: alcercu

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

@@ -11,11 +11,23 @@ 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
- (dispute as DisputeDetails).answers = [
- RefuseToArbitrateAnswer,
- ...((dispute as DisputeDetails).answers.filter((answer) => answer.id && BigInt(answer.id) !== BigInt(0)) || []),
- ];
+ return findAndUpdateRTA(dispute);
+};
+
+// Filter out any existing answer with id 0 and add customised Refuse to Arbitrate option
+const findAndUpdateRTA = (dispute: DisputeDetails) => {
+ const templateRTAIndex = (dispute as DisputeDetails).answers.findIndex(
+ (answer) => answer.id && BigInt(answer.id) === BigInt(0)
+ );
+
+ if (templateRTAIndex !== -1) {
+ dispute.answers[templateRTAIndex] = {
+ ...RefuseToArbitrateAnswer,
+ description: dispute.answers[templateRTAIndex].description ?? RefuseToArbitrateAnswer.description,
+ };
+ } else {
+ dispute.answers = [RefuseToArbitrateAnswer, ...dispute.answers];
+ }
 
  return dispute;
 };

kleros-sdk/test/getDispute.test.ts

@@ -105,7 +105,14 @@ describe("getDispute", () => {
  expect(result?.answers[2].id).toBe("0x2");
  });
 
- it("should overwrite existing answer with id 0x0 or 0x00", async () => {
+ it("should only overwrite existing answer with id 0x0 or 0x00's title and not overwrite description", async () => {
+ const customRTAAnswer = {
+ id: "0x0",
+ title: "Custom Refuse Title",
+ description: "Custom Refuse Description",
+ reserved: true,
+ };
+
  // Test with 0x0
  const mockTemplate0x0 = {
  disputeTemplate: {
@@ -114,12 +121,7 @@ describe("getDispute", () => {
  description: "Test Description",
  question: "Test Question",
  answers: [
- {
- id: "0x0",
- title: "Custom Refuse Title",
- description: "Custom Refuse Description",
- reserved: true,
- },
+ customRTAAnswer,
  {
  id: "0x1",
  title: "Yes",
@@ -145,7 +147,8 @@ describe("getDispute", () => {
  });
 
  expect(result?.answers).toHaveLength(2);
- expect(result?.answers[0]).toEqual(standardRefuseToArbitrateAnswer);
+ expect(result?.answers[0].title).toEqual(standardRefuseToArbitrateAnswer.title);
+ expect(result?.answers[0].description).toEqual(customRTAAnswer.description);
  expect(result?.answers[1].id).toBe("0x1");
 
  // Test with 0x00
@@ -156,12 +159,7 @@ describe("getDispute", () => {
  description: "Test Description",
  question: "Test Question",
  answers: [
- {
- id: "0x00",
- title: "Custom Refuse Title",
- description: "Custom Refuse Description",
- reserved: true,
- },
+ customRTAAnswer,
  {
  id: "0x1",
  title: "Yes",
@@ -186,7 +184,8 @@ describe("getDispute", () => {
  });
 
  expect(result?.answers).toHaveLength(2);
- expect(result?.answers[0]).toEqual(standardRefuseToArbitrateAnswer);
+ expect(result?.answers[0].title).toEqual(standardRefuseToArbitrateAnswer.title);
+ expect(result?.answers[0].description).toEqual(customRTAAnswer.description);
  expect(result?.answers[1].id).toBe("0x1");
  });
 

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";
@@ -13,10 +13,13 @@ import { EnsureChain } from "components/EnsureChain";
 
 import JustificationArea from "./JustificationArea";
 import { Answer } from "@kleros/kleros-sdk";
+import { RefuseToArbitrateAnswer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema";
 
 const MainContainer = styled.div`
  width: 100%;
  height: auto;
+ display: flex;
+ flex-direction: column;
 `;
 
 const OptionsContainer = styled.div`
@@ -40,6 +43,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 +59,12 @@ const Options: React.FC<IOptions> = ({ arbitrable, handleSelection, justificatio
  const [chosenOption, setChosenOption] = useState(BigInt(-1));
  const [isSending, setIsSending] = useState(false);
 
+ const updatedRTA = useMemo(() => {
+ const RTAFromTemplate = disputeDetails?.answers?.find((answer) => BigInt(answer.id) === BigInt(0));
+ if (!RTAFromTemplate) return RefuseToArbitrateAnswer;
+ return RTAFromTemplate;
+ }, [disputeDetails]);
+
  const onClick = useCallback(
  async (id: bigint) => {
  setIsSending(true);
@@ -71,30 +83,36 @@ 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 BigInt(answer.id) !== BigInt(0) ? (
+ <Tooltip text={answer.description} key={answer.title}>
+ <Button
+ text={answer.title}
+ disabled={isSending}
+ isLoading={chosenOption === BigInt(answer.id)}
+ onClick={() => onClick(BigInt(answer.id))}
+ />
+ </Tooltip>
+ ) : null;
+ })}
+ </OptionsContainer>
+ </StyledEnsureChain>
+ )}
  </MainContainer>
  <RefuseToArbitrateContainer>
  <EnsureChain>
- <Button
- variant="secondary"
- text="Refuse to Arbitrate"
- disabled={isSending}
- isLoading={chosenOption === BigInt(0)}
- onClick={() => onClick(BigInt(0))}
- />
+ <Tooltip text={updatedRTA.description}>
+ <Button
+ variant="secondary"
+ text={updatedRTA.title}
+ disabled={isSending}
+ isLoading={chosenOption === BigInt(0)}
+ onClick={() => onClick(BigInt(0))}
+ />
+ </Tooltip>
  </EnsureChain>
  </RefuseToArbitrateContainer>
  </>

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}`;
  }
 };