chore: implement deadlines

Proof-Of-Humanity · Sep 14, 2020 · 9ba7ccf · 9ba7ccf
1 parent ba9cc9e
commit 9ba7ccf
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 9 deletions.
diff --git a/_pages/profile/[id]/submission-details-card/deadlines.js b/_pages/profile/[id]/submission-details-card/deadlines.js
@@ -0,0 +1,65 @@
+import { Text, TimeAgo } from "@kleros/components";
+import { graphql, useFragment } from "relay-hooks";
+
+import { submissionStatusEnum } from "data";
+
+const deadlinesFragments = {
+  contract: graphql`
+    fragment deadlinesContract on Contract {
+      challengePeriodDuration
+    }
+  `,
+  submission: graphql`
+    fragment deadlinesSubmission on Submission {
+      submissionTime
+      renewalTimestamp
+      request: requests(orderDirection: desc, first: 1) {
+        lastStatusChange
+      }
+    }
+  `,
+};
+function Deadline({ label, datetime }) {
+  return (
+    <Text>
+      <Text sx={{ fontWeight: "bold" }}>{label}: </Text>
+      <TimeAgo datetime={datetime} />
+    </Text>
+  );
+}
+export default function Deadlines({ submission, contract, status }) {
+  const { request, submissionTime, renewalTimestamp } = useFragment(
+    deadlinesFragments.submission,
+    submission
+  );
+  const { challengePeriodDuration } = useFragment(
+    deadlinesFragments.contract,
+    contract
+  );
+  return (
+    <>
+      <Deadline
+        label="Submitted"
+        datetime={request[0].lastStatusChange * 1000}
+      />
+      {status === submissionStatusEnum.PendingRegistration ||
+      status === submissionStatusEnum.PendingRemoval ? (
+        <Deadline
+          label="Challenge Deadline"
+          datetime={
+            (Number(request[0].lastStatusChange) +
+              Number(challengePeriodDuration)) *
+            1000
+          }
+        />
+      ) : (
+        submissionTime && (
+          <>
+            <Deadline label="Accepted" datetime={submissionTime * 1000} />
+            <Deadline label="Renewal" datetime={renewalTimestamp * 1000} />
+          </>
+        )
+      )}
+    </>
+  );
+}
diff --git a/_pages/profile/[id]/submission-details-card/index.js b/_pages/profile/[id]/submission-details-card/index.js
@@ -12,6 +12,7 @@ import { Ether, User } from "@kleros/icons";
 import { useMemo } from "react";
 import { graphql, useFragment } from "relay-hooks";
 
+import Deadlines from "./deadlines";
 import VouchButton from "./vouch-button";
 
 import { partyEnum, submissionStatusEnum, useEvidenceFile } from "data";
@@ -20,7 +21,9 @@ const submissionDetailsCardFragments = {
   contract: graphql`
     fragment submissionDetailsCardContract on Contract {
       submissionBaseDeposit
+      requiredNumberOfVouches
       sharedStakeMultiplier
+      ...deadlinesContract
     }
   `,
   submission: graphql`
@@ -45,14 +48,15 @@ const submissionDetailsCardFragments = {
           }
         }
       }
+      ...deadlinesSubmission
     }
   `,
 };
 export default function SubmissionDetailsCard({ submission, contract }) {
-  const { requests, id, ...rest } = useFragment(
+  const { requests, id, ...rest } = (submission = useFragment(
     submissionDetailsCardFragments.submission,
     submission
-  );
+  ));
   const status = submissionStatusEnum.parse(rest);
   const request = requests[status.registrationEvidenceFileIndex || 0];
 
@@ -73,10 +77,14 @@ export default function SubmissionDetailsCard({ submission, contract }) {
     )
   );
   const { web3 } = useWeb3();
-  const { sharedStakeMultiplier, submissionBaseDeposit } = useFragment(
+  const {
+    sharedStakeMultiplier,
+    submissionBaseDeposit,
+    requiredNumberOfVouches,
+  } = (contract = useFragment(
     submissionDetailsCardFragments.contract,
     contract
-  );
+  ));
   const totalCost = arbitrationCost
     ?.add(
       arbitrationCost
@@ -92,9 +100,11 @@ export default function SubmissionDetailsCard({ submission, contract }) {
         padding: 0,
       }}
     >
-      <Box
+      <Flex
         sx={{
+          alignItems: "center",
           backgroundColor: "muted",
+          flexDirection: "column",
           maxWidth: [null, null, null, 300],
           paddingX: 3,
           paddingY: 4,
@@ -113,18 +123,19 @@ export default function SubmissionDetailsCard({ submission, contract }) {
         </Text>
         <Text count={2}>{evidence?.file?.bio}</Text>
         <VouchButton submissionID={id} />
-        <Flex>
+        <Flex sx={{ width: "100%" }}>
           <Box
             sx={{
               borderRightColor: "text",
               borderRightStyle: "solid",
               borderRightWidth: 1,
               flex: 1,
+              marginBottom: 3,
             }}
           >
             <Text>Vouchers</Text>
             <Text sx={{ fontWeight: "bold" }}>
-              {String(request.vouches.length)}
+              {String(request.vouches.length)}/{requiredNumberOfVouches}
             </Text>
           </Box>
           <Box sx={{ flex: 1 }}>
@@ -145,7 +156,10 @@ export default function SubmissionDetailsCard({ submission, contract }) {
             </Text>
           </Box>
         </Flex>
-      </Box>
+        <Box sx={{ marginTop: "auto" }}>
+          <Deadlines submission={submission} contract={contract} />
+        </Box>
+      </Flex>
       <Box sx={{ flex: 1, padding: 4 }}>
         <Box>
           <User />{" "}

diff --git a/_pages/profile/[id]/submission-details-card/vouch-button.js b/_pages/profile/[id]/submission-details-card/vouch-button.js
@@ -23,7 +23,7 @@ export default function VouchButton({ submissionID }) {
     "proofOfHumanity",
     vouched ? "removeVouch" : "addVouch"
   );
-  const text = status !== "pending" && `${vouched ? "" : "Remove "}Vouch`;
+  const text = status !== "pending" && `${vouched ? "Remove " : ""}Vouch`;
   return (
     <Popup
       trigger={
@@ -32,6 +32,7 @@ export default function VouchButton({ submissionID }) {
             marginY: 2,
             width: "100%",
           }}
+          disabled={accounts?.[0]?.toLowerCase() === submissionID}
         >
           {text}
         </Button>

diff --git a/components/index.js b/components/index.js
@@ -31,6 +31,7 @@ export { default as SocialIcons } from "./social-icons";
 export { default as Text } from "./text";
 export { default as Textarea } from "./textarea";
 export { default as ThemeProvider, typographyTheme } from "./theme-provider";
+export { default as TimeAgo } from "./time-ago";
 export { default as Video } from "./video";
 export { default as Web3Provider, useWeb3, useContract } from "./web3-provider";
 

diff --git a/components/time-ago.js b/components/time-ago.js
@@ -0,0 +1,11 @@
+import { Box } from "theme-ui";
+import TimeagoReact from "timeago-react";
+
+export default function TimeAgo(props) {
+  return (
+    <Box
+      as={(boxProps) => <TimeagoReact {...props} {...boxProps} />}
+      {...props}
+    />
+  );
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "relay-hooks": "^3.6.0",
     "relay-runtime": "^10.0.1",
     "theme-ui": "^0.3.1",
+    "timeago-react": "^3.0.0",
     "typography-theme-sutro": "^0.16.19",
     "web3": "^1.2.11",
     "web3modal": "^1.9.0",