Feat: Consumer Parameters (#1921)

* feat: add consumer parameters to publish

* fix: publish form validation

* feat: update consumer parameters form

* feat: add consumer parameter types

* feat: update consumer parameter validation

* feat: add consumer parameters structure

* feat: add InputOptions error handling

* feat: update consumer parameters validation

* feat: update transformPublishFromToDdo

* feat: add default options to parameter options

* fix: value handling for select and mutliselect

* feat: update "add new parameter" button label

* feat: remove unused publish form sections

* chore: remove console.log

* chore: remove comments

* feat: remove multiselect

* feat: add consumer parameters section label

* feat: update types

* feat: update edit form fields

* feat: parse consumer parameters in edit form

* feat: add consumer parameters field to edit

* feat: transform consumer parameters values before edit

* feat: update "required" type to select

* feat: update "required" type to select on edit form

* fix: error object access

* fix: edit flow crash

* fix: validation when consumer parameters are not selected

* feat: update validation for default consumer parameters value

* fix: types

* feat: add service consumer parameters to publish form

* chore: remove console.log

* feat: add service consumer parameters edit

* chore: remove comments

* fix: form edit metadata types

* feat: add consume algo parameter structure

* feat: consumer parameter required default value condition

* feat: add consumer parameter groups to assetActions

* fix: consumer parameters grouping

* feat: update consumer parameters alignment

* feat: update types

* feat: allow service consumer parameters on dataset asset type

* feat: add consumer parameters to ddo updated values in edit form

* feat: add "data service" consumer parameters to consumption form

* feat: allow service parameters on all asset types

* feat: update parameter consume form design

* feat: update asset actions consume parameters location

* feat: add service parameters to download assets

* refactor: consumer parameters actions

* refactor: form action name

* refactor: consumer parameters default input

* refactor: consumer parameters select input

* refactor: consumer parameter input

* fix: props name

* refactor: variable naming

* refactor: consumer parameters form validation

* refactor: rename consumer parameters types

* refactor: extract consumer parameters form data to separate file

* refactor: rename type

* feat: controlled tabs for consumer params

* feat: restore default value as required

* refactor: parse values before edit

* feat: add form to handle consumer parameters consumption

* feat: send consumer params with download request

* feat: send consumer params with compute request

* feat: handle compute form initialization

* chore: remove unused dependency

* feat: handle download form data initialization

* chore: remove console.log

* feat: update types

* fix: consumer parameter value types

* feat: update ConsumerParameter type

* feat: update ConsumerParameter type

* chore: add comments

* refactor: consumer parameters inputs

* refactor: rename data and algo service params

* refactor: consumer parameters form

* refactor: consumer parameter form styling

* refactor: make headers input reusable as KeyValueInput

* refactor: refactorings, reduce duplication (WIP)

* refactor: usercustomparameters consumption form creation/validation

* refactor: return undefined consistently if property path not found on object

* refactor: reuse fieldType and fieldOptions in DefaultInput

* fix: parse ddo consumer parameters for edit form

* fix: asset view crash for assets w/o consumer params

* fix: publish preview for assets with no consumer params

* fix: revert accidential rename of algoService

* fix: revert publish navigation padding change

* feat: update consumer parameters' labels and helpers

* fix: consumer parameters validation

* feat: update consumer parameter helper wording

* chore: merge conflicts

* feat: update types

* fix: validate form on consumer parameter deletion

* feat: add key value input placeholder props

* fix: handle boolean type consumer parameters in consume form (#38)

* Update src/components/Publish/_validation.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/Asset/Edit/_validation.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/Asset/AssetActions/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/@shared/FormInput/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/@shared/FormInput/InputElement/ConsumerParameters/index.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/@shared/FormInput/InputElement/ConsumerParameters/OptionsInput.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.tsx

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* Update src/@utils/provider.ts

Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

* fix: import paths

* refactor: add consumer parameters validation types

* feat: add string length min/max to consumer parameters validation

* feat: add cp description to consume form

* feat: reduce character limit in CP tab title

* feat: update CP fields' placeholders and helpers

* fix: show only relevant CPs in asset actions

---------

Co-authored-by: Luca Milanese <luca.milanese90@gmail.com>
Co-authored-by: Jamie Hewitt <jamie.hewitt15@gmail.com>

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 asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   }

content/publish/consumerParameters.json

@@ -0,0 +1,66 @@
+{
+  "consumerParameters": {
+    "fields": [
+      {
+        "name": "consumerParameters",
+        "label": "Custom parameters",
+        "type": "consumerParameters",
+        "required": false,
+        "fields": [
+          {
+            "name": "name",
+            "label": "Parameter Name",
+            "placeholder": "e.g. iterations",
+            "help": "The parameter name (this is sent as HTTP param or key towards algo).",
+            "type": "text",
+            "required": true
+          },
+
+          {
+            "name": "label",
+            "label": "Parameter Label",
+            "placeholder": "e.g. Iterations",
+            "help": "The field label which is displayed.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "description",
+            "label": "Description",
+            "placeholder": "e.g. How many iterations should the algorithm perform.",
+            "type": "text",
+            "required": true
+          },
+          {
+            "name": "type",
+            "label": "Parameter Type",
+            "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
+          },
+          {
+            "name": "options",
+            "label": "Select Options",
+            "help": "For select types, a list of options.",
+            "type": "creatableSelect",
+            "required": true
+          },
+          {
+            "name": "required",
+            "label": "Required",
+            "options": ["optional", "required"],
+            "type": "select",
+            "required": true
+          },
+          {
+            "name": "default",
+            "label": "Default Value",
+            "placeholder": "e.g. 6",
+            "required": true
+          }
+        ]
+      }
+    ]
+  }
+}

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 asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
       }
     ]
   },

src/@types/AssetExtended.d.ts

