WIP enforce docker container

content/publish/form.json

@@ -55,15 +55,16 @@
       {
         "name": "dockerImageCustom",
         "label": "Docker Image URL",
-        "placeholder": "e.g. oceanprotocol/algo_dockers or https://example.com/image_path",
+        "placeholder": "e.g. oceanprotocol/algo_dockers:latest or https://example.com/image_path:image_tag",
-        "help": "Provide the name of a public Docker image or the full url if you have it hosted in a 3rd party repo",
+        "help": "Provide the name and the tag of a public Docker hub image or the full url if you have it hosted in a 3rd party repo",
+        "type": "container",
         "required": true
       },
       {
-        "name": "dockerImageCustomTag",
+        "name": "dockerImageChecksum",
-        "label": "Docker Image Tag",
+        "label": "Docker container checksum",
-        "placeholder": "e.g. latest",
+        "placeholder": "e.g. sha256:xiXqb7Vet0FbN9q0GFMgUdi5C22wjJT0i2G6lYKC2jl6QxkKzVz7KaPDgqfTMjNF",
-        "help": "Provide the tag for your Docker image.",
+        "help": "Provide the checksum of your docker container image.",
         "required": true
       },
       {

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

@@ -0,0 +1,98 @@
+import React, { ReactElement, useState } from 'react'
+import { useField, useFormikContext } from 'formik'
+import UrlInput from '../URLInput'
+import { InputProps } from '@shared/FormInput'
+import { FormPublishData } from 'src/components/Publish/_types'
+import { LoggerInstance } from '@oceanprotocol/lib'
+import { toast } from 'react-toastify'
+import axios from 'axios'
+import isUrl from 'is-url-superb'
+
+export default function FilesInput(props: InputProps): ReactElement {
+  const [field, meta, helpers] = useField(props.name)
+  const [isLoading, setIsLoading] = useState(false)
+  const { values, setFieldError } = useFormikContext<FormPublishData>()
+
+  async function getContainerChecksum(
+    image: string,
+    tag: string
+  ): Promise<string> {
+    try {
+      const response = await axios.post(
+        `https://dockerhub-proxy.oceanprotocol.com`,
+        {
+          image,
+          tag
+        }
+      )
+      if (
+        !response ||
+        response.status !== 200 ||
+        response.data.status !== 'success'
+      ) {
+        toast.error(
+          'Could not fetch docker hub image info. Please input the container checksum manually'
+        )
+        return null
+      }
+      return response.data.result.checksum
+    } catch (error) {
+      LoggerInstance.error(error.message)
+      toast.error(
+        'Could not fetch docker hub image info. Please input the container checksum manually'
+      )
+      return null
+    }
+  }
+
+  async function handleValidation(e: React.SyntheticEvent, container: string) {
+    e.preventDefault()
+    try {
+      console.log('isUrl(container)', isUrl(container))
+      setIsLoading(true)
+      if (!isUrl(container, { lenient: false })) {
+        const parsedContainerValue = container.split(':')
+        const checksum = await getContainerChecksum(
+          parsedContainerValue[0],
+          parsedContainerValue[1]
+        )
+        values.metadata.dockerImageCustom = parsedContainerValue[0]
+        values.metadata.dockerImageCustomTag = parsedContainerValue[1]
+        if (checksum) {
+          values.metadata.dockerImageCustomChecksum = checksum
+        }
+      } else {
+        console.log('open input modal')
+      }
+    } catch (error) {
+      setFieldError(`${field.name}[0].url`, error.message)
+      LoggerInstance.error(error.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  function handleClose() {
+    helpers.setValue(meta.initialValue)
+    helpers.setTouched(false)
+  }
+
+  return (
+    <>
+      <UrlInput
+        submitText="Check"
+        {...props}
+        name={`${field.name}[0].url`}
+        checkUrl={false}
+        isLoading={isLoading}
+        handleButtonClick={handleValidation}
+      />
+
+      {/* {field?.value?.[0]?.valid === true ? (
+        <FileInfo file={field.value[0]} handleClose={handleClose} />
+      ) : (
+       
+      )} */}
+    </>
+  )
+}

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

@@ -12,12 +12,14 @@ export default function URLInput({
   handleButtonClick,
   isLoading,
   name,
+  checkUrl,
   ...props
 }: {
   submitText: string
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
   name: string
+  checkUrl?: boolean
 }): ReactElement {
   const [field, meta] = useField(name)
   const [isButtonDisabled, setIsButtonDisabled] = useState(true)
@@ -28,7 +30,7 @@ export default function URLInput({
     setIsButtonDisabled(
       !field?.value ||
         field.value === '' ||
-        !isUrl(field.value) ||
+        (checkUrl && !isUrl(field.value)) ||
         field.value.includes('javascript:') ||
         meta?.error
     )

src/components/@shared/FormInput/InputElement.tsx

@@ -11,6 +11,7 @@ import AssetSelection, {
 } from '../FormFields/AssetSelection'
 import Nft from '../FormFields/Nft'
 import InputRadio from './InputRadio'
+import ContainerInput from '@shared/FormFields/ContainerInput'
 
 const cx = classNames.bind(styles)
 
@@ -107,6 +108,8 @@ export default function InputElement({
       )
     case 'files':
       return <FilesInput {...field} {...props} />
+    case 'container':
+      return <ContainerInput {...field} {...props} />
     case 'providerUrl':
       return <CustomProvider {...field} {...props} />
     case 'nft':

src/components/Publish/Metadata/index.tsx

@@ -124,11 +124,12 @@ export default function MetadataFields(): ReactElement {
               />
               <Field
                 {...getFieldContent(
-                  'dockerImageCustomTag',
+                  'dockerImageChecksum',
                   content.metadata.fields
                 )}
                 component={Input}
-                name="metadata.dockerImageCustomTag"
+                name="metadata.dockerImageCustomChecksum"
+                disabled
               />
               <Field
                 {...getFieldContent(