chore: implement reapply flow

_pages/profile/[id]/index.js

@@ -14,12 +14,15 @@ export default function ProfileWithID() {
   const { query } = useRouter();
 
   const notLoading = props && accounts;
+  const reapply = query.id === "reapply";
   if (
     notLoading &&
     props.submission === null &&
-    (!accounts[0] || accounts[0] === query.id)
+    (!accounts[0] || accounts[0] === query.id || reapply)
   )
-    return <SubmitProfileCard contract={props.contracts[0]} />;
+    return (
+      <SubmitProfileCard contract={props.contracts[0]} reapply={reapply} />
+    );
 
   const status =
     props?.submission && submissionStatusEnum.parse(props.submission);

_pages/profile/[id]/submission-details-card/deadlines/index.js

@@ -1,4 +1,4 @@
-import { Text, TimeAgo } from "@kleros/components";
+import { Link, NextLink, Text, TimeAgo } from "@kleros/components";
 import { graphql, useFragment } from "relay-hooks";
 
 import ChallengeButton from "./challenge-button";
@@ -24,12 +24,12 @@ const deadlinesFragments = {
     }
   `,
 };
-function Deadline({ label, datetime, button }) {
+function Deadline({ label, datetime, afterDatetime, button }) {
   return (
     <Text>
       <Text sx={{ fontWeight: "bold" }}>{label}: </Text>
       <TimeAgo datetime={datetime} />
-      {Date.now() < datetime && button}
+      {afterDatetime ? Date.now() >= datetime : Date.now() < datetime && button}
     </Text>
   );
 }
@@ -69,7 +69,16 @@ export default function Deadlines({ submission, contract, status }) {
         submissionTime && (
           <>
             <Deadline label="Accepted" datetime={submissionTime * 1000} />
-            <Deadline label="Renewal" datetime={renewalTimestamp * 1000} />
+            <Deadline
+              label="Renewal"
+              datetime={renewalTimestamp * 1000}
+              afterDatetime
+              button={
+                <NextLink href="/profile/[id]" as="/profile/reapply">
+                  <Link>Reapply</Link>
+                </NextLink>
+              }
+            />
           </>
         )
       )}

_pages/profile/[id]/submit-profile-card.js

@@ -19,13 +19,16 @@ const submitProfileCardFragment = graphql`
     submissionBaseDeposit
   }
 `;
-export default function SubmitProfileCard({ contract }) {
+export default function SubmitProfileCard({ contract, reapply }) {
   const { submissionBaseDeposit } = useFragment(
     submitProfileCardFragment,
     contract
   );
   const { upload } = useArchon();
-  const { send, loading } = useContract("proofOfHumanity", "addSubmission");
+  const { send, loading } = useContract(
+    "proofOfHumanity",
+    reapply ? "reapplySubmission" : "addSubmission"
+  );
   const { web3 } = useWeb3();
   const [accounts] = useWeb3("eth", "getAccounts");
   const { connect } = useWeb3();

components/relay-provider.js

@@ -49,7 +49,7 @@ export default function RelayProvider({
       connectToRouteChange((path, query) => {
         if (queries[path]) {
           prefetch.next(environment, queries[path], query);
-          prefetch.getValue().retry();
+          setTimeout(() => prefetch.getValue().retry(), 0);
         }
       });
       setInitialized(true);

components/theme-provider.js

@@ -235,8 +235,8 @@ const theme = merge(merge(base, toTheme(typographyTheme)), {
       whiteSpace: "nowrap",
     },
     multiClipped: {
-      "-webkitBoxOrient": "vertical",
-      "-webkitLineClamp": " 2 ",
+      WebkitBoxOrient: "vertical",
+      WebkitLineClamp: " 2 ",
       display: "-webkit-box",
       overflow: "hidden",
     },