chore(web): new-ipfs-upload-flow

Author: jaybuidl

web/.env.devnet-neo.public

@@ -5,7 +5,7 @@ export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
 export REACT_APP_ARBITRATOR_TYPE=neo
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.devnet-university.public

@@ -5,7 +5,7 @@ export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
 export REACT_APP_ARBITRATOR_TYPE=university
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.devnet.public

@@ -4,7 +4,7 @@ export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/klero
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.local.public

@@ -2,7 +2,7 @@
 export REACT_APP_DEPLOYMENT=devnet
 export REACT_APP_CORE_SUBGRAPH=http://localhost:8000/subgraphs/name/kleros/kleros-v2-core-local
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.thegraph.com/subgraphs/name/alcercu/templateregistrydevnet
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.mainnet-neo.public

@@ -5,7 +5,7 @@ export REACT_APP_DRT_ARBMAINNET_SUBGRAPH=https://api.studio.thegraph.com/query/6
 export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge
 export REACT_APP_GENESIS_BLOCK_ARBMAINNET=190274403
 export REACT_APP_ARBITRATOR_TYPE=neo
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=
 export NODE_OPTIONS='--max-old-space-size=7680'

web/.env.testnet.public

@@ -3,7 +3,7 @@ export REACT_APP_DEPLOYMENT=testnet
 export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-testnet/version/latest
 export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
 export REACT_APP_STATUS_URL=https://kleros-v2.betteruptime.com/badge
-export REACT_APP_ATLAS_URI=http://localhost:3000/graphql
+export REACT_APP_ATLAS_URI=http://localhost:3000
 export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3842783
 export WALLETCONNECT_PROJECT_ID=
 export ALCHEMY_API_KEY=

web/src/context/AtlasProvider.tsx

@@ -20,6 +20,8 @@ import {
   type UpdateEmailData,
   type ConfirmEmailData,
   type ConfirmEmailResponse,
+  Roles,
+  Products,
 } from "utils/atlas";
 
 import { isUndefined } from "src/utils";
