files input props fixes

.gitignore

@@ -9,4 +9,5 @@ public
 .cache
 storybook-static
 public/storybook
-.artifacts
+.artifacts
+.vercel

src/components/Layout.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, ReactElement } from 'react'
-import { Helmet } from 'react-helmet'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import PageHeader from './molecules/PageHeader'
@@ -24,12 +23,6 @@ export default function Layout({
 }: LayoutProps): ReactElement {
   return (
     <div className={styles.app}>
-      <Helmet>
-        <link rel="icon" href="/icons/icon-96x96.png" />
-        <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
-        <meta name="theme-color" content="#ca2935" />
-      </Helmet>
-
       <Seo title={title} description={description} uri={uri} />
 
       <Header />

src/components/molecules/FilesInput/Input.tsx

@@ -4,16 +4,19 @@ import Button from '../../atoms/Button'
 import { useField } from 'formik'
 import Loader from '../../atoms/Loader'
 import InputElement from '../../atoms/Input/InputElement'
+import { InputProps } from '../../atoms/Input'
 
-export default function FileInput({
+export default function FileInput(
-  handleButtonClick,
+  {
-  isLoading,
+    handleButtonClick,
-  ...props
+    isLoading
-}: {
+  }: {
-  handleButtonClick(e: React.SyntheticEvent, data: string): void
+    handleButtonClick(e: React.SyntheticEvent, data: string): void
-  isLoading: boolean
+    isLoading: boolean
-}): ReactElement {
+  },
-  const [field] = useField(props as any)
+  props: InputProps
+): ReactElement {
+  const [field, meta] = useField(props)
 
   return (
     <>

src/components/molecules/FilesInput/index.tsx

@@ -1,19 +1,17 @@
 import React, { ReactElement, useState } from 'react'
-import { useField, FormikProps } from 'formik'
+import { useField } from 'formik'
-import { File } from '@oceanprotocol/squid'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'
 import FileInput from './Input'
 import { getFileInfo } from '../../../utils'
+import { InputProps } from '../../atoms/Input'
 
 interface Values {
   url: string
 }
 
-export default function FilesInput(
+export default function FilesInput(props: InputProps): ReactElement {
-  props: FormikProps<Values | File>
+  const [field, meta, helpers] = useField(props)
-): ReactElement {
-  const [field, meta, helpers] = useField(props as any)
   const [isLoading, setIsLoading] = useState(false)
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {

src/components/pages/Publish/PublishForm.module.css

@@ -1,13 +1,3 @@
 .form {
   composes: box from '../../atoms/Box.module.css';
 }
-
-.error {
-  background-color: var(--red);
-}
-.success {
-  background-color: var(--green);
-}
-.info {
-  background-color: var(--yellow);
-}

src/components/pages/Publish/PublishForm.tsx

@@ -15,13 +15,14 @@ import { transformPublishFormToMetadata } from './utils'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 import { MetaDataPublishForm, AccessType } from '../../../@types/MetaData'
 import AssetModel from '../../../models/Asset'
+import { File } from '@oceanprotocol/squid'
 
 const validationSchema = Yup.object().shape<MetaDataPublishForm>({
   // ---- required fields ----
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
   price: Yup.string().required('Required'),
-  files: Yup.string().required('Required'),
+  files: Yup.object<File[]>().required('Required'),
   description: Yup.string().required('Required'),
   license: Yup.string().required('Required'),
   access: Yup.string().required('Required'),
@@ -30,7 +31,7 @@ const validationSchema = Yup.object().shape<MetaDataPublishForm>({
   // ---- optional fields ----
   copyrightHolder: Yup.string(),
   tags: Yup.string(),
-  links: Yup.string()
+  links: Yup.object<File[]>()
 })
 
 const initialValues: MetaDataPublishForm = {
@@ -55,9 +56,7 @@ export default function PublishForm({
   const { ocean, account } = useOcean()
 
   async function handleSubmit(values: MetaDataPublishForm) {
-    const submittingToast = toast.info('submitting asset', {
+    const submittingToast = toast.info('submitting asset')
-      className: styles.info
-    })
 
     console.log(values)
     const metadata = transformPublishFormToMetadata(values)
@@ -112,7 +111,7 @@ export default function PublishForm({
       {({ isSubmitting, isValid, status, setStatus }) => (
         <FormFormik
           className={styles.form}
-          onChange={() => status === 'empty' && setStatus(null)}
+          // onChange={() => status === 'empty' && setStatus(null)}
         >
           {content.data.map((field: FormFieldProps) => (
             <Field key={field.name} {...field} component={Input} />