chore: implement vouching

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

@@ -1,6 +1,5 @@
 import {
   Box,
-  Button,
   Card,
   Flex,
   Image,
@@ -13,6 +12,8 @@ import { Ether, User } from "@kleros/icons";
 import { useMemo } from "react";
 import { graphql, useFragment } from "relay-hooks";
 
+import VouchButton from "./vouch-button";
+
 import { partyEnum, submissionStatusEnum, useEvidenceFile } from "data";
 
 const submissionDetailsCardFragments = {
@@ -111,14 +112,7 @@ export default function SubmissionDetailsCard({ submission, contract }) {
           {evidence?.file?.name}
         </Text>
         <Text count={2}>{evidence?.file?.bio}</Text>
-        <Button
-          sx={{
-            marginY: 2,
-            width: "100%",
-          }}
-        >
-          Vouch
-        </Button>
+        <VouchButton submissionID={id} />
         <Flex>
           <Box
             sx={{

_pages/profile/[id]/submission-details-card/vouch-button.js

@@ -0,0 +1,58 @@
+import {
+  Box,
+  Button,
+  Popup,
+  Text,
+  useContract,
+  useWeb3,
+} from "@kleros/components";
+import { Warning } from "@kleros/icons";
+import { useMemo } from "react";
+
+export default function VouchButton({ submissionID }) {
+  const [accounts] = useWeb3("eth", "getAccounts");
+  const [vouched, , status, reCall] = useContract(
+    "proofOfHumanity",
+    "vouches",
+    useMemo(() => ({ args: [accounts?.[0], submissionID] }), [
+      accounts,
+      submissionID,
+    ])
+  );
+  const { send, loading } = useContract(
+    "proofOfHumanity",
+    vouched ? "removeVouch" : "addVouch"
+  );
+  const text = status !== "pending" && `${vouched ? "" : "Remove "}Vouch`;
+  return (
+    <Popup
+      trigger={
+        <Button
+          sx={{
+            marginY: 2,
+            width: "100%",
+          }}
+        >
+          {text}
+        </Button>
+      }
+      modal
+    >
+      <Box sx={{ padding: 2 }}>
+        <Warning />
+        <Text sx={{ marginBottom: 2 }}>
+          Make sure the person exists and that you have physically encountered
+          them. Note that in the case of a dispute, if a submission is rejected
+          for reason “Duplicate” or “Does not exist”, everyone who had vouched
+          for it will get removed from the registry.
+        </Text>
+        <Button
+          onClick={() => send(submissionID).then(reCall)}
+          loading={loading}
+        >
+          {text}
+        </Button>
+      </Box>
+    </Popup>
+  );
+}

components/index.js

@@ -23,6 +23,7 @@ export { default as Input } from "./input";
 export { default as Layout } from "./layout";
 export { default as Link } from "./link";
 export { default as List, ListItem } from "./list";
+export { default as Popup } from "./popup";
 export { default as RelayProvider, useQuery } from "./relay-provider";
 export { default as SVG } from "./svg";
 export { default as Select, Option } from "./select";

components/web3-provider.js

@@ -7,6 +7,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useReducer,
   useState,
 } from "react";
 import { useStorageReducer } from "react-storage-hooks";
@@ -168,6 +169,9 @@ export function useContract(
   const run = useCallback(
     (_args, _options) =>
       contract &&
+      (!args ||
+        args.findIndex((value) => value === undefined || value === null) ===
+          -1) &&
       contract.methods[method](...(args || []), ...(_args || []))[type]({
         ...options,
         ..._options,
@@ -190,15 +194,20 @@ export function useContract(
         _args = __args.slice(0, -1);
         _options = __args[__args.length - 1];
       } else _args = __args;
-      run(_args, _options)
-        .on("transactionHash", (transactionHash) =>
-          dispatch({ type: "transactionHash", transactionHash })
-        )
-        .on("confirmation", (confirmation) =>
-          dispatch({ type: "confirmation", confirmation })
-        )
-        .on("receipt", (receipt) => dispatch({ type: "receipt", receipt }))
-        .on("error", (error) => dispatch({ type: "error", error }));
+      return new Promise((resolve) =>
+        run(_args, _options)
+          .on("transactionHash", (transactionHash) =>
+            dispatch({ type: "transactionHash", transactionHash })
+          )
+          .on("confirmation", (confirmation) =>
+            dispatch({ type: "confirmation", confirmation })
+          )
+          .on("receipt", (receipt) => {
+            dispatch({ type: "receipt", receipt });
+            resolve(receipt);
+          })
+          .on("error", (error) => dispatch({ type: "error", error }))
+      );
     },
     [run, dispatch]
   );
@@ -218,18 +227,20 @@ export function useContract(
       }),
     [sendState.transactionHash, sendState.receipt, web3]
   );
+  const [reCallRef, reCall] = useReducer(() => ({}), {});
   const data = usePromise(
     () =>
+      reCallRef &&
       type &&
       !isSend &&
-      run().then((res) =>
+      run().then?.((res) =>
         typeof res === "boolean" ||
         Number.isNaN(Number(res)) ||
         res?.startsWith("0x")
           ? res
           : web3.utils.toBN(res)
       ),
-    [type, isSend, run, web3]
+    [reCallRef, type, isSend, run, web3]
   );
 
   return isSend
@@ -239,5 +250,5 @@ export function useContract(
         send,
         loading: sendState.transactionHash && !sendState.receipt && !receipt,
       }
-    : data;
+    : [...data, reCall];
 }

icons/index.js

@@ -15,4 +15,5 @@ export { default as Trash } from "./trash";
 export { default as Twitter } from "./twitter";
 export { default as User } from "./user";
 export { default as Video } from "./video";
+export { default as Warning } from "./warning";
 export { default as X } from "./x";

icons/warning.js

@@ -0,0 +1,19 @@
+import { SVG } from "@kleros/components";
+
+export default function Warning({ size = 16, ...rest }) {
+  return (
+    <SVG
+      width={size}
+      height={size}
+      viewBox="0 0 18 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M17.7974 13.7504C18.3742 14.7502 17.6502 16 16.4981 16H1.5017C0.347415 16 -0.373272 14.7483 0.202415 13.7504L7.70073 0.749531C8.27782 -0.25075 9.72323 -0.248937 10.2993 0.749531L17.7974 13.7504ZM9.00001 11.0625C8.2061 11.0625 7.56251 11.7061 7.56251 12.5C7.56251 13.2939 8.2061 13.9375 9.00001 13.9375C9.79391 13.9375 10.4375 13.2939 10.4375 12.5C10.4375 11.7061 9.79391 11.0625 9.00001 11.0625ZM7.63523 5.89544L7.86704 10.1454C7.87788 10.3443 8.04232 10.5 8.24148 10.5H9.75854C9.9577 10.5 10.1221 10.3443 10.133 10.1454L10.3648 5.89544C10.3765 5.68063 10.2055 5.5 9.99035 5.5H8.00963C7.79451 5.5 7.62351 5.68063 7.63523 5.89544Z"
+        fill="#ff9900"
+      />
+    </SVG>
+  );
+}