chore: implement appeal funding

_pages/profile/[id]/submission-details-accordion.js

@@ -95,6 +95,8 @@ export default function SubmissionDetailsAccordion({ submission, contract }) {
             loserStakeMultiplier={loserStakeMultiplier}
             arbitrator={arbitrator}
             arbitratorExtraData={arbitratorExtraData}
+            contract="proofOfHumanity"
+            args={[id]}
           />
         }
       />

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

@@ -2,6 +2,7 @@ import {
   Box,
   Card,
   Flex,
+  FundButton,
   Image,
   NextETHLink,
   Text,
@@ -14,7 +15,6 @@ import { useMemo } from "react";
 import { graphql, useFragment } from "relay-hooks";
 
 import Deadlines from "./deadlines";
-import FundButton from "./fund-button";
 import VouchButton from "./vouch-button";
 
 import { partyEnum, submissionStatusEnum, useEvidenceFile } from "data";
@@ -147,8 +147,12 @@ export default function SubmissionDetailsCard({ submission, contract }) {
                 <FundButton
                   totalCost={totalCost}
                   totalContribution={totalContribution}
-                  submissionID={id}
-                />
+                  contract="proofOfHumanity"
+                  method="fundSubmission"
+                  args={[id]}
+                >
+                  Fund Submission
+                </FundButton>
               )}
               <VouchButton submissionID={id} />
             </>

components/appeal.js

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 
 import Card from "./card";
+import FundButton from "./fund-button";
 import Grid from "./grid";
 import { NextETHLink } from "./next-router";
 import Progress from "./progress";
@@ -17,9 +18,11 @@ function AppealTabPanelCard({
   hasPaid,
   deadline,
   reward,
+  contract,
+  args,
 }) {
   const { web3 } = useWeb3();
-  return (
+  const card = (
     <Card mainSx={{ alignItems: "flex-start", flexDirection: "column" }}>
       <NextETHLink address={address}>{address}</NextETHLink>
       <Text sx={{ marginBottom: 3 }}>
@@ -53,6 +56,25 @@ function AppealTabPanelCard({
       <Text sx={{ fontWeight: "bold" }}>{reward && `Reward ${reward}%`}</Text>
     </Card>
   );
+  if (
+    !hasPaid &&
+    cost &&
+    deadline &&
+    !deadline.eq(web3.utils.toBN(0)) &&
+    deadline.lt(web3.utils.toBN(Date.now() / 1000))
+  )
+    return (
+      <FundButton
+        totalCost={cost}
+        totalContribution={web3.utils.toBN(paidFees)}
+        contract={contract}
+        method="fundAppeal"
+        args={args}
+      >
+        {card}
+      </FundButton>
+    );
+  return card;
 }
 function AppealTabPanel({
   sharedStakeMultiplier,
@@ -63,8 +85,11 @@ function AppealTabPanel({
     disputeID,
     parties: [party1, party2],
     rounds: [{ paidFees, hasPaid }],
+    id,
   },
   arbitratorExtraData,
+  contract,
+  args,
 }) {
   const { web3 } = useWeb3();
   sharedStakeMultiplier = web3.utils.toBN(sharedStakeMultiplier);
@@ -143,12 +168,16 @@ function AppealTabPanel({
           {...[undecided, winner, loser][currentRuling]}
           paidFees={paidFees[0]}
           hasPaid={hasPaid[0]}
+          contract={contract}
+          args={[...args, id, 1]}
         />
         <AppealTabPanelCard
           address={party2}
           {...[undecided, loser, winner][currentRuling]}
           paidFees={paidFees[1]}
           hasPaid={hasPaid[1]}
+          contract={contract}
+          args={[...args, id, 2]}
         />
       </Grid>
     </>
@@ -161,6 +190,8 @@ export default function Appeal({
   loserStakeMultiplier,
   arbitrator,
   arbitratorExtraData,
+  contract,
+  args,
 }) {
   return (
     <Tabs>
@@ -178,6 +209,8 @@ export default function Appeal({
             arbitrator={arbitrator}
             challenge={challenge}
             arbitratorExtraData={arbitratorExtraData}
+            contract={contract}
+            args={args}
           />
         </TabPanel>
       ))}

_pages/profile/[id]/submission-details-card/fund-button.js → components/fund-button.js

@@ -1,18 +1,18 @@
-import {
-  Button,
-  Field,
-  Form,
-  Popup,
-  Text,
-  useContract,
-  useWeb3,
-} from "@kleros/components";
 import { useCallback, useMemo } from "react";
 
+import Button from "./button";
+import Form, { Field } from "./form";
+import Popup from "./popup";
+import Text from "./text";
+import { useContract, useWeb3 } from "./web3-provider";
+
 export default function FundButton({
   totalCost,
   totalContribution,
-  submissionID,
+  contract,
+  method,
+  children,
+  args,
 }) {
   const amountNeeded = useMemo(() => totalCost.sub(totalContribution), [
     totalCost,
@@ -42,29 +42,33 @@ export default function FundButton({
     }),
     [amountNeeded]
   );
-  const { send } = useContract("proofOfHumanity", "fundSubmission");
+  const { send } = useContract(contract, method);
   const { web3 } = useWeb3();
   const amountNeededString = web3.utils.fromWei(amountNeeded);
   return (
     <Popup
       trigger={
-        <Button
-          sx={{
-            marginBottom: 1,
-            width: "100%",
-          }}
-        >
-          Fund Submission
-        </Button>
+        typeof children === "string" ? (
+          <Button
+            sx={{
+              marginBottom: 1,
+              width: "100%",
+            }}
+          >
+            {children}
+          </Button>
+        ) : (
+          children
+        )
       }
       modal
     >
       {(close) => (
         <Form
-          sx={{ padding: 2 }}
+          sx={{ padding: 2, textAlign: "center" }}
           createValidationSchema={createValidationSchema}
           onSubmit={async ({ contribution }) => {
-            await send(submissionID, { value: contribution });
+            await send(...args, { value: contribution });
             close();
           }}
         >
@@ -86,7 +90,7 @@ export default function FundButton({
                 type="number"
               />
               <Button type="submit" loading={isSubmitting}>
-                Fund Submission
+                Fund
               </Button>
             </>
           )}

components/index.js

@@ -18,6 +18,7 @@ export { default as Card } from "./card";
 export { default as Evidence } from "./evidence";
 export { default as FileUpload } from "./file-upload";
 export { default as Form, Field } from "./form";
+export { default as FundButton } from "./fund-button";
 export { default as Grid } from "./grid";
 export { default as Image } from "./image";
 export { default as InitializeColorMode } from "./initialize-color-mode";