feat(web): atlas-upload-to-ipfs-integration

Author: tractorss

web/netlify/functions/uploadToIPFS.ts

@@ -13,6 +13,7 @@ import {
   addUser as addUserToAtlas,
   fetchUser,
   updateUser as updateUserInAtlas,
+  uploadToIpfs,
   type User,
   type AddUserData,
   type UpdateUserData,
@@ -26,11 +27,13 @@ interface IAtlasProvider {
   isAddingUser: boolean;
   isFetchingUser: boolean;
   isUpdatingUser: boolean;
+  isUploadingFile: boolean;
   user: User | undefined;
   userExists: boolean;
   authoriseUser: () => void;
   addUser: (userSettings: AddUserData) => Promise<boolean>;
   updateUser: (userSettings: UpdateUserData) => Promise<boolean>;
+  uploadFile: (file: File) => Promise<string | null>;
 }
 
 const Context = createContext<IAtlasProvider | undefined>(undefined);
@@ -49,6 +52,7 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
   const [isAddingUser, setIsAddingUser] = useState(false);
   const [isUpdatingUser, setIsUpdatingUser] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
   const { signMessageAsync } = useSignMessage();
 
   const atlasGqlClient = useMemo(() => {
@@ -123,7 +127,7 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
   // this would change based on the fields we have and what defines a user to be existing
   const userExists = useMemo(() => {
     if (!user) return false;
-    return user.email ? true : false;
+    return !isUndefined(user.email);
   }, [user]);
 
   /**
@@ -200,6 +204,32 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
     [address, isVerified, setIsUpdatingUser, atlasGqlClient, refetchUser]
   );
 
+  /**
+   * @description upload file to ipfs
+   * @param {File} file - file to be uploaded
+   * @returns {Promise<string | null>} A promise that resolves to the ipfs cid if file was uploaded successfully else
+   *                                   null
+   */
+  const uploadFile = useCallback(
+    async (file: File) => {
+      try {
+        if (!address || !isVerified) return null;
+        setIsUploadingFile(true);
+
+        const hash = await uploadToIpfs(atlasGqlClient, file);
+
+        return hash ? `/ipfs/${hash}` : null;
+      } catch (err: any) {
+        // eslint-disable-next-line
+        console.log("Upload File Error : ", err?.message);
+        return null;
+      } finally {
+        setIsUploadingFile(false);
+      }
+    },
+    [address, isVerified, setIsUploadingFile, atlasGqlClient]
+  );
+
   return (
     <Context.Provider
       value={useMemo(
@@ -214,6 +244,8 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
           updateUser,
           isUpdatingUser,
           userExists,
+          isUploadingFile,
+          uploadFile,
         }),
         [
           isVerified,
@@ -226,6 +258,8 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
           updateUser,
           isUpdatingUser,
           userExists,
+          isUploadingFile,
+          uploadFile,
         ]
       )}
     >

web/netlify/middleware/authMiddleware.ts

@@ -7,8 +7,8 @@ import { useWalletClient, usePublicClient, useConfig } from "wagmi";
 
 import { Textarea, Button, FileUploader } from "@kleros/ui-components-library";
 
+import { useAtlasProvider } from "context/AtlasProvider";
 import { simulateEvidenceModuleSubmitEvidence } from "hooks/contracts/generated";
-import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
 import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 
 import EnsureAuth from "components/EnsureAuth";
@@ -61,23 +61,28 @@ const SubmitEvidenceModal: React.FC<{
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState("");
   const [file, setFile] = useState<File>();
+  const { uploadFile } = useAtlasProvider();
 
   const submitEvidence = useCallback(async () => {
-    setIsSending(true);
-    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();
-      })
-      .finally(() => setIsSending(false));
-  }, [publicClient, wagmiConfig, walletClient, close, evidenceGroup, file, message, setIsSending]);
+    try {
+      setIsSending(true);
+      const evidenceJSON = await constructEvidence(uploadFile, message, file);
+
+      const { request } = await simulateEvidenceModuleSubmitEvidence(wagmiConfig, {
+        args: [BigInt(evidenceGroup), JSON.stringify(evidenceJSON)],
+      });
+
+      if (!walletClient || !publicClient) return;
+      await wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
+        .then(() => {
+          setMessage("");
+          close();
+        })
+        .finally(() => setIsSending(false));
+    } catch {
+      setIsSending(false);
+    }
+  }, [publicClient, wagmiConfig, walletClient, close, evidenceGroup, file, message, setIsSending, uploadFile]);
 
   return (
     <StyledModal {...{ isOpen }}>
@@ -96,16 +101,12 @@ const SubmitEvidenceModal: React.FC<{
   );
 };
 
-const constructEvidence = async (msg: string, file?: File) => {
-  let fileURI: string | undefined = undefined;
+const constructEvidence = async (uploadFile: (file: File) => Promise<string | null>, msg: string, file?: File) => {
+  let fileURI: string | null = null;
   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];
-    });
+    fileURI = await uploadFile(file);
+    if (!fileURI) throw new Error("Error uploading evidence file");
   }
   return { name: "Evidence", description: msg, fileURI };
 };

web/src/context/AtlasProvider.tsx

@@ -5,8 +5,8 @@ import { toast } from "react-toastify";
 
 import { FileUploader } from "@kleros/ui-components-library";
 
+import { useAtlasProvider } from "context/AtlasProvider";
 import { useNewDisputeContext } from "context/NewDisputeContext";
-import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
 import { OPTIONS as toastOptions } from "utils/wrapWithToast";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -51,19 +51,16 @@ const StyledFileUploader = styled(FileUploader)`
 
 const Policy: React.FC = () => {
   const { disputeData, setDisputeData, setIsPolicyUploading } = useNewDisputeContext();
+  const { uploadFile } = useAtlasProvider();
 
   const handleFileUpload = (file: File) => {
     setIsPolicyUploading(true);
     toast.info("Uploading Policy to IPFS", toastOptions);
 
-    const fileFormData = new FormData();
-    fileFormData.append("data", file, file.name);
-
-    uploadFormDataToIPFS(fileFormData, "policy")
-      .then(async (res) => {
-        const response = await res.json();
-        const policyURI = response["cids"][0];
-        setDisputeData({ ...disputeData, policyURI });
+    uploadFile(file)
+      .then(async (cid) => {
+        if (!cid) return;
+        setDisputeData({ ...disputeData, policyURI: cid });
       })
       .catch((err) => console.log(err))
       .finally(() => setIsPolicyUploading(false));

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

@@ -4,3 +4,4 @@ export * from "./createMessage";
 export * from "./addUser";
 export * from "./fetchUser";
 export * from "./updateUser";
+export * from "./uploadToIpfs";