refactor default values (files / links) edit form

src/components/@shared/FormFields/FilesInput/Info.module.css

@@ -33,6 +33,7 @@
 
 .hideUrl {
   filter: blur(0.2rem);
+  user-select: none;
 }
 
 .warning {

src/components/@shared/FormFields/FilesInput/Info.tsx

@@ -6,21 +6,21 @@ import { FileInfo as FileInfoData } from '@oceanprotocol/lib'
 
 export default function FileInfo({
   file,
-  handleClose,
+  handleClose
-  hideUrl
 }: {
   file: FileInfoData
   handleClose(): void
-  hideUrl?: boolean
 }): ReactElement {
   const contentTypeCleaned = file.contentType
     ? cleanupContentType(file.contentType)
     : null
 
+  const hideUrl = file.type === 'hidden' || false
+
   return (
     <div className={`${styles.info}`}>
       <h3 className={`${styles.url} ${hideUrl ? styles.hideUrl : null}`}>
-        {file.url}
+        {hideUrl ? 'https://oceanprotocol/placeholder' : file.url}
       </h3>
       <ul>
         <li className={styles.success}>✓ URL confirmed</li>

src/components/@shared/FormFields/FilesInput/index.tsx

@@ -1,9 +1,9 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useField, useFormikContext } from 'formik'
 import FileInfo from './Info'
 import UrlInput from '../URLInput'
 import { InputProps } from '@shared/FormInput'
-import { getFileDidInfo, getFileUrlInfo } from '@utils/provider'
+import { getFileUrlInfo } from '@utils/provider'
 import { FormPublishData } from 'src/components/Publish/_types'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
@@ -11,7 +11,6 @@ import { useAsset } from '@context/Asset'
 export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
-  const [hideUrl, setHideUrl] = useState(false)
   const { values, setFieldError } = useFormikContext<FormPublishData>()
   const { asset } = useAsset()
 
@@ -48,37 +47,11 @@ export default function FilesInput(props: InputProps): ReactElement {
     helpers.setValue(meta.initialValue)
   }
 
-  useEffect(() => {
-    if (field.name === 'links' && asset?.metadata?.links) {
-      handleValidation(null, asset.metadata.links[0])
-    } else if (field.name === 'files') {
-      getFileDidInfo(
-        asset?.id,
-        asset?.services[0]?.id,
-        asset?.services[0]?.serviceEndpoint
-      ).then((fileDidInfo) => {
-        setHideUrl(true)
-        // setting placeholder for url file to avoid txs for the url file during initializing
-        helpers.setValue([
-          {
-            url: fileDidInfo[0].valid
-              ? 'http://oceanprotocol.com/placeholder'
-              : '',
-            ...fileDidInfo[0]
-          }
-        ])
-      })
-    }
-  }, [])
-
   return (
     <>
-      {field?.value?.[0]?.valid === true ? (
+      {field?.value?.[0]?.valid === true ||
-        <FileInfo
+      field?.value?.[0]?.type === 'hidden' ? (
-          hideUrl={hideUrl}
+        <FileInfo file={field.value[0]} handleClose={handleClose} />
-          file={field.value[0]}
-          handleClose={handleClose}
-        />
       ) : (
         <UrlInput
           submitText="Validate"

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -1,8 +1,10 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
-import { Field, Form } from 'formik'
+import { Field, Form, useField, useFormikContext } from 'formik'
 import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
+import { FormPublishData } from 'src/components/Publish/_types'
+import { getFileUrlInfo } from '@utils/provider'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -23,7 +25,8 @@ export default function FormEditMetadata({
   showPrice: boolean
   isComputeDataset: boolean
 }): ReactElement {
-  const { oceanConfig } = useAsset()
+  const { oceanConfig, asset } = useAsset()
+  const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
@@ -41,6 +44,34 @@ export default function FormEditMetadata({
     timeoutOptionsArray.push('Forever')
   }
 
+  useEffect(() => {
+    // let's initiate files with empty url (we can't access the asset url) with type hidden (for UI frontend)
+    setFieldValue('files', [
+      {
+        url: '',
+        type: 'hidden'
+      }
+    ])
+
+    const providerUrl = values?.services
+      ? values?.services[0].providerUrl.url
+      : asset.services[0].serviceEndpoint
+    // if we have a sample file, we need to get the files' info before setting defaults links value
+    asset?.metadata?.links?.[0] &&
+      getFileUrlInfo(asset.metadata.links[0], providerUrl).then(
+        (checkedFile) => {
+          console.log(checkedFile)
+          // initiate link with values from asset metadata
+          setFieldValue('links', [
+            {
+              url: asset.metadata.links[0],
+              ...checkedFile[0]
+            }
+          ])
+        }
+      )
+  }, [])
+
   return (
     <Form>
       {data.map(