readme example not tested

src/hooks/useCompute/ComputeOptions.tsx

@@ -0,0 +1,28 @@
+export interface ComputeValue {
+  entrypoint: string
+  image: string
+  tag: string
+}
+export interface ComputeOption {
+  name: string
+  value: ComputeValue
+}
+
+export const computeOptions: ComputeOption[] = [
+  {
+    name: 'nodejs',
+    value: {
+      entrypoint: 'node $ALGO',
+      image: 'node',
+      tag: '10'
+    }
+  },
+  {
+    name: 'python3.7',
+    value: {
+      entrypoint: 'python $ALGO',
+      image: 'oceanprotocol/algo_dockers',
+      tag: 'python-panda'
+    }
+  }
+]

src/hooks/useCompute/README.md

@@ -0,0 +1,76 @@
+# `useCompute`
+
+The `OceanProvider` maintains a connection to the Ocean Protocol network in multiple steps:
+
+1. On mount, connect to Aquarius instance right away so any asset metadata can be retrieved before, and independent of any Web3 connections.
+2. Once Web3 becomes available, a connection to all Ocean Protocol network components is established.
+3. Once Ocean becomes available, spits out some info about it.
+
+Also provides a `useOcean` helper hook to access its context values from any component.
+
+## Usage
+
+```tsx
+import React from 'react'
+import {
+  useWeb3,
+  useOcean,
+  useMetadata,
+  useCompute,
+  computeOptions,
+  ComputeValue,
+  readFileContent
+} from '@oceanprotocol/react'
+
+const did = 'did:op:0x000000000'
+
+export default function MyComponent() {
+  // Get web3 from built-in Web3Provider context
+  const { web3 } = useWeb3()
+
+  // Get Ocean instance from built-in OceanProvider context
+  const { ocean, account } = useOcean()
+
+  // Get metadata for this asset
+  const { title, metadata } = useMetadata(did)
+
+
+  // compute asset
+  const { compute, computeStep } = useCompute()
+  // raw code text
+  const [algorithmRawCode, setAlgorithmRawCode] = useState('')
+  const [computeContainer, setComputeContainer] = useState<ComputeValue>()
+  async function handleCompute() {
+    await consume(did,algorithmRawCode,computeContainer)
+  }
+
+  async function onChangeHandler(event){
+    const fileText = await readFileContent(files[0])
+    setAlgorithmRawCode(fileText)
+  }
+  async function handleSelectChange(event: any)  {
+    const comType = event.target.value
+    setComputeContainer(comType)
+  }
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
+
+      <p>Your account: {account}</p>
+      <label for="computeOptions">Select image to run the algorithm</label>
+      <select id="computeOptions"  onChange={handleSelectChange}>
+        {computeOptions.map((x) => (
+            <option value={x.value}>{x.name}</option>
+        )
+        }
+      </select>
+      <input type="file" name="file" onChange={onChangeHandler}/>
+      <button onClick={handleCompute}>
+        {computeStep || 'Start compute job'}
+      </button>
+    </div>
+  )
+}
+```

src/hooks/useCompute/useCompute.ts

@@ -1,80 +1,86 @@
 import { useState } from 'react'
 import { DID, MetaDataAlgorithm } from '@oceanprotocol/squid'
 import { useOcean } from '../../providers'
