Merge pull request #6 from oceanprotocol/feature/compute

Feature/compute

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useConsume'
 export * from './useMetadata'
+export * from './useCompute'

src/hooks/useCompute/ComputeOptions.ts

@@ -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/index.ts

@@ -0,0 +1,2 @@
+export * from './useCompute'
+export * from './ComputeOptions'

src/hooks/useCompute/useCompute.ts

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

src/index.ts

@@ -1,3 +1,5 @@
 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)
+  })
+}