merge main & fix conflicts

README.md

@@ -42,7 +42,7 @@ The app is a React app built with [Next.js](https://nextjs.org) + TypeScript + C
 Prerequisites:
 
 - [Node.js](https://nodejs.org/en/) (required). Check the [.nvmrc](.nvmrc) file to make sure you are using the correct version of Node.js.
-- [nvm](https://github.com/nvm-sh/nvm) (recommended). This is the recommend way to manage Node.js versions.
+- [nvm](https://github.com/nvm-sh/nvm) (recommended). This is the recommended way to manage Node.js versions.
 - [Git](https://git-scm.com/) is required to follow the instructions below.
 
 To start local development:
@@ -80,7 +80,7 @@ Barge will deploy contracts to the local Ganache node which will take some time.
 If you are using `macOS` operating system you should also make same changes to the provider url since the default barge ip can not be accessed due to some network constraints on `macOs`. So we should be using the `127.0.0.1:8030` (if you have changed the provider port please use that here as well) for each direct call from the market to provider, but we should keep the internal barge url `http://172.15.0.4:8030/` (this is the default ip:port for provider in barge, if changed please use the according url). So on inside `src/@utils/provider.ts` if on `macOS` you can hardcode this env variable `NEXT_PUBLIC_PROVIDER_URL` or set
 `127.0.0.1:8030` as `providerUrl` on all the methods that call `ProviderInstance` methods. (eg: `getEncryptedFiles`, `getFileDidInfo`, `downloadFile` etc). You should use the same provider url for `src/@utils/nft.ts` inside `setNFTMetadataAndTokenURI` and `setNftMetadata` and `src/components/Publish/index.tsx` inisde `encrypt` method (if you set the env variable there's no need to do this). You also need to use local ip's for the subgraph (`127.0.0.1` instead of `172.15.0.15`) and the metadatacache (`127.0.0.1` instead of `172.15.0.5`).
 
-Once you want to switch back to using the market agains remote networks you need to comment or remove the env vars that are set by `set-barge-env` script.
+Once you want to switch back to using the market against remote networks you need to comment or remove the env vars that are set by `set-barge-env` script.
 
 ```bash
 cd market
@@ -298,7 +298,7 @@ Test runs utilize [Jest](https://jestjs.io/) as test runner and [Testing Library
 
 All created Storybook stories will automatically run as individual tests by using the [StoryShots Addon](https://storybook.js.org/addons/@storybook/addon-storyshots).
 
-Creating Storybook stories for a component will provide good coverage of a component in many cases. Additional tests for dedicated component functionality which can't be done with Storybook are created as usual [Testing Library](https://testing-library.com/docs/react-testing-library/intro) tests, but you can also [import exisiting Storybook stories](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) into those tests.
+Creating Storybook stories for a component will provide good coverage of a component in many cases. Additional tests for dedicated component functionality which can't be done with Storybook are created as usual [Testing Library](https://testing-library.com/docs/react-testing-library/intro) tests, but you can also [import existing Storybook stories](https://storybook.js.org/docs/react/writing-tests/importing-stories-in-tests#example-with-testing-library) into those tests.
 
 Executing linting, type checking, and full test run:
 

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
       }
     ]
   },

package.json

@@ -97,7 +97,7 @@
     "@types/remove-markdown": "^0.3.1",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.57.0",
-    "@uiw/codemirror-themes": "^4.19.1",
+    "@uiw/codemirror-themes": "^4.21.12",
     "apollo": "^2.34.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.41.0",

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