+import { ComputeValue } from './ComputeOptions'
 
 interface UseCompute {
-    compute: (did: DID) => Promise<void>
+  compute: (
-    computeStep?: number
+    did: DID,
-    computeError?: string
+    algorithmRawCode: string,
+    computeContainer: ComputeValue
+  ) => Promise<void>
+  computeStep?: number
+  computeError?: string
 }
 
 // TODO: customize for compute
 export const feedback: { [key in number]: string } = {
-    99: 'Decrypting file URL...',
+  99: 'Decrypting file URL...',
-    0: '1/3 Asking for agreement signature...',
+  0: '1/3 Asking for agreement signature...',
-    1: '1/3 Agreement initialized.',
+  1: '1/3 Agreement initialized.',
-    2: '2/3 Asking for two payment confirmations...',
+  2: '2/3 Asking for two payment confirmations...',
-    3: '2/3 Payment confirmed. Requesting access...',
+  3: '2/3 Payment confirmed. Requesting access...',
-    4: '3/3 Access granted. Consuming file...'
+  4: '3/3 Access granted. Consuming file...'
 }
 const rawAlgorithmMeta: MetaDataAlgorithm = {
-    rawcode: `console.log('Hello world'!)`,
+  rawcode: `console.log('Hello world'!)`,
-    format: 'docker-image',
+  format: 'docker-image',
-    version: '0.1',
+  version: '0.1',
-    container: {
+  container: {
-        entrypoint: '',
+    entrypoint: '',
-        image: '',
+    image: '',
-        tag: ''
+    tag: ''
-    }
+  }
 }
 
 function useCompute(): UseCompute {
+  const { ocean, account, accountId, config } = useOcean()
+  const [computeStep, setComputeStep] = useState<number | undefined>()
+  const [computeError, setComputeError] = useState<string | undefined>()
 
-    const { ocean, account, accountId, config } = useOcean()
+  async function compute(
-    const [computeStep, setComputeStep] = useState<number | undefined>()
+    did: DID | string,
-    const [computeError, setComputeError] = useState<string | undefined>()
+    algorithmRawCode: string,
+    computeContainer: ComputeValue
+  ): Promise<void> {
+    if (!ocean || !account) return
 
-    async function compute(did: DID | string): Promise<void> {
+    setComputeError(undefined)
-        if (!ocean || !account) return
 
-        setComputeError(undefined)
+    try {
+      const computeOutput = {
+        publishAlgorithmLog: false,
+        publishOutput: false,
+        brizoAddress: config.brizoAddress,
+        brizoUri: config.brizoUri,
+        metadataUri: config.aquariusUri,
+        nodeUri: config.nodeUri,
+        owner: accountId,
+        secretStoreUri: config.secretStoreUri
+      }
 
-        try {
+      const agreement = await ocean.compute
-            const computeOutput = {
+        .order(account, did as string)
-                publishAlgorithmLog: false,
+        .next((step: number) => setComputeStep(step))
-                publishOutput: false,
-                brizoAddress: config.brizoAddress,
-                brizoUri: config.brizoUri,
-                metadataUri: config.aquariusUri,
-                nodeUri: config.nodeUri,
-                owner: accountId,
-                secretStoreUri: config.secretStoreUri
-            }
 
-            const agreement = await ocean.compute
+      rawAlgorithmMeta.container = computeContainer
-                .order(account, did as string)
+      rawAlgorithmMeta.rawcode = algorithmRawCode
-                .next((step: number) => setComputeStep(step))
 
-           // rawAlgorithmMeta.container = computeContainer
+      await ocean.compute.start(
-           // rawAlgorithmMeta.rawcode = 'algorithmRawCode'
+        account,
-
+        agreement,
-            await ocean.compute.start(
+        undefined,
-                account,
+        rawAlgorithmMeta,
-                agreement,
+        computeOutput
-                undefined,
+      )
-                rawAlgorithmMeta,
+    } catch (error) {
-                computeOutput
+      setComputeError(error.message)
-            )
+    } finally {
-
+      setComputeStep(undefined)
-
-        } catch (error) {
-            setComputeError(error.message)
-        } finally {
-            setComputeStep(undefined)
-        }
     }
+  }
 
-    return { compute, computeStep, computeError }
+  return { compute, computeStep, computeError }
 }
 
 export { useCompute, UseCompute }

src/index.ts

@@ -3,3 +3,5 @@ import './@types/globals'
 export * from './providers'
 export * from './hooks'
 // export * from './components'
+
+export * from './utils'

src/utils/index.ts

@@ -0,0 +1,13 @@
+export function readFileContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onerror = () => {
+      reader.abort()
+      reject(new DOMException('Problem parsing input file.'))
+    }
+    reader.onload = () => {
+      resolve(reader.result as string)
+    }
+    reader.readAsText(file)
+  })
+}