file api & toast fixes

src/@types/MetaData.d.ts

@@ -1,16 +1,11 @@
 import { File, MetaData, AdditionalInformation } from '@oceanprotocol/squid'
 import { ServiceMetadata } from '@oceanprotocol/squid/dist/node/ddo/Service'
 
-export interface Sample {
-  name: string
-  url: string
-}
-
 export declare type AccessType = 'Download' | 'Compute'
 
 export interface AdditionalInformationMarket extends AdditionalInformation {
   description: string
-  links?: Sample[] // redefine existing key, cause not specific enough in Squid
+  links?: File[] // redefine existing key, cause not specific enough in Squid
   termsAndConditions: boolean
   dateRange?: [string, string]
   access: AccessType | string
@@ -33,7 +28,7 @@ export interface MetaDataPublishForm {
   // ---- optional fields ----
   copyrightHolder?: string
   tags?: string
-  links?: string
+  links?: string | File[]
 }
 
 export interface ServiceMetaDataMarket extends ServiceMetadata {

src/components/molecules/FilesInput/Input.tsx

@@ -13,7 +13,7 @@ export default function FileInput({
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
 }): ReactElement {
-  const [field] = useField(props)
+  const [field] = useField(props as any)
 
   return (
     <>

src/components/molecules/FilesInput/index.tsx

@@ -13,7 +13,7 @@ interface Values {
 export default function FilesInput(
   props: FormikProps<Values | File>
 ): ReactElement {
-  const [field, meta, helpers] = useField(props)
+  const [field, meta, helpers] = useField(props as any)
   const [isLoading, setIsLoading] = useState(false)
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {

src/global/Styles.tsx

@@ -1,12 +1,19 @@
 import React, { ReactElement, ReactNode } from 'react'
+import { ToastContainer } from 'react-toastify'
 
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../global/styles.css'
+import 'react-toastify/dist/ReactToastify.css'
 
 export default function Styles({
   children
 }: {
   children: ReactNode
 }): ReactElement {
-  return <>{children}</>
+  return (
+    <>
+      {children}
+      <ToastContainer position="bottom-right" newestOnTop />
+    </>
+  )
 }

src/global/_toast.css

@@ -0,0 +1,30 @@
+div.Toastify__toast {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--border-radius);
+  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);
+  padding: calc(var(--spacer) / 2) var(--spacer);
+  background: var(--brand-white);
+  color: var(--brand-grey);
+}
+
+div.Toastify__toast--error {
+  background: var(--brand-alert-red);
+  color: var(--brand-white);
+}
+
+div.Toastify__toast--success {
+  background: var(--brand-alert-green);
+  color: var(--brand-white);
+}
+
+div.Toastify__toast--info {
+  background: var(--brand-white);
+  color: var(--brand-grey);
+}
+
+div.Toastify__toast--warning {
+  background: var(--brand-alert-yellow);
+  color: var(--brand-white);
+}

src/global/styles.css

@@ -133,3 +133,4 @@ fieldset {
 }
 
 @import '_code.css';
+@import '_toast.css';

src/utils/index.ts

@@ -58,13 +58,9 @@ export async function getFileInfo(url: string): Promise<File> {
     data: { url }
   })
 
-  if (response.status > 299) {
-    throw new Error(response.statusText)
-  }
-
-  if (!response.data.result) {
-    toast.error(response.data.message)
-    return { contentLength: undefined, contentType: '', url }
+  if (response.status > 299 || !response.data.result) {
+    toast.error('Could not connect to File API')
+    return
   }
 
   const { contentLength, contentType } = response.data.result