NFT Metadata form

.github/workflows/test-files-on-demand.yml

@@ -18,11 +18,13 @@ jobs:
           key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
-
+      - name: Install and show git version
+        run: apt-get -y install git && git --version
+        id: git-install
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         env:
           REACT_APP_BLOCKNATIVE_ID: ${{ secrets.GH_REACT_APP_BLOCKNATIVE_ID }}
           REACT_APP_FILES_VERIFIER_NAME: ${{ secrets.GH_REACT_APP_FILES_VERIFIER_NAME }}

.github/workflows/test-files.yml

@@ -27,18 +27,19 @@ jobs:
           key: ${{ runner.os }}-node_modules-files-build-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
-
+      - name: Install and show git version
+        run: apt-get -y install git && git --version
+        id: git-install
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         env:
           REACT_APP_BLOCKNATIVE_ID: ${{ secrets.GH_REACT_APP_BLOCKNATIVE_ID }}
           REACT_APP_FILES_VERIFIER_NAME: ${{ secrets.GH_REACT_APP_FILES_VERIFIER_NAME }}
           REACT_APP_FILES_UUID_VERIFIER_NAME: 'chainsafe-uuid-testnet'
           REACT_APP_TEST: 'true'
           REACT_APP_STRIPE_PK: ${{secrets.GH_REACT_APP_STRIPE_PK}}
-          DEBUG: '@cypress/github-action'
         with:
           start: yarn start:files-ui
           # wait for 10min for the server to be ready

.github/workflows/test-storage-on-demand.yml

@@ -18,11 +18,13 @@ jobs:
           key: ${{ runner.os }}-node_modules-build-storage-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
-
+      - name: Install and show git version
+        run: apt-get -y install git && git --version
+        id: git-install
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         env:
           REACT_APP_BLOCKNATIVE_ID: ${{ secrets.GH_REACT_APP_BLOCKNATIVE_ID }}
           REACT_APP_FILES_VERIFIER_NAME: ${{ secrets.GH_REACT_APP_FILES_VERIFIER_NAME }}

.github/workflows/test-storage.yml

