chore: expand subgraph usage

_pages/profile/[id]/index.js

@@ -48,7 +48,10 @@ export default function ProfileWithID() {
         </Text>
       </Card>
       {props?.submission && (
-        <SubmissionDetailsCard submission={props.submission} />
+        <SubmissionDetailsCard
+          submission={props.submission}
+          contract={props.contracts[0]}
+        />
       )}
       {notLoading && <SubmissionDetailsAccordion />}
     </>
@@ -59,11 +62,12 @@ export const IdQuery = graphql`
   query IdQuery($id: ID!) {
     contracts(first: 1) {
       ...submitProfileCard
+      ...submissionDetailsCardContract
     }
     submission(id: $id) {
       status
       registered
-      ...submissionDetailsCard
+      ...submissionDetailsCardSubmission
     }
   }
 `;

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

@@ -6,36 +6,83 @@ import {
   Image,
   Text,
   Video,
+  useContract,
+  useWeb3,
 } from "@kleros/components";
 import { Ether, User } from "@kleros/icons";
+import { useMemo } from "react";
 import { graphql, useFragment } from "relay-hooks";
 
-import { submissionStatusEnum, useEvidenceFile } from "data";
+import { partyEnum, submissionStatusEnum, useEvidenceFile } from "data";
 
-const submissionDetailsCardFragment = graphql`
-  fragment submissionDetailsCard on Submission {
-    id
-    status
-    registered
-    requests(orderDirection: desc, first: 2) {
-      vouches {
-        id
-      }
-      evidence(first: 1) {
-        URI
+const submissionDetailsCardFragments = {
+  contract: graphql`
+    fragment submissionDetailsCardContract on Contract {
+      submissionBaseDeposit
+      sharedStakeMultiplier
+    }
+  `,
+  submission: graphql`
+    fragment submissionDetailsCardSubmission on Submission {
+      id
+      status
+      registered
+      requests(orderDirection: desc, first: 2) {
+        arbitrator
+        arbitratorExtraData
+        vouches {
+          id
+        }
+        evidence(first: 1) {
+          URI
+        }
+        challenges(first: 1) {
+          rounds(first: 1) {
+            contributions {
+              values
+            }
+          }
+        }
       }
     }
-  }
-`;
-export default function SubmissionDetailsCard({ submission }) {
+  `,
+};
+export default function SubmissionDetailsCard({ submission, contract }) {
   const { requests, id, ...rest } = useFragment(
-    submissionDetailsCardFragment,
+    submissionDetailsCardFragments.submission,
     submission
   );
   const status = submissionStatusEnum.parse(rest);
-  const evidence = useEvidenceFile()(
-    requests[status.registrationEvidenceFileIndex || 0].evidence[0].URI
+  const request = requests[status.registrationEvidenceFileIndex || 0];
+
+  const evidence = useEvidenceFile()(request.evidence[0].URI);
+  const contributions = request.challenges[0].rounds[0].contributions.map(
+    (contribution) => partyEnum.parse(contribution)
+  );
+
+  const [arbitrationCost] = useContract(
+    "klerosLiquid",
+    "arbitrationCost",
+    useMemo(
+      () => ({
+        address: request.arbitrator,
+        args: [request.arbitratorExtraData],
+      }),
+      [request]
+    )
+  );
+  const { web3 } = useWeb3();
+  const { sharedStakeMultiplier, submissionBaseDeposit } = useFragment(
+    submissionDetailsCardFragments.contract,
+    contract
   );
+  const totalCost = arbitrationCost
+    ?.add(
+      arbitrationCost
+        .mul(web3.utils.toBN(sharedStakeMultiplier))
+        .div(web3.utils.toBN(10000))
+    )
+    .add(web3.utils.toBN(submissionBaseDeposit));
   return (
     <Card
       mainSx={{
@@ -83,12 +130,25 @@ export default function SubmissionDetailsCard({ submission }) {
           >
             <Text>Vouchers</Text>
             <Text sx={{ fontWeight: "bold" }}>
-              {String(requests[0].vouches.length)}
+              {String(request.vouches.length)}
             </Text>
           </Box>
           <Box sx={{ flex: 1 }}>
             <Text>Deposit</Text>
-            <Text sx={{ fontWeight: "bold" }}>100%</Text>
+            <Text sx={{ fontWeight: "bold" }}>
+              {totalCost &&
+                `${Math.floor(
+                  contributions
+                    .reduce(
+                      (acc, { values: { Requester } }) =>
+                        acc.add(web3.utils.toBN(Requester)),
+                      web3.utils.toBN(0)
+                    )
+                    .mul(web3.utils.toBN(100))
+                    .div(totalCost)
+                    .toNumber()
+                )}%`}
+            </Text>
           </Box>
         </Flex>
       </Box>

components/next-router.js

@@ -30,7 +30,13 @@ export const createWrapConnection = (queries, queryEnums) => {
       (acc, [key, value]) => {
         const queryEnumQuery = queryEnums[key]?.[value]?.query;
         if (queryEnumQuery) acc = { ...acc, ...queryEnumQuery };
-        else acc[key] = Number.isNaN(Number(value)) ? value : Number(value);
+        else
+          acc[key] =
+            typeof value === "boolean" ||
+            Number.isNaN(Number(value)) ||
+            value?.startsWith("0x")
+              ? value
+              : Number(value);
         return acc;
       },
       {}

components/web3-provider.js

@@ -144,22 +144,35 @@ const sendStateReducer = (
       return { ...state, error };
   }
 };
-export function useContract(contract, method, { args, type, options } = {}) {
+export function useContract(
+  contract,
+  method,
+  { address, type, args, options } = {}
+) {
   const { web3 } = useWeb3();
+  contract = useMemo(() => {
+    let _contract = web3.contracts?.[contract];
+    if (_contract && address && _contract.options.address !== address) {
+      const jsonInterfaceMap = _contract.jsonInterfaceMap;
+      _contract = _contract.clone();
+      _contract.options.address = address;
+      _contract.jsonInterfaceMap = jsonInterfaceMap;
+    }
+    return _contract;
+  }, [web3, contract, address]);
+
   type =
     type ||
-    (web3.contracts?.[contract] &&
-      (web3.contracts[contract].jsonInterfaceMap[method].constant
-        ? "call"
-        : "send"));
+    (contract &&
+      (contract.jsonInterfaceMap[method].constant ? "call" : "send"));
   const run = useCallback(
     (_args, _options) =>
-      web3.contracts?.[contract] &&
-      web3.contracts[contract].methods[method](
-        ...(args || []),
-        ...(_args || [])
-      )[type]({ ...options, ..._options }),
-    [web3.contracts, contract, method, args, type, options]
+      contract &&
+      contract.methods[method](...(args || []), ...(_args || []))[type]({
+        ...options,
+        ..._options,
+      }),
+    [contract, method, args, type, options]
   );
   const isSend = type === "send";
 
@@ -205,7 +218,19 @@ export function useContract(contract, method, { args, type, options } = {}) {
       }),
     [sendState.transactionHash, sendState.receipt, web3]
   );
-  const data = usePromise(() => type && !isSend && run(), [type, isSend, run]);
+  const data = usePromise(
+    () =>
+      type &&
+      !isSend &&
+      run().then((res) =>
+        typeof res === "boolean" ||
+        Number.isNaN(Number(res)) ||
+        res?.startsWith("0x")
+          ? res
+          : web3.utils.toBN(res)
+      ),
+    [type, isSend, run, web3]
+  );
 
   return isSend
     ? {

data/index.js

@@ -1,2 +1,2 @@
-export { submissionStatusEnum, queryEnums } from "./parsing";
+export { partyEnum, submissionStatusEnum, queryEnums } from "./parsing";
 export { useEvidenceFile } from "./use-dataloaders";

data/parsing.js

@@ -31,6 +31,19 @@ const createEnum = (keys, parse) => {
   return _enum;
 };
 
+export const partyEnum = createEnum(["Requester", "Challenger"], (struct) =>
+  Object.keys(struct).reduce((acc, key) => {
+    acc[key] =
+      Array.isArray(struct[key]) && struct[key].length === 2
+        ? {
+            [partyEnum.Requester.key]: struct[key][0],
+            [partyEnum.Challenger.key]: struct[key][1],
+          }
+        : struct[key];
+    return acc;
+  }, {})
+);
+
 export const submissionStatusEnum = createEnum(
   [
     ["None", { kebabCase: undefined, startCase: "All" }],

pages/_app.js

@@ -20,8 +20,9 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { indexQuery } from "_pages/index";
 import { IdQuery } from "_pages/profile/[id]";
 import { queryEnums } from "data";
+import KlerosLiquid from "subgraph/abis/kleros-liquid";
 import ProofOfHumanity from "subgraph/abis/proof-of-humanity";
-import { address } from "subgraph/config/kovan";
+import { address, klerosLiquidAddress } from "subgraph/config/kovan";
 
 const queries = {
   "/": indexQuery,
@@ -39,6 +40,11 @@ const theme = {
 };
 const contracts = [
   { name: "proofOfHumanity", abi: ProofOfHumanity, address: { 42: address } },
+  {
+    name: "klerosLiquid",
+    abi: KlerosLiquid,
+    address: { 42: klerosLiquidAddress },
+  },
 ];
 function MyProfileLink() {
   const [accounts] = useWeb3("eth", "getAccounts");