diff --git a/web/package.json b/web/package.json index f28314e..b6adeab 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx index d22534c..2faf61e 100644 --- a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx +++ b/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 = ({ 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,11 @@ const EvidenceUpload: React.FC = ({ setEvidence, setIsEvidenceU ); diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx index d8c85f0..7d3c5f8 100644 --- a/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.tsx +++ b/web/src/pages/SubmitItem/ItemField/FieldInput/FileInput.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)}; @@ -20,7 +26,9 @@ const StyledFileUploader = styled(FileUploader)` )}; `; const FileInput: React.FC = ({ 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 = ({ fieldProp, handleWrite }) => { }); }; - return ; + return ( + + ); }; export default FileInput; diff --git a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx b/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx index 846269a..3077898 100644 --- a/web/src/pages/SubmitItem/ItemField/FieldInput/ImageInput.tsx +++ b/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 = ({ 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 = ({ fieldProp, handleWrite }) => { .finally(); }; - return ; + return ( + + ); }; export default ImageInput; diff --git a/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx b/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx index f176f88..f4a6e20 100644 --- a/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx +++ b/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 = () => {
diff --git a/web/src/pages/SubmitList/ListParameters/Policy.tsx b/web/src/pages/SubmitList/ListParameters/Policy.tsx index 066fa1a..8f2e451 100644 --- a/web/src/pages/SubmitList/ListParameters/Policy.tsx +++ b/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 = () => { {" "} . - + diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts index 750d74b..3ac04cc 100644 --- a/web/src/utils/index.ts +++ b/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,28 @@ 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; + console.log({ restrictions }); + + return `Allowed file types: [ ${restrictions.restriction.allowedMimeTypes + .map((type) => { + const [prefix, suffix] = type.split("/"); + if (!suffix) return prefix ?? null; + + return suffix === "*" ? prefix : suffix; + }) + .join(", ")} ], Max allowed size: ${(restrictions.restriction.maxSize / (1024 * 1024)).toFixed(2)} MB.`; +}; diff --git a/yarn.lock b/yarn.lock index f658568..f9420e8 100644 --- a/yarn.lock +++ b/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