@@ -36,7 +38,7 @@ interface IAtlasProvider {
   authoriseUser: () => void;
   addUser: (userSettings: AddUserData) => Promise<boolean>;
   updateEmail: (userSettings: UpdateEmailData) => Promise<boolean>;
-  uploadFile: (file: File) => Promise<string | null>;
+  uploadFile: (file: File, role: Roles) => Promise<string | null>;
   confirmEmail: (userSettings: ConfirmEmailData) => Promise<
     ConfirmEmailResponse & {
       isError: boolean;
@@ -69,7 +71,7 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
           authorization: `Bearer ${authToken}`,
         }
       : undefined;
-    return new GraphQLClient(atlasUri, { headers });
+    return new GraphQLClient(`${atlasUri}/graphql`, { headers });
   }, [authToken]);
 
   /**
@@ -215,17 +217,20 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
   /**
    * @description upload file to ipfs
    * @param {File} file - file to be uploaded
+   * @param {Roles} role - role for which file is being 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) => {
+    async (file: File, role: Roles) => {
       try {
-        if (!address || !isVerified) return null;
+        if (!address || !isVerified || !atlasUri || !authToken) return null;
         setIsUploadingFile(true);
 
-        const hash = await uploadToIpfs(atlasGqlClient, file);
-
+        const hash = await uploadToIpfs(
+          { baseUrl: atlasUri, authToken },
+          { file, name: file.name, role, product: Products.CourtV2 }
+        );
         return hash ? `/ipfs/${hash}` : null;
       } catch (err: any) {
         // eslint-disable-next-line
@@ -235,7 +240,7 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
         setIsUploadingFile(false);
       }
     },
-    [address, isVerified, setIsUploadingFile, atlasGqlClient]
+    [address, isVerified, setIsUploadingFile, authToken]
   );
 
   /**

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

@@ -9,6 +9,7 @@ import { Textarea, Button, FileUploader } from "@kleros/ui-components-library";
 
 import { useAtlasProvider } from "context/AtlasProvider";
 import { simulateEvidenceModuleSubmitEvidence } from "hooks/contracts/generated";
+import { Roles } from "utils/atlas";
 import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 
 import EnsureAuth from "components/EnsureAuth";
@@ -101,11 +102,15 @@ const SubmitEvidenceModal: React.FC<{
   );
 };
 
-const constructEvidence = async (uploadFile: (file: File) => Promise<string | null>, msg: string, file?: File) => {
+const constructEvidence = async (
+  uploadFile: (file: File, role: Roles) => Promise<string | null>,
+  msg: string,
+  file?: File
+) => {
   let fileURI: string | null = null;
   if (file) {
     toast.info("Uploading to IPFS", toastOptions);
-    fileURI = await uploadFile(file);
+    fileURI = await uploadFile(file, Roles.Evidence);
     if (!fileURI) throw new Error("Error uploading evidence file");
   }
   return { name: "Evidence", description: msg, fileURI };

web/src/pages/Resolver/Policy/index.tsx

@@ -7,6 +7,7 @@ import { FileUploader } from "@kleros/ui-components-library";
 
 import { useAtlasProvider } from "context/AtlasProvider";
 import { useNewDisputeContext } from "context/NewDisputeContext";
+import { Roles } from "utils/atlas";
 import { OPTIONS as toastOptions } from "utils/wrapWithToast";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -57,7 +58,7 @@ const Policy: React.FC = () => {
     setIsPolicyUploading(true);
     toast.info("Uploading Policy to IPFS", toastOptions);
 
-    uploadFile(file)
+    uploadFile(file, Roles.Policy)
       .then(async (cid) => {
         if (!cid) return;
         setDisputeData({ ...disputeData, policyURI: cid });

web/src/utils/atlas/uploadToIpfs.ts

@@ -1,21 +1,51 @@
-import { gql, type GraphQLClient } from "graphql-request";
 import { toast } from "react-toastify";
 
 import { OPTIONS } from "utils/wrapWithToast";
 
-export async function uploadToIpfs(client: GraphQLClient, file: File): Promise<string | null> {
-  const presignedUrl = await getPreSignedUrl(client, file.name);
+export enum Products {
+  CourtV2 = "CourtV2",
+}
+
+export enum Roles {
+  Photo = "photo",
+  Evidence = "evidence",
+  Policy = "policy",
+  Generic = "generic",
+}
+
+export type IpfsUploadPayload = {
+  file: File;
+  name: string;
+  product: Products;
+  role: Roles;
+};
+
+type Config = {
+  baseUrl: string;
+  authToken: string;
+};
+
+export async function uploadToIpfs(config: Config, payload: IpfsUploadPayload): Promise<string | null> {
+  const formData = new FormData();
+  formData.append("file", payload.file, payload.name);
+  formData.append("name", payload.name);
+  formData.append("product", payload.product);
+  formData.append("role", payload.role);
 
   return toast.promise<string | null, Error>(
-    fetch(presignedUrl, {
-      method: "PUT",
-      body: file,
+    fetch(`${config.baseUrl}/ipfs/file`, {
+      method: "POST",
+      headers: {
+        authorization: `Bearer ${config.authToken}`,
+      },
+      body: formData,
     }).then(async (response) => {
-      if (response.status !== 200) {
+      if (!response.ok) {
         const error = await response.json().catch(() => ({ message: "Error uploading to IPFS" }));
         throw new Error(error.message);
       }
-      return response.headers.get("x-amz-meta-cid");
+
+      return await response.text();
     }),
     {
       pending: `Uploading to IPFS...`,
@@ -29,42 +59,3 @@ export async function uploadToIpfs(client: GraphQLClient, file: File): Promise<s
     OPTIONS
   );
 }
-
-const presignedUrlQuery = gql`
-  mutation GetPresignedUrl($filename: String!) {
-    getPresignedUrl(filename: $filename, appname: KlerosCourt)
-  }
-`;
-
-type GetPresignedUrlResponse = {
-  getPresignedUrl: string;
-};
-
-const getPreSignedUrl = (client: GraphQLClient, filename: string) => {
-  const variables = {
-    filename,
-  };
-
-  return toast.promise<string, Error>(
-    client
-      .request<GetPresignedUrlResponse>(presignedUrlQuery, variables)
-      .then(async (response) => response.getPresignedUrl)
-      .catch((errors) => {
-        // eslint-disable-next-line no-console
-        console.log("Get Presigned Url error:", { errors });
-
-        const errorMessage = Array.isArray(errors?.response?.errors)
-          ? errors.response.errors[0]?.message
-          : "Unknown error";
-        throw new Error(errorMessage);
-      }),
-    {
-      error: {
-        render({ data: error }) {
-          return `Getting Presigned Url failed: ${error?.message}`;
-        },
-      },
-    },
-    OPTIONS
-  );
-};