From 287979df8be57705b5d3906d9cba80d98b452d91 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Thu, 16 Mar 2023 12:15:19 +0100
Subject: [PATCH 001/113] feat: add consumer parameters to publish

---
 content/publish/form.json                     |  69 ++++++++
 .../InputElement/ConsumerParameters/index.tsx | 155 ++++++++++++++++++
 .../@shared/FormInput/InputElement/index.tsx  |   4 +
 .../Publish/Customization/index.tsx           |  26 +++
 .../Publish/Navigation/index.module.css       |   2 +-
 src/components/Publish/_constants.tsx         |  13 +-
 src/components/Publish/_types.ts              |  28 +++-
 7 files changed, 292 insertions(+), 5 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
 create mode 100644 src/components/Publish/Customization/index.tsx

diff --git a/content/publish/form.json b/content/publish/form.json
index 6738fc12b0..52a0154446 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -258,6 +258,75 @@
       }
     ]
   },
+  "customization": {
+    "title": "Customization",
+    "fields": [
+      {
+        "name": "consumerParameters",
+        "label": "Consumer Parameters",
+        "help": "Define consumer parameters to be submitted to the algortihm before usage.",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder_value": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder_value": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder_value": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Parameter Required",
+            "type": "checkbox",
+            "options": ["is required"],
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select", "multiselect"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder_value": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "required": true,
+            "placeholder_value": "user input"
+          }
+        ]
+      },
+      {
+        "name": "userdata",
+        "label": "User Data"
+      }
+    ]
+  },
   "pricing": {
     "title": "Pricing",
     "fields": [
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
new file mode 100644
index 0000000000..aadf5c17b0
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -0,0 +1,155 @@
+import { Field, useField } from 'formik'
+import React, { ReactElement, useEffect, useState } from 'react'
+import CreatableSelect from 'react-select/creatable'
+import Input, { InputProps } from '../..'
+import { AlgorithmConsumerParameter } from '../../../../Publish/_types'
+import Button from '../../../atoms/Button'
+import Tabs from '../../../atoms/Tabs'
+import creatableSelectStyles from '../TagsAutoComplete/index.module.css'
+
+const defaultParam: AlgorithmConsumerParameter = {
+  name: 'parameter',
+  label: 'Label',
+  type: 'text',
+  default: '',
+  required: false,
+  description: 'Description',
+  options: []
+}
+
+export const paramTypes: AlgorithmConsumerParameter['type'][] = [
+  'number',
+  'text',
+  'boolean',
+  'multiselect',
+  'select'
+]
+
+export function ConsumerParameters(props: InputProps): ReactElement {
+  const [showOptions, setShowOptions] = useState([])
+
+  const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
+    props.name
+  )
+
+  const addParameter = () => {
+    helpers.setValue([...field.value, defaultParam])
+    setShowOptions([...showOptions, false])
+  }
+
+  const deleteParameter = (index: number) => {
+    helpers.setValue(field.value.filter((p, i) => i !== index))
+    setShowOptions(showOptions.splice(index, 1))
+  }
+
+  return (
+    <div>
+      <Button
+        style="primary"
+        type="button"
+        size="small"
+        onClick={() => {
+          addParameter()
+        }}
+      >
+        Add parameter
+      </Button>
+      <Tabs
+        items={field.value.map((param, index) => {
+          return {
+            title: param.name,
+            content: (
+              <div>
+                {props.fields?.map((subField) => {
+                  if (subField.name === 'options') {
+                    return field.value[index]?.type?.includes('select') ? (
+                      <Field
+                        {...subField}
+                        component={CreatableSelect}
+                        name={`${field.name}[${index}].options`}
+                        components={{
+                          DropdownIndicator: () => null,
+                          IndicatorSeparator: () => null
+                        }}
+                        className={creatableSelectStyles.select}
+                        hideSelectedOptions
+                        isMulti
+                        isClearable={false}
+                        noOptionsMessage={() =>
+                          'Start typing to create options for the user to select.'
+                        }
+                        defaultValue={field.value[index]?.options?.map((o) => ({
+                          value: o,
+                          label: o
+                        }))}
+                        onChange={(value) =>
+                          helpers.setValue([
+                            ...field.value.map((p, i) => {
+                              if (i !== index) return p
+
+                              return {
+                                ...p,
+                                options: value.map((v) => v.value)
+                              }
+                            })
+                          ])
+                        }
+                        theme={(theme) => ({
+                          ...theme,
+                          colors: {
+                            ...theme.colors,
+                            primary25: 'var(--border-color)'
+                          }
+                        })}
+                      />
+                    ) : (
+                      <></>
+                    )
+                  }
+
+                  if (subField.name === 'default') {
+                    return (
+                      <Field
+                        {...subField}
+                        component={Input}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        key={`${field.name}[${index}].${subField.name}`}
+                        type={
+                          field.value[index].type.includes('select')
+                            ? 'select'
+                            : field.value[index].type
+                        }
+                        multiple={field.value[index].type === 'multiselect'}
+                        options={field.value[index].options}
+                      />
+                    )
+                  }
+
+                  return (
+                    <Field
+                      {...subField}
+                      component={Input}
+                      name={`${field.name}[${index}].${subField.name}`}
+                      key={`${field.name}[${index}].${subField.name}`}
+                    />
+                  )
+                })}
+
+                <Button
+                  style="primary"
+                  type="button"
+                  size="small"
+                  onClick={() => {
+                    deleteParameter(index)
+                  }}
+                >
+                  Delete parameter
+                </Button>
+              </div>
+            )
+          }
+        })}
+      />
+    </div>
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/index.tsx b/src/components/@shared/FormInput/InputElement/index.tsx
index c21e29ba77..a803015e27 100644
--- a/src/components/@shared/FormInput/InputElement/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/index.tsx
@@ -16,6 +16,7 @@ import TabsFile from '@shared/atoms/TabsFile'
 import useDarkMode from '@oceanprotocol/use-dark-mode'
 import appConfig from '../../../../../app.config'
 import { extensions, oceanTheme } from '@utils/codemirror'
+import { ConsumerParameters } from './ConsumerParameters'
 
 const cx = classNames.bind(styles)
 
@@ -130,6 +131,9 @@ export default function InputElement({
         />
       )
 
+    case 'consumerParameters':
+      return <ConsumerParameters {...field} form={form} {...props} />
+
     case 'textarea':
       return <textarea id={props.name} className={styles.textarea} {...props} />
 
diff --git a/src/components/Publish/Customization/index.tsx b/src/components/Publish/Customization/index.tsx
new file mode 100644
index 0000000000..78b1727c2c
--- /dev/null
+++ b/src/components/Publish/Customization/index.tsx
@@ -0,0 +1,26 @@
+import { Field } from 'formik'
+import React, { ReactElement, useState } from 'react'
+import { getFieldContent } from '../../../@utils/form'
+import content from '../../../../content/publish/form.json'
+import Input from '../../@shared/FormInput'
+
+export default function CustomizationFields(): ReactElement {
+  const [showAlgorigthmConsumerParams, setShowAlgorigthmConsumerParams] =
+    useState(false)
+
+  return (
+    <>
+      <Field
+        {...getFieldContent('consumerParameters', content.customization.fields)}
+        component={Input}
+        name="metadata.consumerParameters"
+      />
+
+      <Field
+        {...getFieldContent('userdata', content.customization.fields)}
+        component={Input}
+        name="services[0].files[0].userdata"
+      />
+    </>
+  )
+}
diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css
index 10ba16333b..dc6391ac78 100644
--- a/src/components/Publish/Navigation/index.module.css
+++ b/src/components/Publish/Navigation/index.module.css
@@ -39,7 +39,7 @@
   cursor: pointer;
   display: inline-block;
   margin: 0 var(--spacer);
-  padding: 0 calc(var(--spacer) / 2);
+  padding: 0 calc(var(--spacer) / 4);
   counter-increment: list-number;
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 73d01705e6..d42caf8518 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -14,6 +14,7 @@ import Preview from './Preview'
 import Submission from './Submission'
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
 import contentFeedback from '../../../content/publish/feedback.json'
+import CustomizationFields from './Customization'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -28,16 +29,21 @@ export const wizardSteps: StepContent[] = [
   },
   {
     step: 3,
+    title: content.customization.title,
+    component: <CustomizationFields />
+  },
+  {
+    step: 4,
     title: content.pricing.title,
     component: <PricingFields />
   },
   {
-    step: 4,
+    step: 5,
     title: content.preview.title,
     component: <Preview />
   },
   {
-    step: 5,
+    step: 6,
     title: content.submission.title,
     component: <Submission />
   }
@@ -68,7 +74,8 @@ export const initialValues: FormPublishData = {
     dockerImage: '',
     dockerImageCustom: '',
     dockerImageCustomTag: '',
-    dockerImageCustomEntrypoint: ''
+    dockerImageCustomEntrypoint: '',
+    consumerParameters: []
   },
   services: [
     {
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 37bcf609c3..bba49e1e43 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -1,4 +1,8 @@
-import { FileInfo, ServiceComputeOptions } from '@oceanprotocol/lib'
+import {
+  FileInfo,
+  MetadataAlgorithm,
+  ServiceComputeOptions
+} from '@oceanprotocol/lib'
 import { NftMetadata } from '@utils/nft'
 import { ReactElement } from 'react'
 export interface FormPublishService {
@@ -32,6 +36,7 @@ export interface FormPublishData {
     dockerImageCustomTag?: string
     dockerImageCustomEntrypoint?: string
     dockerImageCustomChecksum?: string
+    consumerParameters?: AlgorithmConsumerParameter[]
   }
   services: FormPublishService[]
   pricing: PricePublishOptions
@@ -61,3 +66,24 @@ export interface MetadataAlgorithmContainer {
   tag: string
   checksum: string
 }
+
+export type AlgorithmConsumerParameterType =
+  | 'number'
+  | 'text'
+  | 'boolean'
+  | 'select'
+  | 'multiselect'
+
+export interface AlgorithmConsumerParameter {
+  name: string
+  type: AlgorithmConsumerParameterType
+  label: string
+  required: boolean
+  description: string
+  default: string | boolean | number
+  options?: string[]
+}
+
+export type MetadataAlgorithmExtended = MetadataAlgorithm & {
+  consumerParameters: AlgorithmConsumerParameter[]
+}

From 51417894eedb03dcfafcf6c21e40483b33c7acf0 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Thu, 16 Mar 2023 12:15:42 +0100
Subject: [PATCH 002/113] fix: publish form validation

---
 src/@utils/index.ts                        | 24 ++++++++++++
 src/components/@shared/FormInput/index.tsx | 45 ++++++++++++----------
 src/components/Publish/_validation.ts      | 45 ++++++++++++++++++++--
 3 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/src/@utils/index.ts b/src/@utils/index.ts
index 9d3e5f2af8..293d88d996 100644
--- a/src/@utils/index.ts
+++ b/src/@utils/index.ts
@@ -17,3 +17,27 @@ export function sortAssets(items: Asset[], sorted: string[]) {
   })
   return items
 }
+
+export const isObjectLike = (object: any) => {
+  return object !== null && typeof object === 'object' && !Array.isArray(object)
+}
+
+export const getObjectPropertyByPath = (object: any, path = '') => {
+  if (!isObjectLike(object)) return object
+  path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  path = path.replace(/^\./, '') // strip a leading dot
+  const pathArray = path.split('.')
+  for (let i = 0, n = pathArray.length; i < n; ++i) {
+    const key = pathArray[i]
+    try {
+      if (key in object) {
+        object = object[key]
+      } else {
+        return
+      }
+    } catch {
+      return object
+    }
+  }
+  return object
+}
diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 9f9a0b4dd2..62f7c90a1f 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -10,7 +10,7 @@ import React, {
 import InputElement from './InputElement'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage, FieldInputProps } from 'formik'
+import { ErrorMessage, FieldInputProps, useField } from 'formik'
 import classNames from 'classnames/bind'
 import Disclaimer from './Disclaimer'
 import Tooltip from '@shared/atoms/Tooltip'
@@ -18,6 +18,7 @@ import Markdown from '@shared/Markdown'
 import FormHelp from './Help'
 import { AssetSelectionAsset } from '@shared/FormInput/InputElement/AssetSelection'
 import { BoxSelectionOption } from '@shared/FormInput/InputElement/BoxSelection'
+import { getObjectPropertyByPath } from '../../../@utils'
 
 const cx = classNames.bind(styles)
 
@@ -71,21 +72,26 @@ export interface InputProps {
   disclaimerValues?: string[]
 }
 
-function checkError(
-  form: any,
-  parsedFieldName: string[],
-  field: FieldInputProps<any>
-) {
-  if (
-    (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
-      form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
-    (form?.touched[field?.name] &&
-      form?.errors[field?.name] &&
-      field.name !== 'files' &&
-      field.name !== 'links')
-  ) {
-    return true
-  }
+function checkError(form: any, field: FieldInputProps<any>) {
+  const touched = getObjectPropertyByPath(form?.touched, field?.name)
+  const errors = getObjectPropertyByPath(form?.errors, field?.name)
+
+  return (
+    touched &&
+    errors &&
+    !field.name.endsWith('.files') &&
+    !field.name.endsWith('.links') &&
+    !field.name.endsWith('.consumerParameters')
+  )
+
+  // if (
+  //   (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
+  //     form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
+  //   (form?.touched[field?.name] &&
+  //     form?.errors[field?.name]
+  // ) {
+  //   return true
+  // }
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {
@@ -102,13 +108,10 @@ export default function Input(props: Partial<InputProps>): ReactElement {
   } = props
 
   const isFormikField = typeof field !== 'undefined'
-  const isNestedField = field?.name?.includes('.')
   // TODO: this feels hacky as it assumes nested `values` store. But we can't use the
   // `useField()` hook in here to get `meta.error` so we have to match against form?.errors?
   // handling flat and nested data at same time.
-  const parsedFieldName =
-    isFormikField && (isNestedField ? field?.name.split('.') : [field?.name])
-  const hasFormikError = checkError(form, parsedFieldName, field)
+  const hasFormikError = checkError(form, field)
 
   const styleClasses = cx({
     field: true,
@@ -123,7 +126,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
     if (disclaimer && disclaimerValues) {
       setDisclaimerVisible(
         disclaimerValues.includes(
-          props.form?.values[parsedFieldName[0]]?.[parsedFieldName[1]]
+          getObjectPropertyByPath(props.form?.values, field?.name)
         )
       )
     }
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index e3991d1a34..54f5fb47cc 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -1,13 +1,49 @@
+import { FileInfo } from '@oceanprotocol/lib'
 import { MAX_DECIMALS } from '@utils/constants'
-import * as Yup from 'yup'
 import { getMaxDecimalsValidation } from '@utils/numbers'
-import { FileInfo } from '@oceanprotocol/lib'
+import * as Yup from 'yup'
+import { SchemaLike } from 'yup/lib/types'
 import { testLinks } from '../../@utils/yup'
+import { paramTypes } from '../@shared/FormInput/InputElement/ConsumerParameters'
+import { AlgorithmConsumerParameter } from './_types'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
 // hint, hint: https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
 
+const validationConsumerParameters: {
+  [key in keyof AlgorithmConsumerParameter]: SchemaLike
+} = {
+  name: Yup.string()
+    .test('unique', 'Parameter names must be unique', (name, context) => {
+      // TODO: revert any
+      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
+      const [parentFormObj, nextParentFormObj] = (context as any).from
+      const { consumerParameters } = nextParentFormObj.value
+      const occasions = consumerParameters.filter(
+        (params) => params.name === name
+      )
+      return occasions.length === 1
+    })
+    .required('Required'),
+  type: Yup.string().oneOf(paramTypes).required('Required'),
+  description: Yup.string().required('Required'),
+  label: Yup.string().required('Required'),
+  required: Yup.boolean().required('Required'),
+  default: Yup.mixed().when('type', {
+    is: 'multiselect',
+    then: Yup.array().of(Yup.string()).required(),
+    otherwise: Yup.string().required()
+  }),
+  options: Yup.array().when('type', {
+    is: (value) => ['select', 'multiselect'].includes(value),
+    then: Yup.array()
+      .of(Yup.string())
+      .min(1, 'At least one option needs to be defined')
+      .required('Required')
+  })
+}
+
 const validationMetadata = {
   type: Yup.string()
     .matches(/dataset|algorithm/g, { excludeEmptyString: true })
@@ -26,7 +62,10 @@ const validationMetadata = {
   tags: Yup.array<string[]>().nullable(),
   termsAndConditions: Yup.boolean()
     .required('Required')
-    .isTrue('Please agree to the Terms and Conditions.')
+    .isTrue('Please agree to the Terms and Conditions.'),
+  consumerParameters: Yup.array().of(
+    Yup.object().shape(validationConsumerParameters)
+  )
 }
 
 const validationService = {

From 006ba5bf74dc1b52bade5b51cfcaa080757b579a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 25 Apr 2023 18:39:12 +0200
Subject: [PATCH 003/113] feat: update consumer parameters form

---
 content/publish/form.json | 90 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 89 insertions(+), 1 deletion(-)

diff --git a/content/publish/form.json b/content/publish/form.json
index 52a0154446..a63c18aa7b 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -74,6 +74,72 @@
         "help": "Provide the entrypoint for your algorithm.",
         "required": true
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Consumer parameters",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
+        "type": "checkbox",
+        "options": ["This algorithm uses consumer parameters"],
+        "required": false
+      },
+      {
+        "name": "consumerParameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select", "multiselect"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "required": true,
+            "placeholder": "Define the default value for the current parameter"
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["Parameter Required"],
+            "type": "checkbox",
+            "required": true
+          }
+        ]
+      },
       {
         "name": "termsAndConditions",
         "label": "Terms & Conditions",
@@ -264,7 +330,7 @@
       {
         "name": "consumerParameters",
         "label": "Consumer Parameters",
-        "help": "Define consumer parameters to be submitted to the algortihm before usage.",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
         "type": "consumerParameters",
         "required": false,
         "fields": [
@@ -298,6 +364,28 @@
             "options": ["is required"],
             "required": true
           },
+          {
+            "name": "required",
+            "label": "Parameter Required",
+            "type": "checkbox",
+            "options": ["is required"],
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Parameter Required",
+            "type": "select",
+            "options": ["is required"],
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select", "multiselect"],
+            "required": true
+          },
           {
             "name": "type",
             "label": "Parameter Type",

From 00b81d32dc9784d21854c0d8031784d48891fc67 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 25 Apr 2023 18:39:28 +0200
Subject: [PATCH 004/113] feat: add consumer parameter types

---
 src/components/Publish/_types.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index bba49e1e43..8950ceb782 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -36,6 +36,7 @@ export interface FormPublishData {
     dockerImageCustomTag?: string
     dockerImageCustomEntrypoint?: string
     dockerImageCustomChecksum?: string
+    usesConsumerParameters?: boolean
     consumerParameters?: AlgorithmConsumerParameter[]
   }
   services: FormPublishService[]
@@ -80,8 +81,13 @@ export interface AlgorithmConsumerParameter {
   label: string
   required: boolean
   description: string
-  default: string | boolean | number
-  options?: string[]
+  default:
+    | string
+    | boolean
+    | number
+    | { [key: string]: string }
+    | { [key: string]: string }[]
+  options?: { [key: string]: string }[]
 }
 
 export type MetadataAlgorithmExtended = MetadataAlgorithm & {

From 773c01e00f88be7fd16038ec0d937fb1a0258e92 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 25 Apr 2023 18:39:48 +0200
Subject: [PATCH 005/113] feat: update consumer parameter validation

---
 src/components/Publish/_validation.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 54f5fb47cc..8c0e863ba0 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -19,6 +19,12 @@ const validationConsumerParameters: {
       // TODO: revert any
       // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
       const [parentFormObj, nextParentFormObj] = (context as any).from
+      if (
+        !nextParentFormObj?.value?.consumerParameters ||
+        nextParentFormObj.value.consumerParameters.length === 1
+      )
+        return true
+
       const { consumerParameters } = nextParentFormObj.value
       const occasions = consumerParameters.filter(
         (params) => params.name === name
@@ -38,7 +44,7 @@ const validationConsumerParameters: {
   options: Yup.array().when('type', {
     is: (value) => ['select', 'multiselect'].includes(value),
     then: Yup.array()
-      .of(Yup.string())
+      .of(Yup.object())
       .min(1, 'At least one option needs to be defined')
       .required('Required')
   })
@@ -63,6 +69,7 @@ const validationMetadata = {
   termsAndConditions: Yup.boolean()
     .required('Required')
     .isTrue('Please agree to the Terms and Conditions.'),
+  usesConsumerParameters: Yup.boolean(),
   consumerParameters: Yup.array().of(
     Yup.object().shape(validationConsumerParameters)
   )

From b91409c4e799fc04f4f0ed331cb75dd61810df28 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 25 Apr 2023 18:40:08 +0200
Subject: [PATCH 006/113] feat: add consumer parameters structure

---
 .../InputOptions.module.css                   |  13 +
 .../ConsumerParameters/InputOptions.tsx       | 149 +++++++++++
 .../ConsumerParameters/index.module.css       |  18 ++
 .../InputElement/ConsumerParameters/index.tsx | 251 ++++++++++++------
 .../InputElement/FilesInput/index.tsx         |   1 +
 .../@shared/FormInput/InputElement/index.tsx  |   2 +-
 .../Publish/Customization/index.tsx           |  26 --
 src/components/Publish/Metadata/index.tsx     |  18 ++
 src/components/Publish/_constants.tsx         |  11 +-
 src/components/Publish/_validation.ts         |   2 +-
 10 files changed, 374 insertions(+), 117 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
 delete mode 100644 src/components/Publish/Customization/index.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
new file mode 100644
index 0000000000..273e77f7f7
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
@@ -0,0 +1,13 @@
+.headersContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0 calc(var(--spacer) / 4);
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.headersAddedContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0 calc(var(--spacer) / 4);
+  margin-bottom: calc(var(--spacer) / 2);
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
new file mode 100644
index 0000000000..af51400b25
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
@@ -0,0 +1,149 @@
+import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import InputElement from '..'
+import Label from '../../Label'
+import styles from './InputOptions.module.css'
+import Tooltip from '@shared/atoms/Tooltip'
+import Markdown from '@shared/Markdown'
+import Button from '@shared/atoms/Button'
+import { InputProps } from '@shared/FormInput'
+import { useField } from 'formik'
+
+export interface InputOption {
+  [key: string]: string
+}
+
+export default function InputOptions({
+  optionIndex,
+  ...props
+}: InputProps & { optionIndex: number }): ReactElement {
+  const [field, meta, helpers] = useField(props.name)
+
+  const [currentKey, setCurrentKey] = useState('')
+  const [currentValue, setCurrentValue] = useState('')
+  const [disabledButton, setDisabledButton] = useState(true)
+
+  const [options, setOptions] = useState<InputOption[]>([])
+
+  const addOption = () => {
+    setOptions([
+      ...options,
+      {
+        [currentKey]: currentValue
+      }
+    ])
+    setCurrentKey('')
+    setCurrentValue('')
+  }
+
+  const removeOption = (i: number) => {
+    const newOptions = options.filter(
+      (option, optionIndex) => optionIndex !== i
+    )
+    setOptions(newOptions)
+    setCurrentKey('')
+    setCurrentValue('')
+  }
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    const checkType = e.target.name.search('key')
+    checkType > 0
+      ? setCurrentKey(e.target.value)
+      : setCurrentValue(e.target.value)
+
+    return e
+  }
+
+  useEffect(() => {
+    if (!field?.value || !helpers) return
+    helpers.setValue(
+      field.value.map((p, i) => {
+        if (i !== optionIndex) return p
+
+        return {
+          ...p,
+          options: [...options]
+        }
+      })
+    )
+  }, [options])
+
+  useEffect(() => {
+    setDisabledButton(!currentKey || !currentValue)
+  }, [currentKey, currentValue])
+
+  return (
+    <div>
+      <Label htmlFor={props.name}>
+        {props?.label}
+        {props?.required && (
+          <span title="Required" className={styles.required}>
+            *
+          </span>
+        )}
+        {props?.help && !props?.prominentHelp && (
+          <Tooltip content={<Markdown text={props.help} />} />
+        )}
+      </Label>
+
+      <div className={styles.headersContainer}>
+        <InputElement
+          name={`${name}.key`}
+          placeholder={'key'}
+          value={`${currentKey}`}
+          onChange={handleChange}
+        />
+
+        <InputElement
+          className={`${styles.input}`}
+          name={`${name}.value`}
+          placeholder={'value'}
+          value={`${currentValue}`}
+          onChange={handleChange}
+        />
+
+        <Button
+          style="primary"
+          size="small"
+          onClick={(e: React.SyntheticEvent) => {
+            e.preventDefault()
+            addOption()
+          }}
+          disabled={disabledButton}
+        >
+          add
+        </Button>
+      </div>
+
+      {options.length > 0 &&
+        options.map((option, i) => {
+          return (
+            <div className={styles.headersAddedContainer} key={`option_${i}`}>
+              <InputElement
+                name={`option[${i}].key`}
+                value={Object.keys(option)[0]}
+                disabled
+              />
+
+              <InputElement
+                name={`option[${i}].value`}
+                value={Object.values(option)[0]}
+                disabled
+              />
+
+              <Button
+                style="primary"
+                size="small"
+                onClick={(e: React.SyntheticEvent) => {
+                  e.preventDefault()
+                  removeOption(i)
+                }}
+                disabled={false}
+              >
+                remove
+              </Button>
+            </div>
+          )
+        })}
+    </div>
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
new file mode 100644
index 0000000000..da90954ea3
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -0,0 +1,18 @@
+.container {
+  border: 1px solid var(--border-color);
+}
+
+.select {
+  composes: select from '../TagsAutoComplete/index.module.css';
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.required {
+  composes: required from '../../index.module.css';
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacer);
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index aadf5c17b0..fe0459c996 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,19 +1,24 @@
-import { Field, useField } from 'formik'
-import React, { ReactElement, useEffect, useState } from 'react'
-import CreatableSelect from 'react-select/creatable'
+import { Field, useField, useFormikContext } from 'formik'
+import React, { ReactElement, useEffect } from 'react'
+import Select from 'react-select'
 import Input, { InputProps } from '../..'
-import { AlgorithmConsumerParameter } from '../../../../Publish/_types'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData
+} from '../../../../Publish/_types'
 import Button from '../../../atoms/Button'
 import Tabs from '../../../atoms/Tabs'
-import creatableSelectStyles from '../TagsAutoComplete/index.module.css'
+import styles from './index.module.css'
+import InputOptions from './InputOptions'
+import Label from '../../Label'
 
 const defaultParam: AlgorithmConsumerParameter = {
-  name: 'parameter',
-  label: 'Label',
-  type: 'text',
+  name: '',
+  label: '',
+  type: 'select',
   default: '',
   required: false,
-  description: 'Description',
+  description: '',
   options: []
 }
 
@@ -26,88 +31,153 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const [showOptions, setShowOptions] = useState([])
+  const { errors, setFieldTouched, validateField, touched } =
+    useFormikContext<FormPublishData>()
 
   const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
     props.name
   )
 
-  const addParameter = () => {
+  useEffect(() => {
+    if (field.value.length === 0) helpers.setValue([defaultParam])
+  }, [])
+
+  const addParameter = (index: number) => {
+    // validate parameter before allowing the creation of a new one
+    validateField('metadata.consumerParameters')
+    Object.keys(defaultParam).forEach((param) =>
+      setFieldTouched(`metadata.consumerParameters[${index}].${param}`, true)
+    )
+    console.log(touched, errors)
+    if (errors?.metadata?.consumerParameters) return
+
     helpers.setValue([...field.value, defaultParam])
-    setShowOptions([...showOptions, false])
   }
 
   const deleteParameter = (index: number) => {
     helpers.setValue(field.value.filter((p, i) => i !== index))
-    setShowOptions(showOptions.splice(index, 1))
   }
 
+  const resetOptionsAndDefault = (
+    currentType: AlgorithmConsumerParameter['type'],
+    index: number
+  ) => {
+    if (currentType === 'select' && field.value[index].type === 'multiselect')
+      return
+    if (currentType === 'multiselect' && field.value[index].type === 'select')
+      return
+
+    helpers.setValue(
+      field.value.map((p, i) => {
+        if (i !== index) return p
+
+        return {
+          ...p,
+          options: defaultParam.options,
+          default: defaultParam.default
+        }
+      })
+    )
+  }
+
+  console.log(field)
+
   return (
-    <div>
-      <Button
-        style="primary"
-        type="button"
-        size="small"
-        onClick={() => {
-          addParameter()
-        }}
-      >
-        Add parameter
-      </Button>
+    <div className={styles.container}>
       <Tabs
         items={field.value.map((param, index) => {
           return {
-            title: param.name,
+            title: param?.name || 'New parameter',
             content: (
               <div>
-                {props.fields?.map((subField) => {
+                {props.fields?.map((subField: InputProps) => {
                   if (subField.name === 'options') {
-                    return field.value[index]?.type?.includes('select') ? (
-                      <Field
+                    return ['select', 'multiselect'].includes(
+                      field.value[index]?.type
+                    ) ? (
+                      <InputOptions
                         {...subField}
-                        component={CreatableSelect}
-                        name={`${field.name}[${index}].options`}
-                        components={{
-                          DropdownIndicator: () => null,
-                          IndicatorSeparator: () => null
-                        }}
-                        className={creatableSelectStyles.select}
-                        hideSelectedOptions
-                        isMulti
-                        isClearable={false}
-                        noOptionsMessage={() =>
-                          'Start typing to create options for the user to select.'
-                        }
-                        defaultValue={field.value[index]?.options?.map((o) => ({
-                          value: o,
-                          label: o
-                        }))}
-                        onChange={(value) =>
-                          helpers.setValue([
-                            ...field.value.map((p, i) => {
-                              if (i !== index) return p
-
-                              return {
-                                ...p,
-                                options: value.map((v) => v.value)
-                              }
-                            })
-                          ])
-                        }
-                        theme={(theme) => ({
-                          ...theme,
-                          colors: {
-                            ...theme.colors,
-                            primary25: 'var(--border-color)'
-                          }
-                        })}
+                        key={`${field.name}[${index}].${subField.name}`}
+                        name="metadata.consumerParameters"
+                        label="Options"
+                        required
+                        optionIndex={index}
                       />
-                    ) : (
-                      <></>
-                    )
+                    ) : null
                   }
 
                   if (subField.name === 'default') {
+                    if (
+                      ['select', 'multiselect'].includes(
+                        field.value[index]?.type
+                      )
+                    )
+                      return (
+                        <div key={`${field.name}[${index}].${subField.name}`}>
+                          <Label htmlFor={subField.name}>
+                            {subField?.label}
+                            {subField?.required && (
+                              <span
+                                title="Required"
+                                className={styles.required}
+                              >
+                                *
+                              </span>
+                            )}
+                          </Label>
+                          <Field
+                            {...subField}
+                            label="Options"
+                            component={Select}
+                            name={`${field.name}[${index}].options`}
+                            key={`${field.name}[${index}].${subField.name}`}
+                            components={{
+                              DropdownIndicator: () => null,
+                              IndicatorSeparator: () => null
+                            }}
+                            className={styles.select}
+                            hideSelectedOptions
+                            isMulti={field.value[index]?.type === 'multiselect'}
+                            isClearable
+                            noOptionsMessage={() => 'No options available'}
+                            options={field.value[index]?.options?.map(
+                              (option) => {
+                                const values = Object.entries(option)
+                                return {
+                                  value: values[0][0],
+                                  label: values[0][1]
+                                }
+                              }
+                            )}
+                            onChange={(option) => {
+                              helpers.setValue(
+                                field.value.map((p, i) => {
+                                  if (i !== index) return p
+
+                                  return {
+                                    ...p,
+                                    default: !option
+                                      ? undefined
+                                      : field.value[index]?.type === 'select'
+                                      ? { [option.value]: option.label }
+                                      : option.map((v) => ({
+                                          [v.value]: v.label
+                                        }))
+                                  }
+                                })
+                              )
+                            }}
+                            theme={(theme) => ({
+                              ...theme,
+                              colors: {
+                                ...theme.colors,
+                                primary25: 'var(--border-color)'
+                              }
+                            })}
+                          />
+                        </div>
+                      )
+
                     return (
                       <Field
                         {...subField}
@@ -115,12 +185,15 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                         name={`${field.name}[${index}].${subField.name}`}
                         key={`${field.name}[${index}].${subField.name}`}
                         type={
-                          field.value[index].type.includes('select')
+                          field.value[index].type.includes('boolean')
                             ? 'select'
                             : field.value[index].type
                         }
-                        multiple={field.value[index].type === 'multiselect'}
-                        options={field.value[index].options}
+                        options={
+                          field.value[index].type.includes('boolean')
+                            ? ['true', 'false']
+                            : field.value[index].options
+                        }
                       />
                     )
                   }
@@ -131,20 +204,36 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       component={Input}
                       name={`${field.name}[${index}].${subField.name}`}
                       key={`${field.name}[${index}].${subField.name}`}
+                      onChange={(e) => {
+                        resetOptionsAndDefault(e.target.value, index)
+                        field.onChange(e)
+                      }}
                     />
                   )
                 })}
-
-                <Button
-                  style="primary"
-                  type="button"
-                  size="small"
-                  onClick={() => {
-                    deleteParameter(index)
-                  }}
-                >
-                  Delete parameter
-                </Button>
+                <div className={styles.actions}>
+                  <Button
+                    style="ghost"
+                    size="small"
+                    disabled={field.value.length === 1}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      deleteParameter(index)
+                    }}
+                  >
+                    Delete parameter
+                  </Button>
+                  <Button
+                    style="primary"
+                    size="small"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      addParameter(index)
+                    }}
+                  >
+                    Add parameter
+                  </Button>
+                </div>
               </div>
             )
           }
diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
index f91064fdfa..acce671869 100644
--- a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -155,6 +155,7 @@ export default function FilesInput(props: InputProps): ReactElement {
               <div className={`${styles.textblock}`}>
                 {props.innerFields &&
                   props.innerFields.map((innerField: any, i: number) => {
+                    console.log(innerField)
                     return (
                       <>
                         <Field
diff --git a/src/components/@shared/FormInput/InputElement/index.tsx b/src/components/@shared/FormInput/InputElement/index.tsx
index a803015e27..4d78af70e9 100644
--- a/src/components/@shared/FormInput/InputElement/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/index.tsx
@@ -62,7 +62,7 @@ export default function InputElement({
 }: InputProps): ReactElement {
   const styleClasses = cx({ select: true, [size]: size })
   const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
-
+  if (label === 'Default Value') console.log(props)
   switch (props.type) {
     case 'select': {
       const sortedOptions =
diff --git a/src/components/Publish/Customization/index.tsx b/src/components/Publish/Customization/index.tsx
deleted file mode 100644
index 78b1727c2c..0000000000
--- a/src/components/Publish/Customization/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Field } from 'formik'
-import React, { ReactElement, useState } from 'react'
-import { getFieldContent } from '../../../@utils/form'
-import content from '../../../../content/publish/form.json'
-import Input from '../../@shared/FormInput'
-
-export default function CustomizationFields(): ReactElement {
-  const [showAlgorigthmConsumerParams, setShowAlgorigthmConsumerParams] =
-    useState(false)
-
-  return (
-    <>
-      <Field
-        {...getFieldContent('consumerParameters', content.customization.fields)}
-        component={Input}
-        name="metadata.consumerParameters"
-      />
-
-      <Field
-        {...getFieldContent('userdata', content.customization.fields)}
-        component={Input}
-        name="services[0].files[0].userdata"
-      />
-    </>
-  )
-}
diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx
index 1e61157766..1addc2843f 100644
--- a/src/components/Publish/Metadata/index.tsx
+++ b/src/components/Publish/Metadata/index.tsx
@@ -145,6 +145,24 @@ export default function MetadataFields(): ReactElement {
               />
             </>
           )}
+          <Field
+            {...getFieldContent(
+              'usesConsumerParameters',
+              content.metadata.fields
+            )}
+            component={Input}
+            name="metadata.usesConsumerParameters"
+          />
+          {values.metadata.usesConsumerParameters && (
+            <Field
+              {...getFieldContent(
+                'consumerParameters',
+                content.metadata.fields
+              )}
+              component={Input}
+              name="metadata.consumerParameters"
+            />
+          )}
         </>
       )}
 
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index d42caf8518..ed88b8b5ca 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -14,7 +14,6 @@ import Preview from './Preview'
 import Submission from './Submission'
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
 import contentFeedback from '../../../content/publish/feedback.json'
-import CustomizationFields from './Customization'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -29,21 +28,16 @@ export const wizardSteps: StepContent[] = [
   },
   {
     step: 3,
-    title: content.customization.title,
-    component: <CustomizationFields />
-  },
-  {
-    step: 4,
     title: content.pricing.title,
     component: <PricingFields />
   },
   {
-    step: 5,
+    step: 4,
     title: content.preview.title,
     component: <Preview />
   },
   {
-    step: 6,
+    step: 5,
     title: content.submission.title,
     component: <Submission />
   }
@@ -75,6 +69,7 @@ export const initialValues: FormPublishData = {
     dockerImageCustom: '',
     dockerImageCustomTag: '',
     dockerImageCustomEntrypoint: '',
+    usesConsumerParameters: false,
     consumerParameters: []
   },
   services: [
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 8c0e863ba0..82c8640930 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -38,7 +38,7 @@ const validationConsumerParameters: {
   required: Yup.boolean().required('Required'),
   default: Yup.mixed().when('type', {
     is: 'multiselect',
-    then: Yup.array().of(Yup.string()).required(),
+    then: Yup.array().of(Yup.object()).required(),
     otherwise: Yup.string().required()
   }),
   options: Yup.array().when('type', {

From b9507ddc8d4b0d062151e9ca30616c12426f114b Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 11:00:06 +0200
Subject: [PATCH 007/113] feat: add InputOptions error handling

---
 .../InputOptions.module.css                   | 36 ++++++++++-
 .../ConsumerParameters/InputOptions.tsx       | 60 ++++++++++++-------
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
index 273e77f7f7..4b9011afe0 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
@@ -2,7 +2,6 @@
   display: flex;
   justify-content: space-between;
   gap: 0 calc(var(--spacer) / 4);
-  margin-bottom: calc(var(--spacer) / 2);
 }
 
 .headersAddedContainer {
@@ -11,3 +10,38 @@
   gap: 0 calc(var(--spacer) / 4);
   margin-bottom: calc(var(--spacer) / 2);
 }
+
+.valueContainer {
+  position: relative;
+  width: 100%;
+}
+
+.error {
+  display: inline-block;
+  font-size: var(--font-size-mini);
+  line-height: 1.2;
+  font-weight: var(--font-weight-bold);
+  color: var(--brand-white);
+  background: var(--brand-alert-red);
+  border-radius: var(--border-radius);
+  padding: 0.2rem 0.4rem;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.hasError .headersContainer .valueContainer input,
+.hasError .headersContainer .valueContainer input:focus,
+.hasError .headersContainer .valueContainer [class*='prefix'],
+.hasError .headersContainer .valueContainer [class*='postfix'] {
+  color: var(--brand-alert-red);
+  border-color: var(--brand-alert-red);
+}
+
+.required {
+  composes: required from '../../index.module.css';
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
index af51400b25..ddb2106e4c 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
@@ -7,9 +7,12 @@ import Markdown from '@shared/Markdown'
 import Button from '@shared/atoms/Button'
 import { InputProps } from '@shared/FormInput'
 import { useField } from 'formik'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 export interface InputOption {
-  [key: string]: string
+  [value: string]: string
 }
 
 export default function InputOptions({
@@ -18,21 +21,30 @@ export default function InputOptions({
 }: InputProps & { optionIndex: number }): ReactElement {
   const [field, meta, helpers] = useField(props.name)
 
-  const [currentKey, setCurrentKey] = useState('')
   const [currentValue, setCurrentValue] = useState('')
+  const [currentLabel, setCurrentLabel] = useState('')
   const [disabledButton, setDisabledButton] = useState(true)
+  const [hasError, setHasError] = useState(false)
 
   const [options, setOptions] = useState<InputOption[]>([])
 
   const addOption = () => {
+    const hasError = options.some((option) =>
+      Object.keys(option).includes(currentValue)
+    )
+    if (hasError) {
+      setHasError(hasError)
+      return
+    }
+
     setOptions([
       ...options,
       {
-        [currentKey]: currentValue
+        [currentValue]: currentLabel
       }
     ])
-    setCurrentKey('')
     setCurrentValue('')
+    setCurrentLabel('')
   }
 
   const removeOption = (i: number) => {
@@ -40,15 +52,15 @@ export default function InputOptions({
       (option, optionIndex) => optionIndex !== i
     )
     setOptions(newOptions)
-    setCurrentKey('')
     setCurrentValue('')
+    setCurrentLabel('')
   }
 
   function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    const checkType = e.target.name.search('key')
+    const checkType = e.target.name.search('value')
     checkType > 0
-      ? setCurrentKey(e.target.value)
-      : setCurrentValue(e.target.value)
+      ? setCurrentValue(e.target.value)
+      : setCurrentLabel(e.target.value)
 
     return e
   }
@@ -68,11 +80,12 @@ export default function InputOptions({
   }, [options])
 
   useEffect(() => {
-    setDisabledButton(!currentKey || !currentValue)
-  }, [currentKey, currentValue])
+    setDisabledButton(!currentValue || !currentLabel)
+    setHasError(false)
+  }, [currentValue, currentLabel])
 
   return (
-    <div>
+    <div className={cx({ container: true, hasError })}>
       <Label htmlFor={props.name}>
         {props?.label}
         {props?.required && (
@@ -86,18 +99,21 @@ export default function InputOptions({
       </Label>
 
       <div className={styles.headersContainer}>
-        <InputElement
-          name={`${name}.key`}
-          placeholder={'key'}
-          value={`${currentKey}`}
-          onChange={handleChange}
-        />
+        <div className={styles.valueContainer}>
+          <InputElement
+            name={`${name}.value`}
+            placeholder={'value'}
+            value={`${currentValue}`}
+            onChange={handleChange}
+          />
+          {hasError && <p className={styles.error}>The key must be unique</p>}
+        </div>
 
         <InputElement
           className={`${styles.input}`}
-          name={`${name}.value`}
-          placeholder={'value'}
-          value={`${currentValue}`}
+          name={`${name}.label`}
+          placeholder={'label'}
+          value={`${currentLabel}`}
           onChange={handleChange}
         />
 
@@ -119,13 +135,13 @@ export default function InputOptions({
           return (
             <div className={styles.headersAddedContainer} key={`option_${i}`}>
               <InputElement
-                name={`option[${i}].key`}
+                name={`option[${i}].value`}
                 value={Object.keys(option)[0]}
                 disabled
               />
 
               <InputElement
-                name={`option[${i}].value`}
+                name={`option[${i}].label`}
                 value={Object.values(option)[0]}
                 disabled
               />

From 47d4d41ebcdc5ba549832fee1efd16b5a24d380c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 14:45:40 +0200
Subject: [PATCH 008/113] feat: update consumer parameters validation

---
 src/components/Publish/_validation.ts | 31 +++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 82c8640930..c054e6f117 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -36,17 +36,36 @@ const validationConsumerParameters: {
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
   required: Yup.boolean().required('Required'),
-  default: Yup.mixed().when('type', {
-    is: 'multiselect',
-    then: Yup.array().of(Yup.object()).required(),
-    otherwise: Yup.string().required()
-  }),
+  // default: Yup.mixed<any>()
+  //   .when('type', {
+  //     is: 'multiselect',
+  //     then: Yup.array().of(Yup.object()).required('Required').nullable(true)
+  //   })
+  //   .when('type', {
+  //     is: 'select',
+  //     then: Yup.object().required('Required').nullable(true)
+  //   })
+  //   .when('type', {
+  //     is: 'boolean',
+  //     then: Yup.string()
+  //       .matches(/true|false/g, { excludeEmptyString: true })
+  //       .required('Required')
+  //       .nullable(true)
+  //   })
+  //   .when('type', {
+  //     is: 'number',
+  //     then: Yup.number().required('Required').nullable(true),
+  //     otherwise: Yup.string().required('Required').nullable(true)
+  //   })
+  //   .nullable(true),
+  default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: (value) => ['select', 'multiselect'].includes(value),
     then: Yup.array()
       .of(Yup.object())
       .min(1, 'At least one option needs to be defined')
-      .required('Required')
+      .required('Required'),
+    otherwise: Yup.array()
   })
 }
 

From f1ac6f69d78584db45e90a3304e6392a0bea4b1a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 14:46:07 +0200
Subject: [PATCH 009/113] feat: update transformPublishFromToDdo

---
 src/components/Publish/_utils.ts | 35 ++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 375a9c6fa7..f3026c0aca 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -19,7 +19,12 @@ import { getEncryptedFiles } from '@utils/provider'
 import slugify from 'slugify'
 import Web3 from 'web3'
 import { algorithmContainerPresets } from './_constants'
-import { FormPublishData, MetadataAlgorithmContainer } from './_types'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData,
+  MetadataAlgorithmContainer,
+  MetadataAlgorithmExtended
+} from './_types'
 import {
   marketFeeAddress,
   publisherMarketOrderFee,
@@ -57,6 +62,22 @@ function transformTags(originalTags: string[]): string[] {
   return transformedTags
 }
 
+function transformConsumerParameters(
+  parameters: AlgorithmConsumerParameter[]
+): AlgorithmConsumerParameter[] {
+  if (!parameters?.length) return
+
+  const transformedValues = parameters.map((param) => {
+    return param.type === 'select' || param.type === 'multiselect'
+      ? param
+      : param.type === 'boolean'
+      ? { ...param, options: undefined, default: param.default === 'true' }
+      : { ...param, options: undefined }
+  })
+
+  return transformedValues
+}
+
 export async function transformPublishFormToDdo(
   values: FormPublishData,
   // Those 2 are only passed during actual publishing process
@@ -77,7 +98,9 @@ export async function transformPublishFormToDdo(
     dockerImageCustom,
     dockerImageCustomTag,
     dockerImageCustomEntrypoint,
-    dockerImageCustomChecksum
+    dockerImageCustomChecksum,
+    usesConsumerParameters,
+    consumerParameters
   } = metadata
   const { access, files, links, providerUrl, timeout } = services[0]
 
@@ -96,7 +119,10 @@ export async function transformPublishFormToDdo(
   const linksTransformed = links?.length &&
     links[0].valid && [sanitizeUrl(links[0].url)]
 
-  const newMetadata: Metadata = {
+  const consumerParametersTransformed =
+    usesConsumerParameters && transformConsumerParameters(consumerParameters)
+
+  const newMetadata: Metadata & { algorithm?: MetadataAlgorithmExtended } = {
     created: currentTime,
     updated: currentTime,
     type,
@@ -133,7 +159,8 @@ export async function transformPublishFormToDdo(
               dockerImage === 'custom'
                 ? dockerImageCustomChecksum
                 : algorithmContainerPresets.checksum
-          }
+          },
+          consumerParameters: consumerParametersTransformed
         }
       })
   }

From afe49934e3e0214db97d686576f71e0498d2b996 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 14:46:37 +0200
Subject: [PATCH 010/113] feat: add default options to parameter options

---
 .../InputOptions.module.css                   |  4 ++++
 .../ConsumerParameters/InputOptions.tsx       | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
index 4b9011afe0..46cfd38cca 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
@@ -8,11 +8,15 @@
   display: flex;
   justify-content: space-between;
   gap: 0 calc(var(--spacer) / 4);
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: calc(var(--spacer) / 2);
 }
 
 .valueContainer {
   position: relative;
+}
+
+.headersContainer div {
   width: 100%;
 }
 
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
index ddb2106e4c..adb903aff2 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
@@ -17,8 +17,12 @@ export interface InputOption {
 
 export default function InputOptions({
   optionIndex,
+  defaultOptions = [],
   ...props
-}: InputProps & { optionIndex: number }): ReactElement {
+}: InputProps & {
+  optionIndex: number
+  defaultOptions: InputOption[]
+}): ReactElement {
   const [field, meta, helpers] = useField(props.name)
 
   const [currentValue, setCurrentValue] = useState('')
@@ -26,7 +30,7 @@ export default function InputOptions({
   const [disabledButton, setDisabledButton] = useState(true)
   const [hasError, setHasError] = useState(false)
 
-  const [options, setOptions] = useState<InputOption[]>([])
+  const [options, setOptions] = useState<InputOption[]>(defaultOptions)
 
   const addOption = () => {
     const hasError = options.some((option) =>
@@ -109,13 +113,15 @@ export default function InputOptions({
           {hasError && <p className={styles.error}>The key must be unique</p>}
         </div>
 
-        <InputElement
-          className={`${styles.input}`}
-          name={`${name}.label`}
-          placeholder={'label'}
-          value={`${currentLabel}`}
-          onChange={handleChange}
-        />
+        <div>
+          <InputElement
+            className={`${styles.input}`}
+            name={`${name}.label`}
+            placeholder={'label'}
+            value={`${currentLabel}`}
+            onChange={handleChange}
+          />
+        </div>
 
         <Button
           style="primary"

From 69ecb57e0007bc39caee75ce5d6e33bc65efee7c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 14:47:02 +0200
Subject: [PATCH 011/113] fix: value handling for select and mutliselect

---
 .../ConsumerParameters/index.module.css       |  27 +++-
 .../InputElement/ConsumerParameters/index.tsx | 124 ++++++++++++++----
 2 files changed, 126 insertions(+), 25 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
index da90954ea3..eda2b520e8 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -2,15 +2,40 @@
   border: 1px solid var(--border-color);
 }
 
+.selectContainer,
+.optionsContainer {
+  position: relative;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
 .select {
   composes: select from '../TagsAutoComplete/index.module.css';
-  margin-bottom: calc(var(--spacer) / 2);
 }
 
 .required {
   composes: required from '../../index.module.css';
 }
 
+.hasError .select [class$='control'],
+.hasError .select [class$='control']:hover,
+.hasError .select [class$='control']:focus-within,
+.hasError .select [class$='menu'] {
+  color: var(--brand-alert-red);
+  border-color: var(--brand-alert-red);
+}
+
+.optionsContainer.hasError * {
+  border-color: var(--brand-alert-red);
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.error {
+  composes: error from '../../index.module.css';
+}
+
 .actions {
   display: flex;
   justify-content: center;
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index fe0459c996..468625bd87 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,4 +1,4 @@
-import { Field, useField, useFormikContext } from 'formik'
+import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import Select from 'react-select'
 import Input, { InputProps } from '../..'
@@ -11,15 +11,18 @@ import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import InputOptions from './InputOptions'
 import Label from '../../Label'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 const defaultParam: AlgorithmConsumerParameter = {
   name: '',
   label: '',
+  description: '',
   type: 'select',
+  options: [],
   default: '',
-  required: false,
-  description: '',
-  options: []
+  required: false
 }
 
 export const paramTypes: AlgorithmConsumerParameter['type'][] = [
@@ -39,7 +42,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
   )
 
   useEffect(() => {
-    if (field.value.length === 0) helpers.setValue([defaultParam])
+    if (field.value.length === 0) helpers.setValue([{ ...defaultParam }])
   }, [])
 
   const addParameter = (index: number) => {
@@ -48,10 +51,10 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     Object.keys(defaultParam).forEach((param) =>
       setFieldTouched(`metadata.consumerParameters[${index}].${param}`, true)
     )
-    console.log(touched, errors)
+
     if (errors?.metadata?.consumerParameters) return
 
-    helpers.setValue([...field.value, defaultParam])
+    helpers.setValue([...field.value, { ...defaultParam }])
   }
 
   const deleteParameter = (index: number) => {
@@ -59,27 +62,57 @@ export function ConsumerParameters(props: InputProps): ReactElement {
   }
 
   const resetOptionsAndDefault = (
-    currentType: AlgorithmConsumerParameter['type'],
+    parameterName: string,
+    parameterType: AlgorithmConsumerParameter['type'],
     index: number
   ) => {
-    if (currentType === 'select' && field.value[index].type === 'multiselect')
-      return
-    if (currentType === 'multiselect' && field.value[index].type === 'select')
-      return
+    if (parameterName !== 'type') return
+    if (field.value[index].type === parameterType) return
 
+    setFieldTouched(`metadata.consumerParameters[${index}].options`, false)
+    setFieldTouched(`metadata.consumerParameters[${index}].default`, false)
     helpers.setValue(
       field.value.map((p, i) => {
         if (i !== index) return p
 
         return {
+          ...defaultParam,
           ...p,
-          options: defaultParam.options,
           default: defaultParam.default
         }
       })
     )
   }
 
+  const showError = (name: string, index: number): boolean => {
+    const error = errors?.metadata?.consumerParameters?.[index]?.[name]
+    const isTouched = touched?.metadata?.consumerParameters?.[index]?.[name]
+
+    return error && isTouched
+  }
+
+  const getSelectValues = (
+    paramType: string,
+    options: { [key: string]: string } | { [key: string]: string }[]
+  ) => {
+    if (!options) return null
+    if (
+      (paramType === 'select' && Array.isArray(options)) ||
+      (paramType === 'multiselect' && !Array.isArray(options))
+    )
+      return null
+
+    if (paramType === 'select') {
+      const values = Object.entries(options)
+      return { value: values[0][0], label: values[0][1] }
+    }
+
+    const values = (options as { [key: string]: string }[]).map((option) =>
+      Object.entries(option)
+    )
+    return values.map((e) => ({ value: e[0][0], label: e[0][1] }))
+  }
+
   console.log(field)
 
   return (
@@ -95,14 +128,29 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     return ['select', 'multiselect'].includes(
                       field.value[index]?.type
                     ) ? (
-                      <InputOptions
-                        {...subField}
+                      <div
                         key={`${field.name}[${index}].${subField.name}`}
-                        name="metadata.consumerParameters"
-                        label="Options"
-                        required
-                        optionIndex={index}
-                      />
+                        className={cx({
+                          optionsContainer: true,
+                          hasError: showError('options', index)
+                        })}
+                      >
+                        <InputOptions
+                          {...subField}
+                          name="metadata.consumerParameters"
+                          label="Options"
+                          required
+                          optionIndex={index}
+                          defaultOptions={field.value[index]?.options}
+                        />
+                        {showError('options', index) && (
+                          <div className={styles.error}>
+                            <ErrorMessage
+                              name={`${field.name}[${index}].options`}
+                            />
+                          </div>
+                        )}
+                      </div>
                     ) : null
                   }
 
@@ -111,9 +159,15 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       ['select', 'multiselect'].includes(
                         field.value[index]?.type
                       )
-                    )
+                    ) {
                       return (
-                        <div key={`${field.name}[${index}].${subField.name}`}>
+                        <div
+                          key={`${field.name}[${index}].${subField.name}`}
+                          className={cx({
+                            selectContainer: true,
+                            hasError: showError('default', index)
+                          })}
+                        >
                           <Label htmlFor={subField.name}>
                             {subField?.label}
                             {subField?.required && (
@@ -137,8 +191,8 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                             }}
                             className={styles.select}
                             hideSelectedOptions
-                            isMulti={field.value[index]?.type === 'multiselect'}
                             isClearable
+                            isMulti={field.value[index]?.type === 'multiselect'}
                             noOptionsMessage={() => 'No options available'}
                             options={field.value[index]?.options?.map(
                               (option) => {
@@ -167,6 +221,16 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                                 })
                               )
                             }}
+                            value={getSelectValues(
+                              field.value[index]?.type,
+                              field.value[index]?.default as
+                                | {
+                                    [key: string]: string
+                                  }
+                                | {
+                                    [key: string]: string
+                                  }[]
+                            )}
                             theme={(theme) => ({
                               ...theme,
                               colors: {
@@ -175,8 +239,16 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                               }
                             })}
                           />
+                          {showError('default', index) && (
+                            <div className={styles.error}>
+                              <ErrorMessage
+                                name={`${field.name}[${index}].default`}
+                              />
+                            </div>
+                          )}
                         </div>
                       )
+                    }
 
                     return (
                       <Field
@@ -205,7 +277,11 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       name={`${field.name}[${index}].${subField.name}`}
                       key={`${field.name}[${index}].${subField.name}`}
                       onChange={(e) => {
-                        resetOptionsAndDefault(e.target.value, index)
+                        resetOptionsAndDefault(
+                          subField.name,
+                          e.target.value,
+                          index
+                        )
                         field.onChange(e)
                       }}
                     />

From d65c85ca1739650e6cb7a6547e7259c811ef3a6c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 27 Apr 2023 15:32:21 +0200
Subject: [PATCH 012/113] feat: update "add new parameter" button label

---
 .../@shared/FormInput/InputElement/ConsumerParameters/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 468625bd87..4036243d82 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -307,7 +307,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       addParameter(index)
                     }}
                   >
-                    Add parameter
+                    Add new parameter
                   </Button>
                 </div>
               </div>

From f159cad551f9e79e2c901fa3cf21c1f328d1d331 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 11:16:27 +0200
Subject: [PATCH 013/113] feat: remove unused publish form sections

---
 content/publish/form.json | 91 ---------------------------------------
 1 file changed, 91 deletions(-)

diff --git a/content/publish/form.json b/content/publish/form.json
index a63c18aa7b..b90eee5c00 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -324,97 +324,6 @@
       }
     ]
   },
-  "customization": {
-    "title": "Customization",
-    "fields": [
-      {
-        "name": "consumerParameters",
-        "label": "Consumer Parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "consumerParameters",
-        "required": false,
-        "fields": [
-          {
-            "name": "name",
-            "label": "Parameter Name",
-            "placeholder_value": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
-            "type": "text",
-            "required": true
-          },
-
-          {
-            "name": "label",
-            "label": "Parameter Label",
-            "placeholder_value": "Custom Parameter",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "description",
-            "label": "Description",
-            "placeholder_value": "A custom parameter changing the behaviour of the algorithm.",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "required",
-            "label": "Parameter Required",
-            "type": "checkbox",
-            "options": ["is required"],
-            "required": true
-          },
-          {
-            "name": "required",
-            "label": "Parameter Required",
-            "type": "checkbox",
-            "options": ["is required"],
-            "required": true
-          },
-          {
-            "name": "required",
-            "label": "Parameter Required",
-            "type": "select",
-            "options": ["is required"],
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select", "multiselect"],
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select", "multiselect"],
-            "required": true
-          },
-          {
-            "name": "options",
-            "label": "Select Options",
-            "placeholder_value": "Define the options for the user to select from",
-            "type": "creatableSelect",
-            "required": false
-          },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "required": true,
-            "placeholder_value": "user input"
-          }
-        ]
-      },
-      {
-        "name": "userdata",
-        "label": "User Data"
-      }
-    ]
-  },
   "pricing": {
     "title": "Pricing",
     "fields": [

From 12e4c23b694fd70a5126480c2c85f39e4598fda0 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 11:21:50 +0200
Subject: [PATCH 014/113] chore: remove console.log

---
 .../@shared/FormInput/InputElement/FilesInput/index.tsx         | 1 -
 src/components/@shared/FormInput/InputElement/index.tsx         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
index acce671869..f91064fdfa 100644
--- a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -155,7 +155,6 @@ export default function FilesInput(props: InputProps): ReactElement {
               <div className={`${styles.textblock}`}>
                 {props.innerFields &&
                   props.innerFields.map((innerField: any, i: number) => {
-                    console.log(innerField)
                     return (
                       <>
                         <Field
diff --git a/src/components/@shared/FormInput/InputElement/index.tsx b/src/components/@shared/FormInput/InputElement/index.tsx
index 4d78af70e9..a803015e27 100644
--- a/src/components/@shared/FormInput/InputElement/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/index.tsx
@@ -62,7 +62,7 @@ export default function InputElement({
 }: InputProps): ReactElement {
   const styleClasses = cx({ select: true, [size]: size })
   const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
-  if (label === 'Default Value') console.log(props)
+
   switch (props.type) {
     case 'select': {
       const sortedOptions =

From 32bcf364f32231d9e8e246dfe24454f50498342f Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 11:22:23 +0200
Subject: [PATCH 015/113] chore: remove comments

---
 src/components/Publish/_validation.ts | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index c054e6f117..712d88d9fc 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -36,28 +36,6 @@ const validationConsumerParameters: {
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
   required: Yup.boolean().required('Required'),
-  // default: Yup.mixed<any>()
-  //   .when('type', {
-  //     is: 'multiselect',
-  //     then: Yup.array().of(Yup.object()).required('Required').nullable(true)
-  //   })
-  //   .when('type', {
-  //     is: 'select',
-  //     then: Yup.object().required('Required').nullable(true)
-  //   })
-  //   .when('type', {
-  //     is: 'boolean',
-  //     then: Yup.string()
-  //       .matches(/true|false/g, { excludeEmptyString: true })
-  //       .required('Required')
-  //       .nullable(true)
-  //   })
-  //   .when('type', {
-  //     is: 'number',
-  //     then: Yup.number().required('Required').nullable(true),
-  //     otherwise: Yup.string().required('Required').nullable(true)
-  //   })
-  //   .nullable(true),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: (value) => ['select', 'multiselect'].includes(value),

From 843a9f828c10371dfc73e1437f880556c7bb9560 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 14:52:54 +0200
Subject: [PATCH 016/113] feat: remove multiselect

---
 content/publish/form.json                     |   2 +-
 .../ConsumerParameters/index.module.css       |  17 --
 .../InputElement/ConsumerParameters/index.tsx | 159 ++----------------
 src/components/Publish/_constants.tsx         |  12 +-
 src/components/Publish/_types.ts              |   8 +-
 src/components/Publish/_utils.ts              |   8 +-
 src/components/Publish/_validation.ts         |   2 +-
 7 files changed, 34 insertions(+), 174 deletions(-)

diff --git a/content/publish/form.json b/content/publish/form.json
index b90eee5c00..b493a76a69 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -115,7 +115,7 @@
             "label": "Parameter Type",
             "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
             "type": "select",
-            "options": ["number", "text", "boolean", "select", "multiselect"],
+            "options": ["number", "text", "boolean", "select"],
             "required": true
           },
           {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
index eda2b520e8..6ca3fbd341 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -2,28 +2,11 @@
   border: 1px solid var(--border-color);
 }
 
-.selectContainer,
 .optionsContainer {
   position: relative;
   margin-bottom: calc(var(--spacer) / 2);
 }
 
-.select {
-  composes: select from '../TagsAutoComplete/index.module.css';
-}
-
-.required {
-  composes: required from '../../index.module.css';
-}
-
-.hasError .select [class$='control'],
-.hasError .select [class$='control']:hover,
-.hasError .select [class$='control']:focus-within,
-.hasError .select [class$='menu'] {
-  color: var(--brand-alert-red);
-  border-color: var(--brand-alert-red);
-}
-
 .optionsContainer.hasError * {
   border-color: var(--brand-alert-red);
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 4036243d82..0117327d6c 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,6 +1,5 @@
 import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
-import React, { ReactElement, useEffect } from 'react'
-import Select from 'react-select'
+import React, { ReactElement } from 'react'
 import Input, { InputProps } from '../..'
 import {
   AlgorithmConsumerParameter,
@@ -10,26 +9,15 @@ import Button from '../../../atoms/Button'
 import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import InputOptions from './InputOptions'
-import Label from '../../Label'
 import classNames from 'classnames/bind'
+import { initialValues } from '@components/Publish/_constants'
 
 const cx = classNames.bind(styles)
 
-const defaultParam: AlgorithmConsumerParameter = {
-  name: '',
-  label: '',
-  description: '',
-  type: 'select',
-  options: [],
-  default: '',
-  required: false
-}
-
 export const paramTypes: AlgorithmConsumerParameter['type'][] = [
   'number',
   'text',
   'boolean',
-  'multiselect',
   'select'
 ]
 
@@ -41,20 +29,19 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     props.name
   )
 
-  useEffect(() => {
-    if (field.value.length === 0) helpers.setValue([{ ...defaultParam }])
-  }, [])
-
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
     validateField('metadata.consumerParameters')
-    Object.keys(defaultParam).forEach((param) =>
+    Object.keys(initialValues.metadata.consumerParameters[0]).forEach((param) =>
       setFieldTouched(`metadata.consumerParameters[${index}].${param}`, true)
     )
 
     if (errors?.metadata?.consumerParameters) return
 
-    helpers.setValue([...field.value, { ...defaultParam }])
+    helpers.setValue([
+      ...field.value,
+      { ...initialValues.metadata.consumerParameters[0] }
+    ])
   }
 
   const deleteParameter = (index: number) => {
@@ -76,9 +63,9 @@ export function ConsumerParameters(props: InputProps): ReactElement {
         if (i !== index) return p
 
         return {
-          ...defaultParam,
+          ...initialValues.metadata.consumerParameters[0],
           ...p,
-          default: defaultParam.default
+          default: initialValues.metadata.consumerParameters[0].default
         }
       })
     )
@@ -91,30 +78,12 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     return error && isTouched
   }
 
-  const getSelectValues = (
-    paramType: string,
-    options: { [key: string]: string } | { [key: string]: string }[]
-  ) => {
-    if (!options) return null
-    if (
-      (paramType === 'select' && Array.isArray(options)) ||
-      (paramType === 'multiselect' && !Array.isArray(options))
-    )
-      return null
-
-    if (paramType === 'select') {
-      const values = Object.entries(options)
-      return { value: values[0][0], label: values[0][1] }
-    }
+  const getStringOptions = (options: { [key: string]: string }[]): string[] => {
+    if (!options.length) return []
 
-    const values = (options as { [key: string]: string }[]).map((option) =>
-      Object.entries(option)
-    )
-    return values.map((e) => ({ value: e[0][0], label: e[0][1] }))
+    return options.map((option) => Object.keys(option)[0])
   }
 
-  console.log(field)
-
   return (
     <div className={styles.container}>
       <Tabs
@@ -125,9 +94,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
               <div>
                 {props.fields?.map((subField: InputProps) => {
                   if (subField.name === 'options') {
-                    return ['select', 'multiselect'].includes(
-                      field.value[index]?.type
-                    ) ? (
+                    return field.value[index]?.type === 'select' ? (
                       <div
                         key={`${field.name}[${index}].${subField.name}`}
                         className={cx({
@@ -155,101 +122,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                   }
 
                   if (subField.name === 'default') {
-                    if (
-                      ['select', 'multiselect'].includes(
-                        field.value[index]?.type
-                      )
-                    ) {
-                      return (
-                        <div
-                          key={`${field.name}[${index}].${subField.name}`}
-                          className={cx({
-                            selectContainer: true,
-                            hasError: showError('default', index)
-                          })}
-                        >
-                          <Label htmlFor={subField.name}>
-                            {subField?.label}
-                            {subField?.required && (
-                              <span
-                                title="Required"
-                                className={styles.required}
-                              >
-                                *
-                              </span>
-                            )}
-                          </Label>
-                          <Field
-                            {...subField}
-                            label="Options"
-                            component={Select}
-                            name={`${field.name}[${index}].options`}
-                            key={`${field.name}[${index}].${subField.name}`}
-                            components={{
-                              DropdownIndicator: () => null,
-                              IndicatorSeparator: () => null
-                            }}
-                            className={styles.select}
-                            hideSelectedOptions
-                            isClearable
-                            isMulti={field.value[index]?.type === 'multiselect'}
-                            noOptionsMessage={() => 'No options available'}
-                            options={field.value[index]?.options?.map(
-                              (option) => {
-                                const values = Object.entries(option)
-                                return {
-                                  value: values[0][0],
-                                  label: values[0][1]
-                                }
-                              }
-                            )}
-                            onChange={(option) => {
-                              helpers.setValue(
-                                field.value.map((p, i) => {
-                                  if (i !== index) return p
-
-                                  return {
-                                    ...p,
-                                    default: !option
-                                      ? undefined
-                                      : field.value[index]?.type === 'select'
-                                      ? { [option.value]: option.label }
-                                      : option.map((v) => ({
-                                          [v.value]: v.label
-                                        }))
-                                  }
-                                })
-                              )
-                            }}
-                            value={getSelectValues(
-                              field.value[index]?.type,
-                              field.value[index]?.default as
-                                | {
-                                    [key: string]: string
-                                  }
-                                | {
-                                    [key: string]: string
-                                  }[]
-                            )}
-                            theme={(theme) => ({
-                              ...theme,
-                              colors: {
-                                ...theme.colors,
-                                primary25: 'var(--border-color)'
-                              }
-                            })}
-                          />
-                          {showError('default', index) && (
-                            <div className={styles.error}>
-                              <ErrorMessage
-                                name={`${field.name}[${index}].default`}
-                              />
-                            </div>
-                          )}
-                        </div>
-                      )
-                    }
-
                     return (
                       <Field
                         {...subField}
@@ -262,8 +134,10 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                             : field.value[index].type
                         }
                         options={
-                          field.value[index].type.includes('boolean')
+                          field.value[index].type === 'boolean'
                             ? ['true', 'false']
+                            : field.value[index].type === 'select'
+                            ? getStringOptions(field.value[index]?.options)
                             : field.value[index].options
                         }
                       />
@@ -287,6 +161,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     />
                   )
                 })}
+
                 <div className={styles.actions}>
                   <Button
                     style="ghost"
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index ed88b8b5ca..f7c20a3d33 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -70,7 +70,17 @@ export const initialValues: FormPublishData = {
     dockerImageCustomTag: '',
     dockerImageCustomEntrypoint: '',
     usesConsumerParameters: false,
-    consumerParameters: []
+    consumerParameters: [
+      {
+        name: '',
+        label: '',
+        description: '',
+        type: 'text',
+        options: [],
+        default: '',
+        required: false
+      }
+    ]
   },
   services: [
     {
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 8950ceb782..2dda65a635 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -73,7 +73,6 @@ export type AlgorithmConsumerParameterType =
   | 'text'
   | 'boolean'
   | 'select'
-  | 'multiselect'
 
 export interface AlgorithmConsumerParameter {
   name: string
@@ -81,12 +80,7 @@ export interface AlgorithmConsumerParameter {
   label: string
   required: boolean
   description: string
-  default:
-    | string
-    | boolean
-    | number
-    | { [key: string]: string }
-    | { [key: string]: string }[]
+  default: string | boolean | number
   options?: { [key: string]: string }[]
 }
 
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index f3026c0aca..b5612de10b 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -68,11 +68,9 @@ function transformConsumerParameters(
   if (!parameters?.length) return
 
   const transformedValues = parameters.map((param) => {
-    return param.type === 'select' || param.type === 'multiselect'
-      ? param
-      : param.type === 'boolean'
-      ? { ...param, options: undefined, default: param.default === 'true' }
-      : { ...param, options: undefined }
+    return param.type === 'select'
+      ? { ...param, options: JSON.stringify(param.options) }
+      : { ...param, options: undefined, default: param.default.toString() }
   })
 
   return transformedValues
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 712d88d9fc..d314e8b02d 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -38,7 +38,7 @@ const validationConsumerParameters: {
   required: Yup.boolean().required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
-    is: (value) => ['select', 'multiselect'].includes(value),
+    is: 'select',
     then: Yup.array()
       .of(Yup.object())
       .min(1, 'At least one option needs to be defined')

From d05a9c3aab8477f824a0c8028d791a65f812c128 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 15:48:21 +0200
Subject: [PATCH 017/113] feat: add consumer parameters section label

---
 content/publish/form.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/content/publish/form.json b/content/publish/form.json
index b493a76a69..9eda8bc7f4 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -76,7 +76,7 @@
       },
       {
         "name": "usesConsumerParameters",
-        "label": "Consumer parameters",
+        "label": "Uses consumer parameters",
         "help": "Define consumer parameters to be submitted to the algorithm before usage.",
         "type": "checkbox",
         "options": ["This algorithm uses consumer parameters"],
@@ -84,6 +84,7 @@
       },
       {
         "name": "consumerParameters",
+        "label": "Consumer parameters",
         "type": "consumerParameters",
         "required": false,
         "fields": [

From 045f49c56e86b580688ac9827fcdd80b6103d23a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 17:13:33 +0200
Subject: [PATCH 018/113] feat: update types

---
 .../InputElement/ConsumerParameters/index.tsx        | 12 ++++++++++--
 src/components/Publish/_types.ts                     |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 0117327d6c..e6facdf5c8 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -108,7 +108,11 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                           label="Options"
                           required
                           optionIndex={index}
-                          defaultOptions={field.value[index]?.options}
+                          defaultOptions={
+                            field.value[index]?.options as {
+                              [key: string]: string
+                            }[]
+                          }
                         />
                         {showError('options', index) && (
                           <div className={styles.error}>
@@ -137,7 +141,11 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                           field.value[index].type === 'boolean'
                             ? ['true', 'false']
                             : field.value[index].type === 'select'
-                            ? getStringOptions(field.value[index]?.options)
+                            ? getStringOptions(
+                                field.value[index]?.options as {
+                                  [key: string]: string
+                                }[]
+                              )
                             : field.value[index].options
                         }
                       />
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 2dda65a635..935a1be9d7 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -81,7 +81,7 @@ export interface AlgorithmConsumerParameter {
   required: boolean
   description: string
   default: string | boolean | number
-  options?: { [key: string]: string }[]
+  options?: string | { [key: string]: string }[]
 }
 
 export type MetadataAlgorithmExtended = MetadataAlgorithm & {

From aa37125af65e0bde69f8dca7bcf898d378f0ea73 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 18:09:11 +0200
Subject: [PATCH 019/113] feat: update edit form fields

---
 content/pages/editMetadata.json | 67 +++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index ed40f9b783..104d3a28e6 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -179,6 +179,73 @@
         "placeholder": "e.g. logistics",
         "required": false
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Uses consumer parameters",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
+        "type": "checkbox",
+        "options": ["This algorithm uses consumer parameters"],
+        "required": false
+      },
+      {
+        "name": "consumerParameters",
+        "label": "Consumer parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "required": true,
+            "placeholder": "Define the default value for the current parameter"
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["Parameter Required"],
+            "type": "checkbox",
+            "required": true
+          }
+        ]
+      },
       {
         "name": "paymentCollector",
         "label": "Payment Collector Address",

From 73fa000cdc2f5a33f121b67d155ca346b9d8d0b6 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 18:09:26 +0200
Subject: [PATCH 020/113] feat: parse consumer parameters in edit form

---
 src/components/Asset/Edit/_constants.ts | 29 ++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index a0af0809e9..5984a21643 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -1,9 +1,32 @@
 import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
+import {
+  AlgorithmConsumerParameter,
+  MetadataAlgorithmExtended
+} from '@components/Publish/_types'
+
+function parseConsumerParameters(
+  consumerParameters: AlgorithmConsumerParameter[]
+): AlgorithmConsumerParameter[] {
+  if (!consumerParameters?.length) return []
+
+  return consumerParameters.map((param) =>
+    param.type === 'select'
+      ? {
+          ...param,
+          options: JSON.parse(param.options as string)
+        }
+      : param.type === 'number'
+      ? { ...param, default: Number(param.default) }
+      : param.type === 'boolean'
+      ? { ...param, default: param.default === 'true' }
+      : param
+  )
+}
 
 export function getInitialValues(
-  metadata: Metadata,
+  metadata: Metadata & { algorithm?: MetadataAlgorithmExtended },
   timeout: number,
   price: string,
   paymentCollector: string,
@@ -18,6 +41,10 @@ export function getInitialValues(
     timeout: secondsToString(timeout),
     author: metadata?.author,
     tags: metadata?.tags,
+    usesConsumerParameters: metadata?.algorithm?.consumerParameters?.length > 0,
+    consumerParameters: parseConsumerParameters(
+      metadata?.algorithm?.consumerParameters
+    ),
     paymentCollector,
     assetState
   }

From 4eaa28e940185ea054c10fac6103211c821086f5 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 18:12:46 +0200
Subject: [PATCH 021/113] feat: add consumer parameters field to edit

---
 src/@utils/ddo.ts                             | 24 ++++++++++++++++-
 src/components/Asset/Edit/EditMetadata.tsx    |  3 ++-
 .../Asset/Edit/FormEditMetadata.tsx           | 18 +++++++++++++
 src/components/Asset/Edit/_constants.ts       | 26 ++-----------------
 src/components/Asset/Edit/_types.ts           |  3 +++
 5 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 61e95b1a4b..095f50be68 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -2,7 +2,10 @@ import {
   ComputeEditForm,
   MetadataEditForm
 } from '@components/Asset/Edit/_types'
-import { FormPublishData } from '@components/Publish/_types'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import {
   Arweave,
   Asset,
@@ -188,3 +191,22 @@ export function previewDebugPatch(
 
   return buildValuesPreview
 }
+
+export function parseConsumerParameters(
+  consumerParameters: AlgorithmConsumerParameter[]
+): AlgorithmConsumerParameter[] {
+  if (!consumerParameters?.length) return []
+
+  return consumerParameters.map((param) =>
+    param.type === 'select'
+      ? {
+          ...param,
+          options: JSON.parse(param.options as string)
+        }
+      : param.type === 'number'
+      ? { ...param, default: Number(param.default) }
+      : param.type === 'boolean'
+      ? { ...param, default: param.default === 'true' }
+      : param
+  )
+}
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index a082881e99..4deeb357c9 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -28,6 +28,7 @@ import { setNftMetadata } from '@utils/nft'
 import { sanitizeUrl } from '@utils/url'
 import { getEncryptedFiles } from '@utils/provider'
 import { assetStateToNumber } from '@utils/assetState'
+import { MetadataAlgorithmExtended } from '@components/Publish/_types'
 
 export default function Edit({
   asset
@@ -180,7 +181,7 @@ export default function Edit({
     <Formik
       enableReinitialize
       initialValues={getInitialValues(
-        asset?.metadata,
+        asset?.metadata as Metadata & { algorithm?: MetadataAlgorithmExtended },
         asset?.services[0]?.timeout,
         asset?.accessDetails?.price || '0',
         paymentCollector,
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index d68c37a0d5..3126d92329 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -130,6 +130,24 @@ export default function FormEditMetadata({
       />
 
       <Field {...getFieldContent('tags', data)} component={Input} name="tags" />
+
+      {asset.metadata.type === 'algorithm' && (
+        <>
+          <Field
+            {...getFieldContent('usesConsumerParameters', data)}
+            component={Input}
+            name="usesConsumerParameters"
+          />
+          {values.usesConsumerParameters && (
+            <Field
+              {...getFieldContent('consumerParameters', data)}
+              component={Input}
+              name="consumerParameters"
+            />
+          )}
+        </>
+      )}
+
       <Field
         {...getFieldContent('paymentCollector', data)}
         component={Input}
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index 5984a21643..2feda91125 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -1,29 +1,7 @@
 import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
-import { secondsToString } from '@utils/ddo'
+import { parseConsumerParameters, secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
-import {
-  AlgorithmConsumerParameter,
-  MetadataAlgorithmExtended
-} from '@components/Publish/_types'
-
-function parseConsumerParameters(
-  consumerParameters: AlgorithmConsumerParameter[]
-): AlgorithmConsumerParameter[] {
-  if (!consumerParameters?.length) return []
-
-  return consumerParameters.map((param) =>
-    param.type === 'select'
-      ? {
-          ...param,
-          options: JSON.parse(param.options as string)
-        }
-      : param.type === 'number'
-      ? { ...param, default: Number(param.default) }
-      : param.type === 'boolean'
-      ? { ...param, default: param.default === 'true' }
-      : param
-  )
-}
+import { MetadataAlgorithmExtended } from '@components/Publish/_types'
 
 export function getInitialValues(
   metadata: Metadata & { algorithm?: MetadataAlgorithmExtended },
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index 2a8563c58e..66098da33b 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/src/components/Asset/Edit/_types.ts
@@ -1,3 +1,4 @@
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
 import { FileInfo } from '@oceanprotocol/lib'
 export interface MetadataEditForm {
   name: string
@@ -9,6 +10,8 @@ export interface MetadataEditForm {
   links?: FileInfo[]
   author?: string
   tags?: string[]
+  usesConsumerParameters?: boolean
+  consumerParameters?: AlgorithmConsumerParameter[]
   assetState?: string
 }
 

From 3f30cda22cb61a1ea5fceb0cdc5e6d75473f2c44 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 28 Apr 2023 18:40:34 +0200
Subject: [PATCH 022/113] feat: transform consumer parameters values before
 edit

---
 src/components/Asset/Edit/EditMetadata.tsx |  8 ++++
 src/components/Asset/Edit/_validation.ts   | 43 ++++++++++++++++++++++
 src/components/Publish/_utils.ts           |  2 +-
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index 4deeb357c9..61888d0cc5 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -29,6 +29,7 @@ import { sanitizeUrl } from '@utils/url'
 import { getEncryptedFiles } from '@utils/provider'
 import { assetStateToNumber } from '@utils/assetState'
 import { MetadataAlgorithmExtended } from '@components/Publish/_types'
+import { transformConsumerParameters } from '@components/Publish/_utils'
 
 export default function Edit({
   asset
@@ -99,6 +100,13 @@ export default function Edit({
         tags: values.tags
       }
 
+      if (asset.metadata.type === 'algorithm') {
+        updatedMetadata.algorithm.consumerParameters =
+          !values.usesConsumerParameters
+            ? undefined
+            : transformConsumerParameters(values.consumerParameters)
+      }
+
       asset?.accessDetails?.type === 'fixed' &&
         values.price !== asset.accessDetails.price &&
         (await updateFixedPrice(values.price))
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index bc29ca701a..a5eb2402e6 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -2,6 +2,45 @@ import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import web3 from 'web3'
 import { testLinks } from '../../../@utils/yup'
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import { SchemaLike } from 'yup/lib/types'
+import { paramTypes } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
+
+const validationConsumerParameters: {
+  [key in keyof AlgorithmConsumerParameter]: SchemaLike
+} = {
+  name: Yup.string()
+    .test('unique', 'Parameter names must be unique', (name, context) => {
+      // TODO: revert any
+      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
+      const [parentFormObj, nextParentFormObj] = (context as any).from
+      if (
+        !nextParentFormObj?.value?.consumerParameters ||
+        nextParentFormObj.value.consumerParameters.length === 1
+      )
+        return true
+
+      const { consumerParameters } = nextParentFormObj.value
+      const occasions = consumerParameters.filter(
+        (params) => params.name === name
+      )
+      return occasions.length === 1
+    })
+    .required('Required'),
+  type: Yup.string().oneOf(paramTypes).required('Required'),
+  description: Yup.string().required('Required'),
+  label: Yup.string().required('Required'),
+  required: Yup.boolean().required('Required'),
+  default: Yup.mixed().required('Required'),
+  options: Yup.array().when('type', {
+    is: 'select',
+    then: Yup.array()
+      .of(Yup.object())
+      .min(1, 'At least one option needs to be defined')
+      .required('Required'),
+    otherwise: Yup.array()
+  })
+}
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -37,6 +76,10 @@ export const validationSchema = Yup.object().shape({
   timeout: Yup.string().required('Required'),
   author: Yup.string().nullable(),
   tags: Yup.array<string[]>().nullable(),
+  usesConsumerParameters: Yup.boolean(),
+  consumerParameters: Yup.array().of(
+    Yup.object().shape(validationConsumerParameters)
+  ),
   paymentCollector: Yup.string().test(
     'ValidAddress',
     'Must be a valid Ethereum Address.',
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index b5612de10b..5dd1c90fa6 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -62,7 +62,7 @@ function transformTags(originalTags: string[]): string[] {
   return transformedTags
 }
 
-function transformConsumerParameters(
+export function transformConsumerParameters(
   parameters: AlgorithmConsumerParameter[]
 ): AlgorithmConsumerParameter[] {
   if (!parameters?.length) return

From f8dbae3f9f73d057a389c29683abc274a31653de Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 29 Apr 2023 15:48:17 +0200
Subject: [PATCH 023/113] feat: update "required" type to select

---
 content/publish/form.json             |  8 ++++----
 src/components/Publish/_constants.tsx |  2 +-
 src/components/Publish/_types.ts      |  2 +-
 src/components/Publish/_utils.ts      | 13 +++++++++++--
 src/components/Publish/_validation.ts |  2 +-
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/content/publish/form.json b/content/publish/form.json
index 9eda8bc7f4..0a9b53da21 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -129,14 +129,14 @@
           {
             "name": "default",
             "label": "Default Value",
-            "required": true,
-            "placeholder": "Define the default value for the current parameter"
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
           },
           {
             "name": "required",
             "label": "Required",
-            "options": ["Parameter Required"],
-            "type": "checkbox",
+            "options": ["optional", "required"],
+            "type": "select",
             "required": true
           }
         ]
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index f7c20a3d33..42425bd0f6 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -78,7 +78,7 @@ export const initialValues: FormPublishData = {
         type: 'text',
         options: [],
         default: '',
-        required: false
+        required: ''
       }
     ]
   },
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 935a1be9d7..dca1b6b428 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -78,7 +78,7 @@ export interface AlgorithmConsumerParameter {
   name: string
   type: AlgorithmConsumerParameterType
   label: string
-  required: boolean
+  required: boolean | string
   description: string
   default: string | boolean | number
   options?: string | { [key: string]: string }[]
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 5dd1c90fa6..e504309173 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -69,8 +69,17 @@ export function transformConsumerParameters(
 
   const transformedValues = parameters.map((param) => {
     return param.type === 'select'
-      ? { ...param, options: JSON.stringify(param.options) }
-      : { ...param, options: undefined, default: param.default.toString() }
+      ? {
+          ...param,
+          required: param.required === 'required',
+          options: JSON.stringify(param.options)
+        }
+      : {
+          ...param,
+          required: param.required === 'required',
+          options: undefined,
+          default: param.default.toString()
+        }
   })
 
   return transformedValues
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index d314e8b02d..a8b21d088b 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -35,7 +35,7 @@ const validationConsumerParameters: {
   type: Yup.string().oneOf(paramTypes).required('Required'),
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
-  required: Yup.boolean().required('Required'),
+  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: 'select',

From ec2750926233d8b810dd0c4aa38811d661623f7d Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 29 Apr 2023 15:59:27 +0200
Subject: [PATCH 024/113] feat: update "required" type to select on edit form

---
 content/pages/editMetadata.json               |  8 +++---
 src/@utils/ddo.ts                             | 25 +++++++++++--------
 .../InputElement/ConsumerParameters/index.tsx | 16 ++++++------
 src/components/Asset/Edit/_validation.ts      |  2 +-
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index 104d3a28e6..6620e00255 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -234,14 +234,14 @@
           {
             "name": "default",
             "label": "Default Value",
-            "required": true,
-            "placeholder": "Define the default value for the current parameter"
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
           },
           {
             "name": "required",
             "label": "Required",
-            "options": ["Parameter Required"],
-            "type": "checkbox",
+            "options": ["optional", "required"],
+            "type": "select",
             "required": true
           }
         ]
diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 095f50be68..2a575f0754 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -197,16 +197,21 @@ export function parseConsumerParameters(
 ): AlgorithmConsumerParameter[] {
   if (!consumerParameters?.length) return []
 
-  return consumerParameters.map((param) =>
-    param.type === 'select'
+  return consumerParameters.map((param) => {
+    const updatedParam = {
+      ...param,
+      required: param.required === true ? 'required' : 'optional'
+    }
+
+    return updatedParam.type === 'select'
       ? {
-          ...param,
-          options: JSON.parse(param.options as string)
+          ...updatedParam,
+          options: JSON.parse(updatedParam.options as string)
         }
-      : param.type === 'number'
-      ? { ...param, default: Number(param.default) }
-      : param.type === 'boolean'
-      ? { ...param, default: param.default === 'true' }
-      : param
-  )
+      : updatedParam.type === 'number'
+      ? { ...updatedParam, default: Number(updatedParam.default) }
+      : updatedParam.type === 'boolean'
+      ? { ...updatedParam, default: updatedParam.default === 'true' }
+      : updatedParam
+  })
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index e6facdf5c8..cc33c291df 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -31,12 +31,12 @@ export function ConsumerParameters(props: InputProps): ReactElement {
 
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
-    validateField('metadata.consumerParameters')
+    validateField(field.name)
     Object.keys(initialValues.metadata.consumerParameters[0]).forEach((param) =>
-      setFieldTouched(`metadata.consumerParameters[${index}].${param}`, true)
+      setFieldTouched(`${field.name}[${index}].${param}`, true)
     )
 
-    if (errors?.metadata?.consumerParameters) return
+    if (errors?.[field.name]) return
 
     helpers.setValue([
       ...field.value,
@@ -56,8 +56,8 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     if (parameterName !== 'type') return
     if (field.value[index].type === parameterType) return
 
-    setFieldTouched(`metadata.consumerParameters[${index}].options`, false)
-    setFieldTouched(`metadata.consumerParameters[${index}].default`, false)
+    setFieldTouched(`${field.name}[${index}].options`, false)
+    setFieldTouched(`${field.name}[${index}].default`, false)
     helpers.setValue(
       field.value.map((p, i) => {
         if (i !== index) return p
@@ -72,8 +72,8 @@ export function ConsumerParameters(props: InputProps): ReactElement {
   }
 
   const showError = (name: string, index: number): boolean => {
-    const error = errors?.metadata?.consumerParameters?.[index]?.[name]
-    const isTouched = touched?.metadata?.consumerParameters?.[index]?.[name]
+    const error = errors?.[field.name]?.[index]?.[name]
+    const isTouched = touched?.[field.name]?.[index]?.[name]
 
     return error && isTouched
   }
@@ -104,7 +104,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       >
                         <InputOptions
                           {...subField}
-                          name="metadata.consumerParameters"
+                          name={field.name}
                           label="Options"
                           required
                           optionIndex={index}
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index a5eb2402e6..3a5b2c178e 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -30,7 +30,7 @@ const validationConsumerParameters: {
   type: Yup.string().oneOf(paramTypes).required('Required'),
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
-  required: Yup.boolean().required('Required'),
+  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: 'select',

From bf063dc591c62abe263c8ab5931d565e81a39d89 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 2 May 2023 17:20:49 +0200
Subject: [PATCH 025/113] fix: error object access

---
 .../InputElement/ConsumerParameters/index.tsx | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index cc33c291df..20144e74a2 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -11,6 +11,7 @@ import styles from './index.module.css'
 import InputOptions from './InputOptions'
 import classNames from 'classnames/bind'
 import { initialValues } from '@components/Publish/_constants'
+import { getObjectPropertyByPath } from '@utils/index'
 
 const cx = classNames.bind(styles)
 
@@ -36,7 +37,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
       setFieldTouched(`${field.name}[${index}].${param}`, true)
     )
 
-    if (errors?.[field.name]) return
+    if (getObjectPropertyByPath(errors, field.name)) return
 
     helpers.setValue([
       ...field.value,
@@ -48,7 +49,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     helpers.setValue(field.value.filter((p, i) => i !== index))
   }
 
-  const resetOptionsAndDefault = (
+  const resetDefaultValue = (
     parameterName: string,
     parameterType: AlgorithmConsumerParameter['type'],
     index: number
@@ -56,7 +57,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     if (parameterName !== 'type') return
     if (field.value[index].type === parameterType) return
 
-    setFieldTouched(`${field.name}[${index}].options`, false)
     setFieldTouched(`${field.name}[${index}].default`, false)
     helpers.setValue(
       field.value.map((p, i) => {
@@ -71,15 +71,14 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     )
   }
 
-  const showError = (name: string, index: number): boolean => {
-    const error = errors?.[field.name]?.[index]?.[name]
-    const isTouched = touched?.[field.name]?.[index]?.[name]
-
-    return error && isTouched
-  }
+  const showError = (name: string, index: number): boolean =>
+    [errors, touched].every(
+      (object) =>
+        !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
+    )
 
   const getStringOptions = (options: { [key: string]: string }[]): string[] => {
-    if (!options.length) return []
+    if (!options?.length) return []
 
     return options.map((option) => Object.keys(option)[0])
   }
@@ -133,7 +132,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                         name={`${field.name}[${index}].${subField.name}`}
                         key={`${field.name}[${index}].${subField.name}`}
                         type={
-                          field.value[index].type.includes('boolean')
+                          field.value[index].type === 'boolean'
                             ? 'select'
                             : field.value[index].type
                         }
@@ -159,11 +158,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       name={`${field.name}[${index}].${subField.name}`}
                       key={`${field.name}[${index}].${subField.name}`}
                       onChange={(e) => {
-                        resetOptionsAndDefault(
-                          subField.name,
-                          e.target.value,
-                          index
-                        )
+                        resetDefaultValue(subField.name, e.target.value, index)
                         field.onChange(e)
                       }}
                     />

From 9a6e792358ea29eb3c1e6bad2e74cdaa7e12a728 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 09:54:27 +0200
Subject: [PATCH 026/113] fix: edit flow crash

---
 src/components/@shared/FormInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 62f7c90a1f..2029335cae 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -81,7 +81,7 @@ function checkError(form: any, field: FieldInputProps<any>) {
     errors &&
     !field.name.endsWith('.files') &&
     !field.name.endsWith('.links') &&
-    !field.name.endsWith('.consumerParameters')
+    !field.name.endsWith('consumerParameters')
   )
 
   // if (

From b1146ddf5889f50ca0feb78c7e6007f7ac5a0ede Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 11:00:36 +0200
Subject: [PATCH 027/113] fix: validation when consumer parameters are not
 selected

---
 .../InputElement/ConsumerParameters/index.tsx    | 16 +++++++++++++++-
 src/components/Publish/_constants.tsx            | 12 +-----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 20144e74a2..06ba430f42 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,5 +1,5 @@
 import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import Input, { InputProps } from '../..'
 import {
   AlgorithmConsumerParameter,
@@ -15,6 +15,16 @@ import { getObjectPropertyByPath } from '@utils/index'
 
 const cx = classNames.bind(styles)
 
+const defaultParam: AlgorithmConsumerParameter = {
+  name: '',
+  label: '',
+  description: '',
+  type: 'text',
+  options: [],
+  default: '',
+  required: ''
+}
+
 export const paramTypes: AlgorithmConsumerParameter['type'][] = [
   'number',
   'text',
@@ -30,6 +40,10 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     props.name
   )
 
+  useEffect(() => {
+    if (field.value.length === 0) helpers.setValue([{ ...defaultParam }])
+  }, [])
+
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
     validateField(field.name)
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 42425bd0f6..ed88b8b5ca 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -70,17 +70,7 @@ export const initialValues: FormPublishData = {
     dockerImageCustomTag: '',
     dockerImageCustomEntrypoint: '',
     usesConsumerParameters: false,
-    consumerParameters: [
-      {
-        name: '',
-        label: '',
-        description: '',
-        type: 'text',
-        options: [],
-        default: '',
-        required: ''
-      }
-    ]
+    consumerParameters: []
   },
   services: [
     {

From 7a53cbc77588dade08f1bdb54abde37e8c6c4046 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 14:38:39 +0200
Subject: [PATCH 028/113] feat: update validation for default consumer
 parameters value

---
 src/components/Asset/Edit/_validation.ts | 8 +++++++-
 src/components/Publish/_validation.ts    | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 3a5b2c178e..7eb3186c2e 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -31,7 +31,13 @@ const validationConsumerParameters: {
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
   required: Yup.string().oneOf(['optional', 'required']).required('Required'),
-  default: Yup.mixed().required('Required'),
+  default: Yup.mixed().when('required', {
+    is: 'optional',
+    then: Yup.mixed()
+      .nullable()
+      .transform((value) => value || null),
+    otherwise: Yup.mixed().required('Required')
+  }),
   options: Yup.array().when('type', {
     is: 'select',
     then: Yup.array()
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index a8b21d088b..77e21de3f7 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -36,7 +36,13 @@ const validationConsumerParameters: {
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
   required: Yup.string().oneOf(['optional', 'required']).required('Required'),
-  default: Yup.mixed().required('Required'),
+  default: Yup.mixed().when('required', {
+    is: 'optional',
+    then: Yup.mixed()
+      .nullable()
+      .transform((value) => value || null),
+    otherwise: Yup.mixed().required('Required')
+  }),
   options: Yup.array().when('type', {
     is: 'select',
     then: Yup.array()

From 475e0d65f555e67f76f1c0f368d7f8d00d3142fb Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 14:38:43 +0200
Subject: [PATCH 029/113] fix: types

---
 src/@types/MetadataExtended.d.ts               | 9 +++++++++
 src/components/Asset/Edit/EditMetadata.tsx     | 2 +-
 src/components/Asset/Edit/FormEditMetadata.tsx | 3 ++-
 src/components/Asset/Edit/_constants.ts        | 5 ++---
 src/components/Publish/_utils.ts               | 2 +-
 5 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 src/@types/MetadataExtended.d.ts

diff --git a/src/@types/MetadataExtended.d.ts b/src/@types/MetadataExtended.d.ts
new file mode 100644
index 0000000000..bd7222a179
--- /dev/null
+++ b/src/@types/MetadataExtended.d.ts
@@ -0,0 +1,9 @@
+import { Metadata } from '@oceanprotocol/lib'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface MetadataExtended extends Metadata {
+    algorithm?: MetadataAlgorithmExtended
+  }
+}
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index 61888d0cc5..70e98a5266 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -91,7 +91,7 @@ export default function Edit({
       let updatedFiles = asset.services[0].files
       const linksTransformed = values.links?.length &&
         values.links[0].valid && [sanitizeUrl(values.links[0].url)]
-      const updatedMetadata: Metadata = {
+      const updatedMetadata: MetadataExtended = {
         ...asset.metadata,
         name: values.name,
         description: values.description,
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 3126d92329..786ea9550d 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -138,7 +138,8 @@ export default function FormEditMetadata({
             component={Input}
             name="usesConsumerParameters"
           />
-          {values.usesConsumerParameters && (
+          {(values as unknown as FormPublishData['metadata'])
+            .usesConsumerParameters && (
             <Field
               {...getFieldContent('consumerParameters', data)}
               component={Input}
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index 2feda91125..0aec577baa 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -1,10 +1,9 @@
-import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
+import { ServiceComputeOptions } from '@oceanprotocol/lib'
 import { parseConsumerParameters, secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
-import { MetadataAlgorithmExtended } from '@components/Publish/_types'
 
 export function getInitialValues(
-  metadata: Metadata & { algorithm?: MetadataAlgorithmExtended },
+  metadata: MetadataExtended,
   timeout: number,
   price: string,
   paymentCollector: string,
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index e504309173..091cdf98d4 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -129,7 +129,7 @@ export async function transformPublishFormToDdo(
   const consumerParametersTransformed =
     usesConsumerParameters && transformConsumerParameters(consumerParameters)
 
-  const newMetadata: Metadata & { algorithm?: MetadataAlgorithmExtended } = {
+  const newMetadata: MetadataExtended = {
     created: currentTime,
     updated: currentTime,
     type,

From a34a85e158a2e95da8601ea2602885a29a737072 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 15:32:57 +0200
Subject: [PATCH 030/113] feat: add service consumer parameters to publish form

---
 content/publish/form.json                     | 67 +++++++++++++++++++
 src/@types/ServiceExtended.d.ts               |  9 +++
 .../InputElement/ConsumerParameters/index.tsx | 12 ++--
 src/components/Publish/Services/index.tsx     | 24 ++++++-
 src/components/Publish/_constants.tsx         |  4 +-
 src/components/Publish/_types.ts              |  2 +
 src/components/Publish/_utils.ts              |  7 +-
 src/components/Publish/_validation.ts         |  6 +-
 8 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 src/@types/ServiceExtended.d.ts

diff --git a/content/publish/form.json b/content/publish/form.json
index 0a9b53da21..708ceca0cc 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -322,6 +322,73 @@
         "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
         "sortOptions": false,
         "required": true
+      },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Uses consumer parameters",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
+        "type": "checkbox",
+        "options": ["This algorithm uses consumer parameters"],
+        "required": false
+      },
+      {
+        "name": "consumerParameters",
+        "label": "Consumer parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["optional", "required"],
+            "type": "select",
+            "required": true
+          }
+        ]
       }
     ]
   },
diff --git a/src/@types/ServiceExtended.d.ts b/src/@types/ServiceExtended.d.ts
new file mode 100644
index 0000000000..5ff9e2ea4e
--- /dev/null
+++ b/src/@types/ServiceExtended.d.ts
@@ -0,0 +1,9 @@
+import { Service } from '@oceanprotocol/lib'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface ServiceExtended extends Service {
+    consumerParameters?: AlgorithmConsumerParameter
+  }
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 06ba430f42..a9860f7b4d 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -10,7 +10,6 @@ import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import InputOptions from './InputOptions'
 import classNames from 'classnames/bind'
-import { initialValues } from '@components/Publish/_constants'
 import { getObjectPropertyByPath } from '@utils/index'
 
 const cx = classNames.bind(styles)
@@ -47,16 +46,13 @@ export function ConsumerParameters(props: InputProps): ReactElement {
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
     validateField(field.name)
-    Object.keys(initialValues.metadata.consumerParameters[0]).forEach((param) =>
+    Object.keys(defaultParam).forEach((param) =>
       setFieldTouched(`${field.name}[${index}].${param}`, true)
     )
 
     if (getObjectPropertyByPath(errors, field.name)) return
 
-    helpers.setValue([
-      ...field.value,
-      { ...initialValues.metadata.consumerParameters[0] }
-    ])
+    helpers.setValue([...field.value, { ...defaultParam }])
   }
 
   const deleteParameter = (index: number) => {
@@ -77,9 +73,9 @@ export function ConsumerParameters(props: InputProps): ReactElement {
         if (i !== index) return p
 
         return {
-          ...initialValues.metadata.consumerParameters[0],
+          ...defaultParam,
           ...p,
-          default: initialValues.metadata.consumerParameters[0].default
+          default: defaultParam.default
         }
       })
     )
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index 4fca2c9a34..3727ab7f94 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -20,7 +20,7 @@ export default function ServicesFields(): ReactElement {
 
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
-
+  console.log(values)
   // name and title should be download, but option value should be access, probably the best way would be to change the component so that option is an object like {name,value}
   const accessTypeOptions = [
     {
@@ -108,6 +108,28 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].timeout"
       />
+      {values.metadata.type === 'algorithm' && (
+        <>
+          <Field
+            {...getFieldContent(
+              'usesConsumerParameters',
+              content.services.fields
+            )}
+            component={Input}
+            name="services[0].usesConsumerParameters"
+          />
+          {values.services[0].usesConsumerParameters && (
+            <Field
+              {...getFieldContent(
+                'consumerParameters',
+                content.services.fields
+              )}
+              component={Input}
+              name="services[0].consumerParameters"
+            />
+          )}
+        </>
+      )}
     </>
   )
 }
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index ed88b8b5ca..ec0644015d 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -84,7 +84,9 @@ export const initialValues: FormPublishData = {
         valid: true,
         custom: false
       },
-      computeOptions
+      computeOptions,
+      usesConsumerParameters: false,
+      consumerParameters: []
     }
   ],
   pricing: {
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index dca1b6b428..7fbf58f3c6 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -14,6 +14,8 @@ export interface FormPublishService {
   providerUrl: { url: string; valid: boolean; custom: boolean }
   algorithmPrivacy?: boolean
   computeOptions?: ServiceComputeOptions
+  usesConsumerParameters?: boolean
+  consumerParameters?: AlgorithmConsumerParameter[]
 }
 
 export interface FormPublishData {
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 091cdf98d4..f5ae764e52 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -184,7 +184,7 @@ export async function transformPublishFormToDdo(
     files[0].valid &&
     (await getEncryptedFiles(file, chainId, providerUrl.url))
 
-  const newService: Service = {
+  const newService: ServiceExtended = {
     id: getHash(datatokenAddress + filesEncrypted),
     type: access,
     files: filesEncrypted || '',
@@ -193,7 +193,10 @@ export async function transformPublishFormToDdo(
     timeout: mapTimeoutStringToSeconds(timeout),
     ...(access === 'compute' && {
       compute: values.services[0].computeOptions
-    })
+    }),
+    consumerParameters:
+      values.services[0].usesConsumerParameters &&
+      transformConsumerParameters(values.services[0].consumerParameters)
   }
 
   const newDdo: DDO = {
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 77e21de3f7..f7a9b3b886 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -109,7 +109,11 @@ const validationService = {
     url: Yup.string().url('Must be a valid URL.').required('Required'),
     valid: Yup.boolean().isTrue().required('Valid Provider is required.'),
     custom: Yup.boolean()
-  })
+  }),
+  usesConsumerParameters: Yup.boolean(),
+  consumerParameters: Yup.array().of(
+    Yup.object().shape(validationConsumerParameters)
+  )
 }
 
 const validationPricing = {

From 3321b472ea2c2ff9abf716a330acda7cc77eefa5 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 15:33:15 +0200
Subject: [PATCH 031/113] chore: remove console.log

---
 src/components/Publish/Services/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index 3727ab7f94..89c4b45fc8 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -20,7 +20,7 @@ export default function ServicesFields(): ReactElement {
 
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
-  console.log(values)
+
   // name and title should be download, but option value should be access, probably the best way would be to change the component so that option is an object like {name,value}
   const accessTypeOptions = [
     {

From ca78e3df8c56754cdf695ce7213d7ba953f41189 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 17:03:16 +0200
Subject: [PATCH 032/113] feat: add service consumer parameters edit

---
 content/pages/editMetadata.json               | 67 +++++++++++++++++++
 src/components/Asset/Edit/EditMetadata.tsx    | 10 ++-
 .../Asset/Edit/FormEditMetadata.module.css    |  4 ++
 .../Asset/Edit/FormEditMetadata.tsx           | 21 ++++++
 src/components/Asset/Edit/_constants.ts       | 10 ++-
 src/components/Asset/Edit/_types.ts           |  4 ++
 src/components/Asset/Edit/_validation.ts      |  8 ++-
 src/components/Publish/_types.ts              |  4 ++
 8 files changed, 122 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Asset/Edit/FormEditMetadata.module.css

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index 6620e00255..45b764214d 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -266,6 +266,73 @@
         ],
         "sortOptions": false,
         "required": false
+      },
+      {
+        "name": "usesServiceConsumerParameters",
+        "label": "Uses consumer parameters",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
+        "type": "checkbox",
+        "options": ["This algorithm uses consumer parameters"],
+        "required": false
+      },
+      {
+        "name": "serviceConsumerParameters",
+        "label": "Consumer parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["optional", "required"],
+            "type": "select",
+            "required": true
+          }
+        ]
       }
     ]
   }
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index 70e98a5266..425041fe9a 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -134,11 +134,17 @@ export default function Edit({
         )
         updatedFiles = filesEncrypted
       }
-      const updatedService: Service = {
+      const updatedService: ServiceExtended = {
         ...asset.services[0],
         timeout: mapTimeoutStringToSeconds(values.timeout),
         files: updatedFiles
       }
+      if (asset.metadata.type === 'algorithm') {
+        updatedService.consumerParameters = !values.service
+          ?.usesConsumerParameters
+          ? undefined
+          : transformConsumerParameters(values.service.consumerParameters)
+      }
 
       // TODO: remove version update at a later time
       const updatedAsset: Asset = {
@@ -190,7 +196,7 @@ export default function Edit({
       enableReinitialize
       initialValues={getInitialValues(
         asset?.metadata as Metadata & { algorithm?: MetadataAlgorithmExtended },
-        asset?.services[0]?.timeout,
+        asset?.services[0],
         asset?.accessDetails?.price || '0',
         paymentCollector,
         assetState
diff --git a/src/components/Asset/Edit/FormEditMetadata.module.css b/src/components/Asset/Edit/FormEditMetadata.module.css
new file mode 100644
index 0000000000..d213f7dea5
--- /dev/null
+++ b/src/components/Asset/Edit/FormEditMetadata.module.css
@@ -0,0 +1,4 @@
+.serviceContainer {
+  border-top: 1px solid var(--border-color);
+  padding-top: var(--spacer);
+}
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 786ea9550d..dfe6cf53fa 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -7,6 +7,7 @@ import { FormPublishData } from '@components/Publish/_types'
 import { getFileInfo } from '@utils/provider'
 import { getFieldContent } from '@utils/form'
 import { isGoogleUrl } from '@utils/url'
+import styles from './FormEditMetadata.module.css'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -159,6 +160,26 @@ export default function FormEditMetadata({
         component={Input}
         name="assetState"
       />
+      <div className={styles.serviceContainer}>
+        <h4>Service</h4>
+        {asset.metadata.type === 'algorithm' && (
+          <>
+            <Field
+              {...getFieldContent('usesServiceConsumerParameters', data)}
+              component={Input}
+              name="service.usesConsumerParameters"
+            />
+            {(values as unknown as FormPublishData['metadata']).service
+              .usesConsumerParameters && (
+              <Field
+                {...getFieldContent('serviceConsumerParameters', data)}
+                component={Input}
+                name="service.consumerParameters"
+              />
+            )}
+          </>
+        )}
+      </div>
 
       <FormActions />
     </Form>
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index 0aec577baa..e573167381 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -4,7 +4,7 @@ import { ComputeEditForm, MetadataEditForm } from './_types'
 
 export function getInitialValues(
   metadata: MetadataExtended,
-  timeout: number,
+  service: ServiceExtended,
   price: string,
   paymentCollector: string,
   assetState: string
@@ -15,7 +15,7 @@ export function getInitialValues(
     price,
     links: [{ url: '', type: 'url' }],
     files: [{ url: '', type: 'ipfs' }],
-    timeout: secondsToString(timeout),
+    timeout: secondsToString(service?.timeout),
     author: metadata?.author,
     tags: metadata?.tags,
     usesConsumerParameters: metadata?.algorithm?.consumerParameters?.length > 0,
@@ -23,7 +23,11 @@ export function getInitialValues(
       metadata?.algorithm?.consumerParameters
     ),
     paymentCollector,
-    assetState
+    assetState,
+    service: {
+      usesConsumerParameters: service?.consumerParameters?.length > 0,
+      consumerParameters: parseConsumerParameters(service?.consumerParameters)
+    }
   }
 }
 
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index 66098da33b..76ce13da69 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/src/components/Asset/Edit/_types.ts
@@ -13,6 +13,10 @@ export interface MetadataEditForm {
   usesConsumerParameters?: boolean
   consumerParameters?: AlgorithmConsumerParameter[]
   assetState?: string
+  service?: {
+    usesConsumerParameters?: boolean
+    consumerParameters?: AlgorithmConsumerParameter[]
+  }
 }
 
 export interface ComputeEditForm {
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 7eb3186c2e..09637ca54d 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -93,7 +93,13 @@ export const validationSchema = Yup.object().shape({
       return web3.utils.isAddress(value)
     }
   ),
-  retireAsset: Yup.string()
+  retireAsset: Yup.string(),
+  service: Yup.object().shape({
+    usesConsumerParameters: Yup.boolean(),
+    consumerParameters: Yup.array().of(
+      Yup.object().shape(validationConsumerParameters)
+    )
+  })
 })
 
 export const computeSettingsValidationSchema = Yup.object().shape({
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 7fbf58f3c6..b5ecd71da6 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -40,6 +40,10 @@ export interface FormPublishData {
     dockerImageCustomChecksum?: string
     usesConsumerParameters?: boolean
     consumerParameters?: AlgorithmConsumerParameter[]
+    service?: {
+      usesConsumerParameters?: boolean
+      consumerParameters?: AlgorithmConsumerParameter[]
+    }
   }
   services: FormPublishService[]
   pricing: PricePublishOptions

From 22c106a01c904105752898979891e7fc327d344e Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 17:04:05 +0200
Subject: [PATCH 033/113] chore: remove comments

---
 src/components/@shared/FormInput/index.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 2029335cae..84c60d2361 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -83,15 +83,6 @@ function checkError(form: any, field: FieldInputProps<any>) {
     !field.name.endsWith('.links') &&
     !field.name.endsWith('consumerParameters')
   )
-
-  // if (
-  //   (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
-  //     form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
-  //   (form?.touched[field?.name] &&
-  //     form?.errors[field?.name]
-  // ) {
-  //   return true
-  // }
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {

From 6fdda186830848d3746360431a0b77e969788e22 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 3 May 2023 17:21:16 +0200
Subject: [PATCH 034/113] fix: form edit metadata types

---
 src/components/Asset/Edit/FormEditMetadata.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index dfe6cf53fa..69398c91ba 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -8,6 +8,7 @@ import { getFileInfo } from '@utils/provider'
 import { getFieldContent } from '@utils/form'
 import { isGoogleUrl } from '@utils/url'
 import styles from './FormEditMetadata.module.css'
+import { MetadataEditForm } from './_types'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -30,7 +31,7 @@ export default function FormEditMetadata({
 }): ReactElement {
   const { asset } = useAsset()
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
-
+  console.log(values, values?.services)
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
   // https://github.com/oceanprotocol/market/pull/324#discussion_r561132310
@@ -139,8 +140,7 @@ export default function FormEditMetadata({
             component={Input}
             name="usesConsumerParameters"
           />
-          {(values as unknown as FormPublishData['metadata'])
-            .usesConsumerParameters && (
+          {(values as unknown as MetadataEditForm).usesConsumerParameters && (
             <Field
               {...getFieldContent('consumerParameters', data)}
               component={Input}
@@ -169,7 +169,7 @@ export default function FormEditMetadata({
               component={Input}
               name="service.usesConsumerParameters"
             />
-            {(values as unknown as FormPublishData['metadata']).service
+            {(values as unknown as MetadataEditForm).service
               .usesConsumerParameters && (
               <Field
                 {...getFieldContent('serviceConsumerParameters', data)}

From 4722e5735dee3e3e179b23321ae5d09631333d39 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 12:27:08 +0200
Subject: [PATCH 035/113] feat: add consume algo parameter structure

---
 .../InputElement/ConsumerParameters/index.tsx | 16 +++--
 .../Compute/ConsumerParameters.module.css     | 34 ++++++++++
 .../Compute/ConsumerParameters.tsx            | 56 ++++++++++++++++
 .../Compute/FormComputeDataset.module.css     |  9 +++
 .../Compute/FormComputeDataset.tsx            | 67 ++++++++++++++++++-
 .../Compute/PriceOutput.module.css            |  1 -
 6 files changed, 174 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
 create mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index a9860f7b4d..be12ce97a8 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -31,6 +31,14 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
   'select'
 ]
 
+export const getConsumerParameterStringOptions = (
+  options: { [key: string]: string }[]
+): string[] => {
+  if (!options?.length) return []
+
+  return options.map((option) => Object.keys(option)[0])
+}
+
 export function ConsumerParameters(props: InputProps): ReactElement {
   const { errors, setFieldTouched, validateField, touched } =
     useFormikContext<FormPublishData>()
@@ -87,12 +95,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
         !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
     )
 
-  const getStringOptions = (options: { [key: string]: string }[]): string[] => {
-    if (!options?.length) return []
-
-    return options.map((option) => Object.keys(option)[0])
-  }
-
   return (
     <div className={styles.container}>
       <Tabs
@@ -150,7 +152,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                           field.value[index].type === 'boolean'
                             ? ['true', 'false']
                             : field.value[index].type === 'select'
-                            ? getStringOptions(
+                            ? getConsumerParameterStringOptions(
                                 field.value[index]?.options as {
                                   [key: string]: string
                                 }[]
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
new file mode 100644
index 0000000000..b2d76634b8
--- /dev/null
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
@@ -0,0 +1,34 @@
+/* .container {
+  min-height: fit-content;
+  max-height: 50vh;
+} */
+
+.container > label {
+  margin-bottom: calc(var(--spacer) / 2);
+  text-align: center;
+}
+
+.parametersContainer {
+  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-highlight);
+  border-radius: var(--border-radius);
+  margin-bottom: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+  min-height: 250px;
+  max-height: 30vh;
+
+  /* smooth overflow scrolling for pre-iOS 13 */
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.parametersContainer div {
+  margin-bottom: calc(var(--spacer));
+}
+
+.description {
+  font-size: var(--font-size-small);
+  color: var(--brand-grey-light);
+  margin-bottom: calc(var(--spacer) / 4);
+}
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
new file mode 100644
index 0000000000..51ee9db22c
--- /dev/null
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
@@ -0,0 +1,56 @@
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import React, { ReactElement, useEffect, useState } from 'react'
+import styles from './ConsumerParameters.module.css'
+import Label from '@components/@shared/FormInput/Label'
+import InputElement from '@components/@shared/FormInput/InputElement'
+import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
+
+export default function ConsumerParameters({
+  parameters
+}: {
+  parameters: AlgorithmConsumerParameter[]
+}): ReactElement {
+  const [selectedValues, setSelectedValues] = useState({})
+
+  useEffect(() => {
+    const defaultValues = {}
+    parameters.forEach((param) => (defaultValues[param.name] = param.default))
+
+    setSelectedValues(defaultValues)
+  }, [])
+
+  console.log(selectedValues)
+  console.log(parameters)
+  const requiredParameters = parameters.filter((param) => param.required)
+  const optionalParameters = parameters.filter((param) => !param.required)
+  return (
+    <div className={styles.container}>
+      <Label htmlFor="required parameters">Required parameters</Label>
+      <div className={styles.parametersContainer}>
+        {parameters?.map((param) => (
+          <div key={param.name}>
+            <Label htmlFor={param.name}>{param.label}</Label>
+            <p className={styles.description}>{param.description}</p>
+            <p className={styles.description}>{`type: ${param.type}`}</p>
+            <InputElement
+              name={param.name}
+              type={param.type === 'boolean' ? 'select' : param.type}
+              options={
+                param.type === 'boolean'
+                  ? ['true', 'false']
+                  : param.type === 'select'
+                  ? getConsumerParameterStringOptions(
+                      param?.options as {
+                        [key: string]: string
+                      }[]
+                    )
+                  : param.options
+              }
+              default={param.default}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
index a6d5aeb184..2907197152 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
@@ -26,3 +26,12 @@
 .warning {
   margin-bottom: var(--spacer);
 }
+
+.consumerParamsContainer {
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index a84e7af136..e55426fbd0 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -16,6 +16,9 @@ import Alert from '@shared/atoms/Alert'
 import { getTokenBalanceFromSymbol } from '@utils/web3'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
+import ConsumerParameters from './ConsumerParameters'
+import Tabs from '@components/@shared/atoms/Tabs'
+import { parseConsumerParameters } from '@utils/ddo'
 
 export default function FormStartCompute({
   algorithms,
@@ -232,6 +235,64 @@ export default function FormStartCompute({
     })
   }, [balance, dtBalance, datasetSymbol, algorithmSymbol, totalPrices])
 
+  // const updateTabs = useCallback(() => {
+  //   const tabs = []
+  //   if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
+  //     tabs.push({
+  //       title: 'Algo service',
+  //       content: (
+  //         <ConsumerParameters
+  //           parameters={selectedAlgorithmAsset.services[0]?.consumerParameters}
+  //         />
+  //       )
+  //     })
+  //   }
+  //   if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
+  //     tabs.push({
+  //       title: 'Algo service',
+  //       content: (
+  //         <ConsumerParameters
+  //           parameters={
+  //             selectedAlgorithmAsset.metadata?.algorithm?.consumerParameters
+  //           }
+  //         />
+  //       )
+  //     })
+  //   }
+  //   return tabs
+  // }, [selectedAlgorithmAsset])
+  // const [tabs, setTabs] = useState(updateTabs())
+
+  // useEffect(() => {
+  //   setTabs(updateTabs())
+  // }, [updateTabs])
+
+  const tabs = []
+  if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
+    tabs.push({
+      title: 'Algo service',
+      content: (
+        <ConsumerParameters
+          parameters={parseConsumerParameters(
+            selectedAlgorithmAsset.services[0]?.consumerParameters
+          )}
+        />
+      )
+    })
+  }
+  if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
+    tabs.push({
+      title: 'Algo service',
+      content: (
+        <ConsumerParameters
+          parameters={parseConsumerParameters(
+            selectedAlgorithmAsset.metadata?.algorithm?.consumerParameters
+          )}
+        />
+      )
+    })
+  }
+
   return (
     <Form className={styles.form}>
       <Alert
@@ -250,7 +311,11 @@ export default function FormStartCompute({
           />
         )
       })}
-
+      {selectedAlgorithmAsset && (
+        <div className={styles.consumerParamsContainer}>
+          <Tabs items={tabs} />
+        </div>
+      )}
       <PriceOutput
         hasPreviousOrder={hasPreviousOrder}
         assetTimeout={assetTimeout}
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
index 413f2f8598..a163c2c87c 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
@@ -1,7 +1,6 @@
 .priceComponent {
   margin-left: -2rem;
   margin-right: -2rem;
-  margin-top: -1rem;
   margin-bottom: calc(var(--spacer) / 1.5);
   padding-left: calc(var(--spacer) / 2);
   padding-right: calc(var(--spacer) / 2);

From 7f4a5b9aeb5acf54e5747ba58adadf691a2ab242 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 12:31:47 +0200
Subject: [PATCH 036/113] feat: consumer parameter required default value
 condition

---
 content/pages/editMetadata.json                      | 12 ++++++------
 content/publish/form.json                            | 12 ++++++------
 .../InputElement/ConsumerParameters/index.tsx        |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index 45b764214d..14febf932b 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -319,18 +319,18 @@
             "type": "creatableSelect",
             "required": false
           },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          },
           {
             "name": "required",
             "label": "Required",
             "options": ["optional", "required"],
             "type": "select",
             "required": true
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
           }
         ]
       }
diff --git a/content/publish/form.json b/content/publish/form.json
index 708ceca0cc..e5b205077d 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -126,18 +126,18 @@
             "type": "creatableSelect",
             "required": false
           },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          },
           {
             "name": "required",
             "label": "Required",
             "options": ["optional", "required"],
             "type": "select",
             "required": true
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
           }
         ]
       },
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index a9860f7b4d..beeab74dc8 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -138,6 +138,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     return (
                       <Field
                         {...subField}
+                        required={field.value[index].required === 'required'}
                         component={Input}
                         name={`${field.name}[${index}].${subField.name}`}
                         key={`${field.name}[${index}].${subField.name}`}

From 247c43ceff5f1f480703f862d22d7a948952e697 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 16:08:35 +0200
Subject: [PATCH 037/113] feat: add consumer parameter groups to assetActions

---
 .../Compute/ConsumerParameters.module.css     |  42 ++++++--
 .../Compute/ConsumerParameters.tsx            | 100 ++++++++++++------
 2 files changed, 102 insertions(+), 40 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
index b2d76634b8..854a91d34a 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
@@ -1,9 +1,8 @@
-/* .container {
-  min-height: fit-content;
+.container {
   max-height: 50vh;
-} */
+}
 
-.container > label {
+.parameterGroupContainer > label {
   margin-bottom: calc(var(--spacer) / 2);
   text-align: center;
 }
@@ -23,12 +22,39 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.parametersContainer div {
-  margin-bottom: calc(var(--spacer));
+.parameter {
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-bottom: calc(var(--spacer) / 2);
+  padding-bottom: calc(var(--spacer) / 2);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.description {
-  font-size: var(--font-size-small);
+.parameter:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+
+.parameterDetails {
+  padding-left: 1rem;
+  padding-left: 1rem;
+}
+
+.parameterDetails > label {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.description,
+.type {
   color: var(--brand-grey-light);
   margin-bottom: calc(var(--spacer) / 4);
 }
+
+.description {
+  font-size: var(--font-size-small);
+}
+
+.type {
+  font-size: var(--font-size-mini);
+}
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
index 51ee9db22c..4239d029da 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
@@ -1,5 +1,5 @@
 import { AlgorithmConsumerParameter } from '@components/Publish/_types'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
 import styles from './ConsumerParameters.module.css'
 import Label from '@components/@shared/FormInput/Label'
 import InputElement from '@components/@shared/FormInput/InputElement'
@@ -17,40 +17,76 @@ export default function ConsumerParameters({
     parameters.forEach((param) => (defaultValues[param.name] = param.default))
 
     setSelectedValues(defaultValues)
-  }, [])
+  }, [parameters])
+
+  const groupedParameters = [
+    {
+      title: 'Required Parameters',
+      content: parameters.filter((param) => param.required)
+    },
+    {
+      title: 'Optional Parameters',
+      content: parameters.filter((param) => !param.required)
+    }
+  ]
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement>,
+    paramName: string
+  ) => {
+    const updatedSelectedValues = {
+      ...selectedValues,
+      [paramName]: e.target.value
+    }
+    setSelectedValues(updatedSelectedValues)
+  }
 
-  console.log(selectedValues)
-  console.log(parameters)
-  const requiredParameters = parameters.filter((param) => param.required)
-  const optionalParameters = parameters.filter((param) => !param.required)
   return (
     <div className={styles.container}>
-      <Label htmlFor="required parameters">Required parameters</Label>
-      <div className={styles.parametersContainer}>
-        {parameters?.map((param) => (
-          <div key={param.name}>
-            <Label htmlFor={param.name}>{param.label}</Label>
-            <p className={styles.description}>{param.description}</p>
-            <p className={styles.description}>{`type: ${param.type}`}</p>
-            <InputElement
-              name={param.name}
-              type={param.type === 'boolean' ? 'select' : param.type}
-              options={
-                param.type === 'boolean'
-                  ? ['true', 'false']
-                  : param.type === 'select'
-                  ? getConsumerParameterStringOptions(
-                      param?.options as {
-                        [key: string]: string
-                      }[]
-                    )
-                  : param.options
-              }
-              default={param.default}
-            />
-          </div>
-        ))}
-      </div>
+      {groupedParameters.map(
+        (parameterGroup) =>
+          parameterGroup.content.length > 0 && (
+            <div
+              key={parameterGroup.title}
+              className={styles.parameterGroupContainer}
+            >
+              <Label htmlFor={parameterGroup.title}>
+                {parameterGroup.title}
+              </Label>
+              <div className={styles.parametersContainer}>
+                {parameterGroup.content?.map((param) => (
+                  <div key={param.name} className={styles.parameter}>
+                    <div key={param.name} className={styles.parameterDetails}>
+                      <Label htmlFor={param.name}>{param.label}</Label>
+                      <p className={styles.type}>{`type: ${param.type}`}</p>
+                      <p className={styles.description}>{param.description}</p>
+                      <InputElement
+                        name={param.name}
+                        label={param.label}
+                        type={param.type === 'boolean' ? 'select' : param.type}
+                        options={
+                          param.type === 'boolean'
+                            ? ['true', 'false']
+                            : param.type === 'select'
+                            ? getConsumerParameterStringOptions(
+                                param?.options as {
+                                  [key: string]: string
+                                }[]
+                              )
+                            : (param.options as unknown as string[])
+                        }
+                        value={selectedValues[param.name]}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                          handleChange(e, param.name)
+                        }
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+      )}
     </div>
   )
 }

From 7066fee1d5fce61af65bd2ce35d5821d292d9850 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 16:21:58 +0200
Subject: [PATCH 038/113] fix: consumer parameters grouping

---
 .../Asset/AssetActions/Compute/ConsumerParameters.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
index 4239d029da..2d0244cba2 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
@@ -22,11 +22,11 @@ export default function ConsumerParameters({
   const groupedParameters = [
     {
       title: 'Required Parameters',
-      content: parameters.filter((param) => param.required)
+      content: parameters.filter((param) => param.required === 'required')
     },
     {
       title: 'Optional Parameters',
-      content: parameters.filter((param) => !param.required)
+      content: parameters.filter((param) => param.required === 'optional')
     }
   ]
 

From 0edf550f8031547d0132de433edbe02399675aea Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 16:22:08 +0200
Subject: [PATCH 039/113] feat: update consumer parameters alignment

---
 .../Compute/ConsumerParameters.module.css         | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
index 854a91d34a..82a1cce4d3 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
@@ -1,7 +1,3 @@
-.container {
-  max-height: 50vh;
-}
-
 .parameterGroupContainer > label {
   margin-bottom: calc(var(--spacer) / 2);
   text-align: center;
@@ -12,9 +8,9 @@
   border: 1px solid var(--border-color);
   background-color: var(--background-highlight);
   border-radius: var(--border-radius);
-  margin-bottom: calc(var(--spacer) / 2);
+  margin-bottom: var(--spacer);
   font-size: var(--font-size-small);
-  min-height: 250px;
+  min-height: fit-content;
   max-height: 30vh;
 
   /* smooth overflow scrolling for pre-iOS 13 */
@@ -22,6 +18,10 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.parameterGroupContainer:last-child .parametersContainer {
+  margin-bottom: 0;
+}
+
 .parameter {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -37,11 +37,10 @@
 
 .parameterDetails {
   padding-left: 1rem;
-  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .parameterDetails > label {
-  position: relative;
   margin-bottom: 0;
 }
 

From 75b079e403d96c2222d73939720d56736b677320 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 16:34:17 +0200
Subject: [PATCH 040/113] feat: update types

---
 src/@types/AssetExtended.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/@types/AssetExtended.d.ts b/src/@types/AssetExtended.d.ts
index d6ee6ade1e..71d63e265e 100644
--- a/src/@types/AssetExtended.d.ts
+++ b/src/@types/AssetExtended.d.ts
@@ -6,5 +6,7 @@ declare global {
   interface AssetExtended extends Asset {
     accessDetails?: AccessDetails
     views?: number
+    metadata: MetadataExtended
+    services: ServiceExtended[]
   }
 }

From e3fe2880a5f9ef6fb632977390e08396f325b9b8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 21:54:59 +0200
Subject: [PATCH 041/113] feat: allow service consumer parameters on dataset
 asset type

---
 content/pages/editMetadata.json                | 2 +-
 content/publish/form.json                      | 2 +-
 src/components/Asset/Edit/FormEditMetadata.tsx | 5 +++--
 src/components/Publish/Services/index.tsx      | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index 14febf932b..fdbb9b6a3e 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -272,7 +272,7 @@
         "label": "Uses consumer parameters",
         "help": "Define consumer parameters to be submitted to the algorithm before usage.",
         "type": "checkbox",
-        "options": ["This algorithm uses consumer parameters"],
+        "options": ["This asset uses consumer parameters"],
         "required": false
       },
       {
diff --git a/content/publish/form.json b/content/publish/form.json
index e5b205077d..1914dd1f8b 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -328,7 +328,7 @@
         "label": "Uses consumer parameters",
         "help": "Define consumer parameters to be submitted to the algorithm before usage.",
         "type": "checkbox",
-        "options": ["This algorithm uses consumer parameters"],
+        "options": ["This asset uses consumer parameters"],
         "required": false
       },
       {
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 69398c91ba..e4db027c0f 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -31,7 +31,7 @@ export default function FormEditMetadata({
 }): ReactElement {
   const { asset } = useAsset()
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
-  console.log(values, values?.services)
+
   // This component is handled by Formik so it's not rendered like a "normal" react component,
   // so handleTimeoutCustomOption is called only once.
   // https://github.com/oceanprotocol/market/pull/324#discussion_r561132310
@@ -162,7 +162,8 @@ export default function FormEditMetadata({
       />
       <div className={styles.serviceContainer}>
         <h4>Service</h4>
-        {asset.metadata.type === 'algorithm' && (
+        {(asset.services[0]?.type === 'algorithm' ||
+          asset.services[0]?.type === 'compute') && (
           <>
             <Field
               {...getFieldContent('usesServiceConsumerParameters', data)}
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index 89c4b45fc8..b46eef9e45 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -108,7 +108,7 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].timeout"
       />
-      {values.metadata.type === 'algorithm' && (
+      {values.services[0].access === 'compute' && (
         <>
           <Field
             {...getFieldContent(

From bb6b78765451b9c7cdd2e77e6e386e4dc890d8a6 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 22:01:27 +0200
Subject: [PATCH 042/113] feat: add consumer parameters to ddo updated values
 in edit form

---
 src/components/Asset/Edit/EditMetadata.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index 425041fe9a..a0f798ac7a 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -139,11 +139,10 @@ export default function Edit({
         timeout: mapTimeoutStringToSeconds(values.timeout),
         files: updatedFiles
       }
-      if (asset.metadata.type === 'algorithm') {
-        updatedService.consumerParameters = !values.service
-          ?.usesConsumerParameters
-          ? undefined
-          : transformConsumerParameters(values.service.consumerParameters)
+      if (values?.service?.consumerParameters) {
+        updatedService.consumerParameters = transformConsumerParameters(
+          values.service.consumerParameters
+        )
       }
 
       // TODO: remove version update at a later time

From 8b869388a737a50442df767fc23b37dd5edca668 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 5 May 2023 22:12:24 +0200
Subject: [PATCH 043/113] feat: add "data service" consumer parameters to
 consumption form

---
 .../AssetActions/Compute/FormComputeDataset.tsx  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index e55426fbd0..6ec9672107 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -268,9 +268,21 @@ export default function FormStartCompute({
   // }, [updateTabs])
 
   const tabs = []
+  if (asset?.services[0]?.consumerParameters) {
+    tabs.push({
+      title: 'Data Service',
+      content: (
+        <ConsumerParameters
+          parameters={parseConsumerParameters(
+            asset.services[0]?.consumerParameters
+          )}
+        />
+      )
+    })
+  }
   if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
     tabs.push({
-      title: 'Algo service',
+      title: 'Algo Service',
       content: (
         <ConsumerParameters
           parameters={parseConsumerParameters(
@@ -282,7 +294,7 @@ export default function FormStartCompute({
   }
   if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
     tabs.push({
-      title: 'Algo service',
+      title: 'Algo Params',
       content: (
         <ConsumerParameters
           parameters={parseConsumerParameters(

From 1334b664275ed43538452ad644304298126fda5a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 6 May 2023 14:59:30 +0200
Subject: [PATCH 044/113] feat: allow service parameters on all asset types

---
 .../Asset/Edit/FormEditMetadata.tsx           | 30 ++++++++---------
 src/components/Publish/Services/index.tsx     | 32 +++++++------------
 2 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index e4db027c0f..1f416ec4ed 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -162,23 +162,19 @@ export default function FormEditMetadata({
       />
       <div className={styles.serviceContainer}>
         <h4>Service</h4>
-        {(asset.services[0]?.type === 'algorithm' ||
-          asset.services[0]?.type === 'compute') && (
-          <>
-            <Field
-              {...getFieldContent('usesServiceConsumerParameters', data)}
-              component={Input}
-              name="service.usesConsumerParameters"
-            />
-            {(values as unknown as MetadataEditForm).service
-              .usesConsumerParameters && (
-              <Field
-                {...getFieldContent('serviceConsumerParameters', data)}
-                component={Input}
-                name="service.consumerParameters"
-              />
-            )}
-          </>
+
+        <Field
+          {...getFieldContent('usesServiceConsumerParameters', data)}
+          component={Input}
+          name="service.usesConsumerParameters"
+        />
+        {(values as unknown as MetadataEditForm).service
+          .usesConsumerParameters && (
+          <Field
+            {...getFieldContent('serviceConsumerParameters', data)}
+            component={Input}
+            name="service.consumerParameters"
+          />
         )}
       </div>
 
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index b46eef9e45..7764972a6b 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -108,27 +108,17 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].timeout"
       />
-      {values.services[0].access === 'compute' && (
-        <>
-          <Field
-            {...getFieldContent(
-              'usesConsumerParameters',
-              content.services.fields
-            )}
-            component={Input}
-            name="services[0].usesConsumerParameters"
-          />
-          {values.services[0].usesConsumerParameters && (
-            <Field
-              {...getFieldContent(
-                'consumerParameters',
-                content.services.fields
-              )}
-              component={Input}
-              name="services[0].consumerParameters"
-            />
-          )}
-        </>
+      <Field
+        {...getFieldContent('usesConsumerParameters', content.services.fields)}
+        component={Input}
+        name="services[0].usesConsumerParameters"
+      />
+      {values.services[0].usesConsumerParameters && (
+        <Field
+          {...getFieldContent('consumerParameters', content.services.fields)}
+          component={Input}
+          name="services[0].consumerParameters"
+        />
       )}
     </>
   )

From bfcacaa1435830575f716fa3bf8424969d5e1203 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 8 May 2023 16:11:45 +0200
Subject: [PATCH 045/113] feat: update parameter consume form design

---
 .../Compute/ConsumerParameters.tsx            | 92 -------------------
 .../FormConsumerParameters.module.css}        | 37 ++------
 .../FormConsumerParameters.tsx                | 69 ++++++++++++++
 .../ConsumerParameters/index.module.css       |  8 ++
 .../Compute/ConsumerParameters/index.tsx      | 67 ++++++++++++++
 .../Compute/FormComputeDataset.module.css     |  9 --
 .../Compute/FormComputeDataset.tsx            | 81 +---------------
 7 files changed, 156 insertions(+), 207 deletions(-)
 delete mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
 rename src/components/Asset/AssetActions/Compute/{ConsumerParameters.module.css => ConsumerParameters/FormConsumerParameters.module.css} (59%)
 create mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx
 create mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css
 create mode 100644 src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx

diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
deleted file mode 100644
index 2d0244cba2..0000000000
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
-import styles from './ConsumerParameters.module.css'
-import Label from '@components/@shared/FormInput/Label'
-import InputElement from '@components/@shared/FormInput/InputElement'
-import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
-
-export default function ConsumerParameters({
-  parameters
-}: {
-  parameters: AlgorithmConsumerParameter[]
-}): ReactElement {
-  const [selectedValues, setSelectedValues] = useState({})
-
-  useEffect(() => {
-    const defaultValues = {}
-    parameters.forEach((param) => (defaultValues[param.name] = param.default))
-
-    setSelectedValues(defaultValues)
-  }, [parameters])
-
-  const groupedParameters = [
-    {
-      title: 'Required Parameters',
-      content: parameters.filter((param) => param.required === 'required')
-    },
-    {
-      title: 'Optional Parameters',
-      content: parameters.filter((param) => param.required === 'optional')
-    }
-  ]
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement>,
-    paramName: string
-  ) => {
-    const updatedSelectedValues = {
-      ...selectedValues,
-      [paramName]: e.target.value
-    }
-    setSelectedValues(updatedSelectedValues)
-  }
-
-  return (
-    <div className={styles.container}>
-      {groupedParameters.map(
-        (parameterGroup) =>
-          parameterGroup.content.length > 0 && (
-            <div
-              key={parameterGroup.title}
-              className={styles.parameterGroupContainer}
-            >
-              <Label htmlFor={parameterGroup.title}>
-                {parameterGroup.title}
-              </Label>
-              <div className={styles.parametersContainer}>
-                {parameterGroup.content?.map((param) => (
-                  <div key={param.name} className={styles.parameter}>
-                    <div key={param.name} className={styles.parameterDetails}>
-                      <Label htmlFor={param.name}>{param.label}</Label>
-                      <p className={styles.type}>{`type: ${param.type}`}</p>
-                      <p className={styles.description}>{param.description}</p>
-                      <InputElement
-                        name={param.name}
-                        label={param.label}
-                        type={param.type === 'boolean' ? 'select' : param.type}
-                        options={
-                          param.type === 'boolean'
-                            ? ['true', 'false']
-                            : param.type === 'select'
-                            ? getConsumerParameterStringOptions(
-                                param?.options as {
-                                  [key: string]: string
-                                }[]
-                              )
-                            : (param.options as unknown as string[])
-                        }
-                        value={selectedValues[param.name]}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                          handleChange(e, param.name)
-                        }
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )
-      )}
-    </div>
-  )
-}
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css b/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.module.css
similarity index 59%
rename from src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
rename to src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.module.css
index 82a1cce4d3..ffb3ab8f53 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.module.css
@@ -1,4 +1,4 @@
-.parameterGroupContainer > label {
+.container > label {
   margin-bottom: calc(var(--spacer) / 2);
   text-align: center;
 }
@@ -8,18 +8,19 @@
   border: 1px solid var(--border-color);
   background-color: var(--background-highlight);
   border-radius: var(--border-radius);
-  margin-bottom: var(--spacer);
   font-size: var(--font-size-small);
-  min-height: fit-content;
-  max-height: 30vh;
+  min-height: 200px;
+  max-height: 50vh;
 
   /* smooth overflow scrolling for pre-iOS 13 */
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.parameterGroupContainer:last-child .parametersContainer {
+.parameter > div {
   margin-bottom: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .parameter {
@@ -31,29 +32,5 @@
 }
 
 .parameter:last-child {
-  border-bottom: 0;
-  margin-bottom: 0;
-}
-
-.parameterDetails {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.parameterDetails > label {
-  margin-bottom: 0;
-}
-
-.description,
-.type {
-  color: var(--brand-grey-light);
-  margin-bottom: calc(var(--spacer) / 4);
-}
-
-.description {
-  font-size: var(--font-size-small);
-}
-
-.type {
-  font-size: var(--font-size-mini);
+  border: none;
 }
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx
new file mode 100644
index 0000000000..074058fd0a
--- /dev/null
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx
@@ -0,0 +1,69 @@
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import styles from './FormConsumerParameters.module.css'
+import Label from '@components/@shared/FormInput/Label'
+import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
+import FormInput from '@shared/FormInput'
+
+export default function FormConsumerParameters({
+  parameters
+}: {
+  parameters: AlgorithmConsumerParameter[]
+}): ReactElement {
+  const [selectedValues, setSelectedValues] = useState({})
+  console.log(selectedValues)
+  useEffect(() => {
+    const defaultValues = {}
+    parameters.forEach((param) => (defaultValues[param.name] = param.default))
+
+    setSelectedValues(defaultValues)
+  }, [parameters])
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement>,
+    paramName: string
+  ) => {
+    const updatedSelectedValues = {
+      ...selectedValues,
+      [paramName]: e.target.value
+    }
+    setSelectedValues(updatedSelectedValues)
+  }
+
+  return (
+    <div className={styles.container}>
+      <Label htmlFor="Input the consumer parameters">
+        Input the consumer parameters
+      </Label>
+      <div className={styles.parametersContainer}>
+        {parameters?.map((param) => (
+          <div key={param.name} className={styles.parameter}>
+            <FormInput
+              help={param.description}
+              label={param.label}
+              name={param.name}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                handleChange(e, param.name)
+              }
+              options={
+                param.type === 'boolean'
+                  ? ['true', 'false']
+                  : param.type === 'select'
+                  ? getConsumerParameterStringOptions(
+                      param?.options as {
+                        [key: string]: string
+                      }[]
+                    )
+                  : (param.options as unknown as string[])
+              }
+              required={param.required === 'required'}
+              size="small"
+              type={param.type === 'boolean' ? 'select' : param.type}
+              value={selectedValues[param.name]}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css b/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css
new file mode 100644
index 0000000000..55932ccc36
--- /dev/null
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css
@@ -0,0 +1,8 @@
+.container {
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx
new file mode 100644
index 0000000000..ad7077b0b5
--- /dev/null
+++ b/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx
@@ -0,0 +1,67 @@
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
+import FormConsumerParameters from './FormConsumerParameters'
+import { parseConsumerParameters } from '@utils/ddo'
+import styles from './index.module.css'
+import Tabs, { TabsItem } from '@components/@shared/atoms/Tabs'
+
+export default function ConsumerParameters({
+  asset,
+  selectedAlgorithmAsset
+}: {
+  asset: AssetExtended
+  selectedAlgorithmAsset: AssetExtended
+}): ReactElement {
+  const [tabs, setTabs] = useState<TabsItem[]>([])
+
+  const updateTabs = useCallback(() => {
+    const tabs = []
+    if (asset?.services[0]?.consumerParameters) {
+      tabs.push({
+        title: 'Data Service',
+        content: (
+          <FormConsumerParameters
+            parameters={parseConsumerParameters(
+              asset.services[0].consumerParameters
+            )}
+          />
+        )
+      })
+    }
+    if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
+      tabs.push({
+        title: 'Algo Service',
+        content: (
+          <FormConsumerParameters
+            parameters={parseConsumerParameters(
+              selectedAlgorithmAsset.services[0].consumerParameters
+            )}
+          />
+        )
+      })
+    }
+    if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
+      tabs.push({
+        title: 'Algo Params',
+        content: (
+          <FormConsumerParameters
+            parameters={parseConsumerParameters(
+              selectedAlgorithmAsset.metadata?.algorithm.consumerParameters
+            )}
+          />
+        )
+      })
+    }
+
+    return tabs
+  }, [asset, selectedAlgorithmAsset])
+
+  useEffect(() => {
+    setTabs(updateTabs())
+  }, [updateTabs])
+
+  return (
+    <div className={styles.container}>
+      <Tabs items={tabs} />
+    </div>
+  )
+}
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
index 2907197152..a6d5aeb184 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
@@ -26,12 +26,3 @@
 .warning {
   margin-bottom: var(--spacer);
 }
-
-.consumerParamsContainer {
-  margin-top: -1rem;
-  margin-bottom: 1rem;
-  margin-left: -2rem;
-  margin-right: -2rem;
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-}
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 6ec9672107..b628d14bb0 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -17,8 +17,6 @@ import { getTokenBalanceFromSymbol } from '@utils/web3'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import ConsumerParameters from './ConsumerParameters'
-import Tabs from '@components/@shared/atoms/Tabs'
-import { parseConsumerParameters } from '@utils/ddo'
 
 export default function FormStartCompute({
   algorithms,
@@ -235,76 +233,6 @@ export default function FormStartCompute({
     })
   }, [balance, dtBalance, datasetSymbol, algorithmSymbol, totalPrices])
 
-  // const updateTabs = useCallback(() => {
-  //   const tabs = []
-  //   if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
-  //     tabs.push({
-  //       title: 'Algo service',
-  //       content: (
-  //         <ConsumerParameters
-  //           parameters={selectedAlgorithmAsset.services[0]?.consumerParameters}
-  //         />
-  //       )
-  //     })
-  //   }
-  //   if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
-  //     tabs.push({
-  //       title: 'Algo service',
-  //       content: (
-  //         <ConsumerParameters
-  //           parameters={
-  //             selectedAlgorithmAsset.metadata?.algorithm?.consumerParameters
-  //           }
-  //         />
-  //       )
-  //     })
-  //   }
-  //   return tabs
-  // }, [selectedAlgorithmAsset])
-  // const [tabs, setTabs] = useState(updateTabs())
-
-  // useEffect(() => {
-  //   setTabs(updateTabs())
-  // }, [updateTabs])
-
-  const tabs = []
-  if (asset?.services[0]?.consumerParameters) {
-    tabs.push({
-      title: 'Data Service',
-      content: (
-        <ConsumerParameters
-          parameters={parseConsumerParameters(
-            asset.services[0]?.consumerParameters
-          )}
-        />
-      )
-    })
-  }
-  if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
-    tabs.push({
-      title: 'Algo Service',
-      content: (
-        <ConsumerParameters
-          parameters={parseConsumerParameters(
-            selectedAlgorithmAsset.services[0]?.consumerParameters
-          )}
-        />
-      )
-    })
-  }
-  if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
-    tabs.push({
-      title: 'Algo Params',
-      content: (
-        <ConsumerParameters
-          parameters={parseConsumerParameters(
-            selectedAlgorithmAsset.metadata?.algorithm?.consumerParameters
-          )}
-        />
-      )
-    })
-  }
-
   return (
     <Form className={styles.form}>
       <Alert
@@ -323,10 +251,11 @@ export default function FormStartCompute({
           />
         )
       })}
-      {selectedAlgorithmAsset && (
-        <div className={styles.consumerParamsContainer}>
-          <Tabs items={tabs} />
-        </div>
+      {asset && selectedAlgorithmAsset && (
+        <ConsumerParameters
+          asset={asset}
+          selectedAlgorithmAsset={selectedAlgorithmAsset}
+        />
       )}
       <PriceOutput
         hasPreviousOrder={hasPreviousOrder}

From b722b48d4254822939c2ca89c70d5c2b1eb88161 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 8 May 2023 16:21:13 +0200
Subject: [PATCH 046/113] feat: update asset actions consume parameters
 location

---
 .../Asset/AssetActions/Compute/FormComputeDataset.tsx           | 2 +-
 .../ConsumerParameters/FormConsumerParameters.module.css        | 0
 .../{Compute => }/ConsumerParameters/FormConsumerParameters.tsx | 0
 .../{Compute => }/ConsumerParameters/index.module.css           | 0
 .../AssetActions/{Compute => }/ConsumerParameters/index.tsx     | 2 +-
 5 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/Asset/AssetActions/{Compute => }/ConsumerParameters/FormConsumerParameters.module.css (100%)
 rename src/components/Asset/AssetActions/{Compute => }/ConsumerParameters/FormConsumerParameters.tsx (100%)
 rename src/components/Asset/AssetActions/{Compute => }/ConsumerParameters/index.module.css (100%)
 rename src/components/Asset/AssetActions/{Compute => }/ConsumerParameters/index.tsx (97%)

diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index b628d14bb0..e6ac55a91c 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -16,7 +16,7 @@ import Alert from '@shared/atoms/Alert'
 import { getTokenBalanceFromSymbol } from '@utils/web3'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
-import ConsumerParameters from './ConsumerParameters'
+import ConsumerParameters from '../ConsumerParameters'
 
 export default function FormStartCompute({
   algorithms,
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.module.css b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
similarity index 100%
rename from src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.module.css
rename to src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
similarity index 100%
rename from src/components/Asset/AssetActions/Compute/ConsumerParameters/FormConsumerParameters.tsx
rename to src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css b/src/components/Asset/AssetActions/ConsumerParameters/index.module.css
similarity index 100%
rename from src/components/Asset/AssetActions/Compute/ConsumerParameters/index.module.css
rename to src/components/Asset/AssetActions/ConsumerParameters/index.module.css
diff --git a/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
similarity index 97%
rename from src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx
rename to src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index ad7077b0b5..e3f6c73cef 100644
--- a/src/components/Asset/AssetActions/Compute/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -9,7 +9,7 @@ export default function ConsumerParameters({
   selectedAlgorithmAsset
 }: {
   asset: AssetExtended
-  selectedAlgorithmAsset: AssetExtended
+  selectedAlgorithmAsset?: AssetExtended
 }): ReactElement {
   const [tabs, setTabs] = useState<TabsItem[]>([])
 

From b130ab7103c7d8f4dfbfe25af314441f793e0554 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 10:14:05 +0200
Subject: [PATCH 047/113] feat: add service parameters to download assets

---
 .../AssetActions/ConsumerParameters/index.tsx |  2 +-
 .../Asset/AssetActions/Download.module.css    | 16 ++++++++++
 .../Asset/AssetActions/Download.tsx           | 30 +++++++++++--------
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index e3f6c73cef..4cd9dde47b 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -61,7 +61,7 @@ export default function ConsumerParameters({
 
   return (
     <div className={styles.container}>
-      <Tabs items={tabs} />
+      {tabs.length > 0 && <Tabs items={tabs} />}
     </div>
   )
 }
diff --git a/src/components/Asset/AssetActions/Download.module.css b/src/components/Asset/AssetActions/Download.module.css
index a52cf48b65..42e56900d3 100644
--- a/src/components/Asset/AssetActions/Download.module.css
+++ b/src/components/Asset/AssetActions/Download.module.css
@@ -8,13 +8,29 @@
   display: flex;
   width: auto;
   padding: 0 calc(var(--spacer) / 2) 0 calc(var(--spacer) * 1.5);
+  margin-bottom: var(--spacer);
 }
 
 .filewrapper {
   flex-shrink: 0;
 }
 
+.price {
+  align-self: center;
+}
+
 .feedback {
   width: 100%;
   margin-top: calc(var(--spacer));
 }
+
+.buttonBuy > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.buttonBuy > div > button {
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download.tsx
index 4aad6a9f8d..8c02375235 100644
--- a/src/components/Asset/AssetActions/Download.tsx
+++ b/src/components/Asset/AssetActions/Download.tsx
@@ -17,6 +17,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
+import ConsumerParameters from './ConsumerParameters'
 
 export default function Download({
   asset,
@@ -212,18 +213,12 @@ export default function Download({
               />
             ) : (
               <>
-                {isPriceLoading ? (
-                  <Loader message="Calculating full price (including fees)" />
-                ) : (
-                  <Price
-                    price={asset.stats?.price}
-                    orderPriceAndFees={orderPriceAndFees}
-                    conversion
-                    size="large"
-                  />
+                {asset && <ConsumerParameters asset={asset} />}
+                {!isInPurgatory && (
+                  <div className={styles.buttonBuy}>
+                    <PurchaseButton />
+                  </div>
                 )}
-
-                {!isInPurgatory && <PurchaseButton />}
               </>
             )}
           </>
@@ -238,8 +233,19 @@ export default function Download({
         <div className={styles.filewrapper}>
           <FileIcon file={file} isLoading={fileIsLoading} small />
         </div>
-        <AssetAction asset={asset} />
+        {isPriceLoading ? (
+          <Loader message="Calculating full price (including fees)" />
+        ) : (
+          <Price
+            className={styles.price}
+            price={asset.stats?.price}
+            orderPriceAndFees={orderPriceAndFees}
+            conversion
+            size="large"
+          />
+        )}
       </div>
+      <AssetAction asset={asset} />
 
       {asset?.metadata?.type === 'algorithm' && (
         <AlgorithmDatasetsListForCompute

From 9cccb9a8e4a0e92a5a70c74e097c2ef617bc4a3a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 10:40:53 +0200
Subject: [PATCH 048/113] refactor: consumer parameters actions

---
 .../ConsumerParameters/Actions.module.css     |  5 ++
 .../ConsumerParameters/Actions.tsx            | 74 +++++++++++++++++++
 .../ConsumerParameters/index.module.css       |  6 --
 .../InputElement/ConsumerParameters/index.tsx | 45 +----------
 4 files changed, 82 insertions(+), 48 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css
new file mode 100644
index 0000000000..eaf57e7024
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css
@@ -0,0 +1,5 @@
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacer);
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx
new file mode 100644
index 0000000000..21ade3d6f7
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx
@@ -0,0 +1,74 @@
+import React, { ReactElement } from 'react'
+import Button from '@components/@shared/atoms/Button'
+import styles from './Actions.module.css'
+import { useField, useFormikContext } from 'formik'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import { getObjectPropertyByPath } from '@utils/index'
+
+const defaultParam: AlgorithmConsumerParameter = {
+  name: '',
+  label: '',
+  description: '',
+  type: 'text',
+  options: [],
+  default: '',
+  required: ''
+}
+
+export default function Actions({
+  fieldName,
+  index
+}: {
+  fieldName: string
+  index: number
+}): ReactElement {
+  const { errors, setFieldTouched, validateField } =
+    useFormikContext<FormPublishData>()
+  const [field, meta, helpers] =
+    useField<AlgorithmConsumerParameter[]>(fieldName)
+
+  const addParameter = (index: number) => {
+    // validate parameter before allowing the creation of a new one
+    validateField(field.name)
+    Object.keys(defaultParam).forEach((param) =>
+      setFieldTouched(`${field.name}[${index}].${param}`, true)
+    )
+
+    if (getObjectPropertyByPath(errors, field.name)) return
+
+    helpers.setValue([...field.value, { ...defaultParam }])
+  }
+
+  const deleteParameter = (index: number) => {
+    helpers.setValue(field.value.filter((p, i) => i !== index))
+  }
+
+  return (
+    <div className={styles.actions}>
+      <Button
+        style="ghost"
+        size="small"
+        disabled={field.value.length === 1}
+        onClick={(e) => {
+          e.preventDefault()
+          deleteParameter(index)
+        }}
+      >
+        Delete parameter
+      </Button>
+      <Button
+        style="primary"
+        size="small"
+        onClick={(e) => {
+          e.preventDefault()
+          addParameter(index)
+        }}
+      >
+        Add new parameter
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
index 6ca3fbd341..08f57cde56 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -18,9 +18,3 @@
 .error {
   composes: error from '../../index.module.css';
 }
-
-.actions {
-  display: flex;
-  justify-content: center;
-  gap: var(--spacer);
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index beeab74dc8..282f7a0048 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -5,12 +5,12 @@ import {
   AlgorithmConsumerParameter,
   FormPublishData
 } from '../../../../Publish/_types'
-import Button from '../../../atoms/Button'
 import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import InputOptions from './InputOptions'
 import classNames from 'classnames/bind'
 import { getObjectPropertyByPath } from '@utils/index'
+import Actions from './Actions'
 
 const cx = classNames.bind(styles)
 
@@ -32,7 +32,7 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const { errors, setFieldTouched, validateField, touched } =
+  const { errors, setFieldTouched, touched } =
     useFormikContext<FormPublishData>()
 
   const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
@@ -43,22 +43,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     if (field.value.length === 0) helpers.setValue([{ ...defaultParam }])
   }, [])
 
-  const addParameter = (index: number) => {
-    // validate parameter before allowing the creation of a new one
-    validateField(field.name)
-    Object.keys(defaultParam).forEach((param) =>
-      setFieldTouched(`${field.name}[${index}].${param}`, true)
-    )
-
-    if (getObjectPropertyByPath(errors, field.name)) return
-
-    helpers.setValue([...field.value, { ...defaultParam }])
-  }
-
-  const deleteParameter = (index: number) => {
-    helpers.setValue(field.value.filter((p, i) => i !== index))
-  }
-
   const resetDefaultValue = (
     parameterName: string,
     parameterType: AlgorithmConsumerParameter['type'],
@@ -175,30 +159,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     />
                   )
                 })}
-
-                <div className={styles.actions}>
-                  <Button
-                    style="ghost"
-                    size="small"
-                    disabled={field.value.length === 1}
-                    onClick={(e) => {
-                      e.preventDefault()
-                      deleteParameter(index)
-                    }}
-                  >
-                    Delete parameter
-                  </Button>
-                  <Button
-                    style="primary"
-                    size="small"
-                    onClick={(e) => {
-                      e.preventDefault()
-                      addParameter(index)
-                    }}
-                  >
-                    Add new parameter
-                  </Button>
-                </div>
+                <Actions fieldName={props.name} index={index} />
               </div>
             )
           }

From 910066f9c77e362052cc18682dad8fcda9e3adf3 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 10:42:59 +0200
Subject: [PATCH 049/113] refactor: form action name

---
 .../{Actions.module.css => FormActions.module.css}            | 0
 .../ConsumerParameters/{Actions.tsx => FormActions.tsx}       | 4 ++--
 .../FormInput/InputElement/ConsumerParameters/index.tsx       | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{Actions.module.css => FormActions.module.css} (100%)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{Actions.tsx => FormActions.tsx} (95%)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.module.css
similarity index 100%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.module.css
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.module.css
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
similarity index 95%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index 21ade3d6f7..0a00217651 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Actions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import Button from '@components/@shared/atoms/Button'
-import styles from './Actions.module.css'
+import styles from './FormActions.module.css'
 import { useField, useFormikContext } from 'formik'
 import {
   AlgorithmConsumerParameter,
@@ -18,7 +18,7 @@ const defaultParam: AlgorithmConsumerParameter = {
   required: ''
 }
 
-export default function Actions({
+export default function FormActions({
   fieldName,
   index
 }: {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 282f7a0048..d65ffc6c6c 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -10,7 +10,7 @@ import styles from './index.module.css'
 import InputOptions from './InputOptions'
 import classNames from 'classnames/bind'
 import { getObjectPropertyByPath } from '@utils/index'
-import Actions from './Actions'
+import FormActions from './FormActions'
 
 const cx = classNames.bind(styles)
 
@@ -159,7 +159,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     />
                   )
                 })}
-                <Actions fieldName={props.name} index={index} />
+                <FormActions fieldName={props.name} index={index} />
               </div>
             )
           }

From 5ca9129b5a781e869e1d46e8d58a588a7d3677b0 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 10:54:11 +0200
Subject: [PATCH 050/113] refactor: consumer parameters default input

---
 .../ConsumerParameters/DefaultInput.tsx       | 46 +++++++++++++++++++
 .../InputElement/ConsumerParameters/index.tsx | 32 ++-----------
 2 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
new file mode 100644
index 0000000000..e3d3d92df5
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react'
+import Input, { InputProps } from '../..'
+import { Field, useField } from 'formik'
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+
+export default function DefaultInput({
+  index,
+  fieldName,
+  ...props
+}: InputProps & {
+  index: number
+  fieldName: string
+}): ReactElement {
+  const [field] = useField<AlgorithmConsumerParameter[]>(fieldName)
+
+  const getStringOptions = (options: { [key: string]: string }[]): string[] => {
+    if (!options?.length) return []
+
+    return options.map((option) => Object.keys(option)[0])
+  }
+
+  return (
+    <Field
+      {...props}
+      required={field.value[index].required === 'required'}
+      component={Input}
+      name={`${field.name}[${index}].${props.name}`}
+      type={
+        field.value[index].type === 'boolean'
+          ? 'select'
+          : field.value[index].type
+      }
+      options={
+        field.value[index].type === 'boolean'
+          ? ['true', 'false']
+          : field.value[index].type === 'select'
+          ? getStringOptions(
+              field.value[index]?.options as {
+                [key: string]: string
+              }[]
+            )
+          : field.value[index].options
+      }
+    />
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index d65ffc6c6c..7b2eb645da 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -11,6 +11,7 @@ import InputOptions from './InputOptions'
 import classNames from 'classnames/bind'
 import { getObjectPropertyByPath } from '@utils/index'
 import FormActions from './FormActions'
+import DefaultInput from './DefaultInput'
 
 const cx = classNames.bind(styles)
 
@@ -71,12 +72,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
         !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
     )
 
-  const getStringOptions = (options: { [key: string]: string }[]): string[] => {
-    if (!options?.length) return []
-
-    return options.map((option) => Object.keys(option)[0])
-  }
-
   return (
     <div className={styles.container}>
       <Tabs
@@ -120,28 +115,11 @@ export function ConsumerParameters(props: InputProps): ReactElement {
 
                   if (subField.name === 'default') {
                     return (
-                      <Field
+                      <DefaultInput
+                        key={`${field.name}[${index}].${props.name}`}
                         {...subField}
-                        required={field.value[index].required === 'required'}
-                        component={Input}
-                        name={`${field.name}[${index}].${subField.name}`}
-                        key={`${field.name}[${index}].${subField.name}`}
-                        type={
-                          field.value[index].type === 'boolean'
-                            ? 'select'
-                            : field.value[index].type
-                        }
-                        options={
-                          field.value[index].type === 'boolean'
-                            ? ['true', 'false']
-                            : field.value[index].type === 'select'
-                            ? getStringOptions(
-                                field.value[index]?.options as {
-                                  [key: string]: string
-                                }[]
-                              )
-                            : field.value[index].options
-                        }
+                        index={index}
+                        fieldName={props.name}
                       />
                     )
                   }

From 8400d3460525d79002d87cb47d22d3c1261759cf Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 11:01:18 +0200
Subject: [PATCH 051/113] refactor: consumer parameters select input

---
 .../ConsumerParameters/SelectInput.module.css | 16 +++++
 .../ConsumerParameters/SelectInput.tsx        | 58 +++++++++++++++++++
 .../ConsumerParameters/index.module.css       | 17 ------
 .../InputElement/ConsumerParameters/index.tsx | 50 +++-------------
 4 files changed, 83 insertions(+), 58 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css
new file mode 100644
index 0000000000..2aa18114e3
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css
@@ -0,0 +1,16 @@
+.optionsContainer {
+  position: relative;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.optionsContainer.hasError * {
+  border-color: var(--brand-alert-red);
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.error {
+  composes: error from '../../index.module.css';
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
new file mode 100644
index 0000000000..9b46811dbd
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
@@ -0,0 +1,58 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../..'
+import { ErrorMessage, useField, useFormikContext } from 'formik'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import InputOptions from './InputOptions'
+import styles from './SelectInput.module.css'
+import { getObjectPropertyByPath } from '@utils/index'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
+
+export default function SelectInput({
+  index,
+  fieldName,
+  ...props
+}: InputProps & {
+  index: number
+  fieldName: string
+}): ReactElement {
+  const { errors, touched } = useFormikContext<FormPublishData>()
+  const [field] = useField<AlgorithmConsumerParameter[]>(fieldName)
+
+  const showError = (name: string, index: number): boolean =>
+    [errors, touched].every(
+      (object) =>
+        !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
+    )
+
+  return (
+    <div
+      className={cx({
+        optionsContainer: true,
+        hasError: showError('options', index)
+      })}
+    >
+      <InputOptions
+        {...props}
+        name={field.name}
+        label="Options"
+        required
+        optionIndex={index}
+        defaultOptions={
+          field.value[index]?.options as {
+            [key: string]: string
+          }[]
+        }
+      />
+      {showError('options', index) && (
+        <div className={styles.error}>
+          <ErrorMessage name={`${field.name}[${index}].options`} />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
index 08f57cde56..203699c604 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -1,20 +1,3 @@
 .container {
   border: 1px solid var(--border-color);
 }
-
-.optionsContainer {
-  position: relative;
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.optionsContainer.hasError * {
-  border-color: var(--brand-alert-red);
-}
-
-.hasError label {
-  color: var(--brand-alert-red);
-}
-
-.error {
-  composes: error from '../../index.module.css';
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 7b2eb645da..62991d0ce1 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,4 +1,4 @@
-import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
+import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import Input, { InputProps } from '../..'
 import {
@@ -7,13 +7,9 @@ import {
 } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
-import InputOptions from './InputOptions'
-import classNames from 'classnames/bind'
-import { getObjectPropertyByPath } from '@utils/index'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
-
-const cx = classNames.bind(styles)
+import SelectInput from './SelectInput'
 
 const defaultParam: AlgorithmConsumerParameter = {
   name: '',
@@ -33,8 +29,7 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const { errors, setFieldTouched, touched } =
-    useFormikContext<FormPublishData>()
+  const { setFieldTouched } = useFormikContext<FormPublishData>()
 
   const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
     props.name
@@ -66,12 +61,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
     )
   }
 
-  const showError = (name: string, index: number): boolean =>
-    [errors, touched].every(
-      (object) =>
-        !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
-    )
-
   return (
     <div className={styles.container}>
       <Tabs
@@ -83,33 +72,12 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                 {props.fields?.map((subField: InputProps) => {
                   if (subField.name === 'options') {
                     return field.value[index]?.type === 'select' ? (
-                      <div
-                        key={`${field.name}[${index}].${subField.name}`}
-                        className={cx({
-                          optionsContainer: true,
-                          hasError: showError('options', index)
-                        })}
-                      >
-                        <InputOptions
-                          {...subField}
-                          name={field.name}
-                          label="Options"
-                          required
-                          optionIndex={index}
-                          defaultOptions={
-                            field.value[index]?.options as {
-                              [key: string]: string
-                            }[]
-                          }
-                        />
-                        {showError('options', index) && (
-                          <div className={styles.error}>
-                            <ErrorMessage
-                              name={`${field.name}[${index}].options`}
-                            />
-                          </div>
-                        )}
-                      </div>
+                      <SelectInput
+                        key={`${field.name}[${index}].${props.name}`}
+                        {...subField}
+                        index={index}
+                        fieldName={props.name}
+                      />
                     ) : null
                   }
 

From 29f034a96bfa1516f8a21e33e151988d656d527a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 11:15:02 +0200
Subject: [PATCH 052/113] refactor: consumer parameter input

---
 .../ConsumerParameters/DefaultInput.tsx       |  1 -
 .../ConsumerParameters/FormActions.tsx        | 15 ++----
 .../InputElement/ConsumerParameters/Input.tsx | 54 +++++++++++++++++++
 .../InputElement/ConsumerParameters/index.tsx | 53 +++++-------------
 4 files changed, 70 insertions(+), 53 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index e3d3d92df5..e6e1ad0535 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -24,7 +24,6 @@ export default function DefaultInput({
       {...props}
       required={field.value[index].required === 'required'}
       component={Input}
-      name={`${field.name}[${index}].${props.name}`}
       type={
         field.value[index].type === 'boolean'
           ? 'select'
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index 0a00217651..e63113be0a 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -7,16 +7,7 @@ import {
   FormPublishData
 } from '@components/Publish/_types'
 import { getObjectPropertyByPath } from '@utils/index'
-
-const defaultParam: AlgorithmConsumerParameter = {
-  name: '',
-  label: '',
-  description: '',
-  type: 'text',
-  options: [],
-  default: '',
-  required: ''
-}
+import { defaultConsumerParam } from '.'
 
 export default function FormActions({
   fieldName,
@@ -33,13 +24,13 @@ export default function FormActions({
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
     validateField(field.name)
-    Object.keys(defaultParam).forEach((param) =>
+    Object.keys(defaultConsumerParam).forEach((param) =>
       setFieldTouched(`${field.name}[${index}].${param}`, true)
     )
 
     if (getObjectPropertyByPath(errors, field.name)) return
 
-    helpers.setValue([...field.value, { ...defaultParam }])
+    helpers.setValue([...field.value, { ...defaultConsumerParam }])
   }
 
   const deleteParameter = (index: number) => {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
new file mode 100644
index 0000000000..c2a912e562
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
@@ -0,0 +1,54 @@
+import React, { ReactElement } from 'react'
+import Input, { InputProps } from '../..'
+import { Field, useField, useFormikContext } from 'formik'
+import {
+  AlgorithmConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import { defaultConsumerParam } from '.'
+
+export default function ConsumerParameterInput({
+  index,
+  fieldName,
+  ...props
+}: InputProps & {
+  index: number
+  fieldName: string
+}): ReactElement {
+  const { setFieldTouched } = useFormikContext<FormPublishData>()
+  const [field, meta, helpers] =
+    useField<AlgorithmConsumerParameter[]>(fieldName)
+
+  const resetDefaultValue = (
+    parameterName: string,
+    parameterType: AlgorithmConsumerParameter['type'],
+    index: number
+  ) => {
+    if (parameterName !== 'type') return
+    if (field.value[index].type === parameterType) return
+
+    setFieldTouched(`${field.name}[${index}].default`, false)
+    helpers.setValue(
+      field.value.map((currentParam, i) => {
+        if (i !== index) return currentParam
+
+        return {
+          ...defaultConsumerParam,
+          ...currentParam,
+          default: defaultConsumerParam.default
+        }
+      })
+    )
+  }
+
+  return (
+    <Field
+      {...props}
+      component={Input}
+      onChange={(e) => {
+        resetDefaultValue(props.name, e.target.value, index)
+        field.onChange(e)
+      }}
+    />
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 62991d0ce1..2089cc0db6 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,17 +1,15 @@
-import { Field, useField, useFormikContext } from 'formik'
+import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
-import Input, { InputProps } from '../..'
-import {
-  AlgorithmConsumerParameter,
-  FormPublishData
-} from '../../../../Publish/_types'
+import { InputProps } from '../..'
+import { AlgorithmConsumerParameter } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
 import SelectInput from './SelectInput'
+import ConsumerParameterInput from './Input'
 
-const defaultParam: AlgorithmConsumerParameter = {
+export const defaultConsumerParam: AlgorithmConsumerParameter = {
   name: '',
   label: '',
   description: '',
@@ -29,38 +27,15 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const { setFieldTouched } = useFormikContext<FormPublishData>()
-
   const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
     props.name
   )
 
   useEffect(() => {
-    if (field.value.length === 0) helpers.setValue([{ ...defaultParam }])
+    if (field.value.length === 0)
+      helpers.setValue([{ ...defaultConsumerParam }])
   }, [])
 
-  const resetDefaultValue = (
-    parameterName: string,
-    parameterType: AlgorithmConsumerParameter['type'],
-    index: number
-  ) => {
-    if (parameterName !== 'type') return
-    if (field.value[index].type === parameterType) return
-
-    setFieldTouched(`${field.name}[${index}].default`, false)
-    helpers.setValue(
-      field.value.map((p, i) => {
-        if (i !== index) return p
-
-        return {
-          ...defaultParam,
-          ...p,
-          default: defaultParam.default
-        }
-      })
-    )
-  }
-
   return (
     <div className={styles.container}>
       <Tabs
@@ -84,8 +59,9 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                   if (subField.name === 'default') {
                     return (
                       <DefaultInput
-                        key={`${field.name}[${index}].${props.name}`}
+                        key={`${field.name}[${index}].${subField.name}`}
                         {...subField}
+                        name={`${field.name}[${index}].${subField.name}`}
                         index={index}
                         fieldName={props.name}
                       />
@@ -93,15 +69,12 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                   }
 
                   return (
-                    <Field
+                    <ConsumerParameterInput
+                      key={`${field.name}[${index}].${subField.name}`}
                       {...subField}
-                      component={Input}
                       name={`${field.name}[${index}].${subField.name}`}
-                      key={`${field.name}[${index}].${subField.name}`}
-                      onChange={(e) => {
-                        resetDefaultValue(subField.name, e.target.value, index)
-                        field.onChange(e)
-                      }}
+                      index={index}
+                      fieldName={props.name}
                     />
                   )
                 })}

From 3ea89d771d17712fa7699c9a352ca9eef8db93fd Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 11:20:27 +0200
Subject: [PATCH 053/113] fix: props name

---
 .../InputElement/ConsumerParameters/DefaultInput.tsx        | 6 +++---
 .../FormInput/InputElement/ConsumerParameters/Input.tsx     | 6 +++---
 .../InputElement/ConsumerParameters/SelectInput.tsx         | 6 +++---
 .../FormInput/InputElement/ConsumerParameters/index.tsx     | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index e6e1ad0535..5d636d3502 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -5,13 +5,13 @@ import { AlgorithmConsumerParameter } from '@components/Publish/_types'
 
 export default function DefaultInput({
   index,
-  fieldName,
+  inputName,
   ...props
 }: InputProps & {
   index: number
-  fieldName: string
+  inputName: string
 }): ReactElement {
-  const [field] = useField<AlgorithmConsumerParameter[]>(fieldName)
+  const [field] = useField<AlgorithmConsumerParameter[]>(inputName)
 
   const getStringOptions = (options: { [key: string]: string }[]): string[] => {
     if (!options?.length) return []
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
index c2a912e562..41fe4ae385 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
@@ -9,15 +9,15 @@ import { defaultConsumerParam } from '.'
 
 export default function ConsumerParameterInput({
   index,
-  fieldName,
+  inputName,
   ...props
 }: InputProps & {
   index: number
-  fieldName: string
+  inputName: string
 }): ReactElement {
   const { setFieldTouched } = useFormikContext<FormPublishData>()
   const [field, meta, helpers] =
-    useField<AlgorithmConsumerParameter[]>(fieldName)
+    useField<AlgorithmConsumerParameter[]>(inputName)
 
   const resetDefaultValue = (
     parameterName: string,
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
index 9b46811dbd..328bbb7583 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
@@ -14,14 +14,14 @@ const cx = classNames.bind(styles)
 
 export default function SelectInput({
   index,
-  fieldName,
+  inputName,
   ...props
 }: InputProps & {
   index: number
-  fieldName: string
+  inputName: string
 }): ReactElement {
   const { errors, touched } = useFormikContext<FormPublishData>()
-  const [field] = useField<AlgorithmConsumerParameter[]>(fieldName)
+  const [field] = useField<AlgorithmConsumerParameter[]>(inputName)
 
   const showError = (name: string, index: number): boolean =>
     [errors, touched].every(
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 2089cc0db6..2e95e1b3d6 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -51,7 +51,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                         key={`${field.name}[${index}].${props.name}`}
                         {...subField}
                         index={index}
-                        fieldName={props.name}
+                        inputName={props.name}
                       />
                     ) : null
                   }
@@ -63,7 +63,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                         {...subField}
                         name={`${field.name}[${index}].${subField.name}`}
                         index={index}
-                        fieldName={props.name}
+                        inputName={props.name}
                       />
                     )
                   }
@@ -74,7 +74,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       {...subField}
                       name={`${field.name}[${index}].${subField.name}`}
                       index={index}
-                      fieldName={props.name}
+                      inputName={props.name}
                     />
                   )
                 })}

From c0a72189acba0740be66d63cea3c338aa500463a Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 11:27:19 +0200
Subject: [PATCH 054/113] refactor: variable naming

---
 .../InputElement/ConsumerParameters/InputOptions.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
index adb903aff2..72bbac48fe 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
@@ -72,11 +72,11 @@ export default function InputOptions({
   useEffect(() => {
     if (!field?.value || !helpers) return
     helpers.setValue(
-      field.value.map((p, i) => {
-        if (i !== optionIndex) return p
+      field.value.map((currentParam, i) => {
+        if (i !== optionIndex) return currentParam
 
         return {
-          ...p,
+          ...currentParam,
           options: [...options]
         }
       })

From ab566772e81ab6ea8f63a39aa4210ed951bbca36 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 12:01:47 +0200
Subject: [PATCH 055/113] refactor: consumer parameters form validation

---
 .../validationConsumerParameters.tsx          | 46 +++++++++++++++++++
 src/components/Asset/Edit/_validation.ts      | 46 +------------------
 src/components/Publish/_validation.ts         | 46 +------------------
 3 files changed, 48 insertions(+), 90 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
new file mode 100644
index 0000000000..f2f0f0a1c0
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
@@ -0,0 +1,46 @@
+import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import * as Yup from 'yup'
+import { SchemaLike } from 'yup/lib/types'
+import { paramTypes } from '.'
+
+export const validationConsumerParameters: {
+  [key in keyof AlgorithmConsumerParameter]: SchemaLike
+} = {
+  name: Yup.string()
+    .test('unique', 'Parameter names must be unique', (name, context) => {
+      // TODO: revert any
+      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
+      const [parentFormObj, nextParentFormObj] = (context as any).from
+      if (
+        !nextParentFormObj?.value?.consumerParameters ||
+        nextParentFormObj.value.consumerParameters.length === 1
+      )
+        return true
+
+      const { consumerParameters } = nextParentFormObj.value
+      const occasions = consumerParameters.filter(
+        (params) => params.name === name
+      )
+      return occasions.length === 1
+    })
+    .required('Required'),
+  type: Yup.string().oneOf(paramTypes).required('Required'),
+  description: Yup.string().required('Required'),
+  label: Yup.string().required('Required'),
+  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
+  default: Yup.mixed().when('required', {
+    is: 'optional',
+    then: Yup.mixed()
+      .nullable()
+      .transform((value) => value || null),
+    otherwise: Yup.mixed().required('Required')
+  }),
+  options: Yup.array().when('type', {
+    is: 'select',
+    then: Yup.array()
+      .of(Yup.object())
+      .min(2, 'At least two options are required')
+      .required('Required'),
+    otherwise: Yup.array()
+  })
+}
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 09637ca54d..d9b3235ea9 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -2,51 +2,7 @@ import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import web3 from 'web3'
 import { testLinks } from '../../../@utils/yup'
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
-import { SchemaLike } from 'yup/lib/types'
-import { paramTypes } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
-
-const validationConsumerParameters: {
-  [key in keyof AlgorithmConsumerParameter]: SchemaLike
-} = {
-  name: Yup.string()
-    .test('unique', 'Parameter names must be unique', (name, context) => {
-      // TODO: revert any
-      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
-      const [parentFormObj, nextParentFormObj] = (context as any).from
-      if (
-        !nextParentFormObj?.value?.consumerParameters ||
-        nextParentFormObj.value.consumerParameters.length === 1
-      )
-        return true
-
-      const { consumerParameters } = nextParentFormObj.value
-      const occasions = consumerParameters.filter(
-        (params) => params.name === name
-      )
-      return occasions.length === 1
-    })
-    .required('Required'),
-  type: Yup.string().oneOf(paramTypes).required('Required'),
-  description: Yup.string().required('Required'),
-  label: Yup.string().required('Required'),
-  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
-  default: Yup.mixed().when('required', {
-    is: 'optional',
-    then: Yup.mixed()
-      .nullable()
-      .transform((value) => value || null),
-    otherwise: Yup.mixed().required('Required')
-  }),
-  options: Yup.array().when('type', {
-    is: 'select',
-    then: Yup.array()
-      .of(Yup.object())
-      .min(1, 'At least one option needs to be defined')
-      .required('Required'),
-    otherwise: Yup.array()
-  })
-}
+import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters'
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index f7a9b3b886..d7db80144f 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -2,57 +2,13 @@ import { FileInfo } from '@oceanprotocol/lib'
 import { MAX_DECIMALS } from '@utils/constants'
 import { getMaxDecimalsValidation } from '@utils/numbers'
 import * as Yup from 'yup'
-import { SchemaLike } from 'yup/lib/types'
 import { testLinks } from '../../@utils/yup'
-import { paramTypes } from '../@shared/FormInput/InputElement/ConsumerParameters'
-import { AlgorithmConsumerParameter } from './_types'
+import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
 // hint, hint: https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema
 
-const validationConsumerParameters: {
-  [key in keyof AlgorithmConsumerParameter]: SchemaLike
-} = {
-  name: Yup.string()
-    .test('unique', 'Parameter names must be unique', (name, context) => {
-      // TODO: revert any
-      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
-      const [parentFormObj, nextParentFormObj] = (context as any).from
-      if (
-        !nextParentFormObj?.value?.consumerParameters ||
-        nextParentFormObj.value.consumerParameters.length === 1
-      )
-        return true
-
-      const { consumerParameters } = nextParentFormObj.value
-      const occasions = consumerParameters.filter(
-        (params) => params.name === name
-      )
-      return occasions.length === 1
-    })
-    .required('Required'),
-  type: Yup.string().oneOf(paramTypes).required('Required'),
-  description: Yup.string().required('Required'),
-  label: Yup.string().required('Required'),
-  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
-  default: Yup.mixed().when('required', {
-    is: 'optional',
-    then: Yup.mixed()
-      .nullable()
-      .transform((value) => value || null),
-    otherwise: Yup.mixed().required('Required')
-  }),
-  options: Yup.array().when('type', {
-    is: 'select',
-    then: Yup.array()
-      .of(Yup.object())
-      .min(1, 'At least one option needs to be defined')
-      .required('Required'),
-    otherwise: Yup.array()
-  })
-}
-
 const validationMetadata = {
   type: Yup.string()
     .matches(/dataset|algorithm/g, { excludeEmptyString: true })

From 5f936e1bf3a658fe6138582893e34b09ecf12ff6 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 12:05:17 +0200
Subject: [PATCH 056/113] refactor: rename consumer parameters types

---
 src/@utils/ddo.ts                              |  9 +++------
 .../ConsumerParameters/DefaultInput.tsx        |  4 ++--
 .../ConsumerParameters/FormActions.tsx         |  8 ++------
 .../InputElement/ConsumerParameters/Input.tsx  | 10 +++-------
 .../ConsumerParameters/SelectInput.tsx         |  7 ++-----
 .../InputElement/ConsumerParameters/index.tsx  | 10 ++++------
 .../validationConsumerParameters.tsx           |  4 ++--
 src/components/Asset/Edit/_types.ts            |  6 +++---
 src/components/Publish/_types.ts               | 18 +++++++-----------
 src/components/Publish/_utils.ts               |  6 +++---
 10 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 2a575f0754..ab4ebefbfa 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -2,10 +2,7 @@ import {
   ComputeEditForm,
   MetadataEditForm
 } from '@components/Asset/Edit/_types'
-import {
-  AlgorithmConsumerParameter,
-  FormPublishData
-} from '@components/Publish/_types'
+import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
 import {
   Arweave,
   Asset,
@@ -193,8 +190,8 @@ export function previewDebugPatch(
 }
 
 export function parseConsumerParameters(
-  consumerParameters: AlgorithmConsumerParameter[]
-): AlgorithmConsumerParameter[] {
+  consumerParameters: ConsumerParameter[]
+): ConsumerParameter[] {
   if (!consumerParameters?.length) return []
 
   return consumerParameters.map((param) => {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index 5d636d3502..f4a8c4527e 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Input, { InputProps } from '../..'
 import { Field, useField } from 'formik'
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import { ConsumerParameter } from '@components/Publish/_types'
 
 export default function DefaultInput({
   index,
@@ -11,7 +11,7 @@ export default function DefaultInput({
   index: number
   inputName: string
 }): ReactElement {
-  const [field] = useField<AlgorithmConsumerParameter[]>(inputName)
+  const [field] = useField<ConsumerParameter[]>(inputName)
 
   const getStringOptions = (options: { [key: string]: string }[]): string[] => {
     if (!options?.length) return []
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index e63113be0a..9c15197bc0 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -2,10 +2,7 @@ import React, { ReactElement } from 'react'
 import Button from '@components/@shared/atoms/Button'
 import styles from './FormActions.module.css'
 import { useField, useFormikContext } from 'formik'
-import {
-  AlgorithmConsumerParameter,
-  FormPublishData
-} from '@components/Publish/_types'
+import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
 import { getObjectPropertyByPath } from '@utils/index'
 import { defaultConsumerParam } from '.'
 
@@ -18,8 +15,7 @@ export default function FormActions({
 }): ReactElement {
   const { errors, setFieldTouched, validateField } =
     useFormikContext<FormPublishData>()
-  const [field, meta, helpers] =
-    useField<AlgorithmConsumerParameter[]>(fieldName)
+  const [field, meta, helpers] = useField<ConsumerParameter[]>(fieldName)
 
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
index 41fe4ae385..b7f0440f04 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
@@ -1,10 +1,7 @@
 import React, { ReactElement } from 'react'
 import Input, { InputProps } from '../..'
 import { Field, useField, useFormikContext } from 'formik'
-import {
-  AlgorithmConsumerParameter,
-  FormPublishData
-} from '@components/Publish/_types'
+import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
 import { defaultConsumerParam } from '.'
 
 export default function ConsumerParameterInput({
@@ -16,12 +13,11 @@ export default function ConsumerParameterInput({
   inputName: string
 }): ReactElement {
   const { setFieldTouched } = useFormikContext<FormPublishData>()
-  const [field, meta, helpers] =
-    useField<AlgorithmConsumerParameter[]>(inputName)
+  const [field, meta, helpers] = useField<ConsumerParameter[]>(inputName)
 
   const resetDefaultValue = (
     parameterName: string,
-    parameterType: AlgorithmConsumerParameter['type'],
+    parameterType: ConsumerParameter['type'],
     index: number
   ) => {
     if (parameterName !== 'type') return
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
index 328bbb7583..fabdc44e64 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
@@ -1,10 +1,7 @@
 import React, { ReactElement } from 'react'
 import { InputProps } from '../..'
 import { ErrorMessage, useField, useFormikContext } from 'formik'
-import {
-  AlgorithmConsumerParameter,
-  FormPublishData
-} from '@components/Publish/_types'
+import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
 import InputOptions from './InputOptions'
 import styles from './SelectInput.module.css'
 import { getObjectPropertyByPath } from '@utils/index'
@@ -21,7 +18,7 @@ export default function SelectInput({
   inputName: string
 }): ReactElement {
   const { errors, touched } = useFormikContext<FormPublishData>()
-  const [field] = useField<AlgorithmConsumerParameter[]>(inputName)
+  const [field] = useField<ConsumerParameter[]>(inputName)
 
   const showError = (name: string, index: number): boolean =>
     [errors, touched].every(
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 2e95e1b3d6..3cd9a8969e 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,7 +1,7 @@
 import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import { InputProps } from '../..'
-import { AlgorithmConsumerParameter } from '../../../../Publish/_types'
+import { ConsumerParameter } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
 import styles from './index.module.css'
 import FormActions from './FormActions'
@@ -9,7 +9,7 @@ import DefaultInput from './DefaultInput'
 import SelectInput from './SelectInput'
 import ConsumerParameterInput from './Input'
 
-export const defaultConsumerParam: AlgorithmConsumerParameter = {
+export const defaultConsumerParam: ConsumerParameter = {
   name: '',
   label: '',
   description: '',
@@ -19,7 +19,7 @@ export const defaultConsumerParam: AlgorithmConsumerParameter = {
   required: ''
 }
 
-export const paramTypes: AlgorithmConsumerParameter['type'][] = [
+export const paramTypes: ConsumerParameter['type'][] = [
   'number',
   'text',
   'boolean',
@@ -27,9 +27,7 @@ export const paramTypes: AlgorithmConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const [field, meta, helpers] = useField<AlgorithmConsumerParameter[]>(
-    props.name
-  )
+  const [field, meta, helpers] = useField<ConsumerParameter[]>(props.name)
 
   useEffect(() => {
     if (field.value.length === 0)
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
index f2f0f0a1c0..3240702119 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
@@ -1,10 +1,10 @@
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import { ConsumerParameter } from '@components/Publish/_types'
 import * as Yup from 'yup'
 import { SchemaLike } from 'yup/lib/types'
 import { paramTypes } from '.'
 
 export const validationConsumerParameters: {
-  [key in keyof AlgorithmConsumerParameter]: SchemaLike
+  [key in keyof ConsumerParameter]: SchemaLike
 } = {
   name: Yup.string()
     .test('unique', 'Parameter names must be unique', (name, context) => {
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index 76ce13da69..e1b621a276 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/src/components/Asset/Edit/_types.ts
@@ -1,4 +1,4 @@
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
+import { ConsumerParameter } from '@components/Publish/_types'
 import { FileInfo } from '@oceanprotocol/lib'
 export interface MetadataEditForm {
   name: string
@@ -11,11 +11,11 @@ export interface MetadataEditForm {
   author?: string
   tags?: string[]
   usesConsumerParameters?: boolean
-  consumerParameters?: AlgorithmConsumerParameter[]
+  consumerParameters?: ConsumerParameter[]
   assetState?: string
   service?: {
     usesConsumerParameters?: boolean
-    consumerParameters?: AlgorithmConsumerParameter[]
+    consumerParameters?: ConsumerParameter[]
   }
 }
 
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index b5ecd71da6..3ecabcac4c 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -15,7 +15,7 @@ export interface FormPublishService {
   algorithmPrivacy?: boolean
   computeOptions?: ServiceComputeOptions
   usesConsumerParameters?: boolean
-  consumerParameters?: AlgorithmConsumerParameter[]
+  consumerParameters?: ConsumerParameter[]
 }
 
 export interface FormPublishData {
@@ -39,10 +39,10 @@ export interface FormPublishData {
     dockerImageCustomEntrypoint?: string
     dockerImageCustomChecksum?: string
     usesConsumerParameters?: boolean
-    consumerParameters?: AlgorithmConsumerParameter[]
+    consumerParameters?: ConsumerParameter[]
     service?: {
       usesConsumerParameters?: boolean
-      consumerParameters?: AlgorithmConsumerParameter[]
+      consumerParameters?: ConsumerParameter[]
     }
   }
   services: FormPublishService[]
@@ -74,15 +74,11 @@ export interface MetadataAlgorithmContainer {
   checksum: string
 }
 
-export type AlgorithmConsumerParameterType =
-  | 'number'
-  | 'text'
-  | 'boolean'
-  | 'select'
+export type ConsumerParameterType = 'number' | 'text' | 'boolean' | 'select'
 
-export interface AlgorithmConsumerParameter {
+export interface ConsumerParameter {
   name: string
-  type: AlgorithmConsumerParameterType
+  type: ConsumerParameterType
   label: string
   required: boolean | string
   description: string
@@ -91,5 +87,5 @@ export interface AlgorithmConsumerParameter {
 }
 
 export type MetadataAlgorithmExtended = MetadataAlgorithm & {
-  consumerParameters: AlgorithmConsumerParameter[]
+  consumerParameters: ConsumerParameter[]
 }
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index f5ae764e52..3e43ed333d 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -20,7 +20,7 @@ import slugify from 'slugify'
 import Web3 from 'web3'
 import { algorithmContainerPresets } from './_constants'
 import {
-  AlgorithmConsumerParameter,
+  ConsumerParameter,
   FormPublishData,
   MetadataAlgorithmContainer,
   MetadataAlgorithmExtended
@@ -63,8 +63,8 @@ function transformTags(originalTags: string[]): string[] {
 }
 
 export function transformConsumerParameters(
-  parameters: AlgorithmConsumerParameter[]
-): AlgorithmConsumerParameter[] {
+  parameters: ConsumerParameter[]
+): ConsumerParameter[] {
   if (!parameters?.length) return
 
   const transformedValues = parameters.map((param) => {

From 304690ca0bc09e4ff83ccc94efe8919835300355 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 14:48:40 +0200
Subject: [PATCH 057/113] refactor: extract consumer parameters form data to
 separate file

---
 content/pages/editMetadata.json               | 134 ------------------
 content/publish/consumerParameters.json       |  73 ++++++++++
 content/publish/form.json                     | 134 ------------------
 .../Asset/Edit/FormEditMetadata.tsx           |  21 ++-
 src/components/Publish/Metadata/index.tsx     |   5 +-
 src/components/Publish/Services/index.tsx     |  11 +-
 6 files changed, 102 insertions(+), 276 deletions(-)
 create mode 100644 content/publish/consumerParameters.json

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index fdbb9b6a3e..ed40f9b783 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -179,73 +179,6 @@
         "placeholder": "e.g. logistics",
         "required": false
       },
-      {
-        "name": "usesConsumerParameters",
-        "label": "Uses consumer parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "checkbox",
-        "options": ["This algorithm uses consumer parameters"],
-        "required": false
-      },
-      {
-        "name": "consumerParameters",
-        "label": "Consumer parameters",
-        "type": "consumerParameters",
-        "required": false,
-        "fields": [
-          {
-            "name": "name",
-            "label": "Parameter Name",
-            "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
-            "type": "text",
-            "required": true
-          },
-
-          {
-            "name": "label",
-            "label": "Parameter Label",
-            "placeholder": "Custom Parameter",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "description",
-            "label": "Description",
-            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select"],
-            "required": true
-          },
-          {
-            "name": "options",
-            "label": "Select Options",
-            "placeholder": "Define the options for the user to select from",
-            "type": "creatableSelect",
-            "required": false
-          },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          },
-          {
-            "name": "required",
-            "label": "Required",
-            "options": ["optional", "required"],
-            "type": "select",
-            "required": true
-          }
-        ]
-      },
       {
         "name": "paymentCollector",
         "label": "Payment Collector Address",
@@ -266,73 +199,6 @@
         ],
         "sortOptions": false,
         "required": false
-      },
-      {
-        "name": "usesServiceConsumerParameters",
-        "label": "Uses consumer parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "checkbox",
-        "options": ["This asset uses consumer parameters"],
-        "required": false
-      },
-      {
-        "name": "serviceConsumerParameters",
-        "label": "Consumer parameters",
-        "type": "consumerParameters",
-        "required": false,
-        "fields": [
-          {
-            "name": "name",
-            "label": "Parameter Name",
-            "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
-            "type": "text",
-            "required": true
-          },
-
-          {
-            "name": "label",
-            "label": "Parameter Label",
-            "placeholder": "Custom Parameter",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "description",
-            "label": "Description",
-            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select"],
-            "required": true
-          },
-          {
-            "name": "options",
-            "label": "Select Options",
-            "placeholder": "Define the options for the user to select from",
-            "type": "creatableSelect",
-            "required": false
-          },
-          {
-            "name": "required",
-            "label": "Required",
-            "options": ["optional", "required"],
-            "type": "select",
-            "required": true
-          },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          }
-        ]
       }
     ]
   }
diff --git a/content/publish/consumerParameters.json b/content/publish/consumerParameters.json
new file mode 100644
index 0000000000..94a8c96ac5
--- /dev/null
+++ b/content/publish/consumerParameters.json
@@ -0,0 +1,73 @@
+{
+  "consumerParameters": {
+    "fields": [
+      {
+        "name": "usesConsumerParameters",
+        "label": "Uses consumer parameters",
+        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
+        "type": "checkbox",
+        "options": ["This asset uses consumer parameters"],
+        "required": false
+      },
+      {
+        "name": "consumerParameters",
+        "label": "Consumer parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "custom_parameter",
+            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "Custom Parameter",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "type": "select",
+            "options": ["number", "text", "boolean", "select"],
+            "required": true
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "placeholder": "Define the options for the user to select from",
+            "type": "creatableSelect",
+            "required": false
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["optional", "required"],
+            "type": "select",
+            "required": true
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "Define the default value for the current parameter",
+            "required": true
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/content/publish/form.json b/content/publish/form.json
index 1914dd1f8b..6738fc12b0 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -74,73 +74,6 @@
         "help": "Provide the entrypoint for your algorithm.",
         "required": true
       },
-      {
-        "name": "usesConsumerParameters",
-        "label": "Uses consumer parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "checkbox",
-        "options": ["This algorithm uses consumer parameters"],
-        "required": false
-      },
-      {
-        "name": "consumerParameters",
-        "label": "Consumer parameters",
-        "type": "consumerParameters",
-        "required": false,
-        "fields": [
-          {
-            "name": "name",
-            "label": "Parameter Name",
-            "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
-            "type": "text",
-            "required": true
-          },
-
-          {
-            "name": "label",
-            "label": "Parameter Label",
-            "placeholder": "Custom Parameter",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "description",
-            "label": "Description",
-            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select"],
-            "required": true
-          },
-          {
-            "name": "options",
-            "label": "Select Options",
-            "placeholder": "Define the options for the user to select from",
-            "type": "creatableSelect",
-            "required": false
-          },
-          {
-            "name": "required",
-            "label": "Required",
-            "options": ["optional", "required"],
-            "type": "select",
-            "required": true
-          },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          }
-        ]
-      },
       {
         "name": "termsAndConditions",
         "label": "Terms & Conditions",
@@ -322,73 +255,6 @@
         "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
         "sortOptions": false,
         "required": true
-      },
-      {
-        "name": "usesConsumerParameters",
-        "label": "Uses consumer parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "checkbox",
-        "options": ["This asset uses consumer parameters"],
-        "required": false
-      },
-      {
-        "name": "consumerParameters",
-        "label": "Consumer parameters",
-        "type": "consumerParameters",
-        "required": false,
-        "fields": [
-          {
-            "name": "name",
-            "label": "Parameter Name",
-            "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
-            "type": "text",
-            "required": true
-          },
-
-          {
-            "name": "label",
-            "label": "Parameter Label",
-            "placeholder": "Custom Parameter",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "description",
-            "label": "Description",
-            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
-            "type": "text",
-            "required": true
-          },
-          {
-            "name": "type",
-            "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
-            "type": "select",
-            "options": ["number", "text", "boolean", "select"],
-            "required": true
-          },
-          {
-            "name": "options",
-            "label": "Select Options",
-            "placeholder": "Define the options for the user to select from",
-            "type": "creatableSelect",
-            "required": false
-          },
-          {
-            "name": "default",
-            "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
-            "required": true
-          },
-          {
-            "name": "required",
-            "label": "Required",
-            "options": ["optional", "required"],
-            "type": "select",
-            "required": true
-          }
-        ]
       }
     ]
   },
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 1f416ec4ed..5d662ea8f1 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -9,6 +9,7 @@ import { getFieldContent } from '@utils/form'
 import { isGoogleUrl } from '@utils/url'
 import styles from './FormEditMetadata.module.css'
 import { MetadataEditForm } from './_types'
+import consumerParametersContent from '../../../../content/publish/consumerParameters.json'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -136,13 +137,19 @@ export default function FormEditMetadata({
       {asset.metadata.type === 'algorithm' && (
         <>
           <Field
-            {...getFieldContent('usesConsumerParameters', data)}
+            {...getFieldContent(
+              'usesConsumerParameters',
+              consumerParametersContent.consumerParameters.fields
+            )}
             component={Input}
             name="usesConsumerParameters"
           />
           {(values as unknown as MetadataEditForm).usesConsumerParameters && (
             <Field
-              {...getFieldContent('consumerParameters', data)}
+              {...getFieldContent(
+                'consumerParameters',
+                consumerParametersContent.consumerParameters.fields
+              )}
               component={Input}
               name="consumerParameters"
             />
@@ -164,14 +171,20 @@ export default function FormEditMetadata({
         <h4>Service</h4>
 
         <Field
-          {...getFieldContent('usesServiceConsumerParameters', data)}
+          {...getFieldContent(
+            'usesConsumerParameters',
+            consumerParametersContent.consumerParameters.fields
+          )}
           component={Input}
           name="service.usesConsumerParameters"
         />
         {(values as unknown as MetadataEditForm).service
           .usesConsumerParameters && (
           <Field
-            {...getFieldContent('serviceConsumerParameters', data)}
+            {...getFieldContent(
+              'consumerParameters',
+              consumerParametersContent.consumerParameters.fields
+            )}
             component={Input}
             name="service.consumerParameters"
           />
diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx
index 1addc2843f..a6a3fae8a7 100644
--- a/src/components/Publish/Metadata/index.tsx
+++ b/src/components/Publish/Metadata/index.tsx
@@ -3,6 +3,7 @@ import Input from '@shared/FormInput'
 import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import content from '../../../../content/publish/form.json'
+import consumerParametersContent from '../../../../content/publish/consumerParameters.json'
 import { FormPublishData } from '../_types'
 import IconDataset from '@images/dataset.svg'
 import IconAlgorithm from '@images/algorithm.svg'
@@ -148,7 +149,7 @@ export default function MetadataFields(): ReactElement {
           <Field
             {...getFieldContent(
               'usesConsumerParameters',
-              content.metadata.fields
+              consumerParametersContent.consumerParameters.fields
             )}
             component={Input}
             name="metadata.usesConsumerParameters"
@@ -157,7 +158,7 @@ export default function MetadataFields(): ReactElement {
             <Field
               {...getFieldContent(
                 'consumerParameters',
-                content.metadata.fields
+                consumerParametersContent.consumerParameters.fields
               )}
               component={Input}
               name="metadata.consumerParameters"
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index 7764972a6b..aa088fbfb4 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -4,6 +4,7 @@ import React, { ReactElement, useEffect } from 'react'
 import IconDownload from '@images/download.svg'
 import IconCompute from '@images/compute.svg'
 import content from '../../../../content/publish/form.json'
+import consumerParametersContent from '../../../../content/publish/consumerParameters.json'
 import { getFieldContent } from '@utils/form'
 import { FormPublishData } from '../_types'
 import Alert from '@shared/atoms/Alert'
@@ -109,13 +110,19 @@ export default function ServicesFields(): ReactElement {
         name="services[0].timeout"
       />
       <Field
-        {...getFieldContent('usesConsumerParameters', content.services.fields)}
+        {...getFieldContent(
+          'usesConsumerParameters',
+          consumerParametersContent.consumerParameters.fields
+        )}
         component={Input}
         name="services[0].usesConsumerParameters"
       />
       {values.services[0].usesConsumerParameters && (
         <Field
-          {...getFieldContent('consumerParameters', content.services.fields)}
+          {...getFieldContent(
+            'consumerParameters',
+            consumerParametersContent.consumerParameters.fields
+          )}
           component={Input}
           name="services[0].consumerParameters"
         />

From c1040e60f73223482446d6600221cafed703eac8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 9 May 2023 17:54:15 +0200
Subject: [PATCH 058/113] refactor: rename type

---
 src/@types/ServiceExtended.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@types/ServiceExtended.d.ts b/src/@types/ServiceExtended.d.ts
index 5ff9e2ea4e..4f6add5608 100644
--- a/src/@types/ServiceExtended.d.ts
+++ b/src/@types/ServiceExtended.d.ts
@@ -4,6 +4,6 @@ import { Service } from '@oceanprotocol/lib'
 // ambiant types despite the above imports
 declare global {
   interface ServiceExtended extends Service {
-    consumerParameters?: AlgorithmConsumerParameter
+    consumerParameters?: ConsumerParameter
   }
 }

From 1b60fb7c599ac08725493a1c2fe22d2c682e62ab Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Tue, 9 May 2023 23:39:33 +0200
Subject: [PATCH 059/113] feat: controlled tabs for consumer params

---
 .../ConsumerParameters/FormActions.tsx        | 27 +++++++++++++++----
 .../ConsumerParameters/index.module.css       |  1 +
 .../InputElement/ConsumerParameters/index.tsx | 15 ++++++++---
 src/components/@shared/atoms/Tabs/index.tsx   | 16 ++++++++---
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index 9c15197bc0..62ef290977 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -8,29 +8,46 @@ import { defaultConsumerParam } from '.'
 
 export default function FormActions({
   fieldName,
-  index
+  index,
+  onParameterAdded,
+  onParameterDeleted
 }: {
   fieldName: string
   index: number
+  onParameterAdded?: (index: number) => void
+  onParameterDeleted?: (previousIndex: number) => void
 }): ReactElement {
   const { errors, setFieldTouched, validateField } =
     useFormikContext<FormPublishData>()
   const [field, meta, helpers] = useField<ConsumerParameter[]>(fieldName)
 
+  const setParamPropsTouched = (index: number, touched = true) => {
+    Object.keys(defaultConsumerParam).forEach((param) => {
+      setFieldTouched(`${field.name}[${index}].${param}`, touched)
+    })
+  }
+
   const addParameter = (index: number) => {
     // validate parameter before allowing the creation of a new one
     validateField(field.name)
-    Object.keys(defaultConsumerParam).forEach((param) =>
-      setFieldTouched(`${field.name}[${index}].${param}`, true)
-    )
+    setParamPropsTouched(index)
 
-    if (getObjectPropertyByPath(errors, field.name)) return
+    // Check errors on current tab before creating a new param
+    if (getObjectPropertyByPath(errors, `${field.name}[${index}]`)) return
 
     helpers.setValue([...field.value, { ...defaultConsumerParam }])
+
+    onParameterAdded && onParameterAdded(field.value.length)
   }
 
   const deleteParameter = (index: number) => {
     helpers.setValue(field.value.filter((p, i) => i !== index))
+
+    // Reset index on formik
+    setParamPropsTouched(index, false)
+
+    const previousIndex = Math.max(0, index - 1)
+    onParameterDeleted && onParameterDeleted(previousIndex)
   }
 
   return (
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
index 203699c604..0f155a9bd6 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css
@@ -1,3 +1,4 @@
 .container {
   border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 3cd9a8969e..87b7699f0e 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,13 +1,13 @@
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useField } from 'formik'
-import React, { ReactElement, useEffect } from 'react'
 import { InputProps } from '../..'
 import { ConsumerParameter } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
-import styles from './index.module.css'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
 import SelectInput from './SelectInput'
 import ConsumerParameterInput from './Input'
+import styles from './index.module.css'
 
 export const defaultConsumerParam: ConsumerParameter = {
   name: '',
@@ -29,6 +29,8 @@ export const paramTypes: ConsumerParameter['type'][] = [
 export function ConsumerParameters(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField<ConsumerParameter[]>(props.name)
 
+  const [tabIndex, setTabIndex] = useState(0)
+
   useEffect(() => {
     if (field.value.length === 0)
       helpers.setValue([{ ...defaultConsumerParam }])
@@ -37,6 +39,8 @@ export function ConsumerParameters(props: InputProps): ReactElement {
   return (
     <div className={styles.container}>
       <Tabs
+        selectedIndex={tabIndex}
+        onIndexSelected={setTabIndex}
         items={field.value.map((param, index) => {
           return {
             title: param?.name || 'New parameter',
@@ -76,7 +80,12 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     />
                   )
                 })}
-                <FormActions fieldName={props.name} index={index} />
+                <FormActions
+                  fieldName={props.name}
+                  index={index}
+                  onParameterAdded={setTabIndex}
+                  onParameterDeleted={setTabIndex}
+                />
               </div>
             )
           }
diff --git a/src/components/@shared/atoms/Tabs/index.tsx b/src/components/@shared/atoms/Tabs/index.tsx
index 4ce1c3e701..025534af11 100644
--- a/src/components/@shared/atoms/Tabs/index.tsx
+++ b/src/components/@shared/atoms/Tabs/index.tsx
@@ -1,8 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react'
 import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
-import styles from './index.module.css'
 import InputRadio from '@shared/FormInput/InputElement/Radio'
-
+import styles from './index.module.css'
 export interface TabsItem {
   title: string
   content: ReactNode
@@ -15,6 +14,8 @@ export interface TabsProps {
   handleTabChange?: (tabName: string) => void
   defaultIndex?: number
   showRadio?: boolean
+  selectedIndex?: number
+  onIndexSelected?: (index: number) => void
 }
 
 export default function Tabs({
@@ -22,10 +23,17 @@ export default function Tabs({
   className,
   handleTabChange,
   defaultIndex,
-  showRadio
+  showRadio,
+  selectedIndex,
+  onIndexSelected
 }: TabsProps): ReactElement {
   return (
-    <ReactTabs className={`${className || ''}`} defaultIndex={defaultIndex}>
+    <ReactTabs
+      className={`${className || ''}`}
+      selectedIndex={selectedIndex}
+      onSelect={onIndexSelected}
+      defaultIndex={selectedIndex ? undefined : defaultIndex}
+    >
       <div className={styles.tabListContainer}>
         <TabList className={styles.tabList}>
           {items.map((item, index) => (

From 0e7d82cf88556781e50b776095724356f33fb321 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 10 May 2023 04:45:13 +0200
Subject: [PATCH 060/113] feat: restore default value as required

---
 .../InputElement/ConsumerParameters/DefaultInput.tsx      | 1 -
 .../ConsumerParameters/validationConsumerParameters.tsx   | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index f4a8c4527e..6b88cd7b7c 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -22,7 +22,6 @@ export default function DefaultInput({
   return (
     <Field
       {...props}
-      required={field.value[index].required === 'required'}
       component={Input}
       type={
         field.value[index].type === 'boolean'
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
index 3240702119..16d63743fd 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
@@ -28,13 +28,7 @@ export const validationConsumerParameters: {
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
   required: Yup.string().oneOf(['optional', 'required']).required('Required'),
-  default: Yup.mixed().when('required', {
-    is: 'optional',
-    then: Yup.mixed()
-      .nullable()
-      .transform((value) => value || null),
-    otherwise: Yup.mixed().required('Required')
-  }),
+  default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: 'select',
     then: Yup.array()

From c577334c7dac58d038330178a0ac827263d18671 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 10 May 2023 10:17:01 +0200
Subject: [PATCH 061/113] refactor: parse values before edit

---
 src/@utils/ddo.ts                             | 25 ++++++++-----------
 .../{Input.tsx => ConsumerParameterInput.tsx} | 10 ++++++++
 .../InputElement/ConsumerParameters/index.tsx |  2 +-
 .../validationConsumerParameters.tsx          |  4 ++-
 src/components/Publish/_utils.ts              |  5 +++-
 5 files changed, 28 insertions(+), 18 deletions(-)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{Input.tsx => ConsumerParameterInput.tsx} (78%)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index ab4ebefbfa..2306169b67 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -194,21 +194,16 @@ export function parseConsumerParameters(
 ): ConsumerParameter[] {
   if (!consumerParameters?.length) return []
 
-  return consumerParameters.map((param) => {
-    const updatedParam = {
-      ...param,
-      required: param.required === true ? 'required' : 'optional'
-    }
-
-    return updatedParam.type === 'select'
+  return consumerParameters.map((param) =>
+    param.type === 'select'
       ? {
-          ...updatedParam,
-          options: JSON.parse(updatedParam.options as string)
+          ...param,
+          options: JSON.parse(param.options as string)
         }
-      : updatedParam.type === 'number'
-      ? { ...updatedParam, default: Number(updatedParam.default) }
-      : updatedParam.type === 'boolean'
-      ? { ...updatedParam, default: updatedParam.default === 'true' }
-      : updatedParam
-  })
+      : param.type === 'number'
+      ? { ...param, default: Number(param.default) }
+      : param.type === 'boolean'
+      ? { ...param, default: param.default === 'true' }
+      : param
+  )
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
similarity index 78%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
index b7f0440f04..8176c8dcf2 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/Input.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
@@ -37,10 +37,20 @@ export default function ConsumerParameterInput({
     )
   }
 
+  const getFieldValue = (fieldName: string, parameter: ConsumerParameter) => {
+    const valueKey = fieldName.split('.').slice(-1)[0]
+    const value = parameter[valueKey]
+
+    if (valueKey !== 'required' || typeof value === 'string') return value
+
+    return value ? 'required' : 'optional'
+  }
+
   return (
     <Field
       {...props}
       component={Input}
+      value={getFieldValue(props.name, field.value[index])}
       onChange={(e) => {
         resetDefaultValue(props.name, e.target.value, index)
         field.onChange(e)
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 87b7699f0e..d2da87284d 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -6,7 +6,7 @@ import Tabs from '../../../atoms/Tabs'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
 import SelectInput from './SelectInput'
-import ConsumerParameterInput from './Input'
+import ConsumerParameterInput from './ConsumerParameterInput'
 import styles from './index.module.css'
 
 export const defaultConsumerParam: ConsumerParameter = {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
index 16d63743fd..8f07f66085 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
@@ -27,7 +27,9 @@ export const validationConsumerParameters: {
   type: Yup.string().oneOf(paramTypes).required('Required'),
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
-  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
+  required: Yup.mixed()
+    .oneOf(['optional', 'required', true, false])
+    .required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: 'select',
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 3e43ed333d..c07e1424d7 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -71,7 +71,10 @@ export function transformConsumerParameters(
     return param.type === 'select'
       ? {
           ...param,
-          required: param.required === 'required',
+          required:
+            typeof param.required === 'boolean'
+              ? param.required
+              : param.required === 'required',
           options: JSON.stringify(param.options)
         }
       : {

From 3971ec386eb527fc0f692fc6072fc442dc7ad159 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 10 May 2023 19:22:37 +0200
Subject: [PATCH 062/113] feat: add form to handle consumer parameters
 consumption

---
 .../Asset/AssetActions/Compute/_constants.ts  | 36 +++++++-
 .../FormConsumerParameters.module.css         | 18 ++++
 .../FormConsumerParameters.tsx                | 84 ++++++++++++-------
 .../AssetActions/ConsumerParameters/index.tsx |  3 +
 .../{ => Download}/Download.module.css        |  0
 .../AssetActions/{ => Download}/Download.tsx  | 76 ++++++++++-------
 .../AssetActions/Download/_validation.ts      |  8 ++
 src/components/Asset/AssetActions/index.tsx   |  2 +-
 8 files changed, 163 insertions(+), 64 deletions(-)
 rename src/components/Asset/AssetActions/{ => Download}/Download.module.css (100%)
 rename src/components/Asset/AssetActions/{ => Download}/Download.tsx (81%)
 create mode 100644 src/components/Asset/AssetActions/Download/_validation.ts

diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index 60f213c58b..ca89b75ef1 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,13 +1,43 @@
+import { ConsumerParameter } from '@components/Publish/_types'
 import * as Yup from 'yup'
 
+export const ConsumerParametersConsumeSchema = Yup.array()
+  .of(
+    Yup.object().shape({
+      required: Yup.boolean().required('required'),
+      default: Yup.mixed().when('required', {
+        is: false,
+        then: Yup.mixed()
+          .nullable()
+          .transform((value) => value || null),
+        otherwise: Yup.mixed().required('Required')
+      })
+    })
+  )
+  .nullable()
+
 export const validationSchema: Yup.SchemaOf<{
   algorithm: string
+  dataService: any
+  algoService: any
+  algoParams: any
 }> = Yup.object().shape({
-  algorithm: Yup.string().required('Required')
+  algorithm: Yup.string().required('Required'),
+  dataService: ConsumerParametersConsumeSchema,
+  algoService: ConsumerParametersConsumeSchema,
+  algoParams: ConsumerParametersConsumeSchema
 })
 
-export function getInitialValues(): { algorithm: string } {
+export function getInitialValues(): {
+  algorithm: string
+  dataService?: ConsumerParameter[]
+  algoService?: ConsumerParameter[]
+  algoParams?: ConsumerParameter[]
+} {
   return {
-    algorithm: undefined
+    algorithm: undefined,
+    dataService: undefined,
+    algoService: undefined,
+    algoParams: undefined
   }
 }
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
index ffb3ab8f53..68680038b0 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
@@ -24,6 +24,7 @@
 }
 
 .parameter {
+  position: relative;
   margin-left: -1rem;
   margin-right: -1rem;
   margin-bottom: calc(var(--spacer) / 2);
@@ -34,3 +35,20 @@
 .parameter:last-child {
   border: none;
 }
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.hasError input,
+.hasError input:focus,
+.hasError [class*='prefix'],
+.hasError [class*='postfix'] {
+  color: var(--brand-alert-red);
+  border-color: var(--brand-alert-red);
+}
+
+.error {
+  composes: error from '../../../@shared/FormInput/index.module.css';
+  right: 1rem;
+}
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 074058fd0a..fcd9771b7d 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,49 +1,67 @@
-import { AlgorithmConsumerParameter } from '@components/Publish/_types'
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import { ConsumerParameter } from '@components/Publish/_types'
+import React, { ChangeEvent, ReactElement, useEffect } from 'react'
 import styles from './FormConsumerParameters.module.css'
 import Label from '@components/@shared/FormInput/Label'
 import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
-import FormInput from '@shared/FormInput'
+import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
+import Input from '@components/@shared/FormInput'
+import { getObjectPropertyByPath } from '@utils/index'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 export default function FormConsumerParameters({
+  name,
   parameters
 }: {
-  parameters: AlgorithmConsumerParameter[]
+  name: string
+  parameters: ConsumerParameter[]
 }): ReactElement {
-  const [selectedValues, setSelectedValues] = useState({})
-  console.log(selectedValues)
+  const { errors, setFieldTouched } = useFormikContext()
+  const [field, meta, helpers] = useField<ConsumerParameter[]>(name)
+
   useEffect(() => {
-    const defaultValues = {}
-    parameters.forEach((param) => (defaultValues[param.name] = param.default))
+    if (field.value) return
+
+    helpers.setValue([...parameters])
+  }, [])
 
-    setSelectedValues(defaultValues)
-  }, [parameters])
+  const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
+    setFieldTouched(`${field.name}[${index}].default`, true)
+    helpers.setValue(
+      field.value.map((currentParam, i) => {
+        if (i !== index) return currentParam
 
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement>,
-    paramName: string
-  ) => {
-    const updatedSelectedValues = {
-      ...selectedValues,
-      [paramName]: e.target.value
-    }
-    setSelectedValues(updatedSelectedValues)
+        return {
+          ...currentParam,
+          default: e.target.value
+        }
+      })
+    )
   }
 
+  const showError = (name: string, index: number): boolean =>
+    !!getObjectPropertyByPath(errors, `${field.name}[${index}].${name}`)
+
   return (
     <div className={styles.container}>
       <Label htmlFor="Input the consumer parameters">
         Input the consumer parameters
       </Label>
       <div className={styles.parametersContainer}>
-        {parameters?.map((param) => (
-          <div key={param.name} className={styles.parameter}>
-            <FormInput
-              help={param.description}
-              label={param.label}
-              name={param.name}
+        {parameters?.map((param, index) => (
+          <div
+            key={param.name}
+            className={cx({
+              parameter: true,
+              hasError: showError('default', index)
+            })}
+          >
+            <Field
+              {...param}
+              component={Input}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                handleChange(e, param.name)
+                handleChange(e, index)
               }
               options={
                 param.type === 'boolean'
@@ -56,11 +74,21 @@ export default function FormConsumerParameters({
                     )
                   : (param.options as unknown as string[])
               }
-              required={param.required === 'required'}
               size="small"
               type={param.type === 'boolean' ? 'select' : param.type}
-              value={selectedValues[param.name]}
+              value={
+                typeof param.default === 'boolean' && param.default
+                  ? 'true'
+                  : typeof param.default === 'boolean' && !param.default
+                  ? 'false'
+                  : (field?.value?.[index]?.default as string | number)
+              }
             />
+            {showError('default', index) && (
+              <div className={styles.error}>
+                <ErrorMessage name={`${field.name}[${index}].default`} />
+              </div>
+            )}
           </div>
         ))}
       </div>
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index 4cd9dde47b..bea9372703 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -20,6 +20,7 @@ export default function ConsumerParameters({
         title: 'Data Service',
         content: (
           <FormConsumerParameters
+            name="dataService"
             parameters={parseConsumerParameters(
               asset.services[0].consumerParameters
             )}
@@ -32,6 +33,7 @@ export default function ConsumerParameters({
         title: 'Algo Service',
         content: (
           <FormConsumerParameters
+            name="algoService"
             parameters={parseConsumerParameters(
               selectedAlgorithmAsset.services[0].consumerParameters
             )}
@@ -44,6 +46,7 @@ export default function ConsumerParameters({
         title: 'Algo Params',
         content: (
           <FormConsumerParameters
+            name="algoParams"
             parameters={parseConsumerParameters(
               selectedAlgorithmAsset.metadata?.algorithm.consumerParameters
             )}
diff --git a/src/components/Asset/AssetActions/Download.module.css b/src/components/Asset/AssetActions/Download/Download.module.css
similarity index 100%
rename from src/components/Asset/AssetActions/Download.module.css
rename to src/components/Asset/AssetActions/Download/Download.module.css
diff --git a/src/components/Asset/AssetActions/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
similarity index 81%
rename from src/components/Asset/AssetActions/Download.tsx
rename to src/components/Asset/AssetActions/Download/Download.tsx
index 8c02375235..474b26018a 100644
--- a/src/components/Asset/AssetActions/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -3,9 +3,9 @@ import FileIcon from '@shared/FileIcon'
 import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
-import ButtonBuy from './ButtonBuy'
+import ButtonBuy from '../ButtonBuy'
 import { secondsToString } from '@utils/ddo'
-import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
+import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
 import styles from './Download.module.css'
 import { FileInfo, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { order } from '@utils/order'
@@ -17,7 +17,9 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
-import ConsumerParameters from './ConsumerParameters'
+import ConsumerParameters from '../ConsumerParameters'
+import { Form, Formik, useFormikContext } from 'formik'
+import { validationSchema } from './_validation'
 
 export default function Download({
   asset,
@@ -171,16 +173,16 @@ export default function Download({
     setIsLoading(false)
   }
 
-  const PurchaseButton = () => (
+  const PurchaseButton = ({ isValid }: { isValid?: boolean }) => (
     <ButtonBuy
       action="download"
-      disabled={isDisabled}
+      disabled={isDisabled || !isValid}
       hasPreviousOrder={isOwned}
       hasDatatoken={hasDatatoken}
       btSymbol={asset?.accessDetails?.baseToken?.symbol}
       dtSymbol={asset?.datatokens[0]?.symbol}
       dtBalance={dtBalance}
-      onClick={handleOrderOrDownload}
+      type="submit"
       assetTimeout={secondsToString(asset?.services?.[0]?.timeout)}
       assetType={asset?.metadata?.type}
       stepText={statusText}
@@ -195,6 +197,8 @@ export default function Download({
   )
 
   const AssetAction = ({ asset }: { asset: AssetExtended }) => {
+    const { isValid } = useFormikContext()
+
     return (
       <div>
         {isOrderDisabled ? (
@@ -216,7 +220,7 @@ export default function Download({
                 {asset && <ConsumerParameters asset={asset} />}
                 {!isInPurgatory && (
                   <div className={styles.buttonBuy}>
-                    <PurchaseButton />
+                    <PurchaseButton isValid={isValid} />
                   </div>
                 )}
               </>
@@ -228,31 +232,39 @@ export default function Download({
   }
 
   return (
-    <aside className={styles.consume}>
-      <div className={styles.info}>
-        <div className={styles.filewrapper}>
-          <FileIcon file={file} isLoading={fileIsLoading} small />
-        </div>
-        {isPriceLoading ? (
-          <Loader message="Calculating full price (including fees)" />
-        ) : (
-          <Price
-            className={styles.price}
-            price={asset.stats?.price}
-            orderPriceAndFees={orderPriceAndFees}
-            conversion
-            size="large"
-          />
-        )}
-      </div>
-      <AssetAction asset={asset} />
+    <Formik
+      initialValues={{ dataService: undefined }}
+      validationSchema={validationSchema}
+      onSubmit={handleOrderOrDownload}
+    >
+      <Form>
+        <aside className={styles.consume}>
+          <div className={styles.info}>
+            <div className={styles.filewrapper}>
+              <FileIcon file={file} isLoading={fileIsLoading} small />
+            </div>
+            {isPriceLoading ? (
+              <Loader message="Calculating full price (including fees)" />
+            ) : (
+              <Price
+                className={styles.price}
+                price={asset.stats?.price}
+                orderPriceAndFees={orderPriceAndFees}
+                conversion
+                size="large"
+              />
+            )}
+          </div>
+          <AssetAction asset={asset} />
 
-      {asset?.metadata?.type === 'algorithm' && (
-        <AlgorithmDatasetsListForCompute
-          algorithmDid={asset.id}
-          asset={asset}
-        />
-      )}
-    </aside>
+          {asset?.metadata?.type === 'algorithm' && (
+            <AlgorithmDatasetsListForCompute
+              algorithmDid={asset.id}
+              asset={asset}
+            />
+          )}
+        </aside>
+      </Form>
+    </Formik>
   )
 }
diff --git a/src/components/Asset/AssetActions/Download/_validation.ts b/src/components/Asset/AssetActions/Download/_validation.ts
new file mode 100644
index 0000000000..3f6d0d34a1
--- /dev/null
+++ b/src/components/Asset/AssetActions/Download/_validation.ts
@@ -0,0 +1,8 @@
+import * as Yup from 'yup'
+import { ConsumerParametersConsumeSchema } from '../Compute/_constants'
+
+export const validationSchema: Yup.SchemaOf<{
+  dataService: any
+}> = Yup.object().shape({
+  dataService: ConsumerParametersConsumeSchema
+})
diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx
index 6a850e6536..527c650955 100644
--- a/src/components/Asset/AssetActions/index.tsx
+++ b/src/components/Asset/AssetActions/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import Compute from './Compute'
-import Download from './Download'
+import Download from './Download/Download'
 import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
 import { compareAsBN } from '@utils/numbers'
 import { useAsset } from '@context/Asset'

From 026f3d2131ca417f2c8baafdc988fff65833ec4f Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 10:20:37 +0200
Subject: [PATCH 063/113] feat: send consumer params with download request

---
 src/@utils/ddo.ts                             | 11 +++++++++
 src/@utils/provider.ts                        |  9 +++++---
 .../Asset/AssetActions/Download/Download.tsx  | 23 +++++++++++++++----
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 2306169b67..4a1056c9de 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -207,3 +207,14 @@ export function parseConsumerParameters(
       : param
   )
 }
+
+export function transformConsumerParametersForConsumption(
+  parameters: ConsumerParameter[]
+): { [key: string]: any } {
+  if (!parameters?.length) return
+
+  const output = {}
+  parameters.forEach((param) => (output[param.name] = param.default))
+
+  return output
+}
diff --git a/src/@utils/provider.ts b/src/@utils/provider.ts
index 61e0c48c0f..60aa5cfc4b 100644
--- a/src/@utils/provider.ts
+++ b/src/@utils/provider.ts
@@ -11,7 +11,8 @@ import {
   LoggerInstance,
   ProviderComputeInitializeResults,
   ProviderInstance,
-  UrlFile
+  UrlFile,
+  UserCustomParameters
 } from '@oceanprotocol/lib'
 import { QueryHeader } from '@shared/FormInput/InputElement/Headers'
 import Web3 from 'web3'
@@ -176,7 +177,8 @@ export async function downloadFile(
   web3: Web3,
   asset: AssetExtended,
   accountId: string,
-  validOrderTx?: string
+  validOrderTx?: string,
+  userCustomParameters?: UserCustomParameters
 ) {
   const downloadUrl = await ProviderInstance.getDownloadUrl(
     asset.id,
@@ -185,7 +187,8 @@ export async function downloadFile(
     0,
     validOrderTx || asset.accessDetails.validOrderTx,
     asset.services[0].serviceEndpoint,
-    web3
+    web3,
+    userCustomParameters
   )
   await downloadFileBrowser(downloadUrl)
 }
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
index 474b26018a..caa2d8b584 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -4,10 +4,18 @@ import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import ButtonBuy from '../ButtonBuy'
-import { secondsToString } from '@utils/ddo'
+import {
+  secondsToString,
+  transformConsumerParametersForConsumption
+} from '@utils/ddo'
 import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
 import styles from './Download.module.css'
-import { FileInfo, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
+import {
+  FileInfo,
+  LoggerInstance,
+  UserCustomParameters,
+  ZERO_ADDRESS
+} from '@oceanprotocol/lib'
 import { order } from '@utils/order'
 import { downloadFile } from '@utils/provider'
 import { getOrderFeedback } from '@utils/feedback'
@@ -135,7 +143,7 @@ export default function Download({
     orderPriceAndFees
   ])
 
-  async function handleOrderOrDownload() {
+  async function handleOrderOrDownload(dataParams?: UserCustomParameters) {
     setIsLoading(true)
 
     try {
@@ -147,7 +155,7 @@ export default function Download({
           )[3]
         )
 
-        await downloadFile(web3, asset, accountId, validOrderTx)
+        await downloadFile(web3, asset, accountId, validOrderTx, dataParams)
       } else {
         setStatusText(
           getOrderFeedback(
@@ -235,7 +243,12 @@ export default function Download({
     <Formik
       initialValues={{ dataService: undefined }}
       validationSchema={validationSchema}
-      onSubmit={handleOrderOrDownload}
+      onSubmit={async (values) => {
+        const dataParams = transformConsumerParametersForConsumption(
+          values?.dataService
+        )
+        await handleOrderOrDownload(dataParams)
+      }}
     >
       <Form>
         <aside className={styles.consume}>

From a39e38734f2c94033f96c3578196434c61443e7e Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 10:52:01 +0200
Subject: [PATCH 064/113] feat: send consumer params with compute request

---
 .../Compute/FormComputeDataset.tsx            | 32 +++++++++++++++++--
 .../Asset/AssetActions/Compute/index.tsx      | 13 ++++++--
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index e6ac55a91c..ed57070b5f 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -9,7 +9,7 @@ import PriceOutput from './PriceOutput'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import content from '../../../../../content/pages/startComputeDataset.json'
-import { Asset, ZERO_ADDRESS } from '@oceanprotocol/lib'
+import { Asset, UserCustomParameters, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
@@ -17,6 +17,8 @@ import { getTokenBalanceFromSymbol } from '@utils/web3'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import ConsumerParameters from '../ConsumerParameters'
+import { transformConsumerParametersForConsumption } from '@utils/ddo'
+import { ConsumerParameter } from '@components/Publish/_types'
 
 export default function FormStartCompute({
   algorithms,
@@ -39,6 +41,7 @@ export default function FormStartCompute({
   dtBalanceSelectedComputeAsset,
   selectedComputeAssetType,
   selectedComputeAssetTimeout,
+  setUserCustomParameters,
   stepText,
   isConsumable,
   consumableFeedback,
@@ -68,6 +71,9 @@ export default function FormStartCompute({
   dtBalanceSelectedComputeAsset?: string
   selectedComputeAssetType?: string
   selectedComputeAssetTimeout?: string
+  setUserCustomParameters: React.Dispatch<
+    React.SetStateAction<UserCustomParameters>
+  >
   stepText: string
   isConsumable: boolean
   consumableFeedback: string
@@ -79,8 +85,15 @@ export default function FormStartCompute({
 }): ReactElement {
   const { siteContent } = useMarketMetadata()
   const { accountId, balance, isSupportedOceanNetwork } = useWeb3()
-  const { isValid, values }: FormikContextType<{ algorithm: string }> =
-    useFormikContext()
+  const {
+    isValid,
+    values
+  }: FormikContextType<{
+    algorithm: string
+    dataService: ConsumerParameter[]
+    algoService: ConsumerParameter[]
+    algoParams: ConsumerParameter[]
+  }> = useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
 
   const [datasetOrderPrice, setDatasetOrderPrice] = useState(
@@ -120,6 +133,19 @@ export default function FormStartCompute({
     fetchAlgorithmAssetExtended()
   }, [values.algorithm, accountId, isConsumable])
 
+  useEffect(() => {
+    if (!values) return
+
+    const output = {}
+    Object.entries(values).forEach((value) => {
+      if (value[0] === 'algorithm') return
+      output[value[0]] = transformConsumerParametersForConsumption(
+        value[1] as ConsumerParameter[]
+      )
+    })
+    setUserCustomParameters(output)
+  }, [setUserCustomParameters, values])
+
   //
   // Set price for calculation output
   //
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 24db8fd730..5ae1ff7b16 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -104,6 +104,11 @@ export default function Compute({
   const [isLoadingJobs, setIsLoadingJobs] = useState(false)
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const [retry, setRetry] = useState<boolean>(false)
+  const [userCustomParameters, setUserCustomParameters] = useState<{
+    dataService: { [key: string]: any }
+    algoService: { [key: string]: any }
+    algoParams: { [key: string]: any }
+  }>()
 
   const hasDatatoken = Number(dtBalance) >= 1
   const isComputeButtonDisabled =
@@ -347,7 +352,9 @@ export default function Compute({
       const computeService = getServiceByName(asset, 'compute')
       const computeAlgorithm: ComputeAlgorithm = {
         documentId: selectedAlgorithmAsset.id,
-        serviceId: selectedAlgorithmAsset.services[0].id
+        serviceId: selectedAlgorithmAsset.services[0].id,
+        algocustomdata: userCustomParameters?.algoParams,
+        userdata: userCustomParameters?.algoService
       }
 
       const allowed = await isOrderable(
@@ -404,7 +411,8 @@ export default function Compute({
       const computeAsset: ComputeAsset = {
         documentId: asset.id,
         serviceId: asset.services[0].id,
-        transferTxId: datasetOrderTx
+        transferTxId: datasetOrderTx,
+        userdata: userCustomParameters?.dataService
       }
       computeAlgorithm.transferTxId = algorithmOrderTx
       const output: ComputeOutput = {
@@ -517,6 +525,7 @@ export default function Compute({
             selectedComputeAssetTimeout={secondsToString(
               selectedAlgorithmAsset?.services[0]?.timeout
             )}
+            setUserCustomParameters={setUserCustomParameters}
             // lazy comment when removing pricingStepText
             stepText={computeStatusText}
             isConsumable={isConsumablePrice}

From 43abe3317e55479285fbeffe995364559b56b9b8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 12:07:08 +0200
Subject: [PATCH 065/113] feat: handle compute form initialization

---
 .../Asset/AssetActions/Compute/_constants.ts   | 18 +++++++++++++-----
 .../Asset/AssetActions/Compute/index.tsx       |  3 ++-
 .../FormConsumerParameters.tsx                 |  6 ------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index ca89b75ef1..b64d6d2e12 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,4 +1,5 @@
 import { ConsumerParameter } from '@components/Publish/_types'
+import { parseConsumerParameters } from '@utils/ddo'
 import * as Yup from 'yup'
 
 export const ConsumerParametersConsumeSchema = Yup.array()
@@ -28,16 +29,23 @@ export const validationSchema: Yup.SchemaOf<{
   algoParams: ConsumerParametersConsumeSchema
 })
 
-export function getInitialValues(): {
+export function getInitialValues(
+  asset?: AssetExtended,
+  selectedAlgorithmAsset?: AssetExtended
+): {
   algorithm: string
   dataService?: ConsumerParameter[]
   algoService?: ConsumerParameter[]
   algoParams?: ConsumerParameter[]
 } {
   return {
-    algorithm: undefined,
-    dataService: undefined,
-    algoService: undefined,
-    algoParams: undefined
+    algorithm: selectedAlgorithmAsset?.id,
+    dataService: parseConsumerParameters(asset?.services[0].consumerParameters),
+    algoService: parseConsumerParameters(
+      selectedAlgorithmAsset?.services[0].consumerParameters
+    ),
+    algoParams: parseConsumerParameters(
+      selectedAlgorithmAsset?.metadata?.algorithm.consumerParameters
+    )
   }
 }
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 5ae1ff7b16..06b988c0cb 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -486,9 +486,10 @@ export default function Compute({
         </>
       ) : (
         <Formik
-          initialValues={getInitialValues()}
+          initialValues={getInitialValues(asset, selectedAlgorithmAsset)}
           validateOnMount
           validationSchema={validationSchema}
+          enableReinitialize
           onSubmit={async (values) => {
             if (!values.algorithm) return
             await startJob()
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index fcd9771b7d..5678f5b2db 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -20,12 +20,6 @@ export default function FormConsumerParameters({
   const { errors, setFieldTouched } = useFormikContext()
   const [field, meta, helpers] = useField<ConsumerParameter[]>(name)
 
-  useEffect(() => {
-    if (field.value) return
-
-    helpers.setValue([...parameters])
-  }, [])
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
     setFieldTouched(`${field.name}[${index}].default`, true)
     helpers.setValue(

From 086d20d5a9cd301e627d27b73d7656ad3d81fec5 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 12:07:19 +0200
Subject: [PATCH 066/113] chore: remove unused dependency

---
 .../AssetActions/ConsumerParameters/FormConsumerParameters.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 5678f5b2db..971fa9d2f2 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,5 +1,5 @@
 import { ConsumerParameter } from '@components/Publish/_types'
-import React, { ChangeEvent, ReactElement, useEffect } from 'react'
+import React, { ChangeEvent, ReactElement } from 'react'
 import styles from './FormConsumerParameters.module.css'
 import Label from '@components/@shared/FormInput/Label'
 import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'

From 291c821fa3512ab8a17e4d4b38f7c5c7c9c07144 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 12:09:55 +0200
Subject: [PATCH 067/113] feat: handle download form data initialization

---
 .../ConsumerParameters/FormConsumerParameters.tsx          | 2 +-
 src/components/Asset/AssetActions/Download/Download.tsx    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 971fa9d2f2..9f4f51edcf 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -19,7 +19,7 @@ export default function FormConsumerParameters({
 }): ReactElement {
   const { errors, setFieldTouched } = useFormikContext()
   const [field, meta, helpers] = useField<ConsumerParameter[]>(name)
-
+  console.log(field.value)
   const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
     setFieldTouched(`${field.name}[${index}].default`, true)
     helpers.setValue(
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
index caa2d8b584..3f262da71e 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -5,6 +5,7 @@ import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import ButtonBuy from '../ButtonBuy'
 import {
+  parseConsumerParameters,
   secondsToString,
   transformConsumerParametersForConsumption
 } from '@utils/ddo'
@@ -241,7 +242,11 @@ export default function Download({
 
   return (
     <Formik
-      initialValues={{ dataService: undefined }}
+      initialValues={{
+        dataService: parseConsumerParameters(
+          asset?.services[0].consumerParameters
+        )
+      }}
       validationSchema={validationSchema}
       onSubmit={async (values) => {
         const dataParams = transformConsumerParametersForConsumption(

From 9cf89d93cae0b4b8b666a7d69fd0b674897d457c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 12:10:06 +0200
Subject: [PATCH 068/113] chore: remove console.log

---
 .../AssetActions/ConsumerParameters/FormConsumerParameters.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 9f4f51edcf..971fa9d2f2 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -19,7 +19,7 @@ export default function FormConsumerParameters({
 }): ReactElement {
   const { errors, setFieldTouched } = useFormikContext()
   const [field, meta, helpers] = useField<ConsumerParameter[]>(name)
-  console.log(field.value)
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
     setFieldTouched(`${field.name}[${index}].default`, true)
     helpers.setValue(

From 72d19513cf534a7cf8c6533d19bf93ab1d6ef25e Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 11 May 2023 14:57:50 +0200
Subject: [PATCH 069/113] feat: update types

---
 src/@utils/ddo.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 4a1056c9de..7e7409b544 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -12,7 +12,8 @@ import {
   Ipfs,
   Service,
   Smartcontract,
-  UrlFile
+  UrlFile,
+  UserCustomParameters
 } from '@oceanprotocol/lib'
 import { checkJson } from './codemirror'
 
@@ -210,7 +211,7 @@ export function parseConsumerParameters(
 
 export function transformConsumerParametersForConsumption(
   parameters: ConsumerParameter[]
-): { [key: string]: any } {
+): UserCustomParameters {
   if (!parameters?.length) return
 
   const output = {}

From f1f888c5cee231494d00f349549ba2771e73e33c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 12 May 2023 14:20:32 +0200
Subject: [PATCH 070/113] fix: consumer parameter value types

---
 src/@utils/ddo.ts                             | 24 +++++++--
 .../FormConsumerParameters.tsx                | 54 ++++++++++++-------
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 7e7409b544..5d160a16bb 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -190,6 +190,21 @@ export function previewDebugPatch(
   return buildValuesPreview
 }
 
+export function parseConsumerParameterDefaultValue(
+  type: ConsumerParameter['type'],
+  value: ConsumerParameter['default']
+) {
+  if (!value || !type) return
+
+  if (type === 'number') return Number(value)
+  if (type === 'boolean') {
+    if (value === 'true') return true
+    if (value === 'false') return false
+  }
+
+  return value
+}
+
 export function parseConsumerParameters(
   consumerParameters: ConsumerParameter[]
 ): ConsumerParameter[] {
@@ -201,11 +216,10 @@ export function parseConsumerParameters(
           ...param,
           options: JSON.parse(param.options as string)
         }
-      : param.type === 'number'
-      ? { ...param, default: Number(param.default) }
-      : param.type === 'boolean'
-      ? { ...param, default: param.default === 'true' }
-      : param
+      : {
+          ...param,
+          default: parseConsumerParameterDefaultValue(param.type, param.default)
+        }
   )
 }
 
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 971fa9d2f2..242009ccfd 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -7,6 +7,7 @@ import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
 import Input from '@components/@shared/FormInput'
 import { getObjectPropertyByPath } from '@utils/index'
 import classNames from 'classnames/bind'
+import { parseConsumerParameterDefaultValue } from '@utils/ddo'
 
 const cx = classNames.bind(styles)
 
@@ -28,7 +29,10 @@ export default function FormConsumerParameters({
 
         return {
           ...currentParam,
-          default: e.target.value
+          default: parseConsumerParameterDefaultValue(
+            currentParam.type,
+            e.target.value
+          )
         }
       })
     )
@@ -37,6 +41,34 @@ export default function FormConsumerParameters({
   const showError = (name: string, index: number): boolean =>
     !!getObjectPropertyByPath(errors, `${field.name}[${index}].${name}`)
 
+  const getParameterOptions = (parameter: ConsumerParameter): string[] => {
+    if (!parameter.options && parameter.type !== 'boolean') return []
+
+    const updatedOptions =
+      parameter.type === 'boolean'
+        ? ['true', 'false']
+        : parameter.type === 'select'
+        ? getConsumerParameterStringOptions(
+            parameter?.options as {
+              [key: string]: string
+            }[]
+          )
+        : (parameter.options as unknown as string[])
+
+    if (!parameter.required) updatedOptions.unshift('')
+
+    return updatedOptions
+  }
+
+  const getParameterValue = (parameter: ConsumerParameter, index: number) => {
+    if (parameter.type === 'boolean') {
+      if (parameter.default === 'true') return 'true'
+      if (parameter.default === 'false') return 'false'
+    }
+
+    return field?.value?.[index]?.default
+  }
+
   return (
     <div className={styles.container}>
       <Label htmlFor="Input the consumer parameters">
@@ -57,26 +89,10 @@ export default function FormConsumerParameters({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 handleChange(e, index)
               }
-              options={
-                param.type === 'boolean'
-                  ? ['true', 'false']
-                  : param.type === 'select'
-                  ? getConsumerParameterStringOptions(
-                      param?.options as {
-                        [key: string]: string
-                      }[]
-                    )
-                  : (param.options as unknown as string[])
-              }
+              options={getParameterOptions(param)}
               size="small"
               type={param.type === 'boolean' ? 'select' : param.type}
-              value={
-                typeof param.default === 'boolean' && param.default
-                  ? 'true'
-                  : typeof param.default === 'boolean' && !param.default
-                  ? 'false'
-                  : (field?.value?.[index]?.default as string | number)
-              }
+              value={getParameterValue(param, index)}
             />
             {showError('default', index) && (
               <div className={styles.error}>

From 2b2699a3120ee2970a6c6cee1aca17721ed735cc Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 12 May 2023 14:46:33 +0200
Subject: [PATCH 071/113] feat: update ConsumerParameter type

---
 src/@types/ConsumerParameters.d.ts            |  9 +++++
 src/@types/MetadataExtended.d.ts              |  4 +-
 src/@types/ServiceExtended.d.ts               |  2 +-
 src/@utils/ddo.ts                             |  7 +++-
 .../ConsumerParameterInput.tsx                | 14 +++++--
 .../ConsumerParameters/DefaultInput.tsx       |  4 +-
 .../ConsumerParameters/FormActions.tsx        |  7 +++-
 .../ConsumerParameters/SelectInput.tsx        |  7 +++-
 .../InputElement/ConsumerParameters/index.tsx |  8 ++--
 .../validationConsumerParameters.tsx          |  4 +-
 src/components/Asset/Edit/EditMetadata.tsx    |  5 +--
 src/components/Asset/Edit/_types.ts           |  6 +--
 src/components/Publish/_types.ts              | 22 +++-------
 src/components/Publish/_utils.ts              | 40 +++++++++----------
 14 files changed, 74 insertions(+), 65 deletions(-)
 create mode 100644 src/@types/ConsumerParameters.d.ts

diff --git a/src/@types/ConsumerParameters.d.ts b/src/@types/ConsumerParameters.d.ts
new file mode 100644
index 0000000000..c3476f9015
--- /dev/null
+++ b/src/@types/ConsumerParameters.d.ts
@@ -0,0 +1,9 @@
+interface ConsumerParameter {
+  name: string
+  type: 'text' | 'number' | 'boolean' | 'select'
+  label: string
+  required: boolean
+  description: string
+  default: string
+  options?: string
+}
diff --git a/src/@types/MetadataExtended.d.ts b/src/@types/MetadataExtended.d.ts
index bd7222a179..7fd80512fa 100644
--- a/src/@types/MetadataExtended.d.ts
+++ b/src/@types/MetadataExtended.d.ts
@@ -4,6 +4,8 @@ import { Metadata } from '@oceanprotocol/lib'
 // ambiant types despite the above imports
 declare global {
   interface MetadataExtended extends Metadata {
-    algorithm?: MetadataAlgorithmExtended
+    algorithm?: MetadataAlgorithm & {
+      consumerParameters: ConsumerParameter[]
+    }
   }
 }
diff --git a/src/@types/ServiceExtended.d.ts b/src/@types/ServiceExtended.d.ts
index 4f6add5608..cf76227314 100644
--- a/src/@types/ServiceExtended.d.ts
+++ b/src/@types/ServiceExtended.d.ts
@@ -4,6 +4,6 @@ import { Service } from '@oceanprotocol/lib'
 // ambiant types despite the above imports
 declare global {
   interface ServiceExtended extends Service {
-    consumerParameters?: ConsumerParameter
+    consumerParameters?: ConsumerParameter[]
   }
 }
diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 2306169b67..4df206d735 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -2,7 +2,10 @@ import {
   ComputeEditForm,
   MetadataEditForm
 } from '@components/Asset/Edit/_types'
-import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import {
   Arweave,
   Asset,
@@ -191,7 +194,7 @@ export function previewDebugPatch(
 
 export function parseConsumerParameters(
   consumerParameters: ConsumerParameter[]
-): ConsumerParameter[] {
+): FormConsumerParameter[] {
   if (!consumerParameters?.length) return []
 
   return consumerParameters.map((param) =>
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
index 8176c8dcf2..023b5fedf5 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
@@ -1,7 +1,10 @@
 import React, { ReactElement } from 'react'
 import Input, { InputProps } from '../..'
 import { Field, useField, useFormikContext } from 'formik'
-import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import { defaultConsumerParam } from '.'
 
 export default function ConsumerParameterInput({
@@ -13,11 +16,11 @@ export default function ConsumerParameterInput({
   inputName: string
 }): ReactElement {
   const { setFieldTouched } = useFormikContext<FormPublishData>()
-  const [field, meta, helpers] = useField<ConsumerParameter[]>(inputName)
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(inputName)
 
   const resetDefaultValue = (
     parameterName: string,
-    parameterType: ConsumerParameter['type'],
+    parameterType: FormConsumerParameter['type'],
     index: number
   ) => {
     if (parameterName !== 'type') return
@@ -37,7 +40,10 @@ export default function ConsumerParameterInput({
     )
   }
 
-  const getFieldValue = (fieldName: string, parameter: ConsumerParameter) => {
+  const getFieldValue = (
+    fieldName: string,
+    parameter: FormConsumerParameter
+  ) => {
     const valueKey = fieldName.split('.').slice(-1)[0]
     const value = parameter[valueKey]
 
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index 6b88cd7b7c..c5bc08cca6 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Input, { InputProps } from '../..'
 import { Field, useField } from 'formik'
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 
 export default function DefaultInput({
   index,
@@ -11,7 +11,7 @@ export default function DefaultInput({
   index: number
   inputName: string
 }): ReactElement {
-  const [field] = useField<ConsumerParameter[]>(inputName)
+  const [field] = useField<FormConsumerParameter[]>(inputName)
 
   const getStringOptions = (options: { [key: string]: string }[]): string[] => {
     if (!options?.length) return []
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index 62ef290977..092d8347a8 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -2,7 +2,10 @@ import React, { ReactElement } from 'react'
 import Button from '@components/@shared/atoms/Button'
 import styles from './FormActions.module.css'
 import { useField, useFormikContext } from 'formik'
-import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import { getObjectPropertyByPath } from '@utils/index'
 import { defaultConsumerParam } from '.'
 
@@ -19,7 +22,7 @@ export default function FormActions({
 }): ReactElement {
   const { errors, setFieldTouched, validateField } =
     useFormikContext<FormPublishData>()
-  const [field, meta, helpers] = useField<ConsumerParameter[]>(fieldName)
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(fieldName)
 
   const setParamPropsTouched = (index: number, touched = true) => {
     Object.keys(defaultConsumerParam).forEach((param) => {
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
index fabdc44e64..1c7291333a 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
@@ -1,7 +1,10 @@
 import React, { ReactElement } from 'react'
 import { InputProps } from '../..'
 import { ErrorMessage, useField, useFormikContext } from 'formik'
-import { ConsumerParameter, FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import InputOptions from './InputOptions'
 import styles from './SelectInput.module.css'
 import { getObjectPropertyByPath } from '@utils/index'
@@ -18,7 +21,7 @@ export default function SelectInput({
   inputName: string
 }): ReactElement {
   const { errors, touched } = useFormikContext<FormPublishData>()
-  const [field] = useField<ConsumerParameter[]>(inputName)
+  const [field] = useField<FormConsumerParameter[]>(inputName)
 
   const showError = (name: string, index: number): boolean =>
     [errors, touched].every(
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index d2da87284d..d171ebdce4 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useField } from 'formik'
 import { InputProps } from '../..'
-import { ConsumerParameter } from '../../../../Publish/_types'
+import { FormConsumerParameter } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
@@ -9,7 +9,7 @@ import SelectInput from './SelectInput'
 import ConsumerParameterInput from './ConsumerParameterInput'
 import styles from './index.module.css'
 
-export const defaultConsumerParam: ConsumerParameter = {
+export const defaultConsumerParam: FormConsumerParameter = {
   name: '',
   label: '',
   description: '',
@@ -19,7 +19,7 @@ export const defaultConsumerParam: ConsumerParameter = {
   required: ''
 }
 
-export const paramTypes: ConsumerParameter['type'][] = [
+export const paramTypes: FormConsumerParameter['type'][] = [
   'number',
   'text',
   'boolean',
@@ -27,7 +27,7 @@ export const paramTypes: ConsumerParameter['type'][] = [
 ]
 
 export function ConsumerParameters(props: InputProps): ReactElement {
-  const [field, meta, helpers] = useField<ConsumerParameter[]>(props.name)
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(props.name)
 
   const [tabIndex, setTabIndex] = useState(0)
 
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
index 8f07f66085..5cc448af82 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
@@ -1,10 +1,10 @@
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 import * as Yup from 'yup'
 import { SchemaLike } from 'yup/lib/types'
 import { paramTypes } from '.'
 
 export const validationConsumerParameters: {
-  [key in keyof ConsumerParameter]: SchemaLike
+  [key in keyof FormConsumerParameter]: SchemaLike
 } = {
   name: Yup.string()
     .test('unique', 'Parameter names must be unique', (name, context) => {
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index a0f798ac7a..48e4d28cc4 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -2,10 +2,8 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import { Formik } from 'formik'
 import {
   LoggerInstance,
-  Metadata,
   FixedRateExchange,
   Asset,
-  Service,
   Datatoken,
   Nft
 } from '@oceanprotocol/lib'
@@ -28,7 +26,6 @@ import { setNftMetadata } from '@utils/nft'
 import { sanitizeUrl } from '@utils/url'
 import { getEncryptedFiles } from '@utils/provider'
 import { assetStateToNumber } from '@utils/assetState'
-import { MetadataAlgorithmExtended } from '@components/Publish/_types'
 import { transformConsumerParameters } from '@components/Publish/_utils'
 
 export default function Edit({
@@ -194,7 +191,7 @@ export default function Edit({
     <Formik
       enableReinitialize
       initialValues={getInitialValues(
-        asset?.metadata as Metadata & { algorithm?: MetadataAlgorithmExtended },
+        asset?.metadata,
         asset?.services[0],
         asset?.accessDetails?.price || '0',
         paymentCollector,
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index e1b621a276..b8c6171bc2 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/src/components/Asset/Edit/_types.ts
@@ -1,4 +1,4 @@
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 import { FileInfo } from '@oceanprotocol/lib'
 export interface MetadataEditForm {
   name: string
@@ -11,11 +11,11 @@ export interface MetadataEditForm {
   author?: string
   tags?: string[]
   usesConsumerParameters?: boolean
-  consumerParameters?: ConsumerParameter[]
+  consumerParameters?: FormConsumerParameter[]
   assetState?: string
   service?: {
     usesConsumerParameters?: boolean
-    consumerParameters?: ConsumerParameter[]
+    consumerParameters?: FormConsumerParameter[]
   }
 }
 
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 3ecabcac4c..6bb6cdc2d7 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -1,8 +1,4 @@
-import {
-  FileInfo,
-  MetadataAlgorithm,
-  ServiceComputeOptions
-} from '@oceanprotocol/lib'
+import { FileInfo, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { NftMetadata } from '@utils/nft'
 import { ReactElement } from 'react'
 export interface FormPublishService {
@@ -15,7 +11,7 @@ export interface FormPublishService {
   algorithmPrivacy?: boolean
   computeOptions?: ServiceComputeOptions
   usesConsumerParameters?: boolean
-  consumerParameters?: ConsumerParameter[]
+  consumerParameters?: FormConsumerParameter[]
 }
 
 export interface FormPublishData {
@@ -39,10 +35,10 @@ export interface FormPublishData {
     dockerImageCustomEntrypoint?: string
     dockerImageCustomChecksum?: string
     usesConsumerParameters?: boolean
-    consumerParameters?: ConsumerParameter[]
+    consumerParameters?: FormConsumerParameter[]
     service?: {
       usesConsumerParameters?: boolean
-      consumerParameters?: ConsumerParameter[]
+      consumerParameters?: FormConsumerParameter[]
     }
   }
   services: FormPublishService[]
@@ -74,18 +70,12 @@ export interface MetadataAlgorithmContainer {
   checksum: string
 }
 
-export type ConsumerParameterType = 'number' | 'text' | 'boolean' | 'select'
-
-export interface ConsumerParameter {
+export interface FormConsumerParameter {
   name: string
-  type: ConsumerParameterType
+  type: 'text' | 'number' | 'boolean' | 'select'
   label: string
   required: boolean | string
   description: string
   default: string | boolean | number
   options?: string | { [key: string]: string }[]
 }
-
-export type MetadataAlgorithmExtended = MetadataAlgorithm & {
-  consumerParameters: ConsumerParameter[]
-}
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index c07e1424d7..73e91e10b5 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -7,10 +7,8 @@ import {
   DispenserCreationParams,
   getHash,
   LoggerInstance,
-  Metadata,
   NftCreateData,
   NftFactory,
-  Service,
   ZERO_ADDRESS
 } from '@oceanprotocol/lib'
 import { mapTimeoutStringToSeconds, normalizeFile } from '@utils/ddo'
@@ -20,10 +18,9 @@ import slugify from 'slugify'
 import Web3 from 'web3'
 import { algorithmContainerPresets } from './_constants'
 import {
-  ConsumerParameter,
+  FormConsumerParameter,
   FormPublishData,
-  MetadataAlgorithmContainer,
-  MetadataAlgorithmExtended
+  MetadataAlgorithmContainer
 } from './_types'
 import {
   marketFeeAddress,
@@ -63,29 +60,28 @@ function transformTags(originalTags: string[]): string[] {
 }
 
 export function transformConsumerParameters(
-  parameters: ConsumerParameter[]
+  parameters: FormConsumerParameter[]
 ): ConsumerParameter[] {
   if (!parameters?.length) return
 
   const transformedValues = parameters.map((param) => {
-    return param.type === 'select'
-      ? {
-          ...param,
-          required:
-            typeof param.required === 'boolean'
-              ? param.required
-              : param.required === 'required',
-          options: JSON.stringify(param.options)
-        }
-      : {
-          ...param,
-          required: param.required === 'required',
-          options: undefined,
-          default: param.default.toString()
-        }
+    const options =
+      param.type === 'select' ? JSON.stringify(param.options) : param.options
+
+    const required =
+      typeof param.required === 'boolean'
+        ? param.required
+        : param.required === 'required'
+
+    return {
+      ...param,
+      options,
+      required,
+      default: param.default.toString()
+    }
   })
 
-  return transformedValues
+  return transformedValues as ConsumerParameter[]
 }
 
 export async function transformPublishFormToDdo(

From cc7ff6da26c55361f2ff18cfe781a85d2d38f6b8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 12 May 2023 14:53:31 +0200
Subject: [PATCH 072/113] feat: update ConsumerParameter type

---
 src/@utils/ddo.ts                                   |  2 +-
 .../AssetActions/Compute/FormComputeDataset.tsx     | 10 +++++-----
 .../Asset/AssetActions/Compute/_constants.ts        |  8 ++++----
 .../ConsumerParameters/FormConsumerParameters.tsx   | 13 ++++++++-----
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 33d8ed0d15..ff11e1bd3e 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -227,7 +227,7 @@ export function parseConsumerParameters(
 }
 
 export function transformConsumerParametersForConsumption(
-  parameters: ConsumerParameter[]
+  parameters: FormConsumerParameter[]
 ): UserCustomParameters {
   if (!parameters?.length) return
 
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index ed57070b5f..7e37b17393 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -18,7 +18,7 @@ import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import ConsumerParameters from '../ConsumerParameters'
 import { transformConsumerParametersForConsumption } from '@utils/ddo'
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 
 export default function FormStartCompute({
   algorithms,
@@ -90,9 +90,9 @@ export default function FormStartCompute({
     values
   }: FormikContextType<{
     algorithm: string
-    dataService: ConsumerParameter[]
-    algoService: ConsumerParameter[]
-    algoParams: ConsumerParameter[]
+    dataService: FormConsumerParameter[]
+    algoService: FormConsumerParameter[]
+    algoParams: FormConsumerParameter[]
   }> = useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
 
@@ -140,7 +140,7 @@ export default function FormStartCompute({
     Object.entries(values).forEach((value) => {
       if (value[0] === 'algorithm') return
       output[value[0]] = transformConsumerParametersForConsumption(
-        value[1] as ConsumerParameter[]
+        value[1] as FormConsumerParameter[]
       )
     })
     setUserCustomParameters(output)
diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index b64d6d2e12..1921fa1da0 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,4 +1,4 @@
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 import { parseConsumerParameters } from '@utils/ddo'
 import * as Yup from 'yup'
 
@@ -34,9 +34,9 @@ export function getInitialValues(
   selectedAlgorithmAsset?: AssetExtended
 ): {
   algorithm: string
-  dataService?: ConsumerParameter[]
-  algoService?: ConsumerParameter[]
-  algoParams?: ConsumerParameter[]
+  dataService?: FormConsumerParameter[]
+  algoService?: FormConsumerParameter[]
+  algoParams?: FormConsumerParameter[]
 } {
   return {
     algorithm: selectedAlgorithmAsset?.id,
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 242009ccfd..99db90e8a4 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,4 +1,4 @@
-import { ConsumerParameter } from '@components/Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 import React, { ChangeEvent, ReactElement } from 'react'
 import styles from './FormConsumerParameters.module.css'
 import Label from '@components/@shared/FormInput/Label'
@@ -16,10 +16,10 @@ export default function FormConsumerParameters({
   parameters
 }: {
   name: string
-  parameters: ConsumerParameter[]
+  parameters: FormConsumerParameter[]
 }): ReactElement {
   const { errors, setFieldTouched } = useFormikContext()
-  const [field, meta, helpers] = useField<ConsumerParameter[]>(name)
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(name)
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
     setFieldTouched(`${field.name}[${index}].default`, true)
@@ -41,7 +41,7 @@ export default function FormConsumerParameters({
   const showError = (name: string, index: number): boolean =>
     !!getObjectPropertyByPath(errors, `${field.name}[${index}].${name}`)
 
-  const getParameterOptions = (parameter: ConsumerParameter): string[] => {
+  const getParameterOptions = (parameter: FormConsumerParameter): string[] => {
     if (!parameter.options && parameter.type !== 'boolean') return []
 
     const updatedOptions =
@@ -60,7 +60,10 @@ export default function FormConsumerParameters({
     return updatedOptions
   }
 
-  const getParameterValue = (parameter: ConsumerParameter, index: number) => {
+  const getParameterValue = (
+    parameter: FormConsumerParameter,
+    index: number
+  ) => {
     if (parameter.type === 'boolean') {
       if (parameter.default === 'true') return 'true'
       if (parameter.default === 'false') return 'false'

From ae0f59e3ce048bbb40c3d4da4649760aedb29319 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 12 May 2023 19:04:55 +0200
Subject: [PATCH 073/113] chore: add comments

---
 .../ConsumerParameters/ConsumerParameterInput.tsx             | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
index 023b5fedf5..d1ba1760c2 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
@@ -44,9 +44,13 @@ export default function ConsumerParameterInput({
     fieldName: string,
     parameter: FormConsumerParameter
   ) => {
+    // split the input name to every "." and keep the last
+    // word which corresponds to the field name
     const valueKey = fieldName.split('.').slice(-1)[0]
     const value = parameter[valueKey]
 
+    // convert the boolean values assigned to the "required" field
+    // into the select component options ["required", "optional"]
     if (valueKey !== 'required' || typeof value === 'string') return value
 
     return value ? 'required' : 'optional'

From 3322f25d95b3bfe65b487c8ba4cb71cc621306e5 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 12 May 2023 23:50:38 +0200
Subject: [PATCH 074/113] refactor: consumer parameters inputs

---
 .../Options.module.css}                       |  2 +-
 .../Options.tsx}                              | 14 +++----
 .../index.module.css}                         |  2 +-
 .../index.tsx}                                | 10 ++---
 .../ConsumerParameters/RequiredInput.tsx      | 39 ++++++++++++++++++
 ...nsumerParameterInput.tsx => TypeInput.tsx} | 19 +--------
 ...nConsumerParameters.tsx => _validation.ts} |  0
 .../InputElement/ConsumerParameters/index.tsx | 40 +++++++++++++++----
 src/components/Asset/Edit/_validation.ts      |  2 +-
 src/components/Publish/_validation.ts         |  2 +-
 10 files changed, 88 insertions(+), 42 deletions(-)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{InputOptions.module.css => OptionsInput/Options.module.css} (95%)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{InputOptions.tsx => OptionsInput/Options.tsx} (93%)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{SelectInput.module.css => OptionsInput/index.module.css} (81%)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{SelectInput.tsx => OptionsInput/index.tsx} (88%)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{ConsumerParameterInput.tsx => TypeInput.tsx} (66%)
 rename src/components/@shared/FormInput/InputElement/ConsumerParameters/{validationConsumerParameters.tsx => _validation.ts} (100%)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
similarity index 95%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
index 46cfd38cca..061d280556 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
@@ -47,5 +47,5 @@
 }
 
 .required {
-  composes: required from '../../index.module.css';
+  composes: required from '../../../index.module.css';
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
similarity index 93%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
index 72bbac48fe..c6868370d3 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/InputOptions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
-import InputElement from '..'
-import Label from '../../Label'
-import styles from './InputOptions.module.css'
+import InputElement from '../..'
+import Label from '../../../Label'
+import styles from './Options.module.css'
 import Tooltip from '@shared/atoms/Tooltip'
 import Markdown from '@shared/Markdown'
 import Button from '@shared/atoms/Button'
@@ -11,17 +11,17 @@ import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)
 
-export interface InputOption {
+export interface Options {
   [value: string]: string
 }
 
-export default function InputOptions({
+export default function Options({
   optionIndex,
   defaultOptions = [],
   ...props
 }: InputProps & {
   optionIndex: number
-  defaultOptions: InputOption[]
+  defaultOptions: Options[]
 }): ReactElement {
   const [field, meta, helpers] = useField(props.name)
 
@@ -30,7 +30,7 @@ export default function InputOptions({
   const [disabledButton, setDisabledButton] = useState(true)
   const [hasError, setHasError] = useState(false)
 
-  const [options, setOptions] = useState<InputOption[]>(defaultOptions)
+  const [options, setOptions] = useState<Options[]>(defaultOptions)
 
   const addOption = () => {
     const hasError = options.some((option) =>
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
similarity index 81%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
index 2aa18114e3..a6420b8fa3 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.module.css
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
@@ -12,5 +12,5 @@
 }
 
 .error {
-  composes: error from '../../index.module.css';
+  composes: error from '../../../index.module.css';
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
similarity index 88%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
index 1c7291333a..b1f572d8b4 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/SelectInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
@@ -1,18 +1,18 @@
 import React, { ReactElement } from 'react'
-import { InputProps } from '../..'
+import { InputProps } from '../../..'
 import { ErrorMessage, useField, useFormikContext } from 'formik'
 import {
   FormConsumerParameter,
   FormPublishData
 } from '@components/Publish/_types'
-import InputOptions from './InputOptions'
-import styles from './SelectInput.module.css'
+import Options from './Options'
+import styles from './index.module.css'
 import { getObjectPropertyByPath } from '@utils/index'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)
 
-export default function SelectInput({
+export default function OptionsInput({
   index,
   inputName,
   ...props
@@ -36,7 +36,7 @@ export default function SelectInput({
         hasError: showError('options', index)
       })}
     >
-      <InputOptions
+      <Options
         {...props}
         name={field.name}
         label="Options"
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx
new file mode 100644
index 0000000000..d0ded5845f
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx
@@ -0,0 +1,39 @@
+import React, { ReactElement } from 'react'
+import { Field, useField } from 'formik'
+import { FormConsumerParameter } from '@components/Publish/_types'
+import Input, { InputProps } from '../..'
+
+export default function RequiredInput({
+  index,
+  inputName,
+  ...props
+}: InputProps & {
+  index: number
+  inputName: string
+}): ReactElement {
+  const [field] = useField<FormConsumerParameter[]>(inputName)
+
+  const getFieldValue = (
+    fieldName: string,
+    parameter: FormConsumerParameter
+  ) => {
+    // split the input name to every "." and keep the last
+    // word which corresponds to the field name
+    const valueKey = fieldName.split('.').slice(-1)[0]
+    const value = parameter[valueKey]
+
+    // convert the boolean values assigned to the "required" field
+    // into the select component options ["required", "optional"]
+    if (valueKey !== 'required' || typeof value === 'string') return value
+
+    return value ? 'required' : 'optional'
+  }
+
+  return (
+    <Field
+      {...props}
+      component={Input}
+      value={getFieldValue(props.name, field.value[index])}
+    />
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/TypeInput.tsx
similarity index 66%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/TypeInput.tsx
index d1ba1760c2..739d628562 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/ConsumerParameterInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/TypeInput.tsx
@@ -7,7 +7,7 @@ import {
 } from '@components/Publish/_types'
 import { defaultConsumerParam } from '.'
 
-export default function ConsumerParameterInput({
+export default function TypeInput({
   index,
   inputName,
   ...props
@@ -40,27 +40,10 @@ export default function ConsumerParameterInput({
     )
   }
 
-  const getFieldValue = (
-    fieldName: string,
-    parameter: FormConsumerParameter
-  ) => {
-    // split the input name to every "." and keep the last
-    // word which corresponds to the field name
-    const valueKey = fieldName.split('.').slice(-1)[0]
-    const value = parameter[valueKey]
-
-    // convert the boolean values assigned to the "required" field
-    // into the select component options ["required", "optional"]
-    if (valueKey !== 'required' || typeof value === 'string') return value
-
-    return value ? 'required' : 'optional'
-  }
-
   return (
     <Field
       {...props}
       component={Input}
-      value={getFieldValue(props.name, field.value[index])}
       onChange={(e) => {
         resetDefaultValue(props.name, e.target.value, index)
         field.onChange(e)
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
similarity index 100%
rename from src/components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters.tsx
rename to src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index d171ebdce4..f722ce186a 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,13 +1,14 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useField } from 'formik'
-import { InputProps } from '../..'
+import { Field, useField } from 'formik'
+import Input, { InputProps } from '../..'
 import { FormConsumerParameter } from '../../../../Publish/_types'
 import Tabs from '../../../atoms/Tabs'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
-import SelectInput from './SelectInput'
-import ConsumerParameterInput from './ConsumerParameterInput'
+import OptionsInput from './OptionsInput'
 import styles from './index.module.css'
+import RequiredInput from './RequiredInput'
+import TypeInput from './TypeInput'
 
 export const defaultConsumerParam: FormConsumerParameter = {
   name: '',
@@ -49,7 +50,7 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                 {props.fields?.map((subField: InputProps) => {
                   if (subField.name === 'options') {
                     return field.value[index]?.type === 'select' ? (
-                      <SelectInput
+                      <OptionsInput
                         key={`${field.name}[${index}].${props.name}`}
                         {...subField}
                         index={index}
@@ -70,13 +71,36 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     )
                   }
 
+                  if (subField.name === 'type') {
+                    return (
+                      <TypeInput
+                        key={`${field.name}[${index}].${subField.name}`}
+                        {...subField}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        index={index}
+                        inputName={props.name}
+                      />
+                    )
+                  }
+
+                  if (subField.name === 'required') {
+                    return (
+                      <RequiredInput
+                        key={`${field.name}[${index}].${subField.name}`}
+                        {...subField}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        index={index}
+                        inputName={props.name}
+                      />
+                    )
+                  }
+
                   return (
-                    <ConsumerParameterInput
+                    <Field
                       key={`${field.name}[${index}].${subField.name}`}
                       {...subField}
                       name={`${field.name}[${index}].${subField.name}`}
-                      index={index}
-                      inputName={props.name}
+                      component={Input}
                     />
                   )
                 })}
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index d9b3235ea9..ee4f4e2132 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -2,7 +2,7 @@ import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import web3 from 'web3'
 import { testLinks } from '../../../@utils/yup'
-import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters'
+import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/_validation'
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index d7db80144f..a3f3ede5b5 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -3,7 +3,7 @@ import { MAX_DECIMALS } from '@utils/constants'
 import { getMaxDecimalsValidation } from '@utils/numbers'
 import * as Yup from 'yup'
 import { testLinks } from '../../@utils/yup'
-import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/validationConsumerParameters'
+import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/_validation'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required

From 8bd987cc30897a11e7554289418e417f2da73e4f Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 13 May 2023 00:06:28 +0200
Subject: [PATCH 075/113] refactor: rename data and algo service params

---
 src/@utils/assetConvertor.ts                   |  4 ++--
 src/@utils/compute.ts                          |  8 +++++---
 .../Compute/FormComputeDataset.tsx             |  4 ++--
 .../Asset/AssetActions/Compute/_constants.ts   | 18 ++++++++++--------
 .../Asset/AssetActions/Compute/index.tsx       |  8 ++++----
 .../AssetActions/ConsumerParameters/index.tsx  |  4 ++--
 .../Asset/AssetActions/Download/Download.tsx   |  4 ++--
 .../Asset/AssetActions/Download/_validation.ts |  4 ++--
 8 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/@utils/assetConvertor.ts b/src/@utils/assetConvertor.ts
index c8f89e953b..6359039c59 100644
--- a/src/@utils/assetConvertor.ts
+++ b/src/@utils/assetConvertor.ts
@@ -10,12 +10,12 @@ export async function transformAssetToAssetSelection(
   const algorithmList: AssetSelectionAsset[] = []
 
   for (const asset of assets) {
-    const algoService =
+    const algoServiceParams =
       getServiceByName(asset, 'compute') || getServiceByName(asset, 'access')
 
     if (
       asset?.stats?.price?.value &&
-      algoService?.serviceEndpoint === datasetProviderEndpoint
+      algoServiceParams?.serviceEndpoint === datasetProviderEndpoint
     ) {
       let selected = false
       selectedAlgorithms?.forEach((algorithm: PublisherTrustedAlgorithm) => {
diff --git a/src/@utils/compute.ts b/src/@utils/compute.ts
index a19800f29a..59793fafc3 100644
--- a/src/@utils/compute.ts
+++ b/src/@utils/compute.ts
@@ -102,12 +102,14 @@ export async function isOrderable(
       return false
     }
     if (algorithm.documentId) {
-      const algoService: Service = getServiceById(
+      const algoServiceParams: Service = getServiceById(
         algorithmDDO,
         algorithm.serviceId
       )
-      if (algoService && algoService.type === 'compute') {
-        if (algoService.serviceEndpoint !== datasetService.serviceEndpoint) {
+      if (algoServiceParams && algoServiceParams.type === 'compute') {
+        if (
+          algoServiceParams.serviceEndpoint !== datasetService.serviceEndpoint
+        ) {
           this.logger.error(
             'ERROR: Both assets with compute service are not served by the same provider'
           )
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 7e37b17393..4e64d424f4 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -90,8 +90,8 @@ export default function FormStartCompute({
     values
   }: FormikContextType<{
     algorithm: string
-    dataService: FormConsumerParameter[]
-    algoService: FormConsumerParameter[]
+    dataServiceParams: FormConsumerParameter[]
+    algoServiceParams: FormConsumerParameter[]
     algoParams: FormConsumerParameter[]
   }> = useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index 1921fa1da0..af1f4286d9 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -19,13 +19,13 @@ export const ConsumerParametersConsumeSchema = Yup.array()
 
 export const validationSchema: Yup.SchemaOf<{
   algorithm: string
-  dataService: any
-  algoService: any
+  dataServiceParams: any
+  algoServiceParams: any
   algoParams: any
 }> = Yup.object().shape({
   algorithm: Yup.string().required('Required'),
-  dataService: ConsumerParametersConsumeSchema,
-  algoService: ConsumerParametersConsumeSchema,
+  dataServiceParams: ConsumerParametersConsumeSchema,
+  algoServiceParams: ConsumerParametersConsumeSchema,
   algoParams: ConsumerParametersConsumeSchema
 })
 
@@ -34,14 +34,16 @@ export function getInitialValues(
   selectedAlgorithmAsset?: AssetExtended
 ): {
   algorithm: string
-  dataService?: FormConsumerParameter[]
-  algoService?: FormConsumerParameter[]
+  dataServiceParams?: FormConsumerParameter[]
+  algoServiceParams?: FormConsumerParameter[]
   algoParams?: FormConsumerParameter[]
 } {
   return {
     algorithm: selectedAlgorithmAsset?.id,
-    dataService: parseConsumerParameters(asset?.services[0].consumerParameters),
-    algoService: parseConsumerParameters(
+    dataServiceParams: parseConsumerParameters(
+      asset?.services[0].consumerParameters
+    ),
+    algoServiceParams: parseConsumerParameters(
       selectedAlgorithmAsset?.services[0].consumerParameters
     ),
     algoParams: parseConsumerParameters(
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 06b988c0cb..64bccb93f2 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -105,8 +105,8 @@ export default function Compute({
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const [retry, setRetry] = useState<boolean>(false)
   const [userCustomParameters, setUserCustomParameters] = useState<{
-    dataService: { [key: string]: any }
-    algoService: { [key: string]: any }
+    dataServiceParams: { [key: string]: any }
+    algoServiceParams: { [key: string]: any }
     algoParams: { [key: string]: any }
   }>()
 
@@ -354,7 +354,7 @@ export default function Compute({
         documentId: selectedAlgorithmAsset.id,
         serviceId: selectedAlgorithmAsset.services[0].id,
         algocustomdata: userCustomParameters?.algoParams,
-        userdata: userCustomParameters?.algoService
+        userdata: userCustomParameters?.algoServiceParams
       }
 
       const allowed = await isOrderable(
@@ -412,7 +412,7 @@ export default function Compute({
         documentId: asset.id,
         serviceId: asset.services[0].id,
         transferTxId: datasetOrderTx,
-        userdata: userCustomParameters?.dataService
+        userdata: userCustomParameters?.dataServiceParams
       }
       computeAlgorithm.transferTxId = algorithmOrderTx
       const output: ComputeOutput = {
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index bea9372703..da9b01e3b2 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -20,7 +20,7 @@ export default function ConsumerParameters({
         title: 'Data Service',
         content: (
           <FormConsumerParameters
-            name="dataService"
+            name="dataServiceParams"
             parameters={parseConsumerParameters(
               asset.services[0].consumerParameters
             )}
@@ -33,7 +33,7 @@ export default function ConsumerParameters({
         title: 'Algo Service',
         content: (
           <FormConsumerParameters
-            name="algoService"
+            name="algoServiceParams"
             parameters={parseConsumerParameters(
               selectedAlgorithmAsset.services[0].consumerParameters
             )}
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
index 3f262da71e..c8f0e2dce0 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -243,14 +243,14 @@ export default function Download({
   return (
     <Formik
       initialValues={{
-        dataService: parseConsumerParameters(
+        dataServiceParams: parseConsumerParameters(
           asset?.services[0].consumerParameters
         )
       }}
       validationSchema={validationSchema}
       onSubmit={async (values) => {
         const dataParams = transformConsumerParametersForConsumption(
-          values?.dataService
+          values?.dataServiceParams
         )
         await handleOrderOrDownload(dataParams)
       }}
diff --git a/src/components/Asset/AssetActions/Download/_validation.ts b/src/components/Asset/AssetActions/Download/_validation.ts
index 3f6d0d34a1..cb5ca92ffa 100644
--- a/src/components/Asset/AssetActions/Download/_validation.ts
+++ b/src/components/Asset/AssetActions/Download/_validation.ts
@@ -2,7 +2,7 @@ import * as Yup from 'yup'
 import { ConsumerParametersConsumeSchema } from '../Compute/_constants'
 
 export const validationSchema: Yup.SchemaOf<{
-  dataService: any
+  dataServiceParams: any
 }> = Yup.object().shape({
-  dataService: ConsumerParametersConsumeSchema
+  dataServiceParams: ConsumerParametersConsumeSchema
 })

From fd4ef729f43ed018a26244bfa13116216118139e Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 13 May 2023 01:54:09 +0200
Subject: [PATCH 076/113] refactor: consumer parameters form

---
 src/@utils/ddo.ts                             | 16 ++--
 .../Compute/FormComputeDataset.tsx            | 12 +--
 .../Asset/AssetActions/Compute/_constants.ts  | 10 +--
 .../Asset/AssetActions/Compute/index.tsx      | 27 ++++--
 .../FormConsumerParameters.module.css         | 16 +---
 .../FormConsumerParameters.tsx                | 87 +++++--------------
 .../AssetActions/ConsumerParameters/index.tsx | 40 ++++++++-
 .../Asset/AssetActions/Download/Download.tsx  |  7 +-
 src/components/Publish/_types.ts              |  1 +
 9 files changed, 102 insertions(+), 114 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index ff11e1bd3e..6581e87cfd 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -193,9 +193,9 @@ export function previewDebugPatch(
   return buildValuesPreview
 }
 
-export function parseConsumerParameterDefaultValue(
-  type: ConsumerParameter['type'],
-  value: ConsumerParameter['default']
+export function parseFormConsumerParameterValue(
+  type: FormConsumerParameter['type'],
+  value: FormConsumerParameter['value']
 ) {
   if (!value || !type) return
 
@@ -221,7 +221,7 @@ export function parseConsumerParameters(
         }
       : {
           ...param,
-          default: parseConsumerParameterDefaultValue(param.type, param.default)
+          default: parseFormConsumerParameterValue(param.type, param.default)
         }
   )
 }
@@ -232,7 +232,13 @@ export function transformConsumerParametersForConsumption(
   if (!parameters?.length) return
 
   const output = {}
-  parameters.forEach((param) => (output[param.name] = param.default))
+  parameters.forEach(
+    (param) =>
+      (output[param.name] = parseFormConsumerParameterValue(
+        param.type,
+        param.value
+      ))
+  )
 
   return output
 }
diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 4e64d424f4..248de53805 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -17,7 +17,6 @@ import { getTokenBalanceFromSymbol } from '@utils/web3'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import ConsumerParameters from '../ConsumerParameters'
-import { transformConsumerParametersForConsumption } from '@utils/ddo'
 import { FormConsumerParameter } from '@components/Publish/_types'
 
 export default function FormStartCompute({
@@ -136,14 +135,11 @@ export default function FormStartCompute({
   useEffect(() => {
     if (!values) return
 
-    const output = {}
-    Object.entries(values).forEach((value) => {
-      if (value[0] === 'algorithm') return
-      output[value[0]] = transformConsumerParametersForConsumption(
-        value[1] as FormConsumerParameter[]
-      )
+    setUserCustomParameters({
+      dataServiceParams: values.dataServiceParams,
+      algoServiceParams: values.algoServiceParams,
+      algoParams: values.algoParams
     })
-    setUserCustomParameters(output)
   }, [setUserCustomParameters, values])
 
   //
diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index af1f4286d9..f0badc59fe 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,12 +1,12 @@
 import { FormConsumerParameter } from '@components/Publish/_types'
-import { parseConsumerParameters } from '@utils/ddo'
 import * as Yup from 'yup'
+import { generateFormConsumerParameters } from '../ConsumerParameters'
 
 export const ConsumerParametersConsumeSchema = Yup.array()
   .of(
     Yup.object().shape({
       required: Yup.boolean().required('required'),
-      default: Yup.mixed().when('required', {
+      value: Yup.mixed().when('required', {
         is: false,
         then: Yup.mixed()
           .nullable()
@@ -40,13 +40,13 @@ export function getInitialValues(
 } {
   return {
     algorithm: selectedAlgorithmAsset?.id,
-    dataServiceParams: parseConsumerParameters(
+    dataServiceParams: generateFormConsumerParameters(
       asset?.services[0].consumerParameters
     ),
-    algoServiceParams: parseConsumerParameters(
+    algoServiceParams: generateFormConsumerParameters(
       selectedAlgorithmAsset?.services[0].consumerParameters
     ),
-    algoParams: parseConsumerParameters(
+    algoParams: generateFormConsumerParameters(
       selectedAlgorithmAsset?.metadata?.algorithm.consumerParameters
     )
   }
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 64bccb93f2..fc85359a91 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -26,7 +26,11 @@ import { getInitialValues, validationSchema } from './_constants'
 import FormStartComputeDataset from './FormComputeDataset'
 import styles from './index.module.css'
 import SuccessConfetti from '@shared/SuccessConfetti'
-import { getServiceByName, secondsToString } from '@utils/ddo'
+import {
+  getServiceByName,
+  secondsToString,
+  transformConsumerParametersForConsumption
+} from '@utils/ddo'
 import {
   isOrderable,
   getAlgorithmAssetSelectionList,
@@ -48,6 +52,7 @@ import { getDummyWeb3 } from '@utils/web3'
 import { initializeProviderForCompute } from '@utils/provider'
 import { useUserPreferences } from '@context/UserPreferences'
 import { useAsset } from '@context/Asset'
+import { FormConsumerParameter } from '@components/Publish/_types'
 
 const refreshInterval = 10000 // 10 sec.
 export default function Compute({
@@ -105,9 +110,9 @@ export default function Compute({
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const [retry, setRetry] = useState<boolean>(false)
   const [userCustomParameters, setUserCustomParameters] = useState<{
-    dataServiceParams: { [key: string]: any }
-    algoServiceParams: { [key: string]: any }
-    algoParams: { [key: string]: any }
+    dataServiceParams: FormConsumerParameter[]
+    algoServiceParams: FormConsumerParameter[]
+    algoParams: FormConsumerParameter[]
   }>()
 
   const hasDatatoken = Number(dtBalance) >= 1
@@ -353,10 +358,14 @@ export default function Compute({
       const computeAlgorithm: ComputeAlgorithm = {
         documentId: selectedAlgorithmAsset.id,
         serviceId: selectedAlgorithmAsset.services[0].id,
-        algocustomdata: userCustomParameters?.algoParams,
-        userdata: userCustomParameters?.algoServiceParams
+        algocustomdata: transformConsumerParametersForConsumption(
+          userCustomParameters?.algoParams
+        ),
+        userdata: transformConsumerParametersForConsumption(
+          userCustomParameters?.algoServiceParams
+        )
       }
-
+      console.log(computeAlgorithm)
       const allowed = await isOrderable(
         asset,
         computeService.id,
@@ -412,7 +421,9 @@ export default function Compute({
         documentId: asset.id,
         serviceId: asset.services[0].id,
         transferTxId: datasetOrderTx,
-        userdata: userCustomParameters?.dataServiceParams
+        userdata: transformConsumerParametersForConsumption(
+          userCustomParameters?.dataServiceParams
+        )
       }
       computeAlgorithm.transferTxId = algorithmOrderTx
       const output: ComputeOutput = {
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
index 68680038b0..0d235d4bc8 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
@@ -36,19 +36,7 @@
   border: none;
 }
 
-.hasError label {
-  color: var(--brand-alert-red);
-}
-
-.hasError input,
-.hasError input:focus,
-.hasError [class*='prefix'],
-.hasError [class*='postfix'] {
-  color: var(--brand-alert-red);
-  border-color: var(--brand-alert-red);
-}
-
-.error {
-  composes: error from '../../../@shared/FormInput/index.module.css';
+.parameter > div > div {
+  position: absolute;
   right: 1rem;
 }
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 99db90e8a4..21443f97c8 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,15 +1,10 @@
 import { FormConsumerParameter } from '@components/Publish/_types'
-import React, { ChangeEvent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import styles from './FormConsumerParameters.module.css'
 import Label from '@components/@shared/FormInput/Label'
 import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
-import { ErrorMessage, Field, useField, useFormikContext } from 'formik'
+import { Field, useField } from 'formik'
 import Input from '@components/@shared/FormInput'
-import { getObjectPropertyByPath } from '@utils/index'
-import classNames from 'classnames/bind'
-import { parseConsumerParameterDefaultValue } from '@utils/ddo'
-
-const cx = classNames.bind(styles)
 
 export default function FormConsumerParameters({
   name,
@@ -18,28 +13,7 @@ export default function FormConsumerParameters({
   name: string
   parameters: FormConsumerParameter[]
 }): ReactElement {
-  const { errors, setFieldTouched } = useFormikContext()
-  const [field, meta, helpers] = useField<FormConsumerParameter[]>(name)
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
-    setFieldTouched(`${field.name}[${index}].default`, true)
-    helpers.setValue(
-      field.value.map((currentParam, i) => {
-        if (i !== index) return currentParam
-
-        return {
-          ...currentParam,
-          default: parseConsumerParameterDefaultValue(
-            currentParam.type,
-            e.target.value
-          )
-        }
-      })
-    )
-  }
-
-  const showError = (name: string, index: number): boolean =>
-    !!getObjectPropertyByPath(errors, `${field.name}[${index}].${name}`)
+  const [field] = useField<FormConsumerParameter[]>(name)
 
   const getParameterOptions = (parameter: FormConsumerParameter): string[] => {
     if (!parameter.options && parameter.type !== 'boolean') return []
@@ -60,50 +34,29 @@ export default function FormConsumerParameters({
     return updatedOptions
   }
 
-  const getParameterValue = (
-    parameter: FormConsumerParameter,
-    index: number
-  ) => {
-    if (parameter.type === 'boolean') {
-      if (parameter.default === 'true') return 'true'
-      if (parameter.default === 'false') return 'false'
-    }
-
-    return field?.value?.[index]?.default
-  }
-
   return (
     <div className={styles.container}>
       <Label htmlFor="Input the consumer parameters">
         Input the consumer parameters
       </Label>
       <div className={styles.parametersContainer}>
-        {parameters?.map((param, index) => (
-          <div
-            key={param.name}
-            className={cx({
-              parameter: true,
-              hasError: showError('default', index)
-            })}
-          >
-            <Field
-              {...param}
-              component={Input}
-              onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                handleChange(e, index)
-              }
-              options={getParameterOptions(param)}
-              size="small"
-              type={param.type === 'boolean' ? 'select' : param.type}
-              value={getParameterValue(param, index)}
-            />
-            {showError('default', index) && (
-              <div className={styles.error}>
-                <ErrorMessage name={`${field.name}[${index}].default`} />
-              </div>
-            )}
-          </div>
-        ))}
+        {parameters?.map((param, index) => {
+          const { default: defaultValue, ...fields } = param
+
+          return (
+            <div key={param.name} className={styles.parameter}>
+              <Field
+                {...fields}
+                component={Input}
+                name={`${name}[${index}].value`}
+                options={getParameterOptions(param)}
+                size="small"
+                type={param.type === 'boolean' ? 'select' : param.type}
+                value={field.value[index].value}
+              />
+            </div>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index da9b01e3b2..f34db55623 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -1,8 +1,40 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import FormConsumerParameters from './FormConsumerParameters'
-import { parseConsumerParameters } from '@utils/ddo'
 import styles from './index.module.css'
 import Tabs, { TabsItem } from '@components/@shared/atoms/Tabs'
+import { FormConsumerParameter } from '@components/Publish/_types'
+
+const getFormParameterValue = (
+  type: ConsumerParameter['type'],
+  value: string | number | boolean
+) => {
+  if (type === 'boolean') {
+    if (value === '') return ''
+    if (value) return 'true'
+    return 'false'
+  }
+
+  return value
+}
+
+export function generateFormConsumerParameters(
+  consumerParameters: ConsumerParameter[]
+): FormConsumerParameter[] {
+  if (!consumerParameters?.length) return
+
+  return consumerParameters.map((param) => {
+    const formParam = {
+      ...param,
+      value: getFormParameterValue(param.type, param.default)
+    }
+
+    if (param.type === 'select') {
+      formParam.options = JSON.parse(param.options as string)
+    }
+
+    return formParam
+  })
+}
 
 export default function ConsumerParameters({
   asset,
@@ -21,7 +53,7 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="dataServiceParams"
-            parameters={parseConsumerParameters(
+            parameters={generateFormConsumerParameters(
               asset.services[0].consumerParameters
             )}
           />
@@ -34,7 +66,7 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="algoServiceParams"
-            parameters={parseConsumerParameters(
+            parameters={generateFormConsumerParameters(
               selectedAlgorithmAsset.services[0].consumerParameters
             )}
           />
@@ -47,7 +79,7 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="algoParams"
-            parameters={parseConsumerParameters(
+            parameters={generateFormConsumerParameters(
               selectedAlgorithmAsset.metadata?.algorithm.consumerParameters
             )}
           />
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
index c8f0e2dce0..72faee5473 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -5,7 +5,6 @@ import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import ButtonBuy from '../ButtonBuy'
 import {
-  parseConsumerParameters,
   secondsToString,
   transformConsumerParametersForConsumption
 } from '@utils/ddo'
@@ -26,7 +25,9 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
-import ConsumerParameters from '../ConsumerParameters'
+import ConsumerParameters, {
+  generateFormConsumerParameters
+} from '../ConsumerParameters'
 import { Form, Formik, useFormikContext } from 'formik'
 import { validationSchema } from './_validation'
 
@@ -243,7 +244,7 @@ export default function Download({
   return (
     <Formik
       initialValues={{
-        dataServiceParams: parseConsumerParameters(
+        dataServiceParams: generateFormConsumerParameters(
           asset?.services[0].consumerParameters
         )
       }}
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 6bb6cdc2d7..9711bd0089 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -78,4 +78,5 @@ export interface FormConsumerParameter {
   description: string
   default: string | boolean | number
   options?: string | { [key: string]: string }[]
+  value?: string | boolean | number
 }

From 0a7d785ed288abe3ded2645c1cfcbd2795ccce15 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Sat, 13 May 2023 01:57:13 +0200
Subject: [PATCH 077/113] refactor: consumer parameter form styling

---
 .../ConsumerParameters/FormConsumerParameters.module.css   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
index 0d235d4bc8..8a12b1d1bf 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
@@ -4,12 +4,9 @@
 }
 
 .parametersContainer {
+  composes: selection from '../../../@shared/FormInput/InputElement/AssetSelection/index.module.css';
+
   padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
-  border: 1px solid var(--border-color);
-  background-color: var(--background-highlight);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-small);
-  min-height: 200px;
   max-height: 50vh;
 
   /* smooth overflow scrolling for pre-iOS 13 */

From 4010a7d827bd52823876e55ed89aa794c69d28a7 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Tue, 16 May 2023 20:58:39 +0200
Subject: [PATCH 078/113] refactor: make headers input reusable as
 KeyValueInput

---
 src/@utils/provider.ts                        |  4 +-
 .../InputElement/FilesInput/index.tsx         |  6 +-
 .../InputElement/Headers/index.module.css     | 13 ---
 .../KeyValueInput/index.module.css            | 35 ++++++++
 .../{Headers => KeyValueInput}/index.tsx      | 85 ++++++++++++++-----
 5 files changed, 103 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/@shared/FormInput/InputElement/Headers/index.module.css
 create mode 100644 src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
 rename src/components/@shared/FormInput/InputElement/{Headers => KeyValueInput}/index.tsx (57%)

diff --git a/src/@utils/provider.ts b/src/@utils/provider.ts
index 61e0c48c0f..c496ad9e67 100644
--- a/src/@utils/provider.ts
+++ b/src/@utils/provider.ts
@@ -13,7 +13,7 @@ import {
   ProviderInstance,
   UrlFile
 } from '@oceanprotocol/lib'
-import { QueryHeader } from '@shared/FormInput/InputElement/Headers'
+import { KeyValuePair } from '@components/@shared/FormInput/InputElement/KeyValueInput'
 import Web3 from 'web3'
 import { AbiItem } from 'web3-utils/types'
 import { getValidUntilTime } from './compute'
@@ -95,7 +95,7 @@ export async function getFileInfo(
   providerUrl: string,
   storageType: string,
   query?: string,
-  headers?: QueryHeader[],
+  headers?: KeyValuePair[],
   abi?: string,
   chainId?: number,
   method?: string
diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
index f91064fdfa..dabfe1099f 100644
--- a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -8,7 +8,7 @@ import { LoggerInstance, FileInfo } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
 import styles from './index.module.css'
 import { useWeb3 } from '@context/Web3'
-import InputHeaders from '../Headers'
+import InputKeyValue from '../KeyValueInput'
 import Button from '@shared/atoms/Button'
 import Loader from '@shared/atoms/Loader'
 import { checkJson } from '@utils/codemirror'
@@ -160,7 +160,9 @@ export default function FilesInput(props: InputProps): ReactElement {
                         <Field
                           key={i}
                           component={
-                            innerField.type === 'headers' ? InputHeaders : Input
+                            innerField.type === 'headers'
+                              ? InputKeyValue
+                              : Input
                           }
                           {...innerField}
                           name={`${field.name}[0].${innerField.value}`}
diff --git a/src/components/@shared/FormInput/InputElement/Headers/index.module.css b/src/components/@shared/FormInput/InputElement/Headers/index.module.css
deleted file mode 100644
index 99dba4c0ce..0000000000
--- a/src/components/@shared/FormInput/InputElement/Headers/index.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.headersContainer {
-  display: flex;
-  justify-content: space-between;
-  gap: 0 calc(var(--spacer) / 4);
-  margin-bottom: var(--spacer);
-}
-
-.headersAddedContainer {
-  display: flex;
-  justify-content: space-between;
-  gap: 0 calc(var(--spacer) / 4);
-  margin-bottom: var(--spacer);
-}
diff --git a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
new file mode 100644
index 0000000000..3d61f65e9c
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
@@ -0,0 +1,35 @@
+.pairsContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0 calc(var(--spacer) / 4);
+  margin-bottom: var(--spacer);
+  position: relative;
+}
+
+.pairsAddedContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0 calc(var(--spacer) / 4);
+  margin-bottom: var(--spacer);
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.hasError .pairsContainer input,
+.hasError .pairsContainer input:focus,
+.hasError .pairsContainer [class*='prefix'],
+.hasError .pairsContainer [class*='postfix'] {
+  color: var(--brand-alert-red);
+  border-color: var(--brand-alert-red);
+}
+
+.required {
+  composes: required from '../../index.module.css';
+}
+
+.error {
+  composes: error from '../../index.module.css';
+  top: 100%;
+}
diff --git a/src/components/@shared/FormInput/InputElement/Headers/index.tsx b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
similarity index 57%
rename from src/components/@shared/FormInput/InputElement/Headers/index.tsx
rename to src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
index 362ffd4499..e30ad1a973 100644
--- a/src/components/@shared/FormInput/InputElement/Headers/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
@@ -1,28 +1,56 @@
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
-import InputElement from '../../InputElement'
+import React, {
+  ChangeEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
+import InputElement from '..'
 import Label from '../../Label'
 import styles from './index.module.css'
 import Tooltip from '@shared/atoms/Tooltip'
 import Markdown from '@shared/Markdown'
 import Button from '@shared/atoms/Button'
 import { InputProps } from '@shared/FormInput'
+import classNames from 'classnames/bind'
 
-export interface QueryHeader {
+const cx = classNames.bind(styles)
+
+export interface KeyValuePair {
   key: string
   value: string
 }
 
-export default function InputHeaders(props: InputProps): ReactElement {
+export interface KeyValueInputProps extends Omit<InputProps, 'value'> {
+  value: KeyValuePair[]
+  uniqueKeys?: boolean
+}
+
+export default function InputKeyValue({
+  uniqueKeys = false,
+  value,
+  ...props
+}: KeyValueInputProps): ReactElement {
   const { label, help, prominentHelp, form, field } = props
 
   const [currentKey, setCurrentKey] = useState('')
   const [currentValue, setCurrentValue] = useState('')
   const [disabledButton, setDisabledButton] = useState(true)
+  const [hasOnlyUniqueKeys, setHasOnlyUniqueKeys] = useState(true)
+
+  const [pairs, setPairs] = useState(value || [])
 
-  const [headers, setHeaders] = useState([] as QueryHeader[])
+  const currentKeyExists = useCallback(() => {
+    return pairs.some((pair) => pair.key === currentKey)
+  }, [currentKey, pairs])
 
-  const addHeader = () => {
-    setHeaders((prev) => [
+  const addPair = () => {
+    if (currentKeyExists()) {
+      setHasOnlyUniqueKeys(false)
+      if (uniqueKeys) return
+    }
+
+    setPairs((prev) => [
       ...prev,
       {
         key: currentKey,
@@ -33,9 +61,9 @@ export default function InputHeaders(props: InputProps): ReactElement {
     setCurrentValue('')
   }
 
-  const removeHeader = (i: number) => {
-    const newHeaders = headers.filter((header, index) => index !== i)
-    setHeaders(newHeaders)
+  const removePair = (index: number) => {
+    const newPairs = pairs.filter((pair, pairIndex) => pairIndex !== index)
+    setPairs(newPairs)
     setCurrentKey('')
     setCurrentValue('')
   }
@@ -50,15 +78,22 @@ export default function InputHeaders(props: InputProps): ReactElement {
   }
 
   useEffect(() => {
-    form.setFieldValue(`${field.name}`, headers)
-  }, [headers])
+    form.setFieldValue(`${field.name}`, pairs)
+  }, [pairs])
 
   useEffect(() => {
-    setDisabledButton(!currentKey || !currentValue)
-  }, [currentKey, currentValue])
+    setDisabledButton(
+      !currentKey || !currentValue || (uniqueKeys && currentKeyExists())
+    )
+    setHasOnlyUniqueKeys(!currentKeyExists())
+  }, [currentKey, currentValue, uniqueKeys, currentKeyExists])
 
   return (
-    <div>
+    <div
+      className={cx({
+        hasError: uniqueKeys && !hasOnlyUniqueKeys
+      })}
+    >
       <Label htmlFor={props.name}>
         {label}
         {props.required && (
@@ -71,7 +106,7 @@ export default function InputHeaders(props: InputProps): ReactElement {
         )}
       </Label>
 
-      <div className={styles.headersContainer}>
+      <div className={styles.pairsContainer}>
         <InputElement
           name={`${field.name}.key`}
           placeholder={'key'}
@@ -92,26 +127,30 @@ export default function InputHeaders(props: InputProps): ReactElement {
           size="small"
           onClick={(e: React.SyntheticEvent) => {
             e.preventDefault()
-            addHeader()
+            addPair()
           }}
           disabled={disabledButton}
         >
           add
         </Button>
+
+        {uniqueKeys && !hasOnlyUniqueKeys && (
+          <p className={styles.error}>The key must be unique</p>
+        )}
       </div>
 
-      {headers.length > 0 &&
-        headers.map((header, i) => {
+      {pairs.length > 0 &&
+        pairs.map((header, i) => {
           return (
-            <div className={styles.headersAddedContainer} key={`header_${i}`}>
+            <div className={styles.pairsAddedContainer} key={`pair_${i}`}>
               <InputElement
-                name={`header[${i}].key`}
+                name={`pair[${i}].key`}
                 value={`${header.key}`}
                 disabled
               />
 
               <InputElement
-                name={`header[${i}].key`}
+                name={`pair[${i}].value`}
                 value={`${header.value}`}
                 disabled
               />
@@ -121,7 +160,7 @@ export default function InputHeaders(props: InputProps): ReactElement {
                 size="small"
                 onClick={(e: React.SyntheticEvent) => {
                   e.preventDefault()
-                  removeHeader(i)
+                  removePair(i)
                 }}
                 disabled={false}
               >

From f3c3a063d5932e04e5b786bbe8f839542d6717e4 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Tue, 16 May 2023 20:59:11 +0200
Subject: [PATCH 079/113] refactor: refactorings, reduce duplication (WIP)

---
 content/publish/consumerParameters.json       |   2 +-
 src/@utils/ddo.ts                             |  23 ++-
 .../ConsumerParameters/DefaultInput.tsx       |  12 +-
 .../ConsumerParameters/FormActions.tsx        |   8 +-
 .../OptionsInput.module.css                   |  16 ++
 .../ConsumerParameters/OptionsInput.tsx       |  30 +++
 .../OptionsInput/Options.module.css           |  51 ------
 .../OptionsInput/Options.tsx                  | 171 ------------------
 .../OptionsInput/index.module.css             |  16 --
 .../ConsumerParameters/OptionsInput/index.tsx |  58 ------
 .../ConsumerParameters/RequiredInput.tsx      |  39 ----
 .../ConsumerParameters/_validation.ts         |   4 +-
 .../InputElement/ConsumerParameters/index.tsx |  21 +--
 src/components/Publish/_types.ts              |   4 +-
 src/components/Publish/_utils.ts              |  14 +-
 15 files changed, 85 insertions(+), 384 deletions(-)
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.module.css
 create mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
 delete mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
 delete mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
 delete mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
 delete mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
 delete mode 100644 src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx

diff --git a/content/publish/consumerParameters.json b/content/publish/consumerParameters.json
index 94a8c96ac5..a099886692 100644
--- a/content/publish/consumerParameters.json
+++ b/content/publish/consumerParameters.json
@@ -51,7 +51,7 @@
             "label": "Select Options",
             "placeholder": "Define the options for the user to select from",
             "type": "creatableSelect",
-            "required": false
+            "required": true
           },
           {
             "name": "required",
diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 4df206d735..53ecb21a47 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -197,16 +197,15 @@ export function parseConsumerParameters(
 ): FormConsumerParameter[] {
   if (!consumerParameters?.length) return []
 
-  return consumerParameters.map((param) =>
-    param.type === 'select'
-      ? {
-          ...param,
-          options: JSON.parse(param.options as string)
-        }
-      : param.type === 'number'
-      ? { ...param, default: Number(param.default) }
-      : param.type === 'boolean'
-      ? { ...param, default: param.default === 'true' }
-      : param
-  )
+  return consumerParameters.map((param) => ({
+    ...param,
+    required: param.required ? 'required' : 'optional',
+    options: param.type === 'select' ? JSON.parse(param.options) : [],
+    default:
+      param.type === 'boolean'
+        ? param.default === 'true'
+        : param.type === 'number'
+        ? Number(param.default)
+        : param.default
+  }))
 }
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index c5bc08cca6..8219addba4 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -13,10 +13,12 @@ export default function DefaultInput({
 }): ReactElement {
   const [field] = useField<FormConsumerParameter[]>(inputName)
 
-  const getStringOptions = (options: { [key: string]: string }[]): string[] => {
+  const getStringOptions = (
+    options: { key: string; value: string }[]
+  ): string[] => {
     if (!options?.length) return []
 
-    return options.map((option) => Object.keys(option)[0])
+    return options.map((option) => option.key)
   }
 
   return (
@@ -32,11 +34,7 @@ export default function DefaultInput({
         field.value[index].type === 'boolean'
           ? ['true', 'false']
           : field.value[index].type === 'select'
-          ? getStringOptions(
-              field.value[index]?.options as {
-                [key: string]: string
-              }[]
-            )
+          ? getStringOptions(field.value[index]?.options)
           : field.value[index].options
       }
     />
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index 092d8347a8..eb7db6b2db 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -8,6 +8,7 @@ import {
 } from '@components/Publish/_types'
 import { getObjectPropertyByPath } from '@utils/index'
 import { defaultConsumerParam } from '.'
+import { toast } from 'react-toastify'
 
 export default function FormActions({
   fieldName,
@@ -36,7 +37,12 @@ export default function FormActions({
     setParamPropsTouched(index)
 
     // Check errors on current tab before creating a new param
-    if (getObjectPropertyByPath(errors, `${field.name}[${index}]`)) return
+    if (getObjectPropertyByPath(errors, `${field.name}[${index}]`)) {
+      toast.error(
+        'Cannot add new parameter. Current parameter definition contains errors.'
+      )
+      return
+    }
 
     helpers.setValue([...field.value, { ...defaultConsumerParam }])
 
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.module.css
new file mode 100644
index 0000000000..578d85dbfe
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.module.css
@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+}
+
+.container.hasError * {
+  border-color: var(--brand-alert-red);
+}
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.error {
+  composes: error from '../../index.module.css';
+  top: 100%;
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
new file mode 100644
index 0000000000..59bce0700b
--- /dev/null
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react'
+import { FormPublishData } from '@components/Publish/_types'
+import classNames from 'classnames/bind'
+import { ErrorMessage, Field, useFormikContext } from 'formik'
+import { getObjectPropertyByPath } from '../../../../../@utils'
+import InputKeyValue, { KeyValueInputProps } from '../KeyValueInput'
+import styles from './OptionsInput.module.css'
+
+const cx = classNames.bind(styles)
+
+export default function OptionsInput(props: KeyValueInputProps): ReactElement {
+  const { errors, touched } = useFormikContext<FormPublishData>()
+
+  const hasError = (): boolean =>
+    [errors, touched].every(
+      (object) => !!getObjectPropertyByPath(object, props.name)
+    )
+
+  return (
+    <div className={cx({ container: true, hasError: hasError() })}>
+      <Field {...props} component={InputKeyValue} uniqueKeys />
+
+      {hasError() && (
+        <div className={styles.error}>
+          <ErrorMessage name={props.name} />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
deleted file mode 100644
index 061d280556..0000000000
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.headersContainer {
-  display: flex;
-  justify-content: space-between;
-  gap: 0 calc(var(--spacer) / 4);
-}
-
-.headersAddedContainer {
-  display: flex;
-  justify-content: space-between;
-  gap: 0 calc(var(--spacer) / 4);
-  margin-top: calc(var(--spacer) / 2);
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.valueContainer {
-  position: relative;
-}
-
-.headersContainer div {
-  width: 100%;
-}
-
-.error {
-  display: inline-block;
-  font-size: var(--font-size-mini);
-  line-height: 1.2;
-  font-weight: var(--font-weight-bold);
-  color: var(--brand-white);
-  background: var(--brand-alert-red);
-  border-radius: var(--border-radius);
-  padding: 0.2rem 0.4rem;
-  position: absolute;
-  right: 0;
-  z-index: 1;
-}
-
-.hasError label {
-  color: var(--brand-alert-red);
-}
-
-.hasError .headersContainer .valueContainer input,
-.hasError .headersContainer .valueContainer input:focus,
-.hasError .headersContainer .valueContainer [class*='prefix'],
-.hasError .headersContainer .valueContainer [class*='postfix'] {
-  color: var(--brand-alert-red);
-  border-color: var(--brand-alert-red);
-}
-
-.required {
-  composes: required from '../../../index.module.css';
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
deleted file mode 100644
index c6868370d3..0000000000
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/Options.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
-import InputElement from '../..'
-import Label from '../../../Label'
-import styles from './Options.module.css'
-import Tooltip from '@shared/atoms/Tooltip'
-import Markdown from '@shared/Markdown'
-import Button from '@shared/atoms/Button'
-import { InputProps } from '@shared/FormInput'
-import { useField } from 'formik'
-import classNames from 'classnames/bind'
-
-const cx = classNames.bind(styles)
-
-export interface Options {
-  [value: string]: string
-}
-
-export default function Options({
-  optionIndex,
-  defaultOptions = [],
-  ...props
-}: InputProps & {
-  optionIndex: number
-  defaultOptions: Options[]
-}): ReactElement {
-  const [field, meta, helpers] = useField(props.name)
-
-  const [currentValue, setCurrentValue] = useState('')
-  const [currentLabel, setCurrentLabel] = useState('')
-  const [disabledButton, setDisabledButton] = useState(true)
-  const [hasError, setHasError] = useState(false)
-
-  const [options, setOptions] = useState<Options[]>(defaultOptions)
-
-  const addOption = () => {
-    const hasError = options.some((option) =>
-      Object.keys(option).includes(currentValue)
-    )
-    if (hasError) {
-      setHasError(hasError)
-      return
-    }
-
-    setOptions([
-      ...options,
-      {
-        [currentValue]: currentLabel
-      }
-    ])
-    setCurrentValue('')
-    setCurrentLabel('')
-  }
-
-  const removeOption = (i: number) => {
-    const newOptions = options.filter(
-      (option, optionIndex) => optionIndex !== i
-    )
-    setOptions(newOptions)
-    setCurrentValue('')
-    setCurrentLabel('')
-  }
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    const checkType = e.target.name.search('value')
-    checkType > 0
-      ? setCurrentValue(e.target.value)
-      : setCurrentLabel(e.target.value)
-
-    return e
-  }
-
-  useEffect(() => {
-    if (!field?.value || !helpers) return
-    helpers.setValue(
-      field.value.map((currentParam, i) => {
-        if (i !== optionIndex) return currentParam
-
-        return {
-          ...currentParam,
-          options: [...options]
-        }
-      })
-    )
-  }, [options])
-
-  useEffect(() => {
-    setDisabledButton(!currentValue || !currentLabel)
-    setHasError(false)
-  }, [currentValue, currentLabel])
-
-  return (
-    <div className={cx({ container: true, hasError })}>
-      <Label htmlFor={props.name}>
-        {props?.label}
-        {props?.required && (
-          <span title="Required" className={styles.required}>
-            *
-          </span>
-        )}
-        {props?.help && !props?.prominentHelp && (
-          <Tooltip content={<Markdown text={props.help} />} />
-        )}
-      </Label>
-
-      <div className={styles.headersContainer}>
-        <div className={styles.valueContainer}>
-          <InputElement
-            name={`${name}.value`}
-            placeholder={'value'}
-            value={`${currentValue}`}
-            onChange={handleChange}
-          />
-          {hasError && <p className={styles.error}>The key must be unique</p>}
-        </div>
-
-        <div>
-          <InputElement
-            className={`${styles.input}`}
-            name={`${name}.label`}
-            placeholder={'label'}
-            value={`${currentLabel}`}
-            onChange={handleChange}
-          />
-        </div>
-
-        <Button
-          style="primary"
-          size="small"
-          onClick={(e: React.SyntheticEvent) => {
-            e.preventDefault()
-            addOption()
-          }}
-          disabled={disabledButton}
-        >
-          add
-        </Button>
-      </div>
-
-      {options.length > 0 &&
-        options.map((option, i) => {
-          return (
-            <div className={styles.headersAddedContainer} key={`option_${i}`}>
-              <InputElement
-                name={`option[${i}].value`}
-                value={Object.keys(option)[0]}
-                disabled
-              />
-
-              <InputElement
-                name={`option[${i}].label`}
-                value={Object.values(option)[0]}
-                disabled
-              />
-
-              <Button
-                style="primary"
-                size="small"
-                onClick={(e: React.SyntheticEvent) => {
-                  e.preventDefault()
-                  removeOption(i)
-                }}
-                disabled={false}
-              >
-                remove
-              </Button>
-            </div>
-          )
-        })}
-    </div>
-  )
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
deleted file mode 100644
index a6420b8fa3..0000000000
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.optionsContainer {
-  position: relative;
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.optionsContainer.hasError * {
-  border-color: var(--brand-alert-red);
-}
-
-.hasError label {
-  color: var(--brand-alert-red);
-}
-
-.error {
-  composes: error from '../../../index.module.css';
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
deleted file mode 100644
index b1f572d8b4..0000000000
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { ReactElement } from 'react'
-import { InputProps } from '../../..'
-import { ErrorMessage, useField, useFormikContext } from 'formik'
-import {
-  FormConsumerParameter,
-  FormPublishData
-} from '@components/Publish/_types'
-import Options from './Options'
-import styles from './index.module.css'
-import { getObjectPropertyByPath } from '@utils/index'
-import classNames from 'classnames/bind'
-
-const cx = classNames.bind(styles)
-
-export default function OptionsInput({
-  index,
-  inputName,
-  ...props
-}: InputProps & {
-  index: number
-  inputName: string
-}): ReactElement {
-  const { errors, touched } = useFormikContext<FormPublishData>()
-  const [field] = useField<FormConsumerParameter[]>(inputName)
-
-  const showError = (name: string, index: number): boolean =>
-    [errors, touched].every(
-      (object) =>
-        !!getObjectPropertyByPath(object, `${field.name}[${index}].${name}`)
-    )
-
-  return (
-    <div
-      className={cx({
-        optionsContainer: true,
-        hasError: showError('options', index)
-      })}
-    >
-      <Options
-        {...props}
-        name={field.name}
-        label="Options"
-        required
-        optionIndex={index}
-        defaultOptions={
-          field.value[index]?.options as {
-            [key: string]: string
-          }[]
-        }
-      />
-      {showError('options', index) && (
-        <div className={styles.error}>
-          <ErrorMessage name={`${field.name}[${index}].options`} />
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx
deleted file mode 100644
index d0ded5845f..0000000000
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/RequiredInput.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { ReactElement } from 'react'
-import { Field, useField } from 'formik'
-import { FormConsumerParameter } from '@components/Publish/_types'
-import Input, { InputProps } from '../..'
-
-export default function RequiredInput({
-  index,
-  inputName,
-  ...props
-}: InputProps & {
-  index: number
-  inputName: string
-}): ReactElement {
-  const [field] = useField<FormConsumerParameter[]>(inputName)
-
-  const getFieldValue = (
-    fieldName: string,
-    parameter: FormConsumerParameter
-  ) => {
-    // split the input name to every "." and keep the last
-    // word which corresponds to the field name
-    const valueKey = fieldName.split('.').slice(-1)[0]
-    const value = parameter[valueKey]
-
-    // convert the boolean values assigned to the "required" field
-    // into the select component options ["required", "optional"]
-    if (valueKey !== 'required' || typeof value === 'string') return value
-
-    return value ? 'required' : 'optional'
-  }
-
-  return (
-    <Field
-      {...props}
-      component={Input}
-      value={getFieldValue(props.name, field.value[index])}
-    />
-  )
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
index 5cc448af82..1c736ccc6e 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
@@ -27,9 +27,7 @@ export const validationConsumerParameters: {
   type: Yup.string().oneOf(paramTypes).required('Required'),
   description: Yup.string().required('Required'),
   label: Yup.string().required('Required'),
-  required: Yup.mixed()
-    .oneOf(['optional', 'required', true, false])
-    .required('Required'),
+  required: Yup.string().oneOf(['optional', 'required']).required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {
     is: 'select',
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index f722ce186a..a55d336540 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -7,7 +7,6 @@ import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
 import OptionsInput from './OptionsInput'
 import styles from './index.module.css'
-import RequiredInput from './RequiredInput'
 import TypeInput from './TypeInput'
 
 export const defaultConsumerParam: FormConsumerParameter = {
@@ -15,9 +14,9 @@ export const defaultConsumerParam: FormConsumerParameter = {
   label: '',
   description: '',
   type: 'text',
-  options: [],
+  options: undefined,
   default: '',
-  required: ''
+  required: 'optional'
 }
 
 export const paramTypes: FormConsumerParameter['type'][] = [
@@ -53,8 +52,8 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                       <OptionsInput
                         key={`${field.name}[${index}].${props.name}`}
                         {...subField}
-                        index={index}
-                        inputName={props.name}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        value={field.value[index][subField.name]}
                       />
                     ) : null
                   }
@@ -83,18 +82,6 @@ export function ConsumerParameters(props: InputProps): ReactElement {
                     )
                   }
 
-                  if (subField.name === 'required') {
-                    return (
-                      <RequiredInput
-                        key={`${field.name}[${index}].${subField.name}`}
-                        {...subField}
-                        name={`${field.name}[${index}].${subField.name}`}
-                        index={index}
-                        inputName={props.name}
-                      />
-                    )
-                  }
-
                   return (
                     <Field
                       key={`${field.name}[${index}].${subField.name}`}
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 6bb6cdc2d7..34ddc5483c 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -74,8 +74,8 @@ export interface FormConsumerParameter {
   name: string
   type: 'text' | 'number' | 'boolean' | 'select'
   label: string
-  required: boolean | string
+  required: string
   description: string
   default: string | boolean | number
-  options?: string | { [key: string]: string }[]
+  options?: { key: string; value: string }[]
 }
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 73e91e10b5..4657ce1e78 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -66,12 +66,14 @@ export function transformConsumerParameters(
 
   const transformedValues = parameters.map((param) => {
     const options =
-      param.type === 'select' ? JSON.stringify(param.options) : param.options
-
-    const required =
-      typeof param.required === 'boolean'
-        ? param.required
-        : param.required === 'required'
+      param.type === 'select'
+        ? // Transform from { key: string, value: string } into { key: value }
+          JSON.stringify(
+            param.options?.map((opt) => ({ [opt.key]: opt.value }))
+          )
+        : undefined
+
+    const required = param.required === 'required'
 
     return {
       ...param,

From aa0bcbaca60f3bebd6f209529259049f46780cf9 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 12:12:30 +0200
Subject: [PATCH 080/113] refactor: usercustomparameters consumption form
 creation/validation

---
 src/@utils/ddo.ts                             | 17 ------
 .../InputElement/ConsumerParameters/index.tsx |  8 ---
 .../Asset/AssetActions/Compute/_constants.ts  | 56 ++++++++-----------
 .../Asset/AssetActions/Compute/index.tsx      | 28 ++++------
 .../FormConsumerParameters.tsx                | 50 ++++++++++-------
 .../ConsumerParameters/_validation.ts         | 28 ++++++++++
 .../AssetActions/ConsumerParameters/index.tsx | 45 ++-------------
 .../Asset/AssetActions/Download/Download.tsx  | 23 +++-----
 .../AssetActions/Download/_validation.ts      | 14 +++--
 9 files changed, 116 insertions(+), 153 deletions(-)
 create mode 100644 src/components/Asset/AssetActions/ConsumerParameters/_validation.ts

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index c12f9d4fb8..b9d44a0194 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -225,20 +225,3 @@ export function parseConsumerParameters(
         : param.default
   }))
 }
-
-export function transformConsumerParametersForConsumption(
-  parameters: FormConsumerParameter[]
-): UserCustomParameters {
-  if (!parameters?.length) return
-
-  const output = {}
-  parameters.forEach(
-    (param) =>
-      (output[param.name] = parseFormConsumerParameterValue(
-        param.type,
-        param.value
-      ))
-  )
-
-  return output
-}
diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index a5dd11137e..a55d336540 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -26,14 +26,6 @@ export const paramTypes: FormConsumerParameter['type'][] = [
   'select'
 ]
 
-export const getConsumerParameterStringOptions = (
-  options: { [key: string]: string }[]
-): string[] => {
-  if (!options?.length) return []
-
-  return options.map((option) => Object.keys(option)[0])
-}
-
 export function ConsumerParameters(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField<FormConsumerParameter[]>(props.name)
 
diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index f0badc59fe..ab4fe3eec8 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,52 +1,44 @@
-import { FormConsumerParameter } from '@components/Publish/_types'
+import { UserCustomParameters } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
-import { generateFormConsumerParameters } from '../ConsumerParameters'
+import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
+import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
 
-export const ConsumerParametersConsumeSchema = Yup.array()
-  .of(
-    Yup.object().shape({
-      required: Yup.boolean().required('required'),
-      value: Yup.mixed().when('required', {
-        is: false,
-        then: Yup.mixed()
-          .nullable()
-          .transform((value) => value || null),
-        otherwise: Yup.mixed().required('Required')
-      })
-    })
-  )
-  .nullable()
-
-export const validationSchema: Yup.SchemaOf<{
+export function getComputeValidationSchema(
+  dataServiceParams: ConsumerParameter[],
+  algoServiceParams: ConsumerParameter[],
+  algoParams: ConsumerParameter[]
+): Yup.SchemaOf<{
   algorithm: string
   dataServiceParams: any
   algoServiceParams: any
   algoParams: any
-}> = Yup.object().shape({
-  algorithm: Yup.string().required('Required'),
-  dataServiceParams: ConsumerParametersConsumeSchema,
-  algoServiceParams: ConsumerParametersConsumeSchema,
-  algoParams: ConsumerParametersConsumeSchema
-})
+}> {
+  return Yup.object().shape({
+    algorithm: Yup.string().required('Required'),
+    dataServiceParams:
+      getUserCustomParameterValidationSchema(dataServiceParams),
+    algoServiceParams:
+      getUserCustomParameterValidationSchema(algoServiceParams),
+    algoParams: getUserCustomParameterValidationSchema(algoParams)
+  })
+}
 
 export function getInitialValues(
   asset?: AssetExtended,
   selectedAlgorithmAsset?: AssetExtended
 ): {
   algorithm: string
-  dataServiceParams?: FormConsumerParameter[]
-  algoServiceParams?: FormConsumerParameter[]
-  algoParams?: FormConsumerParameter[]
+  dataServiceParams?: UserCustomParameters
+  algoServiceParams?: UserCustomParameters
+  algoParams?: UserCustomParameters
 } {
   return {
     algorithm: selectedAlgorithmAsset?.id,
-    dataServiceParams: generateFormConsumerParameters(
-      asset?.services[0].consumerParameters
-    ),
-    algoServiceParams: generateFormConsumerParameters(
+    dataServiceParams: getDefaultValues(asset?.services[0].consumerParameters),
+    algoServiceParams: getDefaultValues(
       selectedAlgorithmAsset?.services[0].consumerParameters
     ),
-    algoParams: generateFormConsumerParameters(
+    algoParams: getDefaultValues(
       selectedAlgorithmAsset?.metadata?.algorithm.consumerParameters
     )
   }
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index fc85359a91..4197fe4fb2 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -22,15 +22,11 @@ import FileIcon from '@shared/FileIcon'
 import Alert from '@shared/atoms/Alert'
 import { useWeb3 } from '@context/Web3'
 import { Formik } from 'formik'
-import { getInitialValues, validationSchema } from './_constants'
+import { getComputeValidationSchema, getInitialValues } from './_constants'
 import FormStartComputeDataset from './FormComputeDataset'
 import styles from './index.module.css'
 import SuccessConfetti from '@shared/SuccessConfetti'
-import {
-  getServiceByName,
-  secondsToString,
-  transformConsumerParametersForConsumption
-} from '@utils/ddo'
+import { getServiceByName, secondsToString } from '@utils/ddo'
 import {
   isOrderable,
   getAlgorithmAssetSelectionList,
@@ -358,14 +354,10 @@ export default function Compute({
       const computeAlgorithm: ComputeAlgorithm = {
         documentId: selectedAlgorithmAsset.id,
         serviceId: selectedAlgorithmAsset.services[0].id,
-        algocustomdata: transformConsumerParametersForConsumption(
-          userCustomParameters?.algoParams
-        ),
-        userdata: transformConsumerParametersForConsumption(
-          userCustomParameters?.algoServiceParams
-        )
+        algocustomdata: userCustomParameters?.algoParams,
+        userdata: userCustomParameters?.algoServiceParams
       }
-      console.log(computeAlgorithm)
+
       const allowed = await isOrderable(
         asset,
         computeService.id,
@@ -421,9 +413,7 @@ export default function Compute({
         documentId: asset.id,
         serviceId: asset.services[0].id,
         transferTxId: datasetOrderTx,
-        userdata: transformConsumerParametersForConsumption(
-          userCustomParameters?.dataServiceParams
-        )
+        userdata: userCustomParameters?.dataServiceParams
       }
       computeAlgorithm.transferTxId = algorithmOrderTx
       const output: ComputeOutput = {
@@ -499,7 +489,11 @@ export default function Compute({
         <Formik
           initialValues={getInitialValues(asset, selectedAlgorithmAsset)}
           validateOnMount
-          validationSchema={validationSchema}
+          validationSchema={getComputeValidationSchema(
+            asset.services[0].consumerParameters,
+            selectedAlgorithmAsset?.services[0].consumerParameters,
+            selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters
+          )}
           enableReinitialize
           onSubmit={async (values) => {
             if (!values.algorithm) return
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 21443f97c8..402d20c982 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,34 +1,48 @@
-import { FormConsumerParameter } from '@components/Publish/_types'
 import React, { ReactElement } from 'react'
-import styles from './FormConsumerParameters.module.css'
+import Input from '@components/@shared/FormInput'
 import Label from '@components/@shared/FormInput/Label'
-import { getConsumerParameterStringOptions } from '@components/@shared/FormInput/InputElement/ConsumerParameters'
 import { Field, useField } from 'formik'
-import Input from '@components/@shared/FormInput'
+import styles from './FormConsumerParameters.module.css'
+import { UserCustomParameters } from '@oceanprotocol/lib'
+
+export function getDefaultValues(
+  parameters: ConsumerParameter[]
+): UserCustomParameters {
+  const defaults = {}
+  parameters.forEach((param) => {
+    Object.assign(defaults, {
+      [param.name]:
+        param.type === 'number'
+          ? Number(param.default)
+          : param.type === 'boolean'
+          ? param.default === 'true'
+          : param.default
+    })
+  })
+
+  return defaults
+}
 
 export default function FormConsumerParameters({
   name,
   parameters
 }: {
   name: string
-  parameters: FormConsumerParameter[]
+  parameters: ConsumerParameter[]
 }): ReactElement {
-  const [field] = useField<FormConsumerParameter[]>(name)
+  const [field] = useField<UserCustomParameters[]>(name)
 
-  const getParameterOptions = (parameter: FormConsumerParameter): string[] => {
+  const getParameterOptions = (parameter: ConsumerParameter): string[] => {
     if (!parameter.options && parameter.type !== 'boolean') return []
 
     const updatedOptions =
       parameter.type === 'boolean'
         ? ['true', 'false']
         : parameter.type === 'select'
-        ? getConsumerParameterStringOptions(
-            parameter?.options as {
-              [key: string]: string
-            }[]
-          )
-        : (parameter.options as unknown as string[])
+        ? JSON.parse(parameter.options)?.map((option) => Object.keys(option)[0])
+        : []
 
+    // add empty option, if parameter is optional
     if (!parameter.required) updatedOptions.unshift('')
 
     return updatedOptions
@@ -40,19 +54,17 @@ export default function FormConsumerParameters({
         Input the consumer parameters
       </Label>
       <div className={styles.parametersContainer}>
-        {parameters?.map((param, index) => {
-          const { default: defaultValue, ...fields } = param
-
+        {parameters?.map((param) => {
           return (
             <div key={param.name} className={styles.parameter}>
               <Field
-                {...fields}
+                {...param}
                 component={Input}
-                name={`${name}[${index}].value`}
+                name={`${name}.${param.name}`}
                 options={getParameterOptions(param)}
                 size="small"
                 type={param.type === 'boolean' ? 'select' : param.type}
-                value={field.value[index].value}
+                value={field.value[param.name]}
               />
             </div>
           )
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
new file mode 100644
index 0000000000..d20b1e47e1
--- /dev/null
+++ b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
@@ -0,0 +1,28 @@
+import * as Yup from 'yup'
+import { SchemaLike } from 'yup/lib/types'
+import { getDefaultValues } from './FormConsumerParameters'
+
+export function getUserCustomParameterValidationSchema(
+  parameters: ConsumerParameter[]
+): SchemaLike {
+  const shape = {}
+
+  parameters.forEach((parameter) => {
+    const schemaBase =
+      parameter.type === 'number'
+        ? Yup.number()
+        : parameter.type === 'boolean'
+        ? Yup.boolean()
+        : Yup.string()
+
+    Object.assign(shape, {
+      [parameter.name]: parameter.required
+        ? schemaBase.required('required')
+        : schemaBase.nullable().transform((value) => value || null)
+    })
+  })
+
+  const schema = Yup.object(shape)
+
+  return schema
+}
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index f34db55623..036ad19dc9 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -2,39 +2,6 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import FormConsumerParameters from './FormConsumerParameters'
 import styles from './index.module.css'
 import Tabs, { TabsItem } from '@components/@shared/atoms/Tabs'
-import { FormConsumerParameter } from '@components/Publish/_types'
-
-const getFormParameterValue = (
-  type: ConsumerParameter['type'],
-  value: string | number | boolean
-) => {
-  if (type === 'boolean') {
-    if (value === '') return ''
-    if (value) return 'true'
-    return 'false'
-  }
-
-  return value
-}
-
-export function generateFormConsumerParameters(
-  consumerParameters: ConsumerParameter[]
-): FormConsumerParameter[] {
-  if (!consumerParameters?.length) return
-
-  return consumerParameters.map((param) => {
-    const formParam = {
-      ...param,
-      value: getFormParameterValue(param.type, param.default)
-    }
-
-    if (param.type === 'select') {
-      formParam.options = JSON.parse(param.options as string)
-    }
-
-    return formParam
-  })
-}
 
 export default function ConsumerParameters({
   asset,
@@ -53,9 +20,7 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="dataServiceParams"
-            parameters={generateFormConsumerParameters(
-              asset.services[0].consumerParameters
-            )}
+            parameters={asset.services[0].consumerParameters}
           />
         )
       })
@@ -66,9 +31,7 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="algoServiceParams"
-            parameters={generateFormConsumerParameters(
-              selectedAlgorithmAsset.services[0].consumerParameters
-            )}
+            parameters={selectedAlgorithmAsset.services[0].consumerParameters}
           />
         )
       })
@@ -79,9 +42,9 @@ export default function ConsumerParameters({
         content: (
           <FormConsumerParameters
             name="algoParams"
-            parameters={generateFormConsumerParameters(
+            parameters={
               selectedAlgorithmAsset.metadata?.algorithm.consumerParameters
-            )}
+            }
           />
         )
       })
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/Download.tsx
index 72faee5473..d8c253473d 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/Download.tsx
@@ -4,10 +4,7 @@ import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import ButtonBuy from '../ButtonBuy'
-import {
-  secondsToString,
-  transformConsumerParametersForConsumption
-} from '@utils/ddo'
+import { secondsToString } from '@utils/ddo'
 import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
 import styles from './Download.module.css'
 import {
@@ -25,11 +22,10 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
-import ConsumerParameters, {
-  generateFormConsumerParameters
-} from '../ConsumerParameters'
+import ConsumerParameters from '../ConsumerParameters'
 import { Form, Formik, useFormikContext } from 'formik'
-import { validationSchema } from './_validation'
+import { getDownloadValidationSchema } from './_validation'
+import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
 
 export default function Download({
   asset,
@@ -244,16 +240,15 @@ export default function Download({
   return (
     <Formik
       initialValues={{
-        dataServiceParams: generateFormConsumerParameters(
+        dataServiceParams: getDefaultValues(
           asset?.services[0].consumerParameters
         )
       }}
-      validationSchema={validationSchema}
+      validationSchema={getDownloadValidationSchema(
+        asset?.services[0].consumerParameters
+      )}
       onSubmit={async (values) => {
-        const dataParams = transformConsumerParametersForConsumption(
-          values?.dataServiceParams
-        )
-        await handleOrderOrDownload(dataParams)
+        await handleOrderOrDownload(values?.dataServiceParams)
       }}
     >
       <Form>
diff --git a/src/components/Asset/AssetActions/Download/_validation.ts b/src/components/Asset/AssetActions/Download/_validation.ts
index cb5ca92ffa..0460b53fc0 100644
--- a/src/components/Asset/AssetActions/Download/_validation.ts
+++ b/src/components/Asset/AssetActions/Download/_validation.ts
@@ -1,8 +1,12 @@
 import * as Yup from 'yup'
-import { ConsumerParametersConsumeSchema } from '../Compute/_constants'
+import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
 
-export const validationSchema: Yup.SchemaOf<{
+export function getDownloadValidationSchema(
+  parameters: ConsumerParameter[]
+): Yup.SchemaOf<{
   dataServiceParams: any
-}> = Yup.object().shape({
-  dataServiceParams: ConsumerParametersConsumeSchema
-})
+}> {
+  return Yup.object().shape({
+    dataServiceParams: getUserCustomParameterValidationSchema(parameters)
+  })
+}

From 47d9059151cb5c55b027fa25a1911a65be16423d Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 16:07:08 +0200
Subject: [PATCH 081/113] refactor: return undefined consistently if property
 path not found on object

---
 src/@utils/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/@utils/index.ts b/src/@utils/index.ts
index 293d88d996..5777f65f33 100644
--- a/src/@utils/index.ts
+++ b/src/@utils/index.ts
@@ -18,12 +18,12 @@ export function sortAssets(items: Asset[], sorted: string[]) {
   return items
 }
 
-export const isObjectLike = (object: any) => {
+export const isPlainObject = (object: any) => {
   return object !== null && typeof object === 'object' && !Array.isArray(object)
 }
 
 export const getObjectPropertyByPath = (object: any, path = '') => {
-  if (!isObjectLike(object)) return object
+  if (!isPlainObject(object)) return undefined
   path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   path = path.replace(/^\./, '') // strip a leading dot
   const pathArray = path.split('.')
@@ -33,10 +33,10 @@ export const getObjectPropertyByPath = (object: any, path = '') => {
       if (key in object) {
         object = object[key]
       } else {
-        return
+        return undefined
       }
     } catch {
-      return object
+      return undefined
     }
   }
   return object

From 8f1ccac994ec06b7da866bf4a0c043d0a7a97db2 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 16:14:12 +0200
Subject: [PATCH 082/113] refactor: reuse fieldType and fieldOptions in
 DefaultInput

---
 .../ConsumerParameters/DefaultInput.tsx          | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
index 8219addba4..242ac8e8db 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/DefaultInput.tsx
@@ -12,6 +12,8 @@ export default function DefaultInput({
   inputName: string
 }): ReactElement {
   const [field] = useField<FormConsumerParameter[]>(inputName)
+  const fieldType = field.value[index]?.type
+  const fieldOptions = field.value[index]?.options
 
   const getStringOptions = (
     options: { key: string; value: string }[]
@@ -25,17 +27,13 @@ export default function DefaultInput({
     <Field
       {...props}
       component={Input}
-      type={
-        field.value[index].type === 'boolean'
-          ? 'select'
-          : field.value[index].type
-      }
+      type={fieldType === 'boolean' ? 'select' : fieldType}
       options={
-        field.value[index].type === 'boolean'
+        fieldType === 'boolean'
           ? ['true', 'false']
-          : field.value[index].type === 'select'
-          ? getStringOptions(field.value[index]?.options)
-          : field.value[index].options
+          : fieldType === 'select'
+          ? getStringOptions(fieldOptions)
+          : fieldOptions
       }
     />
   )

From 023498d1dd72452217edd4914eb9b967f0dde6b3 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 16:53:16 +0200
Subject: [PATCH 083/113] fix: parse ddo consumer parameters for edit form

---
 src/@utils/ddo.ts | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index b9d44a0194..174c0dbd1f 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -193,21 +193,6 @@ export function previewDebugPatch(
   return buildValuesPreview
 }
 
-export function parseFormConsumerParameterValue(
-  type: FormConsumerParameter['type'],
-  value: FormConsumerParameter['value']
-) {
-  if (!value || !type) return
-
-  if (type === 'number') return Number(value)
-  if (type === 'boolean') {
-    if (value === 'true') return true
-    if (value === 'false') return false
-  }
-
-  return value
-}
-
 export function parseConsumerParameters(
   consumerParameters: ConsumerParameter[]
 ): FormConsumerParameter[] {
@@ -216,7 +201,16 @@ export function parseConsumerParameters(
   return consumerParameters.map((param) => ({
     ...param,
     required: param.required ? 'required' : 'optional',
-    options: param.type === 'select' ? JSON.parse(param.options) : [],
+    options:
+      param.type === 'select'
+        ? JSON.parse(param.options)?.map((option) => {
+            const key = Object.keys(option)[0]
+            return {
+              key,
+              value: option[key]
+            }
+          })
+        : [],
     default:
       param.type === 'boolean'
         ? param.default === 'true'

From 8f32dd3aee45941a3b3496186d2b34b78a572c97 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 20:01:00 +0200
Subject: [PATCH 084/113] fix: asset view crash for assets w/o consumer params

---
 .../AssetActions/ConsumerParameters/FormConsumerParameters.tsx | 2 +-
 .../Asset/AssetActions/ConsumerParameters/_validation.ts       | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 402d20c982..a472e5569b 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -9,7 +9,7 @@ export function getDefaultValues(
   parameters: ConsumerParameter[]
 ): UserCustomParameters {
   const defaults = {}
-  parameters.forEach((param) => {
+  parameters?.forEach((param) => {
     Object.assign(defaults, {
       [param.name]:
         param.type === 'number'
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
index d20b1e47e1..b831b915f3 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
+++ b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
@@ -1,13 +1,12 @@
 import * as Yup from 'yup'
 import { SchemaLike } from 'yup/lib/types'
-import { getDefaultValues } from './FormConsumerParameters'
 
 export function getUserCustomParameterValidationSchema(
   parameters: ConsumerParameter[]
 ): SchemaLike {
   const shape = {}
 
-  parameters.forEach((parameter) => {
+  parameters?.forEach((parameter) => {
     const schemaBase =
       parameter.type === 'number'
         ? Yup.number()

From e5761c8a1a8e45518733b2b08c5148d98e9f437a Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Wed, 17 May 2023 20:14:01 +0200
Subject: [PATCH 085/113] fix: publish preview for assets with no consumer
 params

---
 src/components/Publish/_utils.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 4657ce1e78..d6b548b5a9 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -127,8 +127,9 @@ export async function transformPublishFormToDdo(
   const linksTransformed = links?.length &&
     links[0].valid && [sanitizeUrl(links[0].url)]
 
-  const consumerParametersTransformed =
-    usesConsumerParameters && transformConsumerParameters(consumerParameters)
+  const consumerParametersTransformed = usesConsumerParameters
+    ? transformConsumerParameters(consumerParameters)
+    : undefined
 
   const newMetadata: MetadataExtended = {
     created: currentTime,
@@ -195,9 +196,9 @@ export async function transformPublishFormToDdo(
     ...(access === 'compute' && {
       compute: values.services[0].computeOptions
     }),
-    consumerParameters:
-      values.services[0].usesConsumerParameters &&
-      transformConsumerParameters(values.services[0].consumerParameters)
+    consumerParameters: values.services[0].usesConsumerParameters
+      ? transformConsumerParameters(values.services[0].consumerParameters)
+      : undefined
   }
 
   const newDdo: DDO = {

From f34a93ccf57b8b435d84e1bfd3e4e0fb4d206ece Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Thu, 18 May 2023 01:44:55 +0200
Subject: [PATCH 086/113] fix: revert accidential rename of algoService

---
 src/@utils/assetConvertor.ts | 4 ++--
 src/@utils/compute.ts        | 8 +++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/@utils/assetConvertor.ts b/src/@utils/assetConvertor.ts
index 6359039c59..c8f89e953b 100644
--- a/src/@utils/assetConvertor.ts
+++ b/src/@utils/assetConvertor.ts
@@ -10,12 +10,12 @@ export async function transformAssetToAssetSelection(
   const algorithmList: AssetSelectionAsset[] = []
 
   for (const asset of assets) {
-    const algoServiceParams =
+    const algoService =
       getServiceByName(asset, 'compute') || getServiceByName(asset, 'access')
 
     if (
       asset?.stats?.price?.value &&
-      algoServiceParams?.serviceEndpoint === datasetProviderEndpoint
+      algoService?.serviceEndpoint === datasetProviderEndpoint
     ) {
       let selected = false
       selectedAlgorithms?.forEach((algorithm: PublisherTrustedAlgorithm) => {
diff --git a/src/@utils/compute.ts b/src/@utils/compute.ts
index 59793fafc3..a19800f29a 100644
--- a/src/@utils/compute.ts
+++ b/src/@utils/compute.ts
@@ -102,14 +102,12 @@ export async function isOrderable(
       return false
     }
     if (algorithm.documentId) {
-      const algoServiceParams: Service = getServiceById(
+      const algoService: Service = getServiceById(
         algorithmDDO,
         algorithm.serviceId
       )
-      if (algoServiceParams && algoServiceParams.type === 'compute') {
-        if (
-          algoServiceParams.serviceEndpoint !== datasetService.serviceEndpoint
-        ) {
+      if (algoService && algoService.type === 'compute') {
+        if (algoService.serviceEndpoint !== datasetService.serviceEndpoint) {
           this.logger.error(
             'ERROR: Both assets with compute service are not served by the same provider'
           )

From 2fffba60a771956c1fa260a2c34810d077082560 Mon Sep 17 00:00:00 2001
From: Moritz Kirstein <mkirstein@protonmail.com>
Date: Thu, 18 May 2023 01:45:51 +0200
Subject: [PATCH 087/113] fix: revert publish navigation padding change

---
 src/components/Publish/Navigation/index.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css
index dc6391ac78..10ba16333b 100644
--- a/src/components/Publish/Navigation/index.module.css
+++ b/src/components/Publish/Navigation/index.module.css
@@ -39,7 +39,7 @@
   cursor: pointer;
   display: inline-block;
   margin: 0 var(--spacer);
-  padding: 0 calc(var(--spacer) / 4);
+  padding: 0 calc(var(--spacer) / 2);
   counter-increment: list-number;
   font-weight: var(--font-weight-bold);
   white-space: nowrap;

From 48ed14cbec9d3e5f2c28435ea7c505080e48e5e5 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 22 May 2023 14:28:32 +0200
Subject: [PATCH 088/113] feat: update consumer parameters' labels and helpers

---
 content/pages/editMetadata.json                | 16 ++++++++++++++++
 content/publish/consumerParameters.json        | 16 ++++------------
 content/publish/form.json                      | 16 ++++++++++++++++
 src/components/Asset/Edit/FormEditMetadata.tsx | 10 ++--------
 src/components/Publish/Metadata/index.tsx      |  2 +-
 src/components/Publish/Services/index.tsx      |  5 +----
 6 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index ed40f9b783..c227c0559d 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -179,6 +179,14 @@
         "placeholder": "e.g. logistics",
         "required": false
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Algorithm custom parameters",
+        "help": "Algorithm custom parameters are used to define required consumer input before running the algorithm in a Compute-to-Data environment.",
+        "type": "checkbox",
+        "options": ["This asset uses algorithm custom parameters"],
+        "required": false
+      },
       {
         "name": "paymentCollector",
         "label": "Payment Collector Address",
@@ -199,6 +207,14 @@
         ],
         "sortOptions": false,
         "required": false
+      },
+      {
+        "name": "usesServiceConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published dataset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   }
diff --git a/content/publish/consumerParameters.json b/content/publish/consumerParameters.json
index a099886692..7eb2b15dc4 100644
--- a/content/publish/consumerParameters.json
+++ b/content/publish/consumerParameters.json
@@ -1,17 +1,9 @@
 {
   "consumerParameters": {
     "fields": [
-      {
-        "name": "usesConsumerParameters",
-        "label": "Uses consumer parameters",
-        "help": "Define consumer parameters to be submitted to the algorithm before usage.",
-        "type": "checkbox",
-        "options": ["This asset uses consumer parameters"],
-        "required": false
-      },
       {
         "name": "consumerParameters",
-        "label": "Consumer parameters",
+        "label": "Custom parameters",
         "type": "consumerParameters",
         "required": false,
         "fields": [
@@ -19,7 +11,7 @@
             "name": "name",
             "label": "Parameter Name",
             "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key handed to the algorithm for this parameter.",
+            "help": "The name of the parameter to ask for. This will be the JSON key for this parameter.",
             "type": "text",
             "required": true
           },
@@ -34,14 +26,14 @@
           {
             "name": "description",
             "label": "Description",
-            "placeholder": "A custom parameter changing the behaviour of the algorithm.",
+            "placeholder": "A custom parameter changing the asset's behaviour.",
             "type": "text",
             "required": true
           },
           {
             "name": "type",
             "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the algorithm is used.",
+            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the asset is used.",
             "type": "select",
             "options": ["number", "text", "boolean", "select"],
             "required": true
diff --git a/content/publish/form.json b/content/publish/form.json
index 6738fc12b0..885aa802de 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -74,6 +74,14 @@
         "help": "Provide the entrypoint for your algorithm.",
         "required": true
       },
+      {
+        "name": "usesConsumerParameters",
+        "label": "Algorithm custom parameters",
+        "help": "Algorithm custom parameters are used to define required consumer input before running the algorithm in a Compute-to-Data environment.",
+        "type": "checkbox",
+        "options": ["This asset uses algorithm custom parameters"],
+        "required": false
+      },
       {
         "name": "termsAndConditions",
         "label": "Terms & Conditions",
@@ -255,6 +263,14 @@
         "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
         "sortOptions": false,
         "required": true
+      },
+      {
+        "name": "usesConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published dataset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   },
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 5d662ea8f1..4009b12dc1 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/src/components/Asset/Edit/FormEditMetadata.tsx
@@ -137,10 +137,7 @@ export default function FormEditMetadata({
       {asset.metadata.type === 'algorithm' && (
         <>
           <Field
-            {...getFieldContent(
-              'usesConsumerParameters',
-              consumerParametersContent.consumerParameters.fields
-            )}
+            {...getFieldContent('usesConsumerParameters', data)}
             component={Input}
             name="usesConsumerParameters"
           />
@@ -171,10 +168,7 @@ export default function FormEditMetadata({
         <h4>Service</h4>
 
         <Field
-          {...getFieldContent(
-            'usesConsumerParameters',
-            consumerParametersContent.consumerParameters.fields
-          )}
+          {...getFieldContent('usesServiceConsumerParameters', data)}
           component={Input}
           name="service.usesConsumerParameters"
         />
diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx
index a6a3fae8a7..587ce85e25 100644
--- a/src/components/Publish/Metadata/index.tsx
+++ b/src/components/Publish/Metadata/index.tsx
@@ -149,7 +149,7 @@ export default function MetadataFields(): ReactElement {
           <Field
             {...getFieldContent(
               'usesConsumerParameters',
-              consumerParametersContent.consumerParameters.fields
+              content.metadata.fields
             )}
             component={Input}
             name="metadata.usesConsumerParameters"
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index aa088fbfb4..86f21e638d 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -110,10 +110,7 @@ export default function ServicesFields(): ReactElement {
         name="services[0].timeout"
       />
       <Field
-        {...getFieldContent(
-          'usesConsumerParameters',
-          consumerParametersContent.consumerParameters.fields
-        )}
+        {...getFieldContent('usesConsumerParameters', content.services.fields)}
         component={Input}
         name="services[0].usesConsumerParameters"
       />

From 8d43373ae787fc9057c333b114725595fc303a00 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 22 May 2023 14:52:25 +0200
Subject: [PATCH 089/113] fix: consumer parameters validation

---
 src/components/Asset/Edit/_validation.ts | 24 ++++++++++++++++++------
 src/components/Publish/_validation.ts    | 24 ++++++++++++++++++------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index ee4f4e2132..3a4a14bf7c 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -39,9 +39,15 @@ export const validationSchema = Yup.object().shape({
   author: Yup.string().nullable(),
   tags: Yup.array<string[]>().nullable(),
   usesConsumerParameters: Yup.boolean(),
-  consumerParameters: Yup.array().of(
-    Yup.object().shape(validationConsumerParameters)
-  ),
+  consumerParameters: Yup.array().when('usesConsumerParameters', {
+    is: true,
+    then: Yup.array()
+      .of(Yup.object().shape(validationConsumerParameters))
+      .required('Required'),
+    otherwise: Yup.array()
+      .nullable()
+      .transform((value) => value || null)
+  }),
   paymentCollector: Yup.string().test(
     'ValidAddress',
     'Must be a valid Ethereum Address.',
@@ -52,9 +58,15 @@ export const validationSchema = Yup.object().shape({
   retireAsset: Yup.string(),
   service: Yup.object().shape({
     usesConsumerParameters: Yup.boolean(),
-    consumerParameters: Yup.array().of(
-      Yup.object().shape(validationConsumerParameters)
-    )
+    consumerParameters: Yup.array().when('usesConsumerParameters', {
+      is: true,
+      then: Yup.array()
+        .of(Yup.object().shape(validationConsumerParameters))
+        .required('Required'),
+      otherwise: Yup.array()
+        .nullable()
+        .transform((value) => value || null)
+    })
   })
 })
 
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index a3f3ede5b5..44b968cb21 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -29,9 +29,15 @@ const validationMetadata = {
     .required('Required')
     .isTrue('Please agree to the Terms and Conditions.'),
   usesConsumerParameters: Yup.boolean(),
-  consumerParameters: Yup.array().of(
-    Yup.object().shape(validationConsumerParameters)
-  )
+  consumerParameters: Yup.array().when('usesConsumerParameters', {
+    is: true,
+    then: Yup.array()
+      .of(Yup.object().shape(validationConsumerParameters))
+      .required('Required'),
+    otherwise: Yup.array()
+      .nullable()
+      .transform((value) => value || null)
+  })
 }
 
 const validationService = {
@@ -67,9 +73,15 @@ const validationService = {
     custom: Yup.boolean()
   }),
   usesConsumerParameters: Yup.boolean(),
-  consumerParameters: Yup.array().of(
-    Yup.object().shape(validationConsumerParameters)
-  )
+  consumerParameters: Yup.array().when('usesConsumerParameters', {
+    is: true,
+    then: Yup.array()
+      .of(Yup.object().shape(validationConsumerParameters))
+      .required('Required'),
+    otherwise: Yup.array()
+      .nullable()
+      .transform((value) => value || null)
+  })
 }
 
 const validationPricing = {

From 8a04058fa1b84a1c805a16a16caaee9037ff67e8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 22 May 2023 15:33:31 +0200
Subject: [PATCH 090/113] feat: update consumer parameter helper wording

---
 content/pages/editMetadata.json | 2 +-
 content/publish/form.json       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index c227c0559d..9d7a0a04ef 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -211,7 +211,7 @@
       {
         "name": "usesServiceConsumerParameters",
         "label": "User defined parameters",
-        "help": "User defined parameters are used to filter or query the published dataset.",
+        "help": "User defined parameters are used to filter or query the published asset.",
         "type": "checkbox",
         "options": ["This asset uses user defined parameters"],
         "required": false
diff --git a/content/publish/form.json b/content/publish/form.json
index 885aa802de..302f44c529 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -267,7 +267,7 @@
       {
         "name": "usesConsumerParameters",
         "label": "User defined parameters",
-        "help": "User defined parameters are used to filter or query the published dataset.",
+        "help": "User defined parameters are used to filter or query the published asset.",
         "type": "checkbox",
         "options": ["This asset uses user defined parameters"],
         "required": false

From d9e75ef350c466f924171f90318ca26dd827fe34 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 30 May 2023 15:17:13 +0200
Subject: [PATCH 091/113] chore: merge conflicts

---
 package-lock.json                             | 52 ++++++++++++-------
 .../InputElement/FilesInput/index.tsx         |  6 ++-
 .../{Download.module.css => index.module.css} |  0
 .../Download/{Download.tsx => index.tsx}      | 47 ++++++++++++-----
 src/components/Asset/AssetActions/index.tsx   |  3 +-
 5 files changed, 70 insertions(+), 38 deletions(-)
 rename src/components/Asset/AssetActions/Download/{Download.module.css => index.module.css} (100%)
 rename src/components/Asset/AssetActions/Download/{Download.tsx => index.tsx} (87%)

diff --git a/package-lock.json b/package-lock.json
index 8a18c9d56d..77a41c9e20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2398,7 +2398,6 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.0.tgz",
       "integrity": "sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==",
-      "peer": true,
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -2449,7 +2448,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.0.tgz",
       "integrity": "sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==",
-      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -2460,7 +2458,6 @@
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
       "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
-      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -2476,7 +2473,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
       "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
-      "peer": true,
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -25973,7 +25969,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
       "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "peer": true,
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/commands": "^6.0.0",
@@ -27067,8 +27062,7 @@
     "node_modules/crelt": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
-      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==",
-      "peer": true
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
     },
     "node_modules/cross-blob": {
       "version": "3.0.2",
@@ -55708,8 +55702,12 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.0.tgz",
       "integrity": "sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==",
-      "peer": true,
-      "requires": {}
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.6.0",
+        "@lezer/common": "^1.0.0"
+      }
     },
     "@codemirror/commands": {
       "version": "6.1.3",
@@ -55748,7 +55746,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.0.tgz",
       "integrity": "sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==",
-      "peer": true,
       "requires": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -55759,7 +55756,6 @@
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
       "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
-      "peer": true,
       "requires": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -55775,7 +55771,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
       "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
-      "peer": true,
       "requires": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -58486,6 +58481,7 @@
       "integrity": "sha512-rmVKYEsKzurfRU0xJz+iHelbi1LGlihIWZ7Qvmb/CBz1EkhL7nOkW4SVXmG2dA5Ce0si2gr88i6q4eBOMRNJ1w==",
       "dev": true,
       "requires": {
+        "@oclif/config": "^1.18.2",
         "@oclif/errors": "^1.3.5",
         "@oclif/help": "^1.0.1",
         "@oclif/parser": "^3.8.6",
@@ -69347,22 +69343,38 @@
       "version": "4.19.5",
       "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.19.5.tgz",
       "integrity": "sha512-1zt7ZPJ01xKkSW/KDy0FZNga0bngN1fC594wCVG7FBi60ehfcAucpooQ+JSPScKXopxcb+ugPKZvVLzr9/OfzA==",
-      "requires": {}
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
     },
     "@uiw/codemirror-themes": {
       "version": "4.19.5",
       "resolved": "https://registry.npmjs.org/@uiw/codemirror-themes/-/codemirror-themes-4.19.5.tgz",
       "integrity": "sha512-BWCTwQJaGiOc+nYqPLQDjmCtIojaCEKx2aO1bOTyGw0fisKwGw9Csll+bi9ujqA+vk6qYJmXI0P5K7kVs8fbdA==",
       "dev": true,
-      "requires": {}
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
     },
     "@uiw/react-codemirror": {
       "version": "4.19.5",
       "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.19.5.tgz",
       "integrity": "sha512-ZCHh8d7beXbF8/t7F1+yHht6A9Y6CdKeOkZq4A09lxJEnyTQrj1FMf2zvfaqc7K23KNjkTCtSlbqKKbVDgrWaw==",
       "requires": {
+        "@babel/runtime": "^7.18.6",
         "@codemirror/commands": "^6.1.0",
-        "@uiw/codemirror-extensions-basic-setup": "4.19.5"
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.19.5",
+        "codemirror": "^6.0.0"
       }
     },
     "@urql/core": {
@@ -71355,7 +71367,7 @@
         "git-url-parse": "11.6.0",
         "glob": "8.0.1",
         "global-agent": "3.0.0",
-        "graphql": "14.0.2 - 14.2.0 || ^14.3.1 || ^15.0.0",
+        "graphql": "15.8.0",
         "graphql-tag": "2.12.6",
         "listr": "0.14.3",
         "lodash.identity": "3.0.0",
@@ -71596,7 +71608,7 @@
         "cosmiconfig": "^7.0.1",
         "dotenv": "^16.0.0",
         "glob": "^8.0.0",
-        "graphql": "14.0.2 - 14.2.0 || ^14.3.1 || ^15.0.0",
+        "graphql": "15.8.0",
         "graphql-tag": "^2.10.1",
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.1",
@@ -74140,7 +74152,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
       "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "peer": true,
       "requires": {
         "@codemirror/autocomplete": "^6.0.0",
         "@codemirror/commands": "^6.0.0",
@@ -75022,8 +75033,7 @@
     "crelt": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
-      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==",
-      "peer": true
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
     },
     "cross-blob": {
       "version": "3.0.2",
@@ -84536,6 +84546,7 @@
       "integrity": "sha512-AoD7v132iYDV4K78yN2OLgTPwtAKn0XlD2pOhzyBxiI8PeXzozhbKyPV7zUOJUPETj+pcEVfuYj5ZN/8+bhbCw==",
       "peer": true,
       "requires": {
+        "@babel/core": "^7.20.0",
         "@babel/plugin-proposal-async-generator-functions": "^7.0.0",
         "@babel/plugin-proposal-class-properties": "^7.0.0",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
@@ -84589,6 +84600,7 @@
       "integrity": "sha512-DSdrEHuQ22ixY7DyipyKkIcqhOJrt5s6h6X7BYJCP9AMUfXOwLe2biY3BcgJz5GOXv8/Akry4vTCvQscVS1otQ==",
       "peer": true,
       "requires": {
+        "@babel/core": "^7.20.0",
         "babel-preset-fbjs": "^3.4.0",
         "hermes-parser": "0.8.0",
         "metro-babel-transformer": "0.73.9",
diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
index eda4da4b17..37bd5f8d5b 100644
--- a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -8,7 +8,7 @@ import { LoggerInstance, FileInfo } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
 import styles from './index.module.css'
 import { useNetwork } from 'wagmi'
-import InputHeaders from '../Headers'
+import InputKeyValue from '../KeyValueInput'
 import Button from '@shared/atoms/Button'
 import Loader from '@shared/atoms/Loader'
 import { checkJson } from '@utils/codemirror'
@@ -161,7 +161,9 @@ export default function FilesInput(props: InputProps): ReactElement {
                         <Field
                           key={i}
                           component={
-                            innerField.type === 'headers' ? InputHeaders : Input
+                            innerField.type === 'headers'
+                              ? InputKeyValue
+                              : Input
                           }
                           {...innerField}
                           name={`${field.name}[0].${innerField.value}`}
diff --git a/src/components/Asset/AssetActions/Download/Download.module.css b/src/components/Asset/AssetActions/Download/index.module.css
similarity index 100%
rename from src/components/Asset/AssetActions/Download/Download.module.css
rename to src/components/Asset/AssetActions/Download/index.module.css
diff --git a/src/components/Asset/AssetActions/Download/Download.tsx b/src/components/Asset/AssetActions/Download/index.tsx
similarity index 87%
rename from src/components/Asset/AssetActions/Download/Download.tsx
rename to src/components/Asset/AssetActions/Download/index.tsx
index d8c253473d..deb937eef5 100644
--- a/src/components/Asset/AssetActions/Download/Download.tsx
+++ b/src/components/Asset/AssetActions/Download/index.tsx
@@ -2,11 +2,10 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import FileIcon from '@shared/FileIcon'
 import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
 import ButtonBuy from '../ButtonBuy'
 import { secondsToString } from '@utils/ddo'
 import AlgorithmDatasetsListForCompute from '../Compute/AlgorithmDatasetsListForCompute'
-import styles from './Download.module.css'
+import styles from './index.module.css'
 import {
   FileInfo,
   LoggerInstance,
@@ -22,6 +21,8 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
+import { useAccount, useSigner } from 'wagmi'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
 import ConsumerParameters from '../ConsumerParameters'
 import { Form, Formik, useFormikContext } from 'formik'
 import { getDownloadValidationSchema } from './_validation'
@@ -42,7 +43,9 @@ export default function Download({
   fileIsLoading?: boolean
   consumableFeedback?: string
 }): ReactElement {
-  const { accountId, web3, isSupportedOceanNetwork } = useWeb3()
+  const { address: accountId, isConnected } = useAccount()
+  const { data: signer } = useSigner()
+  const { isSupportedOceanNetwork } = useNetworkMetadata()
   const { getOpcFeeForToken } = useMarketMetadata()
   const { isInPurgatory, isAssetNetwork } = useAsset()
   const isMounted = useIsMounted()
@@ -81,16 +84,24 @@ export default function Download({
     async function init() {
       if (
         asset.accessDetails.addressOrId === ZERO_ADDRESS ||
-        asset.accessDetails.type === 'free' ||
-        isLoading
+        asset.accessDetails.type === 'free'
       )
         return
 
-      !orderPriceAndFees && setIsPriceLoading(true)
+      try {
+        !orderPriceAndFees && setIsPriceLoading(true)
 
-      const _orderPriceAndFees = await getOrderPriceAndFees(asset, ZERO_ADDRESS)
-      setOrderPriceAndFees(_orderPriceAndFees)
-      !orderPriceAndFees && setIsPriceLoading(false)
+        const _orderPriceAndFees = await getOrderPriceAndFees(
+          asset,
+          ZERO_ADDRESS,
+          signer
+        )
+        setOrderPriceAndFees(_orderPriceAndFees)
+        !orderPriceAndFees && setIsPriceLoading(false)
+      } catch (error) {
+        LoggerInstance.error('getOrderPriceAndFees', error)
+        setIsPriceLoading(false)
+      }
     }
 
     init()
@@ -101,7 +112,7 @@ export default function Download({
      * Not adding isLoading and getOpcFeeForToken because we set these here. It is a compromise
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [asset, accountId, getOpcFeeForToken, isUnsupportedPricing])
+  }, [asset, getOpcFeeForToken, isUnsupportedPricing])
 
   useEffect(() => {
     setHasDatatoken(Number(dtBalance) >= 1)
@@ -153,7 +164,7 @@ export default function Download({
           )[3]
         )
 
-        await downloadFile(web3, asset, accountId, validOrderTx, dataParams)
+        await downloadFile(signer, asset, accountId, validOrderTx, dataParams)
       } else {
         setStatusText(
           getOrderFeedback(
@@ -161,12 +172,19 @@ export default function Download({
             asset.accessDetails.datatoken?.symbol
           )[asset.accessDetails.type === 'fixed' ? 2 : 1]
         )
-        const orderTx = await order(web3, asset, orderPriceAndFees, accountId)
-        if (!orderTx) {
+        const orderTx = await order(
+          signer,
+          asset,
+          orderPriceAndFees,
+          accountId,
+          hasDatatoken
+        )
+        const tx = await orderTx.wait()
+        if (!tx) {
           throw new Error()
         }
         setIsOwned(true)
-        setValidOrderTx(orderTx.transactionHash)
+        setValidOrderTx(tx.transactionHash)
       }
     } catch (error) {
       LoggerInstance.error(error)
@@ -199,6 +217,7 @@ export default function Download({
       consumableFeedback={consumableFeedback}
       retry={retry}
       isSupportedOceanNetwork={isSupportedOceanNetwork}
+      isAccountConnected={isConnected}
     />
   )
 
diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx
index 61e4eb987c..9b02acb1de 100644
--- a/src/components/Asset/AssetActions/index.tsx
+++ b/src/components/Asset/AssetActions/index.tsx
@@ -1,10 +1,9 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import Compute from './Compute'
-import Download from './Download/Download'
+import Download from './Download'
 import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
 import { compareAsBN } from '@utils/numbers'
 import { useAsset } from '@context/Asset'
-import Web3Feedback from '@shared/Web3Feedback'
 import { getFileDidInfo, getFileInfo } from '@utils/provider'
 import { getOceanConfig } from '@utils/ocean'
 import { useCancelToken } from '@hooks/useCancelToken'

From befa473c0f31cbf382ac2e09be517b3421cfaa59 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 30 May 2023 15:27:57 +0200
Subject: [PATCH 092/113] feat: update types

---
 src/@types/ConsumerParameters.d.ts                    |  9 ---------
 src/@types/MetadataExtended.d.ts                      | 11 -----------
 src/@types/ServiceExtended.d.ts                       |  9 ---------
 src/@utils/ddo.ts                                     |  4 ++--
 .../Asset/AssetActions/Compute/_constants.ts          |  2 +-
 .../ConsumerParameters/FormConsumerParameters.tsx     |  2 +-
 .../AssetActions/ConsumerParameters/_validation.ts    |  1 +
 .../Asset/AssetActions/Download/_validation.ts        |  1 +
 src/components/Asset/Edit/EditMetadata.tsx            |  8 +++++---
 src/components/Asset/Edit/_constants.ts               |  6 +++---
 src/components/Publish/_utils.ts                      |  9 ++++++---
 11 files changed, 20 insertions(+), 42 deletions(-)
 delete mode 100644 src/@types/ConsumerParameters.d.ts
 delete mode 100644 src/@types/MetadataExtended.d.ts
 delete mode 100644 src/@types/ServiceExtended.d.ts

diff --git a/src/@types/ConsumerParameters.d.ts b/src/@types/ConsumerParameters.d.ts
deleted file mode 100644
index c3476f9015..0000000000
--- a/src/@types/ConsumerParameters.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface ConsumerParameter {
-  name: string
-  type: 'text' | 'number' | 'boolean' | 'select'
-  label: string
-  required: boolean
-  description: string
-  default: string
-  options?: string
-}
diff --git a/src/@types/MetadataExtended.d.ts b/src/@types/MetadataExtended.d.ts
deleted file mode 100644
index 7fd80512fa..0000000000
--- a/src/@types/MetadataExtended.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Metadata } from '@oceanprotocol/lib'
-
-// declaring into global scope to be able to use this as
-// ambiant types despite the above imports
-declare global {
-  interface MetadataExtended extends Metadata {
-    algorithm?: MetadataAlgorithm & {
-      consumerParameters: ConsumerParameter[]
-    }
-  }
-}
diff --git a/src/@types/ServiceExtended.d.ts b/src/@types/ServiceExtended.d.ts
deleted file mode 100644
index cf76227314..0000000000
--- a/src/@types/ServiceExtended.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Service } from '@oceanprotocol/lib'
-
-// declaring into global scope to be able to use this as
-// ambiant types despite the above imports
-declare global {
-  interface ServiceExtended extends Service {
-    consumerParameters?: ConsumerParameter[]
-  }
-}
diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 174c0dbd1f..b087955863 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -9,14 +9,14 @@ import {
 import {
   Arweave,
   Asset,
+  ConsumerParameter,
   DDO,
   FileInfo,
   GraphqlQuery,
   Ipfs,
   Service,
   Smartcontract,
-  UrlFile,
-  UserCustomParameters
+  UrlFile
 } from '@oceanprotocol/lib'
 import { checkJson } from './codemirror'
 
diff --git a/src/components/Asset/AssetActions/Compute/_constants.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
index ab4fe3eec8..6da694f6f7 100644
--- a/src/components/Asset/AssetActions/Compute/_constants.ts
+++ b/src/components/Asset/AssetActions/Compute/_constants.ts
@@ -1,4 +1,4 @@
-import { UserCustomParameters } from '@oceanprotocol/lib'
+import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
 import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index a472e5569b..1fb68ebed9 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -3,7 +3,7 @@ import Input from '@components/@shared/FormInput'
 import Label from '@components/@shared/FormInput/Label'
 import { Field, useField } from 'formik'
 import styles from './FormConsumerParameters.module.css'
-import { UserCustomParameters } from '@oceanprotocol/lib'
+import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'
 
 export function getDefaultValues(
   parameters: ConsumerParameter[]
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
index b831b915f3..3f60af0b72 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
+++ b/src/components/Asset/AssetActions/ConsumerParameters/_validation.ts
@@ -1,3 +1,4 @@
+import { ConsumerParameter } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import { SchemaLike } from 'yup/lib/types'
 
diff --git a/src/components/Asset/AssetActions/Download/_validation.ts b/src/components/Asset/AssetActions/Download/_validation.ts
index 0460b53fc0..12bfdade2b 100644
--- a/src/components/Asset/AssetActions/Download/_validation.ts
+++ b/src/components/Asset/AssetActions/Download/_validation.ts
@@ -1,5 +1,6 @@
 import * as Yup from 'yup'
 import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
+import { ConsumerParameter } from '@oceanprotocol/lib'
 
 export function getDownloadValidationSchema(
   parameters: ConsumerParameter[]
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index 38faf611d4..f93fe8cd21 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -5,7 +5,9 @@ import {
   FixedRateExchange,
   Asset,
   Datatoken,
-  Nft
+  Nft,
+  Metadata,
+  Service
 } from '@oceanprotocol/lib'
 import { validationSchema } from './_validation'
 import { getInitialValues } from './_constants'
@@ -94,7 +96,7 @@ export default function Edit({
       let updatedFiles = asset.services[0].files
       const linksTransformed = values.links?.length &&
         values.links[0].valid && [sanitizeUrl(values.links[0].url)]
-      const updatedMetadata: MetadataExtended = {
+      const updatedMetadata: Metadata = {
         ...asset.metadata,
         name: values.name,
         description: values.description,
@@ -139,7 +141,7 @@ export default function Edit({
         )
         updatedFiles = filesEncrypted
       }
-      const updatedService: ServiceExtended = {
+      const updatedService: Service = {
         ...asset.services[0],
         timeout: mapTimeoutStringToSeconds(values.timeout),
         files: updatedFiles
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index e573167381..99809c943a 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -1,10 +1,10 @@
-import { ServiceComputeOptions } from '@oceanprotocol/lib'
+import { Metadata, Service, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { parseConsumerParameters, secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
 
 export function getInitialValues(
-  metadata: MetadataExtended,
-  service: ServiceExtended,
+  metadata: Metadata,
+  service: Service,
   price: string,
   paymentCollector: string,
   assetState: string
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index 09dde27d39..8416f8e630 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -10,7 +10,10 @@ import {
   NftCreateData,
   NftFactory,
   ZERO_ADDRESS,
-  getEventFromTx
+  getEventFromTx,
+  ConsumerParameter,
+  Metadata,
+  Service
 } from '@oceanprotocol/lib'
 import { mapTimeoutStringToSeconds, normalizeFile } from '@utils/ddo'
 import { generateNftCreateData } from '@utils/nft'
@@ -132,7 +135,7 @@ export async function transformPublishFormToDdo(
     ? transformConsumerParameters(consumerParameters)
     : undefined
 
-  const newMetadata: MetadataExtended = {
+  const newMetadata: Metadata = {
     created: currentTime,
     updated: currentTime,
     type,
@@ -187,7 +190,7 @@ export async function transformPublishFormToDdo(
     files[0].valid &&
     (await getEncryptedFiles(file, chainId, providerUrl.url))
 
-  const newService: ServiceExtended = {
+  const newService: Service = {
     id: getHash(datatokenAddress + filesEncrypted),
     type: access,
     files: filesEncrypted || '',

From 927c21e2a3b9787dbb1d376e457d18e108256a78 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 30 May 2023 17:51:02 +0200
Subject: [PATCH 093/113] fix: validate form on consumer parameter deletion

---
 .../FormInput/InputElement/ConsumerParameters/FormActions.tsx  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index eb7db6b2db..ae13ced34f 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -52,9 +52,6 @@ export default function FormActions({
   const deleteParameter = (index: number) => {
     helpers.setValue(field.value.filter((p, i) => i !== index))
 
-    // Reset index on formik
-    setParamPropsTouched(index, false)
-
     const previousIndex = Math.max(0, index - 1)
     onParameterDeleted && onParameterDeleted(previousIndex)
   }

From 38266753254dd52d53e3afa3d325cfb708e50d70 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Thu, 1 Jun 2023 14:07:54 +0200
Subject: [PATCH 094/113] feat: add key value input placeholder props

---
 .../ConsumerParameters/OptionsInput.tsx           |  8 +++++++-
 .../InputElement/KeyValueInput/index.module.css   |  4 ++--
 .../InputElement/KeyValueInput/index.tsx          | 15 +++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
index 59bce0700b..cf8b5ff15b 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
@@ -18,7 +18,13 @@ export default function OptionsInput(props: KeyValueInputProps): ReactElement {
 
   return (
     <div className={cx({ container: true, hasError: hasError() })}>
-      <Field {...props} component={InputKeyValue} uniqueKeys />
+      <Field
+        {...props}
+        component={InputKeyValue}
+        uniqueKeys
+        keyPlaceholder="value"
+        valuePlaceholder="label"
+      />
 
       {hasError() && (
         <div className={styles.error}>
diff --git a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
index 3d61f65e9c..0a7fa2e8df 100644
--- a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
@@ -17,8 +17,8 @@
   color: var(--brand-alert-red);
 }
 
-.hasError .pairsContainer input,
-.hasError .pairsContainer input:focus,
+.hasError .pairsContainer .keyInput,
+.hasError .pairsContainer .keyInput:focus,
 .hasError .pairsContainer [class*='prefix'],
 .hasError .pairsContainer [class*='postfix'] {
   color: var(--brand-alert-red);
diff --git a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
index e30ad1a973..0e947507f0 100644
--- a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.tsx
@@ -24,11 +24,15 @@ export interface KeyValuePair {
 export interface KeyValueInputProps extends Omit<InputProps, 'value'> {
   value: KeyValuePair[]
   uniqueKeys?: boolean
+  keyPlaceholder?: string
+  valuePlaceholder?: string
 }
 
 export default function InputKeyValue({
   uniqueKeys = false,
   value,
+  keyPlaceholder = 'key',
+  valuePlaceholder = 'value',
   ...props
 }: KeyValueInputProps): ReactElement {
   const { label, help, prominentHelp, form, field } = props
@@ -108,16 +112,17 @@ export default function InputKeyValue({
 
       <div className={styles.pairsContainer}>
         <InputElement
+          className={styles.keyInput}
           name={`${field.name}.key`}
-          placeholder={'key'}
+          placeholder={keyPlaceholder}
           value={`${currentKey}`}
           onChange={handleChange}
         />
 
         <InputElement
-          className={`${styles.input}`}
+          className={styles.input}
           name={`${field.name}.value`}
-          placeholder={'value'}
+          placeholder={valuePlaceholder}
           value={`${currentValue}`}
           onChange={handleChange}
         />
@@ -135,7 +140,9 @@ export default function InputKeyValue({
         </Button>
 
         {uniqueKeys && !hasOnlyUniqueKeys && (
-          <p className={styles.error}>The key must be unique</p>
+          <p
+            className={styles.error}
+          >{`The ${keyPlaceholder} field must be unique`}</p>
         )}
       </div>
 

From c6705093b2d3992c475fb9fcd7f204a7e202775c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 19 Jun 2023 11:35:58 +0200
Subject: [PATCH 095/113] fix: handle boolean type consumer parameters in
 consume form (#38)

---
 .../Compute/FormComputeDataset.tsx            | 18 +------
 .../Asset/AssetActions/Compute/index.tsx      | 48 ++++++++++++++-----
 .../FormConsumerParameters.tsx                |  6 ++-
 .../AssetActions/ConsumerParameters/index.tsx | 29 +++++++++++
 .../Asset/AssetActions/Download/index.tsx     | 11 ++++-
 5 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 2519e12889..5615782acf 100644
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -8,9 +8,8 @@ import ButtonBuy from '../ButtonBuy'
 import PriceOutput from './PriceOutput'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../content/pages/startComputeDataset.json'
-import { Asset, UserCustomParameters, ZERO_ADDRESS } from '@oceanprotocol/lib'
+import { Asset, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
-import { useMarketMetadata } from '@context/MarketMetadata'
 import { getTokenBalanceFromSymbol } from '@utils/wallet'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
@@ -41,7 +40,6 @@ export default function FormStartCompute({
   dtBalanceSelectedComputeAsset,
   selectedComputeAssetType,
   selectedComputeAssetTimeout,
-  setUserCustomParameters,
   stepText,
   isConsumable,
   consumableFeedback,
@@ -71,9 +69,6 @@ export default function FormStartCompute({
   dtBalanceSelectedComputeAsset?: string
   selectedComputeAssetType?: string
   selectedComputeAssetTimeout?: string
-  setUserCustomParameters: React.Dispatch<
-    React.SetStateAction<UserCustomParameters>
-  >
   stepText: string
   isConsumable: boolean
   consumableFeedback: string
@@ -83,7 +78,6 @@ export default function FormStartCompute({
   validUntil?: string
   retry: boolean
 }): ReactElement {
-  const { siteContent } = useMarketMetadata()
   const { address: accountId, isConnected } = useAccount()
   const { balance } = useBalance()
   const { isSupportedOceanNetwork } = useNetworkMetadata()
@@ -135,16 +129,6 @@ export default function FormStartCompute({
     fetchAlgorithmAssetExtended()
   }, [values.algorithm, accountId, isConsumable])
 
-  useEffect(() => {
-    if (!values) return
-
-    setUserCustomParameters({
-      dataServiceParams: values.dataServiceParams,
-      algoServiceParams: values.algoServiceParams,
-      algoParams: values.algoParams
-    })
-  }, [setUserCustomParameters, values])
-
   //
   // Set price for calculation output
   //
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index aab6689122..7c766d1643 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -13,7 +13,8 @@ import {
   ComputeOutput,
   ProviderComputeInitializeResults,
   unitsToAmount,
-  ProviderFees
+  ProviderFees,
+  UserCustomParameters
 } from '@oceanprotocol/lib'
 import { toast } from 'react-toastify'
 import Price from '@shared/Price'
@@ -48,7 +49,7 @@ import { useAccount, useSigner } from 'wagmi'
 import { getDummySigner } from '@utils/wallet'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
 import { useAsset } from '@context/Asset'
-import { FormConsumerParameter } from '@components/Publish/_types'
+import { parseConsumerParameterValues } from '../ConsumerParameters'
 
 const refreshInterval = 10000 // 10 sec.
 
@@ -106,11 +107,6 @@ export default function Compute({
   const [isLoadingJobs, setIsLoadingJobs] = useState(false)
   const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const [retry, setRetry] = useState<boolean>(false)
-  const [userCustomParameters, setUserCustomParameters] = useState<{
-    dataServiceParams: FormConsumerParameter[]
-    algoServiceParams: FormConsumerParameter[]
-    algoParams: FormConsumerParameter[]
-  }>()
   const { isSupportedOceanNetwork } = useNetworkMetadata()
   const { isAssetNetwork } = useAsset()
 
@@ -343,7 +339,11 @@ export default function Compute({
     toast.error(errorMsg)
   }, [error])
 
-  async function startJob(): Promise<void> {
+  async function startJob(userCustomParameters: {
+    dataServiceParams?: UserCustomParameters
+    algoServiceParams?: UserCustomParameters
+    algoParams?: UserCustomParameters
+  }): Promise<void> {
     try {
       setIsOrdering(true)
       setIsOrdered(false)
@@ -446,6 +446,32 @@ export default function Compute({
     }
   }
 
+  const onSubmit = async (values: {
+    algorithm: string
+    dataServiceParams?: UserCustomParameters
+    algoServiceParams?: UserCustomParameters
+    algoParams?: UserCustomParameters
+  }) => {
+    if (!values.algorithm) return
+
+    const userCustomParameters = {
+      dataServiceParams: parseConsumerParameterValues(
+        values?.dataServiceParams,
+        asset.services[0].consumerParameters
+      ),
+      algoServiceParams: parseConsumerParameterValues(
+        values?.algoServiceParams,
+        selectedAlgorithmAsset?.services[0].consumerParameters
+      ),
+      algoParams: parseConsumerParameterValues(
+        values?.algoParams,
+        selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters
+      )
+    }
+
+    await startJob(userCustomParameters)
+  }
+
   return (
     <>
       <div
@@ -494,10 +520,7 @@ export default function Compute({
             selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters
           )}
           enableReinitialize
-          onSubmit={async (values) => {
-            if (!values.algorithm) return
-            await startJob()
-          }}
+          onSubmit={onSubmit}
         >
           <FormStartComputeDataset
             algorithms={algorithmList}
@@ -530,7 +553,6 @@ export default function Compute({
             selectedComputeAssetTimeout={secondsToString(
               selectedAlgorithmAsset?.services[0]?.timeout
             )}
-            setUserCustomParameters={setUserCustomParameters}
             // lazy comment when removing pricingStepText
             stepText={computeStatusText}
             isConsumable={isConsumablePrice}
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 1fb68ebed9..0d7611ddc9 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -15,7 +15,7 @@ export function getDefaultValues(
         param.type === 'number'
           ? Number(param.default)
           : param.type === 'boolean'
-          ? param.default === 'true'
+          ? param.default.toString()
           : param.default
     })
   })
@@ -55,10 +55,12 @@ export default function FormConsumerParameters({
       </Label>
       <div className={styles.parametersContainer}>
         {parameters?.map((param) => {
+          const { default: paramDefault, ...rest } = param
+
           return (
             <div key={param.name} className={styles.parameter}>
               <Field
-                {...param}
+                {...rest}
                 component={Input}
                 name={`${name}.${param.name}`}
                 options={getParameterOptions(param)}
diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index 036ad19dc9..10fb24aa25 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -2,6 +2,35 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import FormConsumerParameters from './FormConsumerParameters'
 import styles from './index.module.css'
 import Tabs, { TabsItem } from '@components/@shared/atoms/Tabs'
+import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'
+
+export function parseConsumerParameterValues(
+  formValues?: UserCustomParameters,
+  parameters?: ConsumerParameter[]
+): UserCustomParameters {
+  if (!formValues) return
+
+  const parsedValues = {}
+  Object.entries(formValues)?.forEach((userCustomParameter) => {
+    const [userCustomParameterKey, userCustomParameterValue] =
+      userCustomParameter
+
+    const { type } = parameters.find(
+      (param) => param.name === userCustomParameterKey
+    )
+
+    Object.assign(parsedValues, {
+      [userCustomParameterKey]:
+        type === 'select' && userCustomParameterValue === ''
+          ? undefined
+          : type === 'boolean'
+          ? userCustomParameterValue === 'true'
+          : userCustomParameterValue
+    })
+  })
+
+  return parsedValues
+}
 
 export default function ConsumerParameters({
   asset,
diff --git a/src/components/Asset/AssetActions/Download/index.tsx b/src/components/Asset/AssetActions/Download/index.tsx
index b175e191b4..0905a3bdec 100644
--- a/src/components/Asset/AssetActions/Download/index.tsx
+++ b/src/components/Asset/AssetActions/Download/index.tsx
@@ -23,7 +23,9 @@ import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
 import { useAccount, useSigner } from 'wagmi'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
-import ConsumerParameters from '../ConsumerParameters'
+import ConsumerParameters, {
+  parseConsumerParameterValues
+} from '../ConsumerParameters'
 import { Form, Formik, useFormikContext } from 'formik'
 import { getDownloadValidationSchema } from './_validation'
 import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
@@ -266,7 +268,12 @@ export default function Download({
         asset?.services[0].consumerParameters
       )}
       onSubmit={async (values) => {
-        await handleOrderOrDownload(values?.dataServiceParams)
+        const dataServiceParams = parseConsumerParameterValues(
+          values?.dataServiceParams,
+          asset.services[0].consumerParameters
+        )
+
+        await handleOrderOrDownload(dataServiceParams)
       }}
     >
       <Form>

From e8f4cd9316de5cf88be0edb4a6f7dc9d442636d9 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:24:54 +0200
Subject: [PATCH 096/113] Update src/components/Publish/_validation.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 src/components/Publish/_validation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 44b968cb21..62a385ea29 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -2,7 +2,7 @@ import { FileInfo } from '@oceanprotocol/lib'
 import { MAX_DECIMALS } from '@utils/constants'
 import { getMaxDecimalsValidation } from '@utils/numbers'
 import * as Yup from 'yup'
-import { testLinks } from '../../@utils/yup'
+import { testLinks } from '@utils/yup'
 import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/_validation'
 
 // TODO: conditional validation

From f549822349823bdc5185387ae813eaf4544fbd35 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:03 +0200
Subject: [PATCH 097/113] Update
 src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../ConsumerParameters/FormConsumerParameters.module.css        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
index 8a12b1d1bf..79912a486e 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css
@@ -4,7 +4,7 @@
 }
 
 .parametersContainer {
-  composes: selection from '../../../@shared/FormInput/InputElement/AssetSelection/index.module.css';
+  composes: selection from '@shared/FormInput/InputElement/AssetSelection/index.module.css';
 
   padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
   max-height: 50vh;

From f520907bdf35d84c470dde4fbfeeb04bc6a3b55d Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:09 +0200
Subject: [PATCH 098/113] Update src/components/Asset/Edit/_validation.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 src/components/Asset/Edit/_validation.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 7b0c3ab2a7..af8093f3cf 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -1,8 +1,8 @@
 import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import { isAddress } from 'ethers/lib/utils'
-import { testLinks } from '../../../@utils/yup'
-import { validationConsumerParameters } from '@components/@shared/FormInput/InputElement/ConsumerParameters/_validation'
+import { testLinks } from '@utils/yup'
+import { validationConsumerParameters } from '@shared/FormInput/InputElement/ConsumerParameters/_validation'
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()

From 4d895793c0ee987a4524e6e4c209890c6b260870 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:22 +0200
Subject: [PATCH 099/113] Update
 src/components/Asset/AssetActions/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 src/components/Asset/AssetActions/ConsumerParameters/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index 10fb24aa25..6b8ea9a451 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import FormConsumerParameters from './FormConsumerParameters'
 import styles from './index.module.css'
-import Tabs, { TabsItem } from '@components/@shared/atoms/Tabs'
+import Tabs, { TabsItem } from '@shared/atoms/Tabs'
 import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'
 
 export function parseConsumerParameterValues(

From 50f26272d84eef42114ab91bff117e267c55bcf2 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:33 +0200
Subject: [PATCH 100/113] Update
 src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../ConsumerParameters/FormConsumerParameters.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 0d7611ddc9..8991473f09 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
-import Input from '@components/@shared/FormInput'
-import Label from '@components/@shared/FormInput/Label'
+import Input from '@shared/FormInput'
+import Label from '@shared/FormInput/Label'
 import { Field, useField } from 'formik'
 import styles from './FormConsumerParameters.module.css'
 import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'

From 90ceb3b3b8419e4c1873353c7c52440c66c762f7 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:41 +0200
Subject: [PATCH 101/113] Update src/components/@shared/FormInput/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 src/components/@shared/FormInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 84c60d2361..6a5459080c 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -18,7 +18,7 @@ import Markdown from '@shared/Markdown'
 import FormHelp from './Help'
 import { AssetSelectionAsset } from '@shared/FormInput/InputElement/AssetSelection'
 import { BoxSelectionOption } from '@shared/FormInput/InputElement/BoxSelection'
-import { getObjectPropertyByPath } from '../../../@utils'
+import { getObjectPropertyByPath } from '@utils'
 
 const cx = classNames.bind(styles)
 

From 26cebc710b85978548f103a0aadc22f8a254aee6 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:47 +0200
Subject: [PATCH 102/113] Update
 src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../@shared/FormInput/InputElement/ConsumerParameters/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index a55d336540..c39dc57d18 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { Field, useField } from 'formik'
 import Input, { InputProps } from '../..'
 import { FormConsumerParameter } from '../../../../Publish/_types'
-import Tabs from '../../../atoms/Tabs'
+import Tabs from '@shared/atoms/Tabs'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'
 import OptionsInput from './OptionsInput'

From da4c0c3dbb3475764f22ddb15f8a43657505cf47 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:25:54 +0200
Subject: [PATCH 103/113] Update
 src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../@shared/FormInput/InputElement/ConsumerParameters/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index c39dc57d18..489e70b808 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { Field, useField } from 'formik'
 import Input, { InputProps } from '../..'
-import { FormConsumerParameter } from '../../../../Publish/_types'
+import { FormConsumerParameter } from '@components/Publish/_types'
 import Tabs from '@shared/atoms/Tabs'
 import FormActions from './FormActions'
 import DefaultInput from './DefaultInput'

From dbd608177f9dc5e4b9cac6438b7778d4fa93184d Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:26:12 +0200
Subject: [PATCH 104/113] Update
 src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../FormInput/InputElement/ConsumerParameters/OptionsInput.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
index cf8b5ff15b..b02614f2de 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { FormPublishData } from '@components/Publish/_types'
 import classNames from 'classnames/bind'
 import { ErrorMessage, Field, useFormikContext } from 'formik'
-import { getObjectPropertyByPath } from '../../../../../@utils'
+import { getObjectPropertyByPath } from '@utils'
 import InputKeyValue, { KeyValueInputProps } from '../KeyValueInput'
 import styles from './OptionsInput.module.css'
 

From 4b46b198848933fe120af605b042ef0f31602856 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:26:41 +0200
Subject: [PATCH 105/113] Update
 src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 .../FormInput/InputElement/ConsumerParameters/FormActions.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
index ae13ced34f..faa4e65bca 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import Button from '@components/@shared/atoms/Button'
+import Button from '@shared/atoms/Button'
 import styles from './FormActions.module.css'
 import { useField, useFormikContext } from 'formik'
 import {

From 1f12a86ab07116cb4aa0a79b93182ac2f51d6678 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:26:56 +0200
Subject: [PATCH 106/113] Update src/@utils/provider.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>
---
 src/@utils/provider.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@utils/provider.ts b/src/@utils/provider.ts
index bb61e16e59..67ea8905c5 100644
--- a/src/@utils/provider.ts
+++ b/src/@utils/provider.ts
@@ -15,7 +15,7 @@ import {
   AbiItem,
   UserCustomParameters
 } from '@oceanprotocol/lib'
-import { KeyValuePair } from '@components/@shared/FormInput/InputElement/KeyValueInput'
+import { KeyValuePair } from '@shared/FormInput/InputElement/KeyValueInput'
 import { Signer } from 'ethers'
 import { getValidUntilTime } from './compute'
 

From 9c8dc3c1d781e22c300ac1e4da95d17b54859910 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Wed, 28 Jun 2023 14:56:37 +0200
Subject: [PATCH 107/113] fix: import paths

---
 .../FormInput/InputElement/ConsumerParameters/OptionsInput.tsx  | 2 +-
 src/components/@shared/FormInput/index.tsx                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
index b02614f2de..b254f39a05 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { FormPublishData } from '@components/Publish/_types'
 import classNames from 'classnames/bind'
 import { ErrorMessage, Field, useFormikContext } from 'formik'
-import { getObjectPropertyByPath } from '@utils'
+import { getObjectPropertyByPath } from '@utils/index'
 import InputKeyValue, { KeyValueInputProps } from '../KeyValueInput'
 import styles from './OptionsInput.module.css'
 
diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 6a5459080c..7198681985 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -18,7 +18,7 @@ import Markdown from '@shared/Markdown'
 import FormHelp from './Help'
 import { AssetSelectionAsset } from '@shared/FormInput/InputElement/AssetSelection'
 import { BoxSelectionOption } from '@shared/FormInput/InputElement/BoxSelection'
-import { getObjectPropertyByPath } from '@utils'
+import { getObjectPropertyByPath } from '@utils/index'
 
 const cx = classNames.bind(styles)
 

From 161a28ddd4b887bf9eb9ff8b37b6e785cc47ceae Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 30 Jun 2023 11:45:58 +0200
Subject: [PATCH 108/113] refactor: add consumer parameters validation types

---
 .../ConsumerParameters/_validation.ts         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
index 1c736ccc6e..6e27f0cbbf 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
@@ -1,16 +1,27 @@
-import { FormConsumerParameter } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData,
+  FormPublishService
+} from '@components/Publish/_types'
 import * as Yup from 'yup'
 import { SchemaLike } from 'yup/lib/types'
 import { paramTypes } from '.'
 
+interface TestContextExtended extends Yup.TestContext {
+  from: {
+    value: FormPublishData['metadata'] | FormPublishService
+  }[]
+}
+
 export const validationConsumerParameters: {
   [key in keyof FormConsumerParameter]: SchemaLike
 } = {
   name: Yup.string()
     .test('unique', 'Parameter names must be unique', (name, context) => {
-      // TODO: revert any
-      // from is not yet correctly typed: https://github.com/jquense/yup/issues/398#issuecomment-916693907
-      const [parentFormObj, nextParentFormObj] = (context as any).from
+      const [parentFormObj, nextParentFormObj] = (
+        context as TestContextExtended
+      ).from
+
       if (
         !nextParentFormObj?.value?.consumerParameters ||
         nextParentFormObj.value.consumerParameters.length === 1

From c776646a54e9444528b59fd847e146e9f1765eed Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 30 Jun 2023 11:59:35 +0200
Subject: [PATCH 109/113] feat: add string length min/max to consumer
 parameters validation

---
 .../ConsumerParameters/_validation.ts             | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
index 6e27f0cbbf..518ecb2571 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts
@@ -34,10 +34,21 @@ export const validationConsumerParameters: {
       )
       return occasions.length === 1
     })
+    .min(4, (param) => `Name must be at least ${param.min} characters`)
+    .max(50, (param) => `Name must have maximum ${param.max} characters`)
     .required('Required'),
   type: Yup.string().oneOf(paramTypes).required('Required'),
-  description: Yup.string().required('Required'),
-  label: Yup.string().required('Required'),
+  description: Yup.string()
+    .min(10, (param) => `Description must be at least ${param.min} characters`)
+    .max(
+      500,
+      (param) => `Description must have maximum ${param.max} characters`
+    )
+    .required('Required'),
+  label: Yup.string()
+    .min(4, (param) => `Label must be at least ${param.min} characters`)
+    .max(50, (param) => `Label must have maximum ${param.max} characters`)
+    .required('Required'),
   required: Yup.string().oneOf(['optional', 'required']).required('Required'),
   default: Yup.mixed().required('Required'),
   options: Yup.array().when('type', {

From 73e000c7ccfce5b1fbcf0e56987cde8c46c22430 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 3 Jul 2023 14:15:55 +0200
Subject: [PATCH 110/113] feat: add cp description to consume form

---
 .../AssetActions/ConsumerParameters/FormConsumerParameters.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
index 8991473f09..11298f33a0 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx
@@ -62,6 +62,7 @@ export default function FormConsumerParameters({
               <Field
                 {...rest}
                 component={Input}
+                help={param.description}
                 name={`${name}.${param.name}`}
                 options={getParameterOptions(param)}
                 size="small"

From d6bdd1ec678c9a44517bb40e15dfaece0ecc1ae8 Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Fri, 7 Jul 2023 14:02:39 +0200
Subject: [PATCH 111/113] feat: reduce character limit in CP tab title

---
 .../FormInput/InputElement/ConsumerParameters/index.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
index 489e70b808..aa60d7f09c 100644
--- a/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx
@@ -43,7 +43,10 @@ export function ConsumerParameters(props: InputProps): ReactElement {
         onIndexSelected={setTabIndex}
         items={field.value.map((param, index) => {
           return {
-            title: param?.name || 'New parameter',
+            title:
+              param?.name?.length > 15
+                ? `${param?.name?.slice(0, 15)}...`
+                : param?.name || 'New parameter',
             content: (
               <div>
                 {props.fields?.map((subField: InputProps) => {

From b9f9359d34310028992a5ec37d6e852a84ec912c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Mon, 10 Jul 2023 15:09:30 +0200
Subject: [PATCH 112/113] feat: update CP fields' placeholders and helpers

---
 content/publish/consumerParameters.json | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/content/publish/consumerParameters.json b/content/publish/consumerParameters.json
index 7eb2b15dc4..e17db34b25 100644
--- a/content/publish/consumerParameters.json
+++ b/content/publish/consumerParameters.json
@@ -10,8 +10,8 @@
           {
             "name": "name",
             "label": "Parameter Name",
-            "placeholder": "custom_parameter",
-            "help": "The name of the parameter to ask for. This will be the JSON key for this parameter.",
+            "placeholder": "e.g. iterations",
+            "help": "The parameter name (this is sent as HTTP param or key towards algo).",
             "type": "text",
             "required": true
           },
@@ -19,21 +19,22 @@
           {
             "name": "label",
             "label": "Parameter Label",
-            "placeholder": "Custom Parameter",
+            "placeholder": "e.g. Iterations",
+            "help": "The field label which is displayed.",
             "type": "text",
             "required": true
           },
           {
             "name": "description",
             "label": "Description",
-            "placeholder": "A custom parameter changing the asset's behaviour.",
+            "placeholder": "e.g. How many iterations should the algorithm perform.",
             "type": "text",
             "required": true
           },
           {
             "name": "type",
             "label": "Parameter Type",
-            "help": "The type of the parameter to ask for. This influences how the parameter is displayed for the consumer before the asset is used.",
+            "help": "The field type (text, number, boolean, select). This influences how the parameter is displayed for the consumer before the asset is used.",
             "type": "select",
             "options": ["number", "text", "boolean", "select"],
             "required": true
@@ -41,7 +42,7 @@
           {
             "name": "options",
             "label": "Select Options",
-            "placeholder": "Define the options for the user to select from",
+            "help": "For select types, a list of options.",
             "type": "creatableSelect",
             "required": true
           },
@@ -55,7 +56,7 @@
           {
             "name": "default",
             "label": "Default Value",
-            "placeholder": "Define the default value for the current parameter",
+            "placeholder": "e.g. 6",
             "required": true
           }
         ]

From adeba3ff772b1e4669bf336ead51c584a9eba77c Mon Sep 17 00:00:00 2001
From: Luca Milanese <luca.milanese90@gmail.com>
Date: Tue, 5 Sep 2023 11:51:39 +0200
Subject: [PATCH 113/113] fix: show only relevant CPs in asset actions

---
 .../Asset/AssetActions/ConsumerParameters/index.tsx      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
index 6b8ea9a451..ebf3b3077d 100644
--- a/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
+++ b/src/components/Asset/AssetActions/ConsumerParameters/index.tsx
@@ -43,7 +43,7 @@ export default function ConsumerParameters({
 
   const updateTabs = useCallback(() => {
     const tabs = []
-    if (asset?.services[0]?.consumerParameters) {
+    if (asset?.services[0]?.consumerParameters?.length > 0) {
       tabs.push({
         title: 'Data Service',
         content: (
@@ -54,7 +54,7 @@ export default function ConsumerParameters({
         )
       })
     }
-    if (selectedAlgorithmAsset?.services[0]?.consumerParameters) {
+    if (selectedAlgorithmAsset?.services[0]?.consumerParameters?.length > 0) {
       tabs.push({
         title: 'Algo Service',
         content: (
@@ -65,7 +65,10 @@ export default function ConsumerParameters({
         )
       })
     }
-    if (selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters) {
+    if (
+      selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters?.length >
+      0
+    ) {
       tabs.push({
         title: 'Algo Params',
         content: (