refactor all the URL inputs

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

@@ -38,3 +38,7 @@
   color: var(--font-color-text);
   background-color: transparent;
 }
+
+.info li.success {
+  color: var(--brand-alert-green);
+}

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

@@ -1,37 +1,25 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import { prettySize } from './utils'
 import cleanupContentType from '@utils/cleanupContentType'
 import styles from './Info.module.css'
-import { useField, useFormikContext } from 'formik'
 import { FileMetadata } from '@utils/provider'
 
 export default function FileInfo({
-  name,
-  file
+  file,
+  handleClose
 }: {
-  name: string
   file: FileMetadata
+  handleClose(): void
 }): ReactElement {
-  const { validateField } = useFormikContext()
-  const [field, meta, helpers] = useField(name)
-
-  // On mount, validate the field manually
-  useEffect(() => {
-    validateField(name)
-  }, [name, validateField])
-
   return (
     <div className={styles.info}>
       <h3 className={styles.url}>{(file as any).url}</h3>
       <ul>
-        <li>URL confirmed</li>
+        <li className={styles.success}>✓ URL confirmed</li>
         {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
         {file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
       </ul>
-      <button
-        className={styles.removeButton}
-        onClick={() => helpers.setValue(undefined)}
-      >
+      <button className={styles.removeButton} onClick={handleClose}>
         &times;
       </button>
     </div>

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

@@ -8,6 +8,7 @@ import { getFileInfo } from '@utils/provider'
 import { useWeb3 } from '@context/Web3'
 import { getOceanConfig } from '@utils/ocean'
 import { useCancelToken } from '@hooks/useCancelToken'
+import { initialValues } from 'src/components/Publish/_constants'
 
 export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
@@ -44,17 +45,23 @@ export default function FilesInput(props: InputProps): ReactElement {
     loadFileInfo(url)
   }
 
+  function handleClose() {
+    helpers.setValue(initialValues.services[0].files)
+    helpers.setTouched(false)
+  }
+
   return (
     <>
-      {field?.value && field.value[0].url !== '' && field.value[0].valid ? (
-        <FileInfo name={props.name} file={field.value[0]} />
+      {field?.value?.length &&
+      field.value[0].url !== '' &&
+      field.value[0].valid ? (
+        <FileInfo file={field.value[0]} handleClose={handleClose} />
       ) : (
         <UrlInput
-          submitText="Add File"
+          submitText="Validate"
           {...props}
-          {...field}
-          name={`${props.name}[0].url`}
-          value={field?.value && field.value[0].url}
+          name={`${field.name}[0].url`}
+          hasError={Boolean(meta.touched && meta.error)}
           isLoading={isLoading}
           handleButtonClick={handleButtonClick}
         />

src/components/@shared/FormFields/Provider/index.module.css

@@ -0,0 +1,9 @@
+.error {
+  composes: error from '@shared/FormInput/index.module.css';
+}
+
+.restore {
+  font-family: var(--font-family-base);
+  text-transform: none;
+  font-weight: var(--font-weight-base);
+}

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

@@ -1,13 +1,16 @@
 import React, { ReactElement, useState } from 'react'
-import { useField } from 'formik'
+import { ErrorMessage, useField } from 'formik'
 import UrlInput from '../URLInput'
 import { useOcean } from '@context/Ocean'
 import { InputProps } from '@shared/FormInput'
+import FileInfo from '../FilesInput/Info'
+import styles from './index.module.css'
+import Button from '@shared/atoms/Button'
+import { initialValues } from 'src/components/Publish/_constants'
 
 export default function CustomProvider(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
-  const [isValid, setIsValid] = useState(false)
   const { ocean, config } = useOcean()
 
   async function validateProvider(url: string) {
@@ -16,31 +19,60 @@ export default function CustomProvider(props: InputProps): ReactElement {
     try {
       // TODO: #948 Remove ocean.provider.isValidProvider dependency.
       const isValid = await ocean.provider.isValidProvider(url)
-      setIsValid(isValid)
+      helpers.setValue({ url, valid: isValid })
       helpers.setError(undefined)
     } catch (error) {
-      setIsValid(false)
       helpers.setError(
-        'Could not validate provider. Please check URL and try again'
+        'Could not validate provider. Please check URL and try again.'
       )
     } finally {
       setIsLoading(false)
     }
   }
 
-  async function handleButtonClick(e: React.SyntheticEvent, url: string) {
+  async function handleValidateButtonClick(
+    e: React.SyntheticEvent,
+    url: string
+  ) {
     e.preventDefault()
     validateProvider(url)
   }
 
-  return (
+  function handleFileInfoClose() {
+    helpers.setValue({ url: '', valid: false })
+    helpers.setTouched(false)
+  }
+
+  function handleRestore(e: React.SyntheticEvent) {
+    e.preventDefault()
+    helpers.setValue(initialValues.services[0].providerUrl)
+  }
+
+  return field?.value?.valid ? (
+    <FileInfo file={field.value} handleClose={handleFileInfoClose} />
+  ) : (
+    <>
       <UrlInput
         submitText="Validate"
-      isValid={isValid}
         {...props}
-      {...field}
+        name={`${field.name}.url`}
+        hasError={Boolean(meta.touched && meta.error)}
         isLoading={isLoading}
-      handleButtonClick={handleButtonClick}
+        handleButtonClick={handleValidateButtonClick}
       />
+      <Button
+        style="text"
+        size="small"
+        onClick={handleRestore}
+        className={styles.restore}
+      >
+        Use Default Provider
+      </Button>
+      {typeof meta.error === 'string' && meta.touched && meta.error && (
+        <div className={styles.error}>
+          <ErrorMessage name={field.name} />
+        </div>
+      )}
+    </>
   )
 }

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

@@ -11,39 +11,30 @@ export default function URLInput({
   handleButtonClick,
   isLoading,
   name,
-  value,
-  isValid,
+  hasError,
   ...props
 }: {
   submitText: string
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
   name: string
-  value: string
-  isValid?: boolean
+  hasError: boolean
 }): ReactElement {
   const [field, meta] = useField(name)
-  const isButtonDisabled =
-    !field.value || field.value.length === 0 || field.value === ''
+  const isButtonDisabled = !field?.value || field.value === ''
 
   return (
     <>
       <InputGroup>
         <InputElement
           className={`${styles.input} ${
-            meta.touched && meta.error ? styles.hasError : ''
+            !isLoading && hasError ? styles.hasError : ''
           }`}
           {...props}
-          name={name}
-          value={value}
+          {...field}
           type="url"
         />
 
-        {isValid ? (
-          <Button size="small" disabled className={styles.success}>
-            ✓ Valid
-          </Button>
-        ) : (
         <Button
           style="primary"
           size="small"
@@ -55,7 +46,6 @@ export default function URLInput({
         >
           {isLoading ? <Loader /> : submitText}
         </Button>
-        )}
       </InputGroup>
 
       {meta.touched && meta.error && (

src/components/Publish/Services/index.tsx

@@ -54,8 +54,8 @@ export default function ServicesFields(): ReactElement {
     if (!values?.user?.chainId) return
 
     const config = getOceanConfig(values.user.chainId)
-    config && setFieldValue('services[0].providerUrl', config.providerUri)
-    setTouched({ services: [{ providerUrl: true }] })
+    config && setFieldValue('services[0].providerUrl.url', config.providerUri)
+    setTouched({ services: [{ providerUrl: { url: true } }] })
   }, [values.user.chainId, setFieldValue, setTouched])
 
   return (

src/components/Publish/_constants.tsx

@@ -62,7 +62,10 @@ export const initialValues: FormPublishData = {
       dataTokenOptions: { name: '', symbol: '' },
       timeout: '',
       access: '',
-      providerUrl: 'https://provider.mainnet.oceanprotocol.com'
+      providerUrl: {
+        url: 'https://provider.mainnet.oceanprotocol.com',
+        valid: true
+      }
     }
   ],
   pricing: {

src/components/Publish/_types.ts

@@ -15,7 +15,7 @@ export interface FormPublishService {
   timeout: string
   dataTokenOptions: DataTokenOptions
   access: 'Download' | 'Compute' | string
-  providerUrl?: string
+  providerUrl?: { url: string; valid: boolean }
   algorithmPrivacy?: boolean
 }
 

src/components/Publish/_validation.ts

@@ -22,7 +22,7 @@ const validationService = {
   files: Yup.array<{ url: string; valid: boolean }[]>()
     .of(
       Yup.object().shape({
-        url: Yup.string().required('Required'),
+        url: Yup.string().url('Must be a valid URL.').required('Required'),
         valid: Yup.boolean().isTrue().required('File must be valid.')
       })
     )
@@ -31,7 +31,7 @@ const validationService = {
   links: Yup.array<{ url: string; valid: boolean }[]>()
     .of(
       Yup.object().shape({
-        url: Yup.string(),
+        url: Yup.string().url('Must be a valid URL.'),
         // TODO: require valid file only when URL is given
         valid: Yup.boolean()
         // valid: Yup.boolean().isTrue('File must be valid.')
@@ -46,7 +46,10 @@ const validationService = {
   access: Yup.string()
     .matches(/compute|download/g)
     .required('Required'),
-  providerUrl: Yup.string().url().required('Required')
+  providerUrl: Yup.object().shape({
+    url: Yup.string().url('Must be a valid URL.').required('Required'),
+    valid: Yup.boolean().isTrue().required('Valid Provider is required.')
+  })
 }
 
 const validationPricing = {