From 8587535a445288ecb354761a236cf32fa36e1010 Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Mon, 15 Aug 2022 09:28:26 -0400
Subject: [PATCH] adding placeholder file url in edit form

---
 .../FormFields/FilesInput/Info.module.css     |  4 ++++
 .../@shared/FormFields/FilesInput/Info.tsx    | 10 ++++++---
 .../@shared/FormFields/FilesInput/index.tsx   | 21 +++++++++++++++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/@shared/FormFields/FilesInput/Info.module.css b/src/components/@shared/FormFields/FilesInput/Info.module.css
index a9a95d6d8..990e0ceed 100644
--- a/src/components/@shared/FormFields/FilesInput/Info.module.css
+++ b/src/components/@shared/FormFields/FilesInput/Info.module.css
@@ -31,6 +31,10 @@
   padding-right: calc(var(--spacer) / 2);
 }
 
+.hideUrl {
+  filter: blur(0.2rem);
+}
+
 .warning {
   margin-top: calc(var(--spacer) / 3);
   margin-left: 0;
diff --git a/src/components/@shared/FormFields/FilesInput/Info.tsx b/src/components/@shared/FormFields/FilesInput/Info.tsx
index 2f1e8b782..d156ff3b1 100644
--- a/src/components/@shared/FormFields/FilesInput/Info.tsx
+++ b/src/components/@shared/FormFields/FilesInput/Info.tsx
@@ -6,18 +6,22 @@ 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
 
   return (
-    <div className={styles.info}>
-      <h3 className={styles.url}>{file.url}</h3>
+    <div className={`${styles.info}`}>
+      <h3 className={`${styles.url} ${hideUrl ? styles.hideUrl : null}`}>
+        {file.url}
+      </h3>
       <ul>
         <li className={styles.success}>✓ URL confirmed</li>
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx
index bc903c03c..33710a9a4 100644
--- a/src/components/@shared/FormFields/FilesInput/index.tsx
+++ b/src/components/@shared/FormFields/FilesInput/index.tsx
@@ -3,7 +3,7 @@ import { useField, useFormikContext } from 'formik'
 import FileInfo from './Info'
 import UrlInput from '../URLInput'
 import { InputProps } from '@shared/FormInput'
-import { getFileUrlInfo } from '@utils/provider'
+import { getFileDidInfo, getFileUrlInfo } from '@utils/provider'
 import { FormPublishData } from 'src/components/Publish/_types'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
@@ -11,6 +11,7 @@ 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()
 
@@ -50,13 +51,29 @@ export default function FilesInput(props: InputProps): ReactElement {
   useEffect(() => {
     if (field.name === 'links' && asset?.metadata?.links) {
       handleValidation(null, asset.metadata.links[0])
+    } else if (field.name === 'files' && asset?.metadata?.links) {
+      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: 'oceanprotocol.com/placeholder', ...fileDidInfo[0] }
+        ])
+      })
     }
   }, [])
 
   return (
     <>
       {field?.value?.[0]?.valid === true ? (
-        <FileInfo file={field.value[0]} handleClose={handleClose} />
+        <FileInfo
+          hideUrl={hideUrl}
+          file={field.value[0]}
+          handleClose={handleClose}
+        />
       ) : (
         <UrlInput
           submitText="Validate"