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 (
-
-
{file.url}
+
+
+ {file.url}
+
- ✓ URL confirmed
{file.contentLength && - {prettySize(+file.contentLength)}
}
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()
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 ? (
-
+
) : (