Arbiter Pool Feature Branch

scripts/proto/get-proto.sh

@@ -1,5 +1,18 @@
 #!/bin/bash
-# TODO: get automatically from tgrade repo
-# Create a "tgrade" folder with "confio" and "third_party" subfolders.
-# "confio" contents come from: https://github.com/confio/tgrade/tree/main/proto/confio
-# "third_party" contents come from: https://github.com/confio/tgrade/tree/main/third_party
+# TODO: generate new proto automatically with support of context from Tgrade repo
+# Steps:
+# - Create a tgrade/ folder on the same folder as the codegen.sh and get-proto.sh.
+# - Then inside that new tgrade/ folder you need 2 subfolders: confio/ and third_party/.
+# **************************************
+## 1. src/scripts/proto/get-proto.sh
+## 2. src/scripts/proto/codegen.sh
+## 3. src/scripts/proto/tgrade/confio/
+## 4. src/scripts/proto/tgrade/third_party/
+# **************************************
+
+# - Then for 3 and 4 we now need to fill those folders with content:
+# - The contents for tgrade/confio/ come from https://github.com/confio/tgrade/tree/main/proto/confio
+# - The contents for tgrade/third_party/ come from https://github.com/confio/tgrade/tree/main/third_party
+
+# To clone content - clone the main branch from the Tgrade repo and copy pasting those folders there.
+# After you should be able to execute the codegen.sh script by yarn proto command.

src/App/components/ApComplaintDetailModal/components/ComplaintData/index.tsx

@@ -0,0 +1,67 @@
+import { Typography } from "antd";
+import AddressTag from "App/components/AddressTag";
+import Stack from "App/components/Stack/style";
+import { useEffect, useState } from "react";
+import { useError, useSdk } from "service";
+import { ApContractQuerier, Complaint } from "utils/arbiterPool";
+
+import { ComplaintField } from "./style";
+
+const { Text } = Typography;
+
+interface ComplaintDataProps {
+  readonly complaintId: number | undefined;
+}
+
+export default function ComplaintData({ complaintId }: ComplaintDataProps): JSX.Element {
+  const { handleError } = useError();
+  const {
+    sdkState: { config, client },
+  } = useSdk();
+
+  const [complaint, setComplaint] = useState<Complaint>();
+
+  useEffect(() => {
+    (async function () {
+      if (!client || complaintId === undefined) return;
+
+      try {
+        const apContract = new ApContractQuerier(config, client);
+        const complaint = await apContract.getComplaint(complaintId);
+        setComplaint(complaint);
+      } catch (error) {
+        if (!(error instanceof Error)) return;
+        handleError(error);
+      }
+    })();
+  }, [client, complaintId, config, handleError]);
+
+  const capitalizedState = complaint?.state
+    ? Object.keys(complaint.state)[0].charAt(0).toUpperCase() + Object.keys(complaint.state)[0].slice(1) ?? ""
+    : "";
+
+  return (
+    <Stack>
+      <ComplaintField>
+        <Text>Title: </Text>
+        <Text>{complaint?.title ?? ""}</Text>
+      </ComplaintField>
+      <ComplaintField>
+        <Text>Description: </Text>
+        <Text>{complaint?.description ?? ""}</Text>
+      </ComplaintField>
+      <ComplaintField>
+        <Text>Defendant: </Text>
+        {complaint?.defendant ? <AddressTag address={complaint.defendant} /> : null}
+      </ComplaintField>
+      <ComplaintField>
+        <Text>Plaintiff: </Text>
+        {complaint?.plaintiff ? <AddressTag address={complaint.plaintiff} /> : null}
+      </ComplaintField>
+      <ComplaintField>
+        <Text>Plaintiff: </Text>
+        <Text>{capitalizedState}</Text>
+      </ComplaintField>
+    </Stack>
+  );
+}

src/App/components/ApComplaintDetailModal/components/ComplaintData/style.ts

@@ -0,0 +1,67 @@
+import { Typography } from "antd";
+import Stack from "App/components/Stack/style";
+import styled from "styled-components";
+
+const { Text } = Typography;
+
+export const ComplaintField = styled.div`
+  & span.ant-typography {
+    font-size: var(--s0);
+    color: var(--color-text-1ary);
+
+    &:first-child {
+      font-weight: 500;
+    }
+  }
+`;
+
+export const AddressStack = styled(Stack)`
+  & span.ant-typography {
+    font-size: var(--s0);
+    color: var(--color-text-1ary);
+    font-weight: 500;
+  }
+`;
+
+export const TextComment = styled(Text)`
+  && {
+    color: var(--color-text-1ary);
+  }
+`;
+
+export const Separator = styled.hr`
+  margin: 0 -20px 0 -20px;
+  border: none;
+  border-top: 1px solid var(--color-input-border);
+`;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  & > *:first-child {
+    margin-right: var(--s0);
+  }
+`;
+
+export const FeeGroup = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > *:first-child {
+    margin-right: var(--s0);
+  }
+`;
+
+export const Heading = styled.h2`
+  font-family: Quicksand;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+`;

src/App/components/ApComplaintDetailModal/components/ConfirmComplaintAction/index.tsx

