refactor(web): support-new-evidence-refactors

Author: tractorss

web/src/components/EvidenceCard.tsx

@@ -9,11 +9,12 @@ import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
-import { useIPFSQuery } from "hooks/useIPFSQuery";
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
 
+import { type Evidence } from "src/graphql/graphql";
+
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -136,24 +137,20 @@ const AttachedFileText: React.FC = () => (
   </>
 );
 
-interface IEvidenceCard {
-  evidence: string;
+interface IEvidenceCard extends Pick<Evidence, "evidence" | "timestamp" | "name" | "description" | "fileURI"> {
   sender: string;
   index: number;
-  timestamp: string;
 }
 
-const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp }) => {
-  const { data } = useIPFSQuery(evidence);
-
+const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp, name, description, fileURI }) => {
   return (
     <StyledCard>
       <TextContainer>
         <Index>#{index}:</Index>
-        {data ? (
+        {name && description ? (
           <>
-            <h3>{data.name}</h3>
-            <StyledReactMarkdown>{data.description}</StyledReactMarkdown>
+            <h3>{name}</h3>
+            <StyledReactMarkdown>{description}</StyledReactMarkdown>
           </>
         ) : (
           <p>{evidence}</p>
@@ -165,8 +162,8 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timest
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
         <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
-        {data && typeof data.fileURI !== "undefined" && (
-          <StyledLink to={`attachment/?url=${getIpfsUrl(data.fileURI)}`}>
+        {fileURI && (
+          <StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
             <AttachmentIcon />
             <AttachedFileText />
           </StyledLink>

web/src/hooks/queries/useEvidences.ts

@@ -15,6 +15,10 @@ const evidencesQuery = graphql(`
         id
       }
       timestamp
+      name
+      description
+      fileURI
+      fileTypeExtension
     }
   }
 `);
@@ -23,7 +27,7 @@ export const useEvidences = (evidenceGroup?: string) => {
   const isEnabled = evidenceGroup !== undefined;
   const { graphqlBatcher } = useGraphqlBatcher();
 
-  return useQuery({
+  return useQuery<EvidencesQuery>({
     queryKey: ["refetchOnBlock", `evidencesQuery${evidenceGroup}`],
     enabled: isEnabled,
     queryFn: async () =>

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -64,23 +64,18 @@ const SubmitEvidenceModal: React.FC<{
 
   const submitEvidence = useCallback(async () => {
     setIsSending(true);
-    toast.info("Uploading to IPFS", toastOptions);
-    const formData = await constructEvidence(message, file);
-    uploadFormDataToIPFS(formData)
-      .then(async (res) => {
-        const response = await res.json();
-        if (res.status === 200 && walletClient) {
-          const cid = response["cids"][0];
-          const { request } = await simulateEvidenceModuleSubmitEvidence(wagmiConfig, {
-            args: [BigInt(evidenceGroup), cid],
-          });
-          await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
-            setMessage("");
-            close();
-          });
-        }
+    const evidenceJSON = await constructEvidence(message, file);
+
+    const { request } = await simulateEvidenceModuleSubmitEvidence(wagmiConfig, {
+      args: [BigInt(evidenceGroup), JSON.stringify(evidenceJSON)],
+    });
+
+    if (!walletClient) return;
+    await wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
+      .then(() => {
+        setMessage("");
+        close();
       })
-      .catch()
       .finally(() => setIsSending(false));
   }, [publicClient, wagmiConfig, walletClient, close, evidenceGroup, file, message, setIsSending]);
 
@@ -101,22 +96,18 @@ const SubmitEvidenceModal: React.FC<{
   );
 };
 
-const constructEvidence = async (msg: string, file?: File): Promise<FormData> => {
+const constructEvidence = async (msg: string, file?: File) => {
   let fileURI: string | undefined = undefined;
   if (file) {
+    toast.info("Uploading to IPFS", toastOptions);
     const fileFormData = new FormData();
     fileFormData.append("data", file, file.name);
     fileURI = await uploadFormDataToIPFS(fileFormData).then(async (res) => {
       const response = await res.json();
       return response["cids"][0];
     });
   }
-  const formData = new FormData();
-  const evidenceFile = new File([JSON.stringify({ name: "Evidence", description: msg, fileURI })], "evidence.json", {
-    type: "text/plain",
-  });
-  formData.append("data", evidenceFile, evidenceFile.name);
-  return formData;
+  return { name: "Evidence", description: msg, fileURI };
 };
 
 export default SubmitEvidenceModal;

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -62,8 +62,13 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
         />
       </EnsureChain>
       {data ? (
-        data.evidences.map(({ key, evidence, sender, timestamp }, i) => (
-          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence, timestamp }} />
+        data.evidences.map(({ evidence, sender, timestamp, name, description, fileURI }, i) => (
+          <EvidenceCard
+            key={timestamp}
+            index={i + 1}
+            sender={sender?.id}
+            {...{ evidence, timestamp, name, description, fileURI }}
+          />
         ))
       ) : (
         <SkeletonEvidenceCard />