@@ -6,5 +6,7 @@ declare global {
   interface AssetExtended extends Asset {
     accessDetails?: AccessDetails
     views?: number
+    metadata: MetadataExtended
+    services: ServiceExtended[]
   }
 }

src/@utils/ddo.ts

@@ -2,10 +2,14 @@ import {
   ComputeEditForm,
   MetadataEditForm
 } from '@components/Asset/Edit/_types'
-import { FormPublishData } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
 import {
   Arweave,
   Asset,
+  ConsumerParameter,
   DDO,
   FileInfo,
   GraphqlQuery,
@@ -188,3 +192,30 @@ export function previewDebugPatch(
 
   return buildValuesPreview
 }
+
+export function parseConsumerParameters(
+  consumerParameters: ConsumerParameter[]
+): FormConsumerParameter[] {
+  if (!consumerParameters?.length) return []
+
+  return consumerParameters.map((param) => ({
+    ...param,
+    required: param.required ? 'required' : 'optional',
+    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'
+        : param.type === 'number'
+        ? Number(param.default)
+        : param.default
+  }))
+}

src/@utils/index.ts

@@ -17,3 +17,27 @@ export function sortAssets(items: Asset[], sorted: string[]) {
   })
   return items
 }
+
+export const isPlainObject = (object: any) => {
+  return object !== null && typeof object === 'object' && !Array.isArray(object)
+}
+
+export const getObjectPropertyByPath = (object: any, path = '') => {
+  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('.')
+  for (let i = 0, n = pathArray.length; i < n; ++i) {
+    const key = pathArray[i]
+    try {
+      if (key in object) {
+        object = object[key]
+      } else {
+        return undefined
+      }
+    } catch {
+      return undefined
+    }
+  }
+  return object
+}

src/@utils/provider.ts

@@ -13,11 +13,12 @@ import {
   ProviderInstance,
   UrlFile,
   AbiItem,
+  UserCustomParameters,
   getErrorMessage
 } from '@oceanprotocol/lib'
 // if customProviderUrl is set, we need to call provider using this custom endpoint
 import { customProviderUrl } from '../../app.config'
-import { QueryHeader } from '@shared/FormInput/InputElement/Headers'
+import { KeyValuePair } from '@shared/FormInput/InputElement/KeyValueInput'
 import { Signer } from 'ethers'
 import { getValidUntilTime } from './compute'
 import { toast } from 'react-toastify'
@@ -110,7 +111,7 @@ export async function getFileInfo(
   providerUrl: string,
   storageType: string,
   query?: string,
-  headers?: QueryHeader[],
+  headers?: KeyValuePair[],
   abi?: string,
   chainId?: number,
   method?: string
@@ -226,7 +227,8 @@ export async function downloadFile(
   signer: Signer,
   asset: AssetExtended,
   accountId: string,
-  validOrderTx?: string
+  validOrderTx?: string,
+  userCustomParameters?: UserCustomParameters
 ) {
   let downloadUrl
   try {
@@ -236,7 +238,8 @@ export async function downloadFile(
       0,
       validOrderTx || asset.accessDetails.validOrderTx,
       customProviderUrl || asset.services[0].serviceEndpoint,
-      signer
+      signer,
+      userCustomParameters
     )
   } catch (error) {
     const message = getErrorMessage(JSON.parse(error.message))

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

@@ -0,0 +1,40 @@
+import React, { ReactElement } from 'react'
+import Input, { InputProps } from '../..'
+import { Field, useField } from 'formik'
+import { FormConsumerParameter } from '@components/Publish/_types'
+
+export default function DefaultInput({
+  index,
+  inputName,
+  ...props
+}: InputProps & {
+  index: number
+  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 }[]
+  ): string[] => {
+    if (!options?.length) return []
+
+    return options.map((option) => option.key)
+  }
+
+  return (
+    <Field
+      {...props}
+      component={Input}
+      type={fieldType === 'boolean' ? 'select' : fieldType}
+      options={
+        fieldType === 'boolean'
+          ? ['true', 'false']
+          : fieldType === 'select'
+          ? getStringOptions(fieldOptions)
+          : fieldOptions
+      }
+    />
+  )
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/FormActions.module.css

@@ -0,0 +1,5 @@
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacer);
+}

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

@@ -0,0 +1,84 @@
+import React, { ReactElement } from 'react'
+import Button from '@shared/atoms/Button'
+import styles from './FormActions.module.css'
+import { useField, useFormikContext } from 'formik'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import { getObjectPropertyByPath } from '@utils/index'
+import { defaultConsumerParam } from '.'
+import { toast } from 'react-toastify'
+
+export default function FormActions({
+  fieldName,
+  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<FormConsumerParameter[]>(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)
+    setParamPropsTouched(index)
+
+    // Check errors on current tab before creating a new param
+    if (getObjectPropertyByPath(errors, `${field.name}[${index}]`)) {
+      toast.error(
+        'Cannot add new parameter. Current parameter definition contains errors.'
+      )
+      return
+    }
+
+    helpers.setValue([...field.value, { ...defaultConsumerParam }])
+
+    onParameterAdded && onParameterAdded(field.value.length)
+  }
+
+  const deleteParameter = (index: number) => {
+    helpers.setValue(field.value.filter((p, i) => i !== index))
+
+    const previousIndex = Math.max(0, index - 1)
+    onParameterDeleted && onParameterDeleted(previousIndex)
+  }
+
+  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>
+  )
+}

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%;
+}

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

