more ui touches

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

@@ -21,7 +21,11 @@
   color: var(--brand-alert-green);
 }
 
-.url {
+.info li.error {
+  color: var(--brand-alert-red);
+}
+
+.contianer {
   margin: 0;
   font-size: var(--font-size-base);
   line-height: var(--line-height);
@@ -31,11 +35,6 @@
   padding-right: calc(var(--spacer) / 2);
 }
 
-.warning {
-  margin-top: calc(var(--spacer) / 3);
-  margin-left: 0;
-}
-
 .removeButton {
   cursor: pointer;
   border: none;

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

@@ -4,17 +4,22 @@ import styles from './Info.module.css'
 export default function ImageInfo({
   image,
   tag,
+  valid,
   handleClose
 }: {
   image: string
   tag: string
+  valid: boolean
   handleClose(): void
 }): ReactElement {
+  const displayText = valid
+    ? '✓ Image found, container checksum automatically added!'
+    : 'x Container checksum could not be fetched automatically, please add it manually'
   return (
     <div className={styles.info}>
-      <h3 className={styles.url}>{`${image}:${tag}`}</h3>
+      <h3 className={styles.contianer}>{`Image: ${image} Tag: ${tag}`}</h3>
       <ul>
-        <li className={styles.success}>✓ Image found</li>
+        <li className={valid ? styles.success : styles.error}>{displayText}</li>
       </ul>
       <button className={styles.removeButton} onClick={handleClose}>
         &times;

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

@@ -4,9 +4,6 @@ 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'
 import ImageInfo from './Info'
 import { getContainerChecksum } from '@utils/docker'
 
@@ -14,26 +11,26 @@ export default function ContainerInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
   const [isValid, setIsValid] = useState(false)
+  const [checked, setChecked] = useState(false)
   const { values, setFieldError, setFieldValue } =
     useFormikContext<FormPublishData>()
 
   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 parsedContainerValue = container.split(':')
+      const imageNname = parsedContainerValue?.slice(0, -1).join(':')
-        const image = parsedContainerValue[0]
+      const tag =
-        const tag = parsedContainerValue[1]
+        parsedContainerValue.length > 1 ? parsedContainerValue?.at(-1) : ''
-        const checksum = await getContainerChecksum(image, tag)
+      setFieldValue('metadata.dockerImageCustom', imageNname)
-        setFieldValue('metadata.dockerImageCustom', image)
+      setFieldValue('metadata.dockerImageCustomTag', tag)
-        setFieldValue('metadata.dockerImageCustomTag', tag)
+      const checksum = await getContainerChecksum(imageNname, tag)
-        if (checksum) {
+      if (checksum) {
-          setFieldValue('metadata.dockerImageCustomChecksum', checksum)
+        setFieldValue('metadata.dockerImageCustomChecksum', checksum)
-          setIsValid(true)
+        setIsValid(true)
-        }
       }
+      setChecked(true)
     } catch (error) {
       setFieldError(`${field.name}[0].url`, error.message)
       LoggerInstance.error(error.message)
@@ -46,16 +43,18 @@ export default function ContainerInput(props: InputProps): ReactElement {
     setFieldValue('metadata.dockerImageCustom', '')
     setFieldValue('metadata.dockerImageCustomTag', '')
     setFieldValue('metadata.dockerImageCustomChecksum', '')
+    setChecked(false)
     setIsValid(false)
     helpers.setTouched(false)
   }
 
   return (
     <>
-      {isValid ? (
+      {checked ? (
         <ImageInfo
           image={values.metadata.dockerImageCustom}
           tag={values.metadata.dockerImageCustomTag}
+          valid={isValid}
           handleClose={handleClose}
         />
       ) : (

src/components/Publish/Metadata/index.tsx

@@ -129,7 +129,6 @@ export default function MetadataFields(): ReactElement {
                 )}
                 component={Input}
                 name="metadata.dockerImageCustomChecksum"
-                disabled
               />
               <Field
                 {...getFieldContent(

src/components/Publish/_utils.ts

@@ -42,7 +42,6 @@ async function getAlgorithmContainerPreset(
     (preset) => `${preset.image}:${preset.tag}` === dockerImage
   )
   preset.checksum = await getContainerChecksum(preset.image, preset.tag)
-  console.log('preset')
   return preset
 }