@@ -0,0 +1,110 @@
+import { calculateFee } from "@cosmjs/stargate";
+import { Typography } from "antd";
+import BackButtonOrLink from "App/components/BackButtonOrLink";
+import Button from "App/components/Button";
+import { lazy, useEffect, useState } from "react";
+import { useError, useSdk } from "service";
+import { ApContract } from "utils/arbiterPool";
+import { getDisplayAmountFromFee } from "utils/currency";
+
+import { ComplaintAction, ComplaintActionStep, complaintActionTitles } from "../..";
+import { ButtonGroup, ConfirmField, FeeGroup, Separator } from "./style";
+
+const ConnectWalletModal = lazy(() => import("App/components/ConnectWalletModal"));
+const { Text, Paragraph } = Typography;
+
+function getGasFromStep(complaintActionStep: ComplaintActionStep): number {
+  switch (complaintActionStep.type) {
+    case ComplaintAction.AcceptComplaint:
+      return ApContract.GAS_ACCEPT_COMPLAINT;
+    case ComplaintAction.WithdrawComplaint:
+      return ApContract.GAS_WITHDRAW_COMPLAINT;
+    case ComplaintAction.RenderDecision:
+      return ApContract.GAS_RENDER_DECISION;
+    default:
+      return ApContract.GAS_EXECUTE;
+  }
+}
+
+interface ConfirmComplaintActionProps {
+  readonly complaintActionStep: ComplaintActionStep;
+  readonly reason: string;
+  readonly summary: string;
+  readonly ipfsLink: string;
+  readonly isSubmitting: boolean;
+  readonly goBack: () => void;
+  readonly submitForm: () => void;
+}
+
+export default function ConfirmComplaintAction({
+  complaintActionStep,
+  reason,
+  summary,
+  ipfsLink,
+  isSubmitting,
+  goBack,
+  submitForm,
+}: ConfirmComplaintActionProps): JSX.Element | null {
+  const { handleError } = useError();
+  const {
+    sdkState: { config, signer, signingClient },
+  } = useSdk();
+
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [txFee, setTxFee] = useState("0");
+  const feeTokenDenom = config.coinMap[config.feeToken].denom || "";
+
+  useEffect(() => {
+    if (!signingClient) return;
+
+    try {
+      const fee = calculateFee(getGasFromStep(complaintActionStep), config.gasPrice);
+      const txFee = getDisplayAmountFromFee(fee, config);
+      setTxFee(txFee);
+    } catch (error) {
+      if (!(error instanceof Error)) return;
+      handleError(error);
+    }
+  }, [complaintActionStep, config, handleError, signingClient]);
+
+  if (!complaintActionStep.confirmation) return null;
+
+  return (
+    <>
+      {complaintActionStep.type === ComplaintAction.WithdrawComplaint ? (
+        <ConfirmField>
+          <Text>Reason: </Text>
+          <Text>{reason}</Text>
+        </ConfirmField>
+      ) : null}
+      {complaintActionStep.type === ComplaintAction.RenderDecision ? (
+        <>
+          <ConfirmField>
+            <Text>Summary: </Text>
+            <Text>{summary}</Text>
+          </ConfirmField>
+          <ConfirmField>
+            <Text>IPFS link: </Text>
+            <Text>{ipfsLink}</Text>
+          </ConfirmField>
+        </>
+      ) : null}
+      {complaintActionStep.type !== ComplaintAction.AcceptComplaint ? <Separator /> : null}
+      <ButtonGroup>
+        <BackButtonOrLink disabled={isSubmitting} onClick={() => goBack()} text="Back" />
+        <FeeGroup>
+          <Typography>
+            <Paragraph>Tx fee</Paragraph>
+            <Paragraph>{`~${txFee} ${feeTokenDenom}`}</Paragraph>
+          </Typography>
+          <Button loading={isSubmitting} onClick={signer ? () => submitForm() : () => setModalOpen(true)}>
+            <div>
+              {signer ? `Confirm ${complaintActionTitles[complaintActionStep.type]}` : "Connect wallet"}
+            </div>
+          </Button>
+        </FeeGroup>
+      </ButtonGroup>
+      <ConnectWalletModal isModalOpen={isModalOpen} closeModal={() => setModalOpen(false)} />
+    </>
+  );
+}

src/App/components/ApComplaintDetailModal/components/ConfirmComplaintAction/style.ts

@@ -0,0 +1,48 @@
+import { Typography } from "antd";
+import styled from "styled-components";
+
+const { Text } = Typography;
+
+export const ConfirmField = styled.div`
+  & span.ant-typography {
+    font-size: var(--s0);
+    color: var(--color-text-1ary);
+
+    &:first-child {
+      font-weight: 500;
+    }
+  }
+`;
+
+export const TextComment = styled(Text)`
+  && {
+    color: var(--color-text-1ary);
+  }
+`;
+
+export const Separator = styled.hr`
+  margin: 0 -20px 0 -20px;
+  border: none;
+  border-top: 1px solid var(--color-input-border);
+`;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  & > *:first-child {
+    margin-right: var(--s0);
+  }
+`;
+
+export const FeeGroup = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > *:first-child {
+    margin-right: var(--s0);
+  }
+`;

src/App/components/ApComplaintDetailModal/components/FormAcceptComplaint/index.tsx

@@ -0,0 +1,13 @@
+import Button from "App/components/Button";
+
+interface FormAcceptComplaintProps {
+  readonly handleSubmit: () => void;
+}
+
+export default function FormAcceptComplaint({ handleSubmit }: FormAcceptComplaintProps): JSX.Element {
+  return (
+    <Button onClick={() => handleSubmit()}>
+      <div>Accept Complaint</div>
+    </Button>
+  );
+}