@@ -0,0 +1,36 @@
+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/index'
+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
+        keyPlaceholder="value"
+        valuePlaceholder="label"
+      />
+
+      {hasError() && (
+        <div className={styles.error}>
+          <ErrorMessage name={props.name} />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+import React, { ReactElement } from 'react'
+import Input, { InputProps } from '../..'
+import { Field, useField, useFormikContext } from 'formik'
+import {
+  FormConsumerParameter,
+  FormPublishData
+} from '@components/Publish/_types'
+import { defaultConsumerParam } from '.'
+
+export default function TypeInput({
+  index,
+  inputName,
+  ...props
+}: InputProps & {
+  index: number
+  inputName: string
+}): ReactElement {
+  const { setFieldTouched } = useFormikContext<FormPublishData>()
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(inputName)
+
+  const resetDefaultValue = (
+    parameterName: string,
+    parameterType: FormConsumerParameter['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)
+      }}
+    />
+  )
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/_validation.ts

@@ -0,0 +1,62 @@
+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) => {
+      const [parentFormObj, nextParentFormObj] = (
+        context as TestContextExtended
+      ).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
+    })
+    .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()
+    .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', {
+    is: 'select',
+    then: Yup.array()
+      .of(Yup.object())
+      .min(2, 'At least two options are required')
+      .required('Required'),
+    otherwise: Yup.array()
+  })
+}

src/components/@shared/FormInput/InputElement/ConsumerParameters/index.module.css

@@ -0,0 +1,4 @@
+.container {
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+}

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

