Merge pull request #69 from kleros/feat/file-uploader-message

Feat/file uploader message

Author: jaybuidl

web/package.json

@@ -70,7 +70,7 @@
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@kleros/curate-v2-templates": "workspace:^",
-    "@kleros/kleros-app": "^2.0.1",
+    "@kleros/kleros-app": "^2.0.2",
     "@kleros/ui-components-library": "^2.20.0",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",

web/src/components/ActionButton/Modal/EvidenceUpload.tsx

@@ -5,6 +5,8 @@ import LabeledInput from "components/LabeledInput";
 import { responsiveSize } from "styles/responsiveSize";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const Container = styled.div`
   width: 100%;
@@ -35,10 +37,14 @@ const StyledLabel = styled.label`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 100%;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
   path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
 `;
 
 export type Evidence = {
@@ -57,7 +63,9 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [fileURI, setFileURI] = useState("");
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
+
   useEffect(() => {
     setEvidence({
       name: title,
@@ -101,8 +109,10 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
       </DescriptionContainer>
       <StyledFileUploader
         callback={handleFileUpload}
-        variant="info"
-        msg="Additionally, you can add an external file in PDF."
+        variant={isDesktop ? "info" : undefined}
+        msg={
+          "Additionally, you can add an external file.\n" + (getFileUploaderMsg(Roles.Evidence, roleRestrictions) ?? "")
+        }
       />
     </Container>
   );

web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx

@@ -6,21 +6,29 @@ import { responsiveSize } from "styles/responsiveSize";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const StyledFileUploader = styled(FileUploader)`
   width: 84vw;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
   path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
   ${landscapeStyle(
     () => css`
       width: ${responsiveSize(200, 720)};
     `
   )};
 `;
 const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
+
   const handleFileUpload = (file: File) => {
     infoToast("Uploading to IPFS...");
     uploadFile(file, Roles.CurateItemFile)
@@ -35,7 +43,13 @@ const FileInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
       });
   };
 
-  return <StyledFileUploader callback={handleFileUpload} variant="info" msg={fieldProp.description} />;
+  return (
+    <StyledFileUploader
+      callback={handleFileUpload}
+      variant={isDesktop ? "info" : undefined}
+      msg={`${fieldProp.description}\n${getFileUploaderMsg(Roles.CurateItemFile, roleRestrictions)}`}
+    />
+  );
 };
 
 export default FileInput;

web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx

@@ -6,13 +6,19 @@ import { responsiveSize } from "styles/responsiveSize";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const StyledFileUploader = styled(FileUploader)`
   width: 84vw;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
   path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
   ${landscapeStyle(
     () => css`
       width: ${responsiveSize(200, 720)};
@@ -21,7 +27,9 @@ const StyledFileUploader = styled(FileUploader)`
 `;
 
 const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
+
   const handleFileUpload = (file: File) => {
     infoToast("Uploading to IPFS...");
 
@@ -38,7 +46,13 @@ const ImageInput: React.FC<IFieldInput> = ({ fieldProp, handleWrite }) => {
       .finally();
   };
 
-  return <StyledFileUploader callback={handleFileUpload} variant="info" msg={fieldProp.description} />;
+  return (
+    <StyledFileUploader
+      callback={handleFileUpload}
+      variant={isDesktop ? "info" : undefined}
+      msg={`${fieldProp.description}\n${getFileUploaderMsg(Roles.CurateItemImage, roleRestrictions)}`}
+    />
+  );
 };
 
 export default ImageInput;

web/src/pages/SubmitList/ListParameters/LogoUpload.tsx

@@ -9,6 +9,8 @@ import { useSubmitListContext } from "context/SubmitListContext";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 import ListPreview from "./ListPreview";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const Container = styled.div`
   display: flex;
@@ -26,16 +28,21 @@ const Container = styled.div`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 100%;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
   path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
 `;
 
 const LogoUpload: React.FC = () => {
   const { listMetadata, setListMetadata, setIsLogoUploading } = useSubmitListContext();
 
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
 
   const handleFileUpload = (file: File) => {
     setIsLogoUploading(true);
@@ -76,8 +83,11 @@ const LogoUpload: React.FC = () => {
       <Header text="Logo" />
       <StyledFileUploader
         callback={handleLoad}
-        variant="info"
-        msg="Upload a logo to represent your list. The logo should be a 1:1 aspect ratio image with transparent background, in SVG, or PNG."
+        variant={isDesktop ? "info" : undefined}
+        msg={
+          "Upload a logo to represent your list. The logo should be a 1:1 aspect ratio image with transparent background.\n" +
+          (getFileUploaderMsg(Roles.Logo, roleRestrictions) ?? "")
+        }
       />
       <ListPreview />
       <NavigationButtons prevRoute="/submit-list/description" nextRoute="/submit-list/policy" />

web/src/pages/SubmitList/ListParameters/Policy.tsx

@@ -10,6 +10,8 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import { Link } from "react-router-dom";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+import { getFileUploaderMsg } from "src/utils";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const Container = styled.div`
   display: flex;
@@ -31,15 +33,21 @@ const StyledLabel = styled.label`
 
 const StyledFileUploader = styled(FileUploader)`
   width: 100%;
-  margin-bottom: ${responsiveSize(52, 32)};
+  margin-bottom: ${responsiveSize(150, 72)};
   path {
     fill: ${({ theme }) => theme.primaryBlue};
   }
+  small {
+    white-space: pre-line;
+    text-align: start;
+  }
 `;
 
 const Policy: React.FC = () => {
   const { listMetadata, setListMetadata, setIsPolicyUploading } = useSubmitListContext();
-  const { uploadFile } = useAtlasProvider();
+  const { uploadFile, roleRestrictions } = useAtlasProvider();
+  const isDesktop = useIsDesktop();
+
   const handleFileUpload = (file: File) => {
     setIsPolicyUploading(true);
     infoToast("Uploading to IPFS...");
@@ -73,7 +81,11 @@ const Policy: React.FC = () => {
         </Link>{" "}
         .
       </StyledLabel>
-      <StyledFileUploader callback={handleFileUpload} variant="info" msg="You can add the List Policy file in PDF." />
+      <StyledFileUploader
+        callback={handleFileUpload}
+        variant={isDesktop ? "info" : undefined}
+        msg={"You can add the List Policy file." + (getFileUploaderMsg(Roles.Policy, roleRestrictions) ?? "")}
+      />
 
       <NavigationButtons prevRoute="/submit-list/logo" nextRoute="/submit-list/deposit" />
     </Container>

web/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { Roles } from "@kleros/kleros-app";
+
 export const isUndefined = (maybeObject: any): maybeObject is undefined => typeof maybeObject === "undefined";
 export const capitalize = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -7,3 +9,32 @@ export const capitalize = (str: string) => {
  * Checks if a string is empty or contains only whitespace.
  */
 export const isEmpty = (str: string): boolean => str.trim() === "";
+
+type Role = {
+  name: string;
+  restriction: {
+    maxSize: number;
+    allowedMimeTypes: string[];
+  };
+};
+
+export const getFileUploaderMsg = (role: Roles, roleRestrictions?: Role[]) => {
+  if (!roleRestrictions) return;
+  const restrictions = roleRestrictions.find((supportedRoles) => Roles[supportedRoles.name] === role);
+
+  if (!restrictions) return;
+
+  const typesString = restrictions.restriction.allowedMimeTypes
+    .map((type) => {
+      const [prefix, suffix] = type.split("/");
+      if (!suffix) return prefix ?? null;
+
+      return suffix === "*" ? prefix : suffix;
+    })
+    .join(", ");
+
+  return `Allowed file types: [${typesString}], Max allowed size: ${(
+    restrictions.restriction.maxSize /
+    (1024 * 1024)
+  ).toFixed(2)} MB.`;
+};

yarn.lock

@@ -4652,7 +4652,7 @@ __metadata:
     "@graphql-codegen/client-preset": "npm:^4.2.0"
     "@kleros/curate-v2-templates": "workspace:^"
     "@kleros/curate-v2-tsconfig": "workspace:^"
-    "@kleros/kleros-app": "npm:^2.0.1"
+    "@kleros/kleros-app": "npm:^2.0.2"
     "@kleros/kleros-v2-contracts": "npm:^0.3.2"
     "@kleros/ui-components-library": "npm:^2.20.0"
     "@sentry/react": "npm:^7.93.0"
@@ -4711,9 +4711,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/kleros-app@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@kleros/kleros-app@npm:2.0.1"
+"@kleros/kleros-app@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@kleros/kleros-app@npm:2.0.2"
   dependencies:
     jose: "npm:^5.9.6"
   peerDependencies:
@@ -4724,7 +4724,7 @@ __metadata:
     react-dom: ^18.3.1
     viem: ^2.21.42
     wagmi: ^2.13.0
-  checksum: a193e49fe82738eaa7df3b82857fd74a5407e6ed166edeacd2352bbd149a49ea3cfde98f130fe0473f006761260cbf2475bc4fa138ad05650540eec43b9755d1
+  checksum: 89cf0536fed4bbb887772daa529d7cad209cea0e5105bcd366fe5e4bc7c5c14fca21aa201ba4d848c7e8addd3fc4921ac54e237afe2a5b7224c9cd219f72e08b
   languageName: node
   linkType: hard