@@ -27,11 +27,13 @@ jobs:
           key: ${{ runner.os }}-node_modules-build-storage-${{ hashFiles('./yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-build-
-
+      - name: Install and show git version
+        run: apt-get -y install git && git --version
+        id: git-install
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         env:
           REACT_APP_BLOCKNATIVE_ID: ${{ secrets.GH_REACT_APP_BLOCKNATIVE_ID }}
           REACT_APP_FILES_VERIFIER_NAME: ${{ secrets.GH_REACT_APP_FILES_VERIFIER_NAME }}

packages/common-components/src/FileInput/FileInput.tsx

@@ -117,11 +117,41 @@ interface IFileInputProps extends DropzoneOptions {
     closeIcon?: string
     error?: string
   }
-  onFileNumberChange: (filesNumber: number) => void
+  onFileNumberChange?: (filesNumber: number) => void
   moreFilesLabel: string
   testId?: string
 }
 
+interface FileItemProps {
+  index?: number
+  fullPath: string
+  removeItem: (index: number) => void
+  itemClassName?: string
+  closeIconClassName?: string
+}
+
+const FileItem = ({ index = 0, fullPath, removeItem, itemClassName, closeIconClassName }: FileItemProps) => {
+  const classes = useStyles()
+  return <li
+    className={clsx(classes.item, itemClassName)}
+    key={index}
+  >
+    <span className={classes.itemText}>{fullPath}</span>
+    <Button
+      testId="remove-from-file-list"
+      className={clsx(classes.crossIcon, closeIconClassName)}
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        removeItem(index)
+      }}
+      size="small"
+    >
+      <CrossIcon fontSize="small" />
+    </Button>
+  </li>
+}
+
 const FileInput = ({
   className,
   variant = "dropzone",
@@ -139,11 +169,15 @@ const FileInput = ({
   const classes = useStyles()
   const [previews, setPreviews] = useState<any[]>([])
   const [errors, setErrors] = useState<any[]>([])
-  const [{ value }, meta, helpers] = useField<FileWithPath[]>(name)
+  const [{ value }, meta, helpers] = useField<FileWithPath[] | FileWithPath | null>(name)
 
   useEffect(() => {
-    onFileNumberChange && onFileNumberChange(value.length)
-  }, [onFileNumberChange, value.length])
+    if(Array.isArray(value)){
+      onFileNumberChange && onFileNumberChange(value.length)
+    } else {
+      onFileNumberChange && onFileNumberChange(value ? 1 : 0)
+    }
+  }, [onFileNumberChange, value])
 
   const onDrop = useCallback(
     async (acceptedFiles: FileWithPath[], fileRejections: FileRejection[]) => {
@@ -161,8 +195,9 @@ const FileInput = ({
           )
         )
       }
-
-      helpers.setValue([...value, ...filtered])
+      Array.isArray(value)
+        ? helpers.setValue([...value, ...filtered])
+        : helpers.setValue(filtered[0])
 
       if (fileRejections.length > 0) {
         const fileDropRejectionErrors = fileRejections.map((fr) =>
@@ -191,11 +226,15 @@ const FileInput = ({
     ...dropZoneProps
   })
 
-  const removeItem = (i: number) => {
-    const items = value
-    items.splice(i, 1)
+  const removeItem = useCallback((i: number) => {
+    let items = value
+
+    Array.isArray(items)
+      ? items.splice(i, 1)
+      : items = null
+
     helpers.setValue(items)
-  }
+  }, [helpers, value])
 
   return (
     <div
@@ -205,7 +244,7 @@ const FileInput = ({
     >
       <input {...getInputProps()} />
       {variant === "dropzone" ? (
-        value?.length === 0 ? (
+        value === null || (Array.isArray(value) && value.length === 0) ? (
           <div className={clsx(classes.pending, classNames?.pending)}>
             {pending || (
               <>
@@ -224,35 +263,33 @@ const FileInput = ({
           >
             <ScrollbarWrapper className={clsx("scrollbar")}>
               <ul>
-                {value.map((file: any, i: number) => (
-                  <li
-                    className={clsx(classes.item, classNames?.item)}
-                    key={i}
-                  >
-                    <span className={classes.itemText}>{file.path}</span>
-                    <Button
-                      testId="remove-from-file-list"
-                      className={clsx(classes.crossIcon, classNames?.closeIcon)}
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        removeItem(i)
-                      }}
-                      size="small"
-                    >
-                      <CrossIcon fontSize="small" />
-                    </Button>
-                  </li>
-                ))}
+                {Array.isArray(value)
+                  ? value.map((file, i) => (
+                    <FileItem
+                      key={i}
+                      index={i}
+                      fullPath={file.path || ""}
+                      removeItem={removeItem}
+                      closeIconClassName={classNames?.closeIcon}
+                      itemClassName={classNames?.item}
+                    />
+                  ))
+                  : <FileItem
+                    fullPath={value.path || ""}
+                    removeItem={removeItem}
+                    closeIconClassName={classNames?.closeIcon}
+                    itemClassName={classNames?.item}
+                  />
+                }
               </ul>
             </ScrollbarWrapper>
           </div>
         )
       ) : (
         <>
-          {value?.length === 0
+          {value === null || (Array.isArray(value) && value?.length === 0)
             ? "No files selected"
-            : `${value?.length} file(s) selected`}
+            : `${Array.isArray(value) ? value?.length : 1} file(s) selected`}
           <Button
             onClick={open}
             size="small"
@@ -261,7 +298,7 @@ const FileInput = ({
           </Button>
         </>
       )}
-      {value?.length > 0 && (
+      {Array.isArray(value) && value.length > 0 && (
         <div
           className={clsx(classes.addFiles, classNames?.addFiles)}
         >

packages/common-components/src/Icons/icons/UploadRound.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as UploadRoundSvg } from "../svgs/upload-round.svg"
+
+export { UploadRoundSvg }
+
+export default createSvgIcon(<UploadRoundSvg />)

packages/common-components/src/Icons/index.ts

@@ -84,6 +84,7 @@ export { default as SubscriptionPlanIcon, SubscriptionSvg } from "./icons/Subscr
 export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon"
 export { default as UploadIcon, UploadSvg } from "./icons/Upload.icon"
+export { default as UploadRoundIcon, UploadRoundSvg } from "./icons/UploadRound.icon"
 export { default as UnionpayCardIcon, UnionpayCardSvg } from "./icons/UnionpayCard.icon"
 export { default as UsdcIcon, UsdcSvg } from "./icons/Usdc.icon"
 export { default as UserIcon, UserSvg } from "./icons/User.icon"

packages/files-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.18.35",
+    "@chainsafe/files-api-client": "1.18.37",
     "@chainsafe/web3-context": "1.3.1",
     "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -41,6 +41,7 @@ export const ROUTE_LINKS = {
     // bucketId should not have a / at the end
     // rawCurrentPath can be empty, or /
     const adjustedRawCurrentPath = !rawCurrentPath ? "/" : rawCurrentPath
+
     return `/shared/${bucketId}${adjustedRawCurrentPath}`
   },
   DiscordInvite: "https://discord.gg/zAEY37fNb2",

packages/files-ui/src/Components/Modules/FileBrowsers/UploadFileModal.tsx

@@ -1,9 +1,8 @@
 import { Button, FileInput } from "@chainsafe/common-components"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useState } from "react"
 import { Form, useFormik, FormikProvider } from "formik"
-import { array, object } from "yup"
 import CustomModal from "../../Elements/CustomModal"
 import { Trans, t } from "@lingui/macro"
 import clsx from "clsx"
@@ -77,31 +76,21 @@ interface IUploadFileModuleProps {
   close: () => void
 }
 
+interface UploadedFiles {
+  files: Array<File & {path: string}>
+}
+
 const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
   const classes = useStyles()
   const [isDoneDisabled, setIsDoneDisabled] = useState(true)
-  const { currentPath, refreshContents, bucket } = useFileBrowser()
-  const { storageSummary, uploadFiles } = useFiles()
-
-  const UploadSchema = useMemo(() => object().shape({
-    files: array().required(t`Please select a file to upload`)
-      .test("Upload Size",
-        t`Upload size exceeds plan capacity`,
-        (files) => {
-          // no validation if the user isn't the owner
-          if(bucket?.permission !== "owner") return true
-
-          const availableStorage = storageSummary?.available_storage || 0
-          const uploadSize = files?.reduce((total: number, file: File) => total += file.size, 0) || 0
-          return uploadSize < availableStorage
-        })
-  }), [bucket, storageSummary])
+  const { currentPath, refreshContents, bucket  } = useFileBrowser()
+  const { uploadFiles, storageSummary } = useFiles()
 
   const onFileNumberChange = useCallback((filesNumber: number) => {
     setIsDoneDisabled(filesNumber === 0)
   }, [])
 
-  const onSubmit = useCallback(async (values: {files: Array<File & {path: string}>}, helpers) => {
+  const onSubmit = useCallback(async (values: UploadedFiles, helpers) => {
     if (!bucket) return
 
     helpers.setSubmitting(true)
@@ -116,9 +105,23 @@ const UploadFileModule = ({ modalOpen, close }: IUploadFileModuleProps) => {
     helpers.setSubmitting(false)
   }, [bucket, close, refreshContents, uploadFiles, currentPath])
 
+  const onFormikValidate = useCallback(({ files }: UploadedFiles) => {
+
+    if (files.length === 0) {
+      return { files: t`Please select a file to upload` }
+    }
+
+    const availableStorage = storageSummary?.available_storage || 0
+    const uploadSize = files?.reduce((total: number, file: File) => total += file.size, 0) || 0
+
+    if(uploadSize > availableStorage)
+      return { files: t`Upload size exceeds plan capacity` }
+  },
+  [storageSummary])
+
   const formik = useFormik({
     initialValues: { files: [] },
-    validationSchema: UploadSchema,
+    validate: onFormikValidate,
     onSubmit
   })
 

packages/storage-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.18.35",
+    "@chainsafe/files-api-client": "1.18.37",
     "@chainsafe/web3-context": "1.3.0",
     "@emeraldpay/hashicon-react": "0.5.2",
     "@lingui/core": "^3.7.2",