@@ -0,0 +1,110 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { Field, useField } from 'formik'
+import Input, { InputProps } from '../..'
+import { FormConsumerParameter } from '@components/Publish/_types'
+import Tabs from '@shared/atoms/Tabs'
+import FormActions from './FormActions'
+import DefaultInput from './DefaultInput'
+import OptionsInput from './OptionsInput'
+import styles from './index.module.css'
+import TypeInput from './TypeInput'
+
+export const defaultConsumerParam: FormConsumerParameter = {
+  name: '',
+  label: '',
+  description: '',
+  type: 'text',
+  options: undefined,
+  default: '',
+  required: 'optional'
+}
+
+export const paramTypes: FormConsumerParameter['type'][] = [
+  'number',
+  'text',
+  'boolean',
+  'select'
+]
+
+export function ConsumerParameters(props: InputProps): ReactElement {
+  const [field, meta, helpers] = useField<FormConsumerParameter[]>(props.name)
+
+  const [tabIndex, setTabIndex] = useState(0)
+
+  useEffect(() => {
+    if (field.value.length === 0)
+      helpers.setValue([{ ...defaultConsumerParam }])
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <Tabs
+        selectedIndex={tabIndex}
+        onIndexSelected={setTabIndex}
+        items={field.value.map((param, index) => {
+          return {
+            title:
+              param?.name?.length > 15
+                ? `${param?.name?.slice(0, 15)}...`
+                : param?.name || 'New parameter',
+            content: (
+              <div>
+                {props.fields?.map((subField: InputProps) => {
+                  if (subField.name === 'options') {
+                    return field.value[index]?.type === 'select' ? (
+                      <OptionsInput
+                        key={`${field.name}[${index}].${props.name}`}
+                        {...subField}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        value={field.value[index][subField.name]}
+                      />
+                    ) : null
+                  }
+
+                  if (subField.name === 'default') {
+                    return (
+                      <DefaultInput
+                        key={`${field.name}[${index}].${subField.name}`}
+                        {...subField}
+                        name={`${field.name}[${index}].${subField.name}`}
+                        index={index}
+                        inputName={props.name}
+                      />
+                    )
+                  }
+
+                  if (subField.name === 'type') {
+                    return (
+                      <TypeInput
+                        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}`}
+                      {...subField}
+                      name={`${field.name}[${index}].${subField.name}`}
+                      component={Input}
+                    />
+                  )
+                })}
+                <FormActions
+                  fieldName={props.name}
+                  index={index}
+                  onParameterAdded={setTabIndex}
+                  onParameterDeleted={setTabIndex}
+                />
+              </div>
+            )
+          }
+        })}
+      />
+    </div>
+  )
+}

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}`}

src/components/@shared/FormInput/InputElement/Headers/index.module.css

@@ -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);
-}

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 .keyInput,
+.hasError .pairsContainer .keyInput: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%;
+}

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

@@ -1,28 +1,60 @@
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import React, {
-import InputElement from '../../InputElement'
+  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
+  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
 
   const [currentKey, setCurrentKey] = useState('')
   const [currentValue, setCurrentValue] = useState('')
   const [disabledButton, setDisabledButton] = useState(true)
+  const [hasOnlyUniqueKeys, setHasOnlyUniqueKeys] = useState(true)
 
-  const [headers, setHeaders] = useState([] as QueryHeader[])
+  const [pairs, setPairs] = useState(value || [])
 
-  const addHeader = () => {
+  const currentKeyExists = useCallback(() => {
-    setHeaders((prev) => [
+    return pairs.some((pair) => pair.key === currentKey)
+  }, [currentKey, pairs])
+
+  const addPair = () => {
+    if (currentKeyExists()) {
+      setHasOnlyUniqueKeys(false)
+      if (uniqueKeys) return
+    }
+
+    setPairs((prev) => [
       ...prev,
       {
         key: currentKey,
@@ -33,9 +65,9 @@ export default function InputHeaders(props: InputProps): ReactElement {
     setCurrentValue('')
   }
 
-  const removeHeader = (i: number) => {
+  const removePair = (index: number) => {
-    const newHeaders = headers.filter((header, index) => index !== i)
+    const newPairs = pairs.filter((pair, pairIndex) => pairIndex !== index)
-    setHeaders(newHeaders)
+    setPairs(newPairs)
     setCurrentKey('')
     setCurrentValue('')
   }
@@ -50,15 +82,22 @@ export default function InputHeaders(props: InputProps): ReactElement {
   }
 
   useEffect(() => {
-    form.setFieldValue(`${field.name}`, headers)
+    form.setFieldValue(`${field.name}`, pairs)
-  }, [headers])
+  }, [pairs])
 
   useEffect(() => {
-    setDisabledButton(!currentKey || !currentValue)
+    setDisabledButton(
-  }, [currentKey, currentValue])
+      !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,18 +110,19 @@ export default function InputHeaders(props: InputProps): ReactElement {
         )}
       </Label>
 
-      <div className={styles.headersContainer}>
+      <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}
         />
@@ -92,26 +132,32 @@ 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 ${keyPlaceholder} field must be unique`}</p>
+        )}
       </div>
 
-      {headers.length > 0 &&
+      {pairs.length > 0 &&
-        headers.map((header, i) => {
+        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 +167,7 @@ export default function InputHeaders(props: InputProps): ReactElement {
                 size="small"
                 onClick={(e: React.SyntheticEvent) => {
                   e.preventDefault()
-                  removeHeader(i)
+                  removePair(i)
                 }}
                 disabled={false}
               >

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} />
 

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/index'
 
 const cx = classNames.bind(styles)
 
@@ -71,21 +72,17 @@ export interface InputProps {
   disclaimerValues?: string[]
 }
 
-function checkError(
+function checkError(form: any, field: FieldInputProps<any>) {
-  form: any,
+  const touched = getObjectPropertyByPath(form?.touched, field?.name)
-  parsedFieldName: string[],
+  const errors = getObjectPropertyByPath(form?.errors, field?.name)
-  field: FieldInputProps<any>
+
-) {
+  return (
-  if (
+    touched &&
-    (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
+    errors &&
-      form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]) ||
+    !field.name.endsWith('.files') &&
-    (form?.touched[field?.name] &&
+    !field.name.endsWith('.links') &&
-      form?.errors[field?.name] &&
+    !field.name.endsWith('consumerParameters')
-      field.name !== 'files' &&
+  )
-      field.name !== 'links')
-  ) {
-    return true
-  }
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {
@@ -102,13 +99,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 =
+  const hasFormikError = checkError(form, field)
-    isFormikField && (isNestedField ? field?.name.split('.') : [field?.name])
-  const hasFormikError = checkError(form, parsedFieldName, field)
 
   const styleClasses = cx({
     field: true,
@@ -123,7 +117,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)
         )
       )
     }

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) => (

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -10,14 +10,14 @@ import { useAsset } from '@context/Asset'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
-import { useMarketMetadata } from '@context/MarketMetadata'
-import Alert from '@shared/atoms/Alert'
 import { getTokenBalanceFromSymbol } from '@utils/wallet'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
 import { useAccount } from 'wagmi'
 import useBalance from '@hooks/useBalance'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import ConsumerParameters from '../ConsumerParameters'
+import { FormConsumerParameter } from '@components/Publish/_types'
 
 export default function FormStartCompute({
   algorithms,
@@ -78,12 +78,18 @@ export default function FormStartCompute({
   validUntil?: string
   retry: boolean
 }): ReactElement {
-  const { siteContent } = useMarketMetadata()
   const { address: accountId, isConnected } = useAccount()
   const { balance } = useBalance()
   const { isSupportedOceanNetwork } = useNetworkMetadata()
-  const { isValid, values }: FormikContextType<{ algorithm: string }> =
+  const {
-    useFormikContext()
+    isValid,
+    values
+  }: FormikContextType<{
+    algorithm: string
+    dataServiceParams: FormConsumerParameter[]
+    algoServiceParams: FormConsumerParameter[]
+    algoParams: FormConsumerParameter[]
+  }> = useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
 
   const [datasetOrderPrice, setDatasetOrderPrice] = useState(
@@ -249,7 +255,12 @@ export default function FormStartCompute({
           />
         )
       })}
-
+      {asset && selectedAlgorithmAsset && (
+        <ConsumerParameters
+          asset={asset}
+          selectedAlgorithmAsset={selectedAlgorithmAsset}
+        />
+      )}
       <PriceOutput
         hasPreviousOrder={hasPreviousOrder}
         assetTimeout={assetTimeout}

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);

src/components/Asset/AssetActions/Compute/_constants.ts

@@ -1,13 +1,45 @@
+import { ConsumerParameter, UserCustomParameters } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
+import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
+import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
 
-export const validationSchema: Yup.SchemaOf<{
+export function getComputeValidationSchema(
+  dataServiceParams: ConsumerParameter[],
+  algoServiceParams: ConsumerParameter[],
+  algoParams: ConsumerParameter[]
+): Yup.SchemaOf<{
   algorithm: string
-}> = Yup.object().shape({
+  dataServiceParams: any
-  algorithm: Yup.string().required('Required')
+  algoServiceParams: any
-})
+  algoParams: any
+}> {
+  return Yup.object().shape({
+    algorithm: Yup.string().required('Required'),
+    dataServiceParams:
+      getUserCustomParameterValidationSchema(dataServiceParams),
+    algoServiceParams:
+      getUserCustomParameterValidationSchema(algoServiceParams),
+    algoParams: getUserCustomParameterValidationSchema(algoParams)
+  })
+}
 
-export function getInitialValues(): { algorithm: string } {
+export function getInitialValues(
+  asset?: AssetExtended,
+  selectedAlgorithmAsset?: AssetExtended
+): {
+  algorithm: string
+  dataServiceParams?: UserCustomParameters
+  algoServiceParams?: UserCustomParameters
+  algoParams?: UserCustomParameters
+} {
   return {
-    algorithm: undefined
+    algorithm: selectedAlgorithmAsset?.id,
+    dataServiceParams: getDefaultValues(asset?.services[0].consumerParameters),
+    algoServiceParams: getDefaultValues(
+      selectedAlgorithmAsset?.services[0].consumerParameters
+    ),
+    algoParams: getDefaultValues(
+      selectedAlgorithmAsset?.metadata?.algorithm.consumerParameters
+    )
   }
 }

src/components/Asset/AssetActions/Compute/index.tsx

@@ -13,8 +13,8 @@ import {
   ComputeOutput,
   ProviderComputeInitializeResults,
   unitsToAmount,
-  minAbi,
   ProviderFees,
+  UserCustomParameters,
   getErrorMessage
 } from '@oceanprotocol/lib'
 import { toast } from 'react-toastify'
@@ -22,7 +22,7 @@ import Price from '@shared/Price'
 import FileIcon from '@shared/FileIcon'
 import Alert from '@shared/atoms/Alert'
 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'
@@ -50,6 +50,7 @@ import { useAccount, useSigner } from 'wagmi'
 import { getDummySigner } from '@utils/wallet'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
 import { useAsset } from '@context/Asset'
+import { parseConsumerParameterValues } from '../ConsumerParameters'
 
 const refreshInterval = 10000 // 10 sec.
 
@@ -339,7 +340,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)
@@ -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?.algoServiceParams
       }
 
       const allowed = await isOrderable(
@@ -406,7 +413,8 @@ export default function Compute({
       const computeAsset: ComputeAsset = {
         documentId: asset.id,
         serviceId: asset.services[0].id,
-        transferTxId: datasetOrderTx
+        transferTxId: datasetOrderTx,
+        userdata: userCustomParameters?.dataServiceParams
       }
       computeAlgorithm.transferTxId = algorithmOrderTx
       const output: ComputeOutput = {
@@ -440,6 +448,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
@@ -480,13 +514,15 @@ export default function Compute({
         </>
       ) : (
         <Formik
-          initialValues={getInitialValues()}
+          initialValues={getInitialValues(asset, selectedAlgorithmAsset)}
           validateOnMount
-          validationSchema={validationSchema}
+          validationSchema={getComputeValidationSchema(
-          onSubmit={async (values) => {
+            asset.services[0].consumerParameters,
-            if (!values.algorithm) return
+            selectedAlgorithmAsset?.services[0].consumerParameters,
-            await startJob()
+            selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters
-          }}
+          )}
+          enableReinitialize
+          onSubmit={onSubmit}
         >
           <FormStartComputeDataset
             algorithms={algorithmList}

src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.module.css

@@ -0,0 +1,39 @@
+.container > label {
+  margin-bottom: calc(var(--spacer) / 2);
+  text-align: center;
+}
+
+.parametersContainer {
+  composes: selection from '@shared/FormInput/InputElement/AssetSelection/index.module.css';
+
+  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
+  max-height: 50vh;
+
+  /* smooth overflow scrolling for pre-iOS 13 */
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.parameter > div {
+  margin-bottom: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.parameter {
+  position: relative;
+  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);
+}
+
+.parameter:last-child {
+  border: none;
+}
+
+.parameter > div > div {
+  position: absolute;
+  right: 1rem;
+}

src/components/Asset/AssetActions/ConsumerParameters/FormConsumerParameters.tsx

@@ -0,0 +1,78 @@
+import React, { ReactElement } from 'react'
+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'
+
+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.toString()
+          : param.default
+    })
+  })
+
+  return defaults
+}
+
+export default function FormConsumerParameters({
+  name,
+  parameters
+}: {
+  name: string
+  parameters: ConsumerParameter[]
+}): ReactElement {
+  const [field] = useField<UserCustomParameters[]>(name)
+
+  const getParameterOptions = (parameter: ConsumerParameter): string[] => {
+    if (!parameter.options && parameter.type !== 'boolean') return []
+
+    const updatedOptions =
+      parameter.type === 'boolean'
+        ? ['true', 'false']
+        : parameter.type === 'select'
+        ? JSON.parse(parameter.options)?.map((option) => Object.keys(option)[0])
+        : []
+
+    // add empty option, if parameter is optional
+    if (!parameter.required) updatedOptions.unshift('')
+
+    return updatedOptions
+  }
+
+  return (
+    <div className={styles.container}>
+      <Label htmlFor="Input the consumer parameters">
+        Input the consumer parameters
+      </Label>
+      <div className={styles.parametersContainer}>
+        {parameters?.map((param) => {
+          const { default: paramDefault, ...rest } = param
+
+          return (
+            <div key={param.name} className={styles.parameter}>
+              <Field
+                {...rest}
+                component={Input}
+                help={param.description}
+                name={`${name}.${param.name}`}
+                options={getParameterOptions(param)}
+                size="small"
+                type={param.type === 'boolean' ? 'select' : param.type}
+                value={field.value[param.name]}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/components/Asset/AssetActions/ConsumerParameters/_validation.ts

@@ -0,0 +1,28 @@
+import { ConsumerParameter } from '@oceanprotocol/lib'
+import * as Yup from 'yup'
+import { SchemaLike } from 'yup/lib/types'
+
+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
+}

src/components/Asset/AssetActions/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);
+}

src/components/Asset/AssetActions/ConsumerParameters/index.tsx

@@ -0,0 +1,97 @@
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
+import FormConsumerParameters from './FormConsumerParameters'
+import styles from './index.module.css'
+import Tabs, { TabsItem } from '@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,
+  selectedAlgorithmAsset
+}: {
+  asset: AssetExtended
+  selectedAlgorithmAsset?: AssetExtended
+}): ReactElement {
+  const [tabs, setTabs] = useState<TabsItem[]>([])
+
+  const updateTabs = useCallback(() => {
+    const tabs = []
+    if (asset?.services[0]?.consumerParameters?.length > 0) {
+      tabs.push({
+        title: 'Data Service',
+        content: (
+          <FormConsumerParameters
+            name="dataServiceParams"
+            parameters={asset.services[0].consumerParameters}
+          />
+        )
+      })
+    }
+    if (selectedAlgorithmAsset?.services[0]?.consumerParameters?.length > 0) {
+      tabs.push({
+        title: 'Algo Service',
+        content: (
+          <FormConsumerParameters
+            name="algoServiceParams"
+            parameters={selectedAlgorithmAsset.services[0].consumerParameters}
+          />
+        )
+      })
+    }
+    if (
+      selectedAlgorithmAsset?.metadata?.algorithm?.consumerParameters?.length >
+      0
+    ) {
+      tabs.push({
+        title: 'Algo Params',
+        content: (
+          <FormConsumerParameters
+            name="algoParams"
+            parameters={
+              selectedAlgorithmAsset.metadata?.algorithm.consumerParameters
+            }
+          />
+        )
+      })
+    }
+
+    return tabs
+  }, [asset, selectedAlgorithmAsset])
+
+  useEffect(() => {
+    setTabs(updateTabs())
+  }, [updateTabs])
+
+  return (
+    <div className={styles.container}>
+      {tabs.length > 0 && <Tabs items={tabs} />}
+    </div>
+  )
+}

src/components/Asset/AssetActions/Download/_validation.ts

@@ -0,0 +1,13 @@
+import * as Yup from 'yup'
+import { getUserCustomParameterValidationSchema } from '../ConsumerParameters/_validation'
+import { ConsumerParameter } from '@oceanprotocol/lib'
+
+export function getDownloadValidationSchema(
+  parameters: ConsumerParameter[]
+): Yup.SchemaOf<{
+  dataServiceParams: any
+}> {
+  return Yup.object().shape({
+    dataServiceParams: getUserCustomParameterValidationSchema(parameters)
+  })
+}

src/components/Asset/AssetActions/Download/index.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;
+}

src/components/Asset/AssetActions/Download/index.tsx

@@ -2,11 +2,16 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import FileIcon from '@shared/FileIcon'
 import Price from '@shared/Price'
 import { useAsset } from '@context/Asset'
-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 styles from './index.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'
@@ -18,6 +23,12 @@ import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
 import { useAccount, useSigner } from 'wagmi'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import ConsumerParameters, {
+  parseConsumerParameterValues
+} from '../ConsumerParameters'
+import { Form, Formik, useFormikContext } from 'formik'
+import { getDownloadValidationSchema } from './_validation'
+import { getDefaultValues } from '../ConsumerParameters/FormConsumerParameters'
 
 export default function Download({
   asset,
@@ -142,7 +153,7 @@ export default function Download({
     orderPriceAndFees
   ])
 
-  async function handleOrderOrDownload() {
+  async function handleOrderOrDownload(dataParams?: UserCustomParameters) {
     setIsLoading(true)
 
     try {
@@ -154,7 +165,7 @@ export default function Download({
           )[3]
         )
 
-        await downloadFile(signer, asset, accountId, validOrderTx)
+        await downloadFile(signer, asset, accountId, validOrderTx, dataParams)
       } else {
         setStatusText(
           getOrderFeedback(
@@ -174,7 +185,7 @@ export default function Download({
           throw new Error()
         }
         setIsOwned(true)
-        setValidOrderTx(tx?.transactionHash)
+        setValidOrderTx(tx.transactionHash)
       }
     } catch (error) {
       LoggerInstance.error(error)
@@ -187,16 +198,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}
@@ -212,6 +223,8 @@ export default function Download({
   )
 
   const AssetAction = ({ asset }: { asset: AssetExtended }) => {
+    const { isValid } = useFormikContext()
+
     return (
       <div>
         {isOrderDisabled ? (
@@ -230,18 +243,12 @@ export default function Download({
               />
             ) : (
               <>
-                {isPriceLoading ? (
+                {asset && <ConsumerParameters asset={asset} />}
-                  <Loader message="Calculating full price (including fees)" />
+                {!isInPurgatory && (
-                ) : (
+                  <div className={styles.buttonBuy}>
-                  <Price
+                    <PurchaseButton isValid={isValid} />
-                    price={asset.stats?.price}
+                  </div>
-                    orderPriceAndFees={orderPriceAndFees}
-                    conversion
-                    size="large"
-                  />
                 )}
-
-                {!isInPurgatory && <PurchaseButton />}
               </>
             )}
           </>
@@ -251,13 +258,43 @@ export default function Download({
   }
 
   return (
+    <Formik
+      initialValues={{
+        dataServiceParams: getDefaultValues(
+          asset?.services[0].consumerParameters
+        )
+      }}
+      validationSchema={getDownloadValidationSchema(
+        asset?.services[0].consumerParameters
+      )}
+      onSubmit={async (values) => {
+        const dataServiceParams = parseConsumerParameterValues(
+          values?.dataServiceParams,
+          asset.services[0].consumerParameters
+        )
+
+        await handleOrderOrDownload(dataServiceParams)
+      }}
+    >
+      <Form>
         <aside className={styles.consume}>
           <div className={styles.info}>
             <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
@@ -266,5 +303,7 @@ export default function Download({
             />
           )}
         </aside>
+      </Form>
+    </Formik>
   )
 }

src/components/Asset/AssetActions/index.tsx

@@ -4,7 +4,6 @@ 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'

src/components/Asset/Edit/EditMetadata.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import { Formik } from 'formik'
 import {
   LoggerInstance,
-  Metadata,
   FixedRateExchange,
   Asset,
-  Service,
   Datatoken,
-  Nft
+  Nft,
+  Metadata,
+  Service
 } from '@oceanprotocol/lib'
 import { validationSchema } from './_validation'
 import { getInitialValues } from './_constants'
@@ -28,6 +28,7 @@ import { sanitizeUrl } from '@utils/url'
 import { getEncryptedFiles } from '@utils/provider'
 import { assetStateToNumber } from '@utils/assetState'
 import { useAccount, useProvider, useNetwork, useSigner } from 'wagmi'
+import { transformConsumerParameters } from '@components/Publish/_utils'
 
 export default function Edit({
   asset
@@ -104,6 +105,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))
@@ -138,6 +146,11 @@ export default function Edit({
         timeout: mapTimeoutStringToSeconds(values.timeout),
         files: updatedFiles
       }
+      if (values?.service?.consumerParameters) {
+        updatedService.consumerParameters = transformConsumerParameters(
+          values.service.consumerParameters
+        )
+      }
 
       // TODO: remove version update at a later time
       const updatedAsset: Asset = {
@@ -189,7 +202,7 @@ export default function Edit({
       enableReinitialize
       initialValues={getInitialValues(
         asset?.metadata,
-        asset?.services[0]?.timeout,
+        asset?.services[0],
         asset?.accessDetails?.price || '0',
         paymentCollector,
         assetState

src/components/Asset/Edit/FormEditMetadata.module.css

@@ -0,0 +1,4 @@
+.serviceContainer {
+  border-top: 1px solid var(--border-color);
+  padding-top: var(--spacer);
+}

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -7,6 +7,9 @@ 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'
+import { MetadataEditForm } from './_types'
+import consumerParametersContent from '../../../../content/publish/consumerParameters.json'
 
 export function checkIfTimeoutInPredefinedValues(
   timeout: string,
@@ -130,6 +133,27 @@ 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 as unknown as MetadataEditForm).usesConsumerParameters && (
+            <Field
+              {...getFieldContent(
+                'consumerParameters',
+                consumerParametersContent.consumerParameters.fields
+              )}
+              component={Input}
+              name="consumerParameters"
+            />
+          )}
+        </>
+      )}
+
       <Field
         {...getFieldContent('paymentCollector', data)}
         component={Input}
@@ -140,6 +164,26 @@ export default function FormEditMetadata({
         component={Input}
         name="assetState"
       />
+      <div className={styles.serviceContainer}>
+        <h4>Service</h4>
+
+        <Field
+          {...getFieldContent('usesServiceConsumerParameters', data)}
+          component={Input}
+          name="service.usesConsumerParameters"
+        />
+        {(values as unknown as MetadataEditForm).service
+          .usesConsumerParameters && (
+          <Field
+            {...getFieldContent(
+              'consumerParameters',
+              consumerParametersContent.consumerParameters.fields
+            )}
+            component={Input}
+            name="service.consumerParameters"
+          />
+        )}
+      </div>
 
       <FormActions />
     </Form>

src/components/Asset/Edit/_constants.ts

@@ -1,10 +1,10 @@
-import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
+import { Metadata, Service, ServiceComputeOptions } from '@oceanprotocol/lib'
-import { secondsToString } from '@utils/ddo'
+import { parseConsumerParameters, secondsToString } from '@utils/ddo'
 import { ComputeEditForm, MetadataEditForm } from './_types'
 
 export function getInitialValues(
   metadata: Metadata,
-  timeout: number,
+  service: Service,
   price: string,
   paymentCollector: string,
   assetState: string
@@ -15,11 +15,19 @@ 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,
+    consumerParameters: parseConsumerParameters(
+      metadata?.algorithm?.consumerParameters
+    ),
     paymentCollector,
-    assetState
+    assetState,
+    service: {
+      usesConsumerParameters: service?.consumerParameters?.length > 0,
+      consumerParameters: parseConsumerParameters(service?.consumerParameters)
+    }
   }
 }
 

src/components/Asset/Edit/_types.ts

@@ -1,3 +1,4 @@
+import { FormConsumerParameter } from '@components/Publish/_types'
 import { FileInfo } from '@oceanprotocol/lib'
 export interface MetadataEditForm {
   name: string
@@ -9,7 +10,13 @@ export interface MetadataEditForm {
   links?: FileInfo[]
   author?: string
   tags?: string[]
+  usesConsumerParameters?: boolean
+  consumerParameters?: FormConsumerParameter[]
   assetState?: string
+  service?: {
+    usesConsumerParameters?: boolean
+    consumerParameters?: FormConsumerParameter[]
+  }
 }
 
 export interface ComputeEditForm {

src/components/Asset/Edit/_validation.ts

@@ -1,7 +1,8 @@
 import { FileInfo } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import { isAddress } from 'ethers/lib/utils'
-import { testLinks } from '../../../@utils/yup'
+import { testLinks } from '@utils/yup'
+import { validationConsumerParameters } from '@shared/FormInput/InputElement/ConsumerParameters/_validation'
 
 export const validationSchema = Yup.object().shape({
   name: Yup.string()
@@ -37,6 +38,16 @@ 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().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.',
@@ -44,7 +55,19 @@ export const validationSchema = Yup.object().shape({
       return isAddress(value)
     }
   ),
-  retireAsset: Yup.string()
+  retireAsset: Yup.string(),
+  service: Yup.object().shape({
+    usesConsumerParameters: Yup.boolean(),
+    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)
+    })
+  })
 })
 
 export const computeSettingsValidationSchema = Yup.object().shape({

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'
@@ -138,6 +139,24 @@ export default function MetadataFields(): ReactElement {
               />
             </>
           )}
+          <Field
+            {...getFieldContent(
+              'usesConsumerParameters',
+              content.metadata.fields
+            )}
+            component={Input}
+            name="metadata.usesConsumerParameters"
+          />
+          {values.metadata.usesConsumerParameters && (
+            <Field
+              {...getFieldContent(
+                'consumerParameters',
+                consumerParametersContent.consumerParameters.fields
+              )}
+              component={Input}
+              name="metadata.consumerParameters"
+            />
+          )}
         </>
       )}
 

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'
@@ -101,6 +102,21 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].timeout"
       />
+      <Field
+        {...getFieldContent('usesConsumerParameters', content.services.fields)}
+        component={Input}
+        name="services[0].usesConsumerParameters"
+      />
+      {values.services[0].usesConsumerParameters && (
+        <Field
+          {...getFieldContent(
+            'consumerParameters',
+            consumerParametersContent.consumerParameters.fields
+          )}
+          component={Input}
+          name="services[0].consumerParameters"
+        />
+      )}
     </>
   )
 }

src/components/Publish/_constants.tsx

@@ -68,7 +68,9 @@ export const initialValues: FormPublishData = {
     dockerImage: '',
     dockerImageCustom: '',
     dockerImageCustomTag: '',
-    dockerImageCustomEntrypoint: ''
+    dockerImageCustomEntrypoint: '',
+    usesConsumerParameters: false,
+    consumerParameters: []
   },
   services: [
     {
@@ -82,7 +84,9 @@ export const initialValues: FormPublishData = {
         valid: true,
         custom: false
       },
-      computeOptions
+      computeOptions,
+      usesConsumerParameters: false,
+      consumerParameters: []
     }
   ],
   pricing: {

src/components/Publish/_types.ts

@@ -10,6 +10,8 @@ export interface FormPublishService {
   providerUrl: { url: string; valid: boolean; custom: boolean }
   algorithmPrivacy?: boolean
   computeOptions?: ServiceComputeOptions
+  usesConsumerParameters?: boolean
+  consumerParameters?: FormConsumerParameter[]
 }
 
 export interface FormPublishData {
@@ -32,6 +34,12 @@ export interface FormPublishData {
     dockerImageCustomTag?: string
     dockerImageCustomEntrypoint?: string
     dockerImageCustomChecksum?: string
+    usesConsumerParameters?: boolean
+    consumerParameters?: FormConsumerParameter[]
+    service?: {
+      usesConsumerParameters?: boolean
+      consumerParameters?: FormConsumerParameter[]
+    }
   }
   services: FormPublishService[]
   pricing: PricePublishOptions
@@ -61,3 +69,14 @@ export interface MetadataAlgorithmContainer {
   tag: string
   checksum: string
 }
+
+export interface FormConsumerParameter {
+  name: string
+  type: 'text' | 'number' | 'boolean' | 'select'
+  label: string
+  required: string
+  description: string
+  default: string | boolean | number
+  options?: { key: string; value: string }[]
+  value?: string | boolean | number
+}

src/components/Publish/_utils.ts

@@ -7,19 +7,24 @@ import {
   DispenserCreationParams,
   getHash,
   LoggerInstance,
-  Metadata,
   NftCreateData,
   NftFactory,
-  Service,
   ZERO_ADDRESS,
-  getEventFromTx
+  getEventFromTx,
+  ConsumerParameter,
+  Metadata,
+  Service
 } from '@oceanprotocol/lib'
 import { mapTimeoutStringToSeconds, normalizeFile } from '@utils/ddo'
 import { generateNftCreateData } from '@utils/nft'
 import { getEncryptedFiles } from '@utils/provider'
 import slugify from 'slugify'
 import { algorithmContainerPresets } from './_constants'
-import { FormPublishData, MetadataAlgorithmContainer } from './_types'
+import {
+  FormConsumerParameter,
+  FormPublishData,
+  MetadataAlgorithmContainer
+} from './_types'
 import {
   marketFeeAddress,
   publisherMarketOrderFee,
@@ -59,6 +64,33 @@ function transformTags(originalTags: string[]): string[] {
   return transformedTags
 }
 
+export function transformConsumerParameters(
+  parameters: FormConsumerParameter[]
+): ConsumerParameter[] {
+  if (!parameters?.length) return
+
+  const transformedValues = parameters.map((param) => {
+    const options =
+      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,
+      options,
+      required,
+      default: param.default.toString()
+    }
+  })
+
+  return transformedValues as ConsumerParameter[]
+}
+
 export async function transformPublishFormToDdo(
   values: FormPublishData,
   // Those 2 are only passed during actual publishing process
@@ -79,7 +111,9 @@ export async function transformPublishFormToDdo(
     dockerImageCustom,
     dockerImageCustomTag,
     dockerImageCustomEntrypoint,
-    dockerImageCustomChecksum
+    dockerImageCustomChecksum,
+    usesConsumerParameters,
+    consumerParameters
   } = metadata
   const { access, files, links, providerUrl, timeout } = services[0]
 
@@ -98,6 +132,10 @@ export async function transformPublishFormToDdo(
   const linksTransformed = links?.length &&
     links[0].valid && [sanitizeUrl(links[0].url)]
 
+  const consumerParametersTransformed = usesConsumerParameters
+    ? transformConsumerParameters(consumerParameters)
+    : undefined
+
   const newMetadata: Metadata = {
     created: currentTime,
     updated: currentTime,
@@ -135,7 +173,8 @@ export async function transformPublishFormToDdo(
               dockerImage === 'custom'
                 ? dockerImageCustomChecksum
                 : algorithmContainerPresets.checksum
-          }
+          },
+          consumerParameters: consumerParametersTransformed
         }
       })
   }
@@ -161,7 +200,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)
+      : undefined
   }
 
   const newDdo: DDO = {

src/components/Publish/_validation.ts

@@ -1,8 +1,9 @@
-import { MAX_DECIMALS } from '@utils/constants'
-import * as Yup from 'yup'
-import { getMaxDecimalsValidation } from '@utils/numbers'
 import { FileInfo } from '@oceanprotocol/lib'
-import { testLinks } from '../../@utils/yup'
+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/_validation'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
@@ -26,7 +27,17 @@ 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.'),
+  usesConsumerParameters: Yup.boolean(),
+  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 = {
@@ -60,6 +71,16 @@ 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().when('usesConsumerParameters', {
+    is: true,
+    then: Yup.array()
+      .of(Yup.object().shape(validationConsumerParameters))
+      .required('Required'),
+    otherwise: Yup.array()
+      .nullable()
+      .transform((value) => value || null)
   })
 }