From 65b99456a63f3239005f4b1dddf6d207b3e45173 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Jan 2020 13:01:39 +0100
Subject: [PATCH 01/22] add Compute component example

---
 src/Compute.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.js   |  3 +++
 2 files changed, 65 insertions(+)
 create mode 100644 src/Compute.js

diff --git a/src/Compute.js b/src/Compute.js
new file mode 100644
index 0000000..70a1a0a
--- /dev/null
+++ b/src/Compute.js
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import asset from './asset'
+
+export default function Compute({ ocean, web3 }) {
+  const [ddoAsset, setDdoAsset] = useState('')
+  const [ddoAlgorithm, setDdoAlgorithm] = useState('')
+
+  // publish a dataset and an algorithm
+  async function publish() {
+    try {
+      const accounts = await ocean.accounts.list()
+      const ddoAssetNew = await ocean.assets.create(asset, accounts[0])
+      const ddoAlgorithmNew = await ocean.assets.create(asset, accounts[0])
+
+      console.log('Asset successfully submitted.')
+      console.log(ddoAssetNew)
+      console.log(ddoAlgorithmNew)
+      // keep track of this registered asset for consumption later on
+      setDdoAsset(ddoAssetNew)
+      setDdoAlgorithm(ddoAlgorithmNew)
+      alert(
+        'Asset successfully submitted. Look into your console to see the response DDO object.'
+      )
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  // order and start the compute service
+  async function start() {
+    try {
+      const accounts = await ocean.accounts.list()
+
+      // order the compute service
+      const agreementId = await ocean.compute.order(accounts[0], ddoAsset.id)
+
+      // start a compute job
+      const status = await ocean.compute.start(
+        accounts[0],
+        agreementId,
+        ddoAlgorithm.id
+      )
+      console.log(status)
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  // get results
+
+  return (
+    <>
+      <h3>Compute</h3>
+      <button onClick={() => publish()} disabled={!web3}>
+        Publish dataset and algorithm
+      </button>
+      <button onClick={() => start()} disabled={!web3}>
+        Order and start compute service
+      </button>
+    </>
+  )
+}
diff --git a/src/index.js b/src/index.js
index 9d8b74c..7f6395c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 import asset from './asset'
+import Compute from './Compute'
 
 let web3
 
@@ -119,6 +120,8 @@ class App extends Component {
         <button onClick={() => this.consumeAsset()} disabled={!web3}>
           Consume asset
         </button>
+        <hr />
+        <Compute ocean={this.state.ocean} web3={web3} />
       </div>
     )
   }

From dca0432b7c05f7e62a75660b88faa43b1759d0e5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Jan 2020 14:22:23 +0100
Subject: [PATCH 02/22] bump to squid-js 2.0.0-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 106b814..a54c318 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^1.2.0",
+    "@oceanprotocol/squid": "^2.0.0-beta.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",

From 0e9de2404b6018f4a7b8ab5d3a9f45f065f0d006 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Jan 2020 15:20:04 +0100
Subject: [PATCH 03/22] update ocean.assets.order

---
 src/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 7f6395c..f5c7656 100644
--- a/src/index.js
+++ b/src/index.js
@@ -81,7 +81,6 @@ class App extends Component {
       // order service agreement
       const agreement = await this.state.ocean.assets.order(
         consumeAsset.id,
-        service.index,
         accounts[0]
       )
       // consume it

From 0790ba6465b983ee3945b1d9d54dd35ca5d3d664 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 28 Jan 2020 15:43:16 +0100
Subject: [PATCH 04/22] bump squid-js

---
 package.json | 2 +-
 src/index.js | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a54c318..33ce269 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^2.0.0-beta.0",
+    "@oceanprotocol/squid": "^2.0.0-beta.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",
diff --git a/src/index.js b/src/index.js
index f5c7656..edd0f58 100644
--- a/src/index.js
+++ b/src/index.js
@@ -76,8 +76,6 @@ class App extends Component {
       const accounts = await this.state.ocean.accounts.list()
       // get our registered asset
       const consumeAsset = this.state.ddo
-      // get service we want to execute
-      const service = consumeAsset.findServiceByType('access')
       // order service agreement
       const agreement = await this.state.ocean.assets.order(
         consumeAsset.id,
@@ -87,7 +85,6 @@ class App extends Component {
       await this.state.ocean.assets.consume(
         agreement,
         consumeAsset.id,
-        service.index,
         accounts[0],
         '',
         0

From 6bfd96d13dc235922432f57581cc7bfe3207e423 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 31 Jan 2020 15:02:01 +0100
Subject: [PATCH 05/22] bump to squid-js v2.0.0-beta.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 33ce269..b2552a4 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^2.0.0-beta.1",
+    "@oceanprotocol/squid": "^2.0.0-beta.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",

From 5ca05440e4c9d39d4936b9fae2d0dae877fe784d Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Tue, 10 Mar 2020 13:32:34 +0200
Subject: [PATCH 06/22] fix compute tutorial

---
 scripts/keeper.sh |  31 ++++++++
 src/Compute.js    |  86 +++++++++++++++++----
 src/asset.js      | 185 ++++++++++++++++++++++++++++++----------------
 src/index.js      |  26 +++----
 4 files changed, 236 insertions(+), 92 deletions(-)
 create mode 100755 scripts/keeper.sh

diff --git a/scripts/keeper.sh b/scripts/keeper.sh
new file mode 100755
index 0000000..9d14fdf
--- /dev/null
+++ b/scripts/keeper.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+
+# Wait for contracts migration and extract Keeper artifacts
+
+RETRY_COUNT=0
+COMMAND_STATUS=1
+
+printf '\n\e[33m◯ Waiting for contracts to be generated...\e[0m\n'
+
+mkdir -p artifacts
+
+until [ $COMMAND_STATUS -eq 0 ] || [ $RETRY_COUNT -eq 120 ]; do
+  keeper_contracts_docker_id=$(docker container ls | grep keeper-contracts | awk '{print $1}')
+  docker cp ${keeper_contracts_docker_id}:/keeper-contracts/artifacts/ready ./artifacts/ > /dev/null 2>&1
+  COMMAND_STATUS=$?
+  sleep 5
+  (( RETRY_COUNT=RETRY_COUNT+1 ))
+done
+
+printf '\e[32m✔ Found new contract artifacts.\e[0m\n'
+
+rm -rf ./artifacts/
+
+if [ $COMMAND_STATUS -ne 0 ]; then
+  echo "Waited for more than two minutes, but keeper contracts have not been migrated yet. Did you run an Ethereum RPC client and the migration script?"
+  exit 1
+fi
+
+docker cp "${keeper_contracts_docker_id}":/keeper-contracts/artifacts/. ./node_modules/@oceanprotocol/keeper-contracts/artifacts/
+
+printf '\e[32m✔ Copied new contract artifacts.\e[0m\n'
diff --git a/src/Compute.js b/src/Compute.js
index 70a1a0a..a5f0947 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,26 +1,49 @@
 import React, { useState } from 'react'
-import asset from './asset'
+import * as Assets from './asset'
 
 export default function Compute({ ocean, web3 }) {
   const [ddoAsset, setDdoAsset] = useState('')
+  const [jobStatus, setJobStatus] = useState('')
+  const [jobId, setJobId] = useState('')
+  const [agreementId, setAgreementId] = useState('')
   const [ddoAlgorithm, setDdoAlgorithm] = useState('')
-
+  const computestate = {
+    inputdid: '',
+    algodid: '',
+    algooutput:''
+  }
   // publish a dataset and an algorithm
   async function publish() {
     try {
       const accounts = await ocean.accounts.list()
-      const ddoAssetNew = await ocean.assets.create(asset, accounts[0])
-      const ddoAlgorithmNew = await ocean.assets.create(asset, accounts[0])
-
+      console.log('Publishing asset.')
+      
+      
+      const service=await Assets.createComputeService(ocean,accounts[0],"0","2020-03-10T10:00:00Z")
+      console.log(service)
+      const ddoAssetNew = await ocean.assets.create(Assets.getAsset(), accounts[0],[service])
       console.log('Asset successfully submitted.')
       console.log(ddoAssetNew)
-      console.log(ddoAlgorithmNew)
       // keep track of this registered asset for consumption later on
       setDdoAsset(ddoAssetNew)
+      alert( 'Asset successfully submitted.'  )
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+
+  async function publishalgo() {
+    try {
+      const accounts = await ocean.accounts.list()
+      console.log('Publishing algo.')
+      
+      const ddoAlgorithmNew = await ocean.assets.create(Assets.getAlgoAsset(), accounts[0])
+      console.log(ddoAlgorithmNew)
+      console.log('Algo asset successfully submitted.')
+      // keep track of this registered asset for consumption later on
       setDdoAlgorithm(ddoAlgorithmNew)
-      alert(
-        'Asset successfully submitted. Look into your console to see the response DDO object.'
-      )
+      alert( 'Algorithm successfully submitted.'  )
     } catch (error) {
       console.error(error.message)
     }
@@ -32,14 +55,33 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
 
       // order the compute service
-      const agreementId = await ocean.compute.order(accounts[0], ddoAsset.id)
-
+      const agreement = await ocean.compute.order(accounts[0], ddoAsset.id)
+      setAgreementId(agreement)
       // start a compute job
       const status = await ocean.compute.start(
         accounts[0],
-        agreementId,
+        agreement,
         ddoAlgorithm.id
       )
+      setJobId(status.jobId)
+      console.log(status)
+      alert( 'Job created.  You can query for status now'  )
+    } catch (error) {
+      console.error(error.message)
+    }
+  }
+
+  async function getStatus() {
+    try {
+      const accounts = await ocean.accounts.list()
+      // start a compute job
+
+      const status = await ocean.compute.status(
+        accounts[0],
+        agreementId,
+        jobId
+      )
+      setJobStatus(JSON.stringify(status, null, '\t'))
       console.log(status)
     } catch (error) {
       console.error(error.message)
@@ -52,11 +94,27 @@ export default function Compute({ ocean, web3 }) {
     <>
       <h3>Compute</h3>
       <button onClick={() => publish()} disabled={!web3}>
-        Publish dataset and algorithm
+        1) Publish dataset with compute service
       </button>
+      <button onClick={() => publishalgo()} disabled={!web3}>
+        2) Publish algorithm
+      </button>
+      
       <button onClick={() => start()} disabled={!web3}>
-        Order and start compute service
+        3)Order and start compute service
       </button>
+      <button onClick={() => getStatus()} disabled={!web3}>
+        4)Get Job Status
+      </button>
+      <hr />
+      Asset DID:<input type="text" value={ddoAsset.id}></input>
+      <hr />
+      Algo DID:<input type="text" value={ddoAlgorithm.id}></input>
+      <hr />
+      Job ID:<input type="text" value={jobId}></input>
+      <hr />
+      Compute status:<textarea rows="10" cols="180" value={jobStatus}></textarea>
+      
     </>
   )
 }
diff --git a/src/asset.js b/src/asset.js
index fda5ee5..fd06034 100644
--- a/src/asset.js
+++ b/src/asset.js
@@ -1,66 +1,121 @@
-const asset = {
-  main: {
-    name: '10 Monkey Species Small',
-    dateCreated: '2012-02-01T10:55:11Z',
-    author: 'Mario',
-    type: 'dataset',
-    license: 'CC0: Public Domain',
-    price: '0',
-    files: [
-      {
-        index: 0,
-        contentType: 'application/zip',
-        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-        checksumType: 'MD5',
-        contentLength: '12057507',
-        compression: 'zip',
-        encoding: 'UTF-8',
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-      },
-      {
-        index: 1,
-        contentType: 'text/txt',
-        checksum: '354d19c0733c47ef3a6cce5b633116b0',
-        checksumType: 'MD5',
-        contentLength: '928',
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-      }
-    ]
-  },
-  additionalInformation: {
-    categories: ['Biology'],
-    tags: ['image data', 'classification', 'animals'],
-    description: 'EXAMPLE ONLY ',
-    copyrightHolder: 'Unknown',
-    workExample: 'image path, id, label',
-    links: [
-      {
-        name: 'example model',
-        url:
-          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-      },
-      {
-        name: 'example code',
-        type: 'example code',
-        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
-        name: 'n5151.jpg',
-        type: 'discovery'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
-        name: 'sample.zip',
-        type: 'sample'
-      }
-    ],
-    inLanguage: 'en'
-  }
-}
 
-export default asset
+
+   export function getAsset(){
+      const asset = {
+          main: {
+            name: '10 Monkey Species Small',
+            dateCreated: '2012-02-01T10:55:11Z',
+            author: 'Mario',
+            type: 'dataset',
+            license: 'CC0: Public Domain',
+            price: '0',
+            files: [
+              {
+                index: 0,
+                contentType: 'application/zip',
+                checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
+                checksumType: 'MD5',
+                contentLength: '12057507',
+                compression: 'zip',
+                encoding: 'UTF-8',
+                url:
+                  'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
+              },
+              {
+                index: 1,
+                contentType: 'text/txt',
+                checksum: '354d19c0733c47ef3a6cce5b633116b0',
+                checksumType: 'MD5',
+                contentLength: '928',
+                url:
+                  'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
+              }
+              ]
+          },    
+          additionalInformation: {
+              categories: ['Biology'],
+              tags: ['image data', 'classification', 'animals'],
+              description: 'EXAMPLE ONLY ',
+              copyrightHolder: 'Unknown',
+              workExample: 'image path, id, label',
+              links: [
+                {
+                  name: 'example model',
+                  url:
+                    'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
+                },
+                {
+                  name: 'example code',
+                  type: 'example code',
+                  url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
+                }
+              ],
+              inLanguage: 'en'
+          }
+      }
+    return(asset)
+   }
+
+
+   export function getAlgoAsset(){
+        const algoasset = {
+            main: {
+              name: 'My great algo',
+              dateCreated: '2012-02-01T10:55:11Z',
+              author: 'Alex',
+              type: "algorithm",
+              algorithm: {
+                  format: "docker-image",
+                  version: "0.1",
+                  container: {
+                      entrypoint: "node $ALGO",
+                      image: "node",
+                      tag: "10"
+                  }
+              },
+              license: 'CC0: Public Domain',
+              price: '0',
+              files: [
+                  {
+                    index: 0,
+                    contentType: 'application/text',
+                    contentLength: '12057507',
+                    compression: 'zip',
+                    encoding: 'UTF-8',
+                    url: 'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
+                  }
+              ]
+            },
+            additionalInformation: {
+                description: 'My super algo '
+            }
+      }
+  return(algoasset)
+  }
+
+
+  export async function createComputeService(ocean: Ocean,publisher: Account,price: string,datePublished: string){
+      const { templates } = ocean.keeper
+      const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
+      const name = 'dataAssetComputingServiceAgreement'
+      const service = {
+          type: 'compute',
+          serviceEndpoint: ocean.brizo.getComputeEndpoint(),
+          templateId: templates.escrowComputeExecutionTemplate.getId(),
+          attributes: {
+              main: {
+                  creator: publisher.getId(),
+                  datePublished,
+                  price,
+                  timeout: 3600,
+                  name
+              },
+              serviceAgreementTemplate
+          }
+      }
+      return(service)
+  }
+
+
+
+//export default Assets
diff --git a/src/index.js b/src/index.js
index edd0f58..7f909ae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
-import asset from './asset'
+import * as Assets from './asset'
 import Compute from './Compute'
 
 let web3
@@ -16,23 +16,23 @@ class App extends Component {
   state = {
     ocean: undefined,
     results: [],
-    ddo: undefined
+    ddo: undefined    
   }
 
   async componentDidMount() {
     const ocean = await new Ocean.getInstance({
       web3Provider: web3,
-      nodeUri: 'https://nile.dev-ocean.com',
-      aquariusUri: 'https://aquarius.marketplace.dev-ocean.com',
-      brizoUri: 'https://brizo.marketplace.dev-ocean.com',
-      brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
-      secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
+      //nodeUri: 'https://nile.dev-ocean.com',
+      //aquariusUri: 'https://aquarius.marketplace.dev-ocean.com',
+      //brizoUri: 'https://brizo.marketplace.dev-ocean.com',
+      //brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
+      //secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
       // local Spree connection
-      // nodeUri: 'http://localhost:8545',
-      // aquariusUri: 'http://aquarius:5000',
-      // brizoUri: 'http://localhost:8030',
-      // brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
-      // secretStoreUri: 'http://localhost:12001',
+      nodeUri: 'http://localhost:8545',
+      aquariusUri: 'http://aquarius:5000',
+      brizoUri: 'http://localhost:8030',
+      brizoAddress: '0x068Ed00cF0441e4829D9784fCBe7b9e26D4BD8d0',
+      secretStoreUri: 'http://localhost:12001',
       verbose: true
     })
     this.setState({ ocean })
@@ -42,7 +42,7 @@ class App extends Component {
   async registerAsset() {
     try {
       const accounts = await this.state.ocean.accounts.list()
-      const ddo = await this.state.ocean.assets.create(asset, accounts[0])
+      const ddo = await this.state.ocean.assets.create(Assets.getAsset(), accounts[0])
       console.log('Asset successfully submitted.')
       console.log(ddo)
       // keep track of this registered asset for consumption later on

From 3fecbc4cbfe863081ba589d81434bdbcd438f9d6 Mon Sep 17 00:00:00 2001
From: Klaudiusz Dembler <kdembler@gmail.com>
Date: Thu, 12 Mar 2020 09:16:09 +0100
Subject: [PATCH 07/22] cleanup and style fixes

---
 package.json   |   2 +-
 src/Compute.js |  60 +++++++------
 src/asset.js   | 233 ++++++++++++++++++++++++-------------------------
 src/index.js   |   7 +-
 4 files changed, 154 insertions(+), 148 deletions(-)

diff --git a/package.json b/package.json
index b2552a4..ff93285 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^2.0.0-beta.2",
+    "@oceanprotocol/squid": "^2.0.0-beta.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",
diff --git a/src/Compute.js b/src/Compute.js
index a5f0947..4292ec9 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -2,48 +2,54 @@ import React, { useState } from 'react'
 import * as Assets from './asset'
 
 export default function Compute({ ocean, web3 }) {
-  const [ddoAsset, setDdoAsset] = useState('')
+  const [ddoAsset, setDdoAsset] = useState({ id: '' })
   const [jobStatus, setJobStatus] = useState('')
   const [jobId, setJobId] = useState('')
   const [agreementId, setAgreementId] = useState('')
-  const [ddoAlgorithm, setDdoAlgorithm] = useState('')
-  const computestate = {
-    inputdid: '',
-    algodid: '',
-    algooutput:''
-  }
+  const [ddoAlgorithm, setDdoAlgorithm] = useState({ id: '' })
+
   // publish a dataset and an algorithm
   async function publish() {
     try {
       const accounts = await ocean.accounts.list()
       console.log('Publishing asset.')
-      
-      
-      const service=await Assets.createComputeService(ocean,accounts[0],"0","2020-03-10T10:00:00Z")
+
+      const service = await Assets.createComputeService(
+        ocean,
+        accounts[0],
+        '0',
+        '2020-03-10T10:00:00Z'
+      )
       console.log(service)
-      const ddoAssetNew = await ocean.assets.create(Assets.getAsset(), accounts[0],[service])
+      const ddoAssetNew = await ocean.assets.create(
+        Assets.getAsset(),
+        accounts[0],
+        [service]
+      )
       console.log('Asset successfully submitted.')
       console.log(ddoAssetNew)
       // keep track of this registered asset for consumption later on
       setDdoAsset(ddoAssetNew)
-      alert( 'Asset successfully submitted.'  )
+      alert('Asset successfully submitted.')
     } catch (error) {
       console.error(error.message)
     }
   }
 
-
   async function publishalgo() {
     try {
       const accounts = await ocean.accounts.list()
       console.log('Publishing algo.')
-      
-      const ddoAlgorithmNew = await ocean.assets.create(Assets.getAlgoAsset(), accounts[0])
+
+      const ddoAlgorithmNew = await ocean.assets.create(
+        Assets.getAlgoAsset(),
+        accounts[0]
+      )
       console.log(ddoAlgorithmNew)
       console.log('Algo asset successfully submitted.')
       // keep track of this registered asset for consumption later on
       setDdoAlgorithm(ddoAlgorithmNew)
-      alert( 'Algorithm successfully submitted.'  )
+      alert('Algorithm successfully submitted.')
     } catch (error) {
       console.error(error.message)
     }
@@ -65,7 +71,7 @@ export default function Compute({ ocean, web3 }) {
       )
       setJobId(status.jobId)
       console.log(status)
-      alert( 'Job created.  You can query for status now'  )
+      alert('Job created.  You can query for status now')
     } catch (error) {
       console.error(error.message)
     }
@@ -76,11 +82,7 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       // start a compute job
 
-      const status = await ocean.compute.status(
-        accounts[0],
-        agreementId,
-        jobId
-      )
+      const status = await ocean.compute.status(accounts[0], agreementId, jobId)
       setJobStatus(JSON.stringify(status, null, '\t'))
       console.log(status)
     } catch (error) {
@@ -99,7 +101,6 @@ export default function Compute({ ocean, web3 }) {
       <button onClick={() => publishalgo()} disabled={!web3}>
         2) Publish algorithm
       </button>
-      
       <button onClick={() => start()} disabled={!web3}>
         3)Order and start compute service
       </button>
@@ -107,14 +108,17 @@ export default function Compute({ ocean, web3 }) {
         4)Get Job Status
       </button>
       <hr />
-      Asset DID:<input type="text" value={ddoAsset.id}></input>
+      Asset DID:
+      <input type="text" value={ddoAsset.id} readOnly />
       <hr />
-      Algo DID:<input type="text" value={ddoAlgorithm.id}></input>
+      Algo DID:
+      <input type="text" value={ddoAlgorithm.id} readOnly />
       <hr />
-      Job ID:<input type="text" value={jobId}></input>
+      Job ID:
+      <input type="text" value={jobId} readOnly />
       <hr />
-      Compute status:<textarea rows="10" cols="180" value={jobStatus}></textarea>
-      
+      Compute status:
+      <textarea rows="10" cols="180" value={jobStatus} readOnly />
     </>
   )
 }
diff --git a/src/asset.js b/src/asset.js
index fd06034..c147e47 100644
--- a/src/asset.js
+++ b/src/asset.js
@@ -1,121 +1,120 @@
-
-
-   export function getAsset(){
-      const asset = {
-          main: {
-            name: '10 Monkey Species Small',
-            dateCreated: '2012-02-01T10:55:11Z',
-            author: 'Mario',
-            type: 'dataset',
-            license: 'CC0: Public Domain',
-            price: '0',
-            files: [
-              {
-                index: 0,
-                contentType: 'application/zip',
-                checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-                checksumType: 'MD5',
-                contentLength: '12057507',
-                compression: 'zip',
-                encoding: 'UTF-8',
-                url:
-                  'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-              },
-              {
-                index: 1,
-                contentType: 'text/txt',
-                checksum: '354d19c0733c47ef3a6cce5b633116b0',
-                checksumType: 'MD5',
-                contentLength: '928',
-                url:
-                  'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-              }
-              ]
-          },    
-          additionalInformation: {
-              categories: ['Biology'],
-              tags: ['image data', 'classification', 'animals'],
-              description: 'EXAMPLE ONLY ',
-              copyrightHolder: 'Unknown',
-              workExample: 'image path, id, label',
-              links: [
-                {
-                  name: 'example model',
-                  url:
-                    'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-                },
-                {
-                  name: 'example code',
-                  type: 'example code',
-                  url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-                }
-              ],
-              inLanguage: 'en'
-          }
-      }
-    return(asset)
-   }
-
-
-   export function getAlgoAsset(){
-        const algoasset = {
-            main: {
-              name: 'My great algo',
-              dateCreated: '2012-02-01T10:55:11Z',
-              author: 'Alex',
-              type: "algorithm",
-              algorithm: {
-                  format: "docker-image",
-                  version: "0.1",
-                  container: {
-                      entrypoint: "node $ALGO",
-                      image: "node",
-                      tag: "10"
-                  }
-              },
-              license: 'CC0: Public Domain',
-              price: '0',
-              files: [
-                  {
-                    index: 0,
-                    contentType: 'application/text',
-                    contentLength: '12057507',
-                    compression: 'zip',
-                    encoding: 'UTF-8',
-                    url: 'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
-                  }
-              ]
-            },
-            additionalInformation: {
-                description: 'My super algo '
-            }
-      }
-  return(algoasset)
+export function getAsset() {
+  const asset = {
+    main: {
+      name: '10 Monkey Species Small',
+      dateCreated: '2012-02-01T10:55:11Z',
+      author: 'Mario',
+      type: 'dataset',
+      license: 'CC0: Public Domain',
+      price: '0',
+      files: [
+        {
+          index: 0,
+          contentType: 'application/zip',
+          checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
+          checksumType: 'MD5',
+          contentLength: '12057507',
+          compression: 'zip',
+          encoding: 'UTF-8',
+          url:
+            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
+        },
+        {
+          index: 1,
+          contentType: 'text/txt',
+          checksum: '354d19c0733c47ef3a6cce5b633116b0',
+          checksumType: 'MD5',
+          contentLength: '928',
+          url:
+            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
+        }
+      ]
+    },
+    additionalInformation: {
+      categories: ['Biology'],
+      tags: ['image data', 'classification', 'animals'],
+      description: 'EXAMPLE ONLY ',
+      copyrightHolder: 'Unknown',
+      workExample: 'image path, id, label',
+      links: [
+        {
+          name: 'example model',
+          url:
+            'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
+        },
+        {
+          name: 'example code',
+          type: 'example code',
+          url:
+            'https://github.com/slothkong/CNN_classification_10_monkey_species'
+        }
+      ],
+      inLanguage: 'en'
+    }
   }
+  return asset
+}
 
-
-  export async function createComputeService(ocean: Ocean,publisher: Account,price: string,datePublished: string){
-      const { templates } = ocean.keeper
-      const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
-      const name = 'dataAssetComputingServiceAgreement'
-      const service = {
-          type: 'compute',
-          serviceEndpoint: ocean.brizo.getComputeEndpoint(),
-          templateId: templates.escrowComputeExecutionTemplate.getId(),
-          attributes: {
-              main: {
-                  creator: publisher.getId(),
-                  datePublished,
-                  price,
-                  timeout: 3600,
-                  name
-              },
-              serviceAgreementTemplate
-          }
-      }
-      return(service)
+export function getAlgoAsset() {
+  const algoasset = {
+    main: {
+      name: 'My great algo',
+      dateCreated: '2012-02-01T10:55:11Z',
+      author: 'Alex',
+      type: 'algorithm',
+      algorithm: {
+        format: 'docker-image',
+        version: '0.1',
+        container: {
+          entrypoint: 'node $ALGO',
+          image: 'node',
+          tag: '10'
+        }
+      },
+      license: 'CC0: Public Domain',
+      price: '0',
+      files: [
+        {
+          index: 0,
+          contentType: 'application/text',
+          contentLength: '12057507',
+          compression: 'zip',
+          encoding: 'UTF-8',
+          url:
+            'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
+        }
+      ]
+    },
+    additionalInformation: {
+      description: 'My super algo '
+    }
   }
+  return algoasset
+}
 
-
-
-//export default Assets
+export async function createComputeService(
+  ocean,
+  publisher,
+  price,
+  datePublished
+) {
+  const { templates } = ocean.keeper
+  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
+  const name = 'dataAssetComputingServiceAgreement'
+  const service = {
+    type: 'compute',
+    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
+    templateId: templates.escrowComputeExecutionTemplate.getId(),
+    attributes: {
+      main: {
+        creator: publisher.getId(),
+        datePublished,
+        price,
+        timeout: 3600,
+        name
+      },
+      serviceAgreementTemplate
+    }
+  }
+  return service
+}
diff --git a/src/index.js b/src/index.js
index 7f909ae..115534e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,7 +16,7 @@ class App extends Component {
   state = {
     ocean: undefined,
     results: [],
-    ddo: undefined    
+    ddo: undefined
   }
 
   async componentDidMount() {
@@ -42,7 +42,10 @@ class App extends Component {
   async registerAsset() {
     try {
       const accounts = await this.state.ocean.accounts.list()
-      const ddo = await this.state.ocean.assets.create(Assets.getAsset(), accounts[0])
+      const ddo = await this.state.ocean.assets.create(
+        Assets.getAsset(),
+        accounts[0]
+      )
       console.log('Asset successfully submitted.')
       console.log(ddo)
       // keep track of this registered asset for consumption later on

From de366ba87d5ca6135da469443980a365c55e63be Mon Sep 17 00:00:00 2001
From: Klaudiusz Dembler <kdembler@gmail.com>
Date: Mon, 16 Mar 2020 15:59:56 +0100
Subject: [PATCH 08/22] improve compute layout, add running raw algorithm

---
 package.json         |   3 +-
 src/Compute.js       | 118 +++++++++++++++++++------------
 src/asset.js         | 164 +++++++++++++------------------------------
 src/compute-asset.js |  70 ++++++++++++++++++
 src/index.js         |   7 +-
 5 files changed, 197 insertions(+), 165 deletions(-)
 create mode 100644 src/compute-asset.js

diff --git a/package.json b/package.json
index ff93285..2b4132d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",
-    "web3": "^1.2.5"
+    "web3": "^1.2.5",
+    "prettier": "^1.19.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/Compute.js b/src/Compute.js
index 4292ec9..87ec5ac 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import * as Assets from './asset'
+import { asset } from './asset'
+import { algoAsset, createComputeService, rawAlgoMeta } from './compute-asset'
 
 export default function Compute({ ocean, web3 }) {
-  const [ddoAsset, setDdoAsset] = useState({ id: '' })
+  const [ddoAssetId, setDdoAssetId] = useState('')
   const [jobStatus, setJobStatus] = useState('')
   const [jobId, setJobId] = useState('')
   const [agreementId, setAgreementId] = useState('')
-  const [ddoAlgorithm, setDdoAlgorithm] = useState({ id: '' })
+  const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
 
   // publish a dataset and an algorithm
   async function publish() {
@@ -14,22 +15,20 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing asset.')
 
-      const service = await Assets.createComputeService(
+      const service = await createComputeService(
         ocean,
         accounts[0],
         '0',
         '2020-03-10T10:00:00Z'
       )
       console.log(service)
-      const ddoAssetNew = await ocean.assets.create(
-        Assets.getAsset(),
-        accounts[0],
-        [service]
-      )
+      const ddoAssetNew = await ocean.assets.create(asset, accounts[0], [
+        service
+      ])
       console.log('Asset successfully submitted.')
       console.log(ddoAssetNew)
       // keep track of this registered asset for consumption later on
-      setDdoAsset(ddoAssetNew)
+      setDdoAssetId(ddoAssetNew.id)
       alert('Asset successfully submitted.')
     } catch (error) {
       console.error(error.message)
@@ -41,33 +40,30 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing algo.')
 
-      const ddoAlgorithmNew = await ocean.assets.create(
-        Assets.getAlgoAsset(),
-        accounts[0]
-      )
+      const ddoAlgorithmNew = await ocean.assets.create(algoAsset, accounts[0])
       console.log(ddoAlgorithmNew)
       console.log('Algo asset successfully submitted.')
       // keep track of this registered asset for consumption later on
-      setDdoAlgorithm(ddoAlgorithmNew)
+      setDdoAlgorithmId(ddoAlgorithmNew.id)
       alert('Algorithm successfully submitted.')
     } catch (error) {
       console.error(error.message)
     }
   }
 
-  // order and start the compute service
-  async function start() {
+  async function startCompute(algorithmId, algorithmMeta) {
     try {
       const accounts = await ocean.accounts.list()
 
       // order the compute service
-      const agreement = await ocean.compute.order(accounts[0], ddoAsset.id)
+      const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
       setAgreementId(agreement)
       // start a compute job
       const status = await ocean.compute.start(
         accounts[0],
         agreement,
-        ddoAlgorithm.id
+        algorithmId,
+        algorithmMeta
       )
       setJobId(status.jobId)
       console.log(status)
@@ -77,6 +73,15 @@ export default function Compute({ ocean, web3 }) {
     }
   }
 
+  // order and start the compute service
+  async function startWithPublishedAlgo() {
+    return startCompute(ddoAlgorithmId)
+  }
+
+  async function startWithRawAlgo() {
+    return startCompute(undefined, rawAlgoMeta)
+  }
+
   async function getStatus() {
     try {
       const accounts = await ocean.accounts.list()
@@ -92,33 +97,60 @@ export default function Compute({ ocean, web3 }) {
 
   // get results
 
+  if (!web3) {
+    return null
+  }
+
   return (
     <>
       <h3>Compute</h3>
-      <button onClick={() => publish()} disabled={!web3}>
-        1) Publish dataset with compute service
-      </button>
-      <button onClick={() => publishalgo()} disabled={!web3}>
-        2) Publish algorithm
-      </button>
-      <button onClick={() => start()} disabled={!web3}>
-        3)Order and start compute service
-      </button>
-      <button onClick={() => getStatus()} disabled={!web3}>
-        4)Get Job Status
-      </button>
-      <hr />
-      Asset DID:
-      <input type="text" value={ddoAsset.id} readOnly />
-      <hr />
-      Algo DID:
-      <input type="text" value={ddoAlgorithm.id} readOnly />
-      <hr />
-      Job ID:
-      <input type="text" value={jobId} readOnly />
-      <hr />
-      Compute status:
-      <textarea rows="10" cols="180" value={jobStatus} readOnly />
+      <ComputeSection>
+        <button onClick={publish}>Publish dataset with compute service</button>
+        Asset DID:
+        <input type="text" value={ddoAssetId} readOnly />
+      </ComputeSection>
+      <ComputeSection>
+        <button onClick={publishalgo}>Publish algorithm</button>
+        Algo DID:
+        <input type="text" value={ddoAlgorithmId} readOnly />
+      </ComputeSection>
+      <ComputeSection>
+        <button
+          onClick={startWithPublishedAlgo}
+          disabled={!ddoAssetId || !ddoAlgorithmId}
+        >
+          Order and start compute service with published algorithm
+        </button>
+        <button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
+          Order and start compute service with raw algorithm
+        </button>
+        Job ID:
+        <input type="text" value={jobId} readOnly />
+      </ComputeSection>
+      <ComputeSection>
+        <button onClick={getStatus} disabled={!jobId}>
+          Get Job Status
+        </button>
+        Compute status:
+        <textarea rows="20" cols="120" value={jobStatus} readOnly />
+      </ComputeSection>
+    </>
+  )
+}
+
+function ComputeSection({ children }) {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center'
+        }}
+      >
+        {children}
+      </div>
+      <hr />
     </>
   )
 }
diff --git a/src/asset.js b/src/asset.js
index c147e47..9cc4fe3 100644
--- a/src/asset.js
+++ b/src/asset.js
@@ -1,120 +1,52 @@
-export function getAsset() {
-  const asset = {
-    main: {
-      name: '10 Monkey Species Small',
-      dateCreated: '2012-02-01T10:55:11Z',
-      author: 'Mario',
-      type: 'dataset',
-      license: 'CC0: Public Domain',
-      price: '0',
-      files: [
-        {
-          index: 0,
-          contentType: 'application/zip',
-          checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-          checksumType: 'MD5',
-          contentLength: '12057507',
-          compression: 'zip',
-          encoding: 'UTF-8',
-          url:
-            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-        },
-        {
-          index: 1,
-          contentType: 'text/txt',
-          checksum: '354d19c0733c47ef3a6cce5b633116b0',
-          checksumType: 'MD5',
-          contentLength: '928',
-          url:
-            'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-        }
-      ]
-    },
-    additionalInformation: {
-      categories: ['Biology'],
-      tags: ['image data', 'classification', 'animals'],
-      description: 'EXAMPLE ONLY ',
-      copyrightHolder: 'Unknown',
-      workExample: 'image path, id, label',
-      links: [
-        {
-          name: 'example model',
-          url:
-            'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-        },
-        {
-          name: 'example code',
-          type: 'example code',
-          url:
-            'https://github.com/slothkong/CNN_classification_10_monkey_species'
-        }
-      ],
-      inLanguage: 'en'
-    }
-  }
-  return asset
-}
-
-export function getAlgoAsset() {
-  const algoasset = {
-    main: {
-      name: 'My great algo',
-      dateCreated: '2012-02-01T10:55:11Z',
-      author: 'Alex',
-      type: 'algorithm',
-      algorithm: {
-        format: 'docker-image',
-        version: '0.1',
-        container: {
-          entrypoint: 'node $ALGO',
-          image: 'node',
-          tag: '10'
-        }
+export const asset = {
+  main: {
+    name: '10 Monkey Species Small',
+    dateCreated: '2012-02-01T10:55:11Z',
+    author: 'Mario',
+    type: 'dataset',
+    license: 'CC0: Public Domain',
+    price: '0',
+    files: [
+      {
+        index: 0,
+        contentType: 'application/zip',
+        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
+        checksumType: 'MD5',
+        contentLength: '12057507',
+        compression: 'zip',
+        encoding: 'UTF-8',
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
       },
-      license: 'CC0: Public Domain',
-      price: '0',
-      files: [
-        {
-          index: 0,
-          contentType: 'application/text',
-          contentLength: '12057507',
-          compression: 'zip',
-          encoding: 'UTF-8',
-          url:
-            'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
-        }
-      ]
-    },
-    additionalInformation: {
-      description: 'My super algo '
-    }
-  }
-  return algoasset
-}
-
-export async function createComputeService(
-  ocean,
-  publisher,
-  price,
-  datePublished
-) {
-  const { templates } = ocean.keeper
-  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
-  const name = 'dataAssetComputingServiceAgreement'
-  const service = {
-    type: 'compute',
-    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
-    templateId: templates.escrowComputeExecutionTemplate.getId(),
-    attributes: {
-      main: {
-        creator: publisher.getId(),
-        datePublished,
-        price,
-        timeout: 3600,
-        name
+      {
+        index: 1,
+        contentType: 'text/txt',
+        checksum: '354d19c0733c47ef3a6cce5b633116b0',
+        checksumType: 'MD5',
+        contentLength: '928',
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
+      }
+    ]
+  },
+  additionalInformation: {
+    categories: ['Biology'],
+    tags: ['image data', 'classification', 'animals'],
+    description: 'EXAMPLE ONLY ',
+    copyrightHolder: 'Unknown',
+    workExample: 'image path, id, label',
+    links: [
+      {
+        name: 'example model',
+        url:
+          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
       },
-      serviceAgreementTemplate
-    }
+      {
+        name: 'example code',
+        type: 'example code',
+        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
+      }
+    ],
+    inLanguage: 'en'
   }
-  return service
 }
diff --git a/src/compute-asset.js b/src/compute-asset.js
new file mode 100644
index 0000000..e3ee533
--- /dev/null
+++ b/src/compute-asset.js
@@ -0,0 +1,70 @@
+export const algoAsset = {
+  main: {
+    name: 'My great algo',
+    dateCreated: '2012-02-01T10:55:11Z',
+    author: 'Alex',
+    type: 'algorithm',
+    algorithm: {
+      format: 'docker-image',
+      version: '0.1',
+      container: {
+        entrypoint: 'node $ALGO',
+        image: 'node',
+        tag: '10'
+      }
+    },
+    license: 'CC0: Public Domain',
+    price: '0',
+    files: [
+      {
+        index: 0,
+        contentType: 'application/text',
+        contentLength: '12057507',
+        compression: 'zip',
+        encoding: 'UTF-8',
+        url:
+          'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
+      }
+    ]
+  },
+  additionalInformation: {
+    description: 'My super algo'
+  }
+}
+
+export const rawAlgoMeta = {
+  rawcode: `console.log('Hello world'!)`,
+  format: 'docker-image',
+  version: '0.1',
+  container: {
+    entrypoint: 'node $ALGO',
+    image: 'node',
+    tag: '10'
+  }
+}
+
+export async function createComputeService(
+  ocean,
+  publisher,
+  price,
+  datePublished
+) {
+  const { templates } = ocean.keeper
+  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
+  const name = 'dataAssetComputingServiceAgreement'
+  return {
+    type: 'compute',
+    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
+    templateId: templates.escrowComputeExecutionTemplate.getId(),
+    attributes: {
+      main: {
+        creator: publisher.getId(),
+        datePublished,
+        price,
+        timeout: 3600,
+        name
+      },
+      serviceAgreementTemplate
+    }
+  }
+}
diff --git a/src/index.js b/src/index.js
index 115534e..47314e6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
-import * as Assets from './asset'
+import { asset } from './asset'
 import Compute from './Compute'
 
 let web3
@@ -42,10 +42,7 @@ class App extends Component {
   async registerAsset() {
     try {
       const accounts = await this.state.ocean.accounts.list()
-      const ddo = await this.state.ocean.assets.create(
-        Assets.getAsset(),
-        accounts[0]
-      )
+      const ddo = await this.state.ocean.assets.create(asset, accounts[0])
       console.log('Asset successfully submitted.')
       console.log(ddo)
       // keep track of this registered asset for consumption later on

From e9f5496ca128f5874c64dd6595ed816fb16279a8 Mon Sep 17 00:00:00 2001
From: Klaudiusz Dembler <kdembler@gmail.com>
Date: Tue, 17 Mar 2020 12:46:56 +0100
Subject: [PATCH 09/22] cleanup comments

---
 src/Compute.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index 87ec5ac..a2bcfe2 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -73,11 +73,12 @@ export default function Compute({ ocean, web3 }) {
     }
   }
 
-  // order and start the compute service
+  // order and start the compute service with an algorithm published as an asset
   async function startWithPublishedAlgo() {
     return startCompute(ddoAlgorithmId)
   }
 
+  // order and start the compute service with a passed raw algorithm
   async function startWithRawAlgo() {
     return startCompute(undefined, rawAlgoMeta)
   }
@@ -85,7 +86,6 @@ export default function Compute({ ocean, web3 }) {
   async function getStatus() {
     try {
       const accounts = await ocean.accounts.list()
-      // start a compute job
 
       const status = await ocean.compute.status(accounts[0], agreementId, jobId)
       setJobStatus(JSON.stringify(status, null, '\t'))
@@ -95,8 +95,6 @@ export default function Compute({ ocean, web3 }) {
     }
   }
 
-  // get results
-
   if (!web3) {
     return null
   }

From 34976679d48b65bd5360cff2ee254d634b05a846 Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Wed, 18 Mar 2020 13:53:48 +0200
Subject: [PATCH 10/22] use RawCode to start a job

---
 src/Compute.js | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index a2bcfe2..e387cfe 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -8,7 +8,8 @@ export default function Compute({ ocean, web3 }) {
   const [jobId, setJobId] = useState('')
   const [agreementId, setAgreementId] = useState('')
   const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
-
+  const [divAlgoStyle, setdivAlgoStyle] = useState('')
+  const [textRawAlgo, settextRawAlgo] = useState('')
   // publish a dataset and an algorithm
   async function publish() {
     try {
@@ -63,7 +64,7 @@ export default function Compute({ ocean, web3 }) {
         accounts[0],
         agreement,
         algorithmId,
-        algorithmMeta
+        JSON.stringify(algorithmMeta)
       )
       setJobId(status.jobId)
       console.log(status)
@@ -80,6 +81,7 @@ export default function Compute({ ocean, web3 }) {
 
   // order and start the compute service with a passed raw algorithm
   async function startWithRawAlgo() {
+    rawAlgoMeta.rawcode = textRawAlgo
     return startCompute(undefined, rawAlgoMeta)
   }
 
@@ -95,6 +97,18 @@ export default function Compute({ ocean, web3 }) {
     }
   }
 
+  async function showDivAlgo() {
+    if (divAlgoStyle === 'none') setdivAlgoStyle('block')
+    else setdivAlgoStyle('none')
+  }
+
+  async function updateRawAlgoCode(event) {
+    settextRawAlgo(event.target.value)
+  }
+
+  async function updateDdoAssetId(event) {
+    setDdoAssetId(event.target.value)
+  }
   if (!web3) {
     return null
   }
@@ -105,7 +119,7 @@ export default function Compute({ ocean, web3 }) {
       <ComputeSection>
         <button onClick={publish}>Publish dataset with compute service</button>
         Asset DID:
-        <input type="text" value={ddoAssetId} readOnly />
+        <input type="text" value={ddoAssetId} onChange={updateDdoAssetId} />
       </ComputeSection>
       <ComputeSection>
         <button onClick={publishalgo}>Publish algorithm</button>
@@ -122,6 +136,15 @@ export default function Compute({ ocean, web3 }) {
         <button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
           Order and start compute service with raw algorithm
         </button>
+        <button onClick={showDivAlgo}>Show/Hide Raw Algo</button>
+        <div style={{ display: divAlgoStyle }}>
+          <textarea
+            rows="20"
+            cols="120"
+            value={textRawAlgo}
+            onChange={updateRawAlgoCode}
+          />
+        </div>
         Job ID:
         <input type="text" value={jobId} readOnly />
       </ComputeSection>

From 23db8160b9cbcdf5b4695df19fb9dd6b3e9ecd5b Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Wed, 18 Mar 2020 23:56:09 +0200
Subject: [PATCH 11/22] add more features

---
 src/Compute.js | 44 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index e387cfe..b0309c0 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+
 import { asset } from './asset'
 import { algoAsset, createComputeService, rawAlgoMeta } from './compute-asset'
 
@@ -10,6 +11,8 @@ export default function Compute({ ocean, web3 }) {
   const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
   const [divAlgoStyle, setdivAlgoStyle] = useState('')
   const [textRawAlgo, settextRawAlgo] = useState('')
+  const [PublishLogState, setPublishLogState] = useState('')
+  const [PublishOutputState, setPublishOutputState] = useState('')
   // publish a dataset and an algorithm
   async function publish() {
     try {
@@ -55,6 +58,21 @@ export default function Compute({ ocean, web3 }) {
   async function startCompute(algorithmId, algorithmMeta) {
     try {
       const accounts = await ocean.accounts.list()
+      const ComputeOutput = {
+        publishAlgorithmLog:
+          PublishLogState === '' || PublishLogState === false ? false : true,
+        publishOutput:
+          PublishOutputState === '' || PublishOutputState === false
+            ? false
+            : true,
+        brizoAddress: ocean.config.brizoAddress,
+        brizoUri: ocean.config.brizoUri,
+        metadataUri: ocean.config.aquariusUri,
+        nodeUri: ocean.config.nodeUri,
+        owner: accounts[0].getId(),
+        secretStoreUri: ocean.config.secretStoreUri
+      }
+      console.log(ComputeOutput)
 
       // order the compute service
       const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
@@ -64,7 +82,8 @@ export default function Compute({ ocean, web3 }) {
         accounts[0],
         agreement,
         algorithmId,
-        JSON.stringify(algorithmMeta)
+        encodeURIComponent(JSON.stringify(algorithmMeta)),
+        ComputeOutput
       )
       setJobId(status.jobId)
       console.log(status)
@@ -109,6 +128,13 @@ export default function Compute({ ocean, web3 }) {
   async function updateDdoAssetId(event) {
     setDdoAssetId(event.target.value)
   }
+  async function handlePublishOutputState(event) {
+    setPublishOutputState(event.target.checked)
+  }
+  async function handlePublishLogState(event) {
+    setPublishLogState(event.target.checked)
+  }
+
   if (!web3) {
     return null
   }
@@ -127,6 +153,18 @@ export default function Compute({ ocean, web3 }) {
         <input type="text" value={ddoAlgorithmId} readOnly />
       </ComputeSection>
       <ComputeSection>
+        <input
+          type="checkbox"
+          checked={PublishOutputState}
+          onChange={handlePublishOutputState}
+        />
+        Publish Output into the Marketplace
+        <input
+          type="checkbox"
+          checked={PublishLogState}
+          onChange={handlePublishLogState}
+        />
+        Publish Algorithm Logs into the Marketplace
         <button
           onClick={startWithPublishedAlgo}
           disabled={!ddoAssetId || !ddoAlgorithmId}
@@ -139,7 +177,7 @@ export default function Compute({ ocean, web3 }) {
         <button onClick={showDivAlgo}>Show/Hide Raw Algo</button>
         <div style={{ display: divAlgoStyle }}>
           <textarea
-            rows="20"
+            rows="10"
             cols="120"
             value={textRawAlgo}
             onChange={updateRawAlgoCode}
@@ -153,7 +191,7 @@ export default function Compute({ ocean, web3 }) {
           Get Job Status
         </button>
         Compute status:
-        <textarea rows="20" cols="120" value={jobStatus} readOnly />
+        <textarea rows="15" cols="120" value={jobStatus} readOnly />
       </ComputeSection>
     </>
   )

From 8822bf7f4f591656375231ace14aaba383c9df7b Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Wed, 25 Mar 2020 22:05:04 +0200
Subject: [PATCH 12/22] fixes

---
 src/Compute.js | 16 ++++++++--------
 src/index.js   | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index b0309c0..44541e6 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -10,9 +10,9 @@ export default function Compute({ ocean, web3 }) {
   const [agreementId, setAgreementId] = useState('')
   const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
   const [divAlgoStyle, setdivAlgoStyle] = useState('')
-  const [textRawAlgo, settextRawAlgo] = useState('')
-  const [PublishLogState, setPublishLogState] = useState('')
-  const [PublishOutputState, setPublishOutputState] = useState('')
+  const [textRawAlgo, setTextRawAlgo] = useState('')
+  const [publishLogState, setPublishLogState] = useState('')
+  const [publishOutputState, setPublishOutputState] = useState('')
   // publish a dataset and an algorithm
   async function publish() {
     try {
@@ -60,9 +60,9 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       const ComputeOutput = {
         publishAlgorithmLog:
-          PublishLogState === '' || PublishLogState === false ? false : true,
+          publishLogState === '' || publishLogState === false ? false : true,
         publishOutput:
-          PublishOutputState === '' || PublishOutputState === false
+          publishOutputState === '' || publishOutputState === false
             ? false
             : true,
         brizoAddress: ocean.config.brizoAddress,
@@ -122,7 +122,7 @@ export default function Compute({ ocean, web3 }) {
   }
 
   async function updateRawAlgoCode(event) {
-    settextRawAlgo(event.target.value)
+    setTextRawAlgo(event.target.value)
   }
 
   async function updateDdoAssetId(event) {
@@ -155,13 +155,13 @@ export default function Compute({ ocean, web3 }) {
       <ComputeSection>
         <input
           type="checkbox"
-          checked={PublishOutputState}
+          checked={publishOutputState}
           onChange={handlePublishOutputState}
         />
         Publish Output into the Marketplace
         <input
           type="checkbox"
-          checked={PublishLogState}
+          checked={publishLogState}
           onChange={handlePublishLogState}
         />
         Publish Algorithm Logs into the Marketplace
diff --git a/src/index.js b/src/index.js
index 47314e6..3013530 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,17 +22,17 @@ class App extends Component {
   async componentDidMount() {
     const ocean = await new Ocean.getInstance({
       web3Provider: web3,
-      //nodeUri: 'https://nile.dev-ocean.com',
-      //aquariusUri: 'https://aquarius.marketplace.dev-ocean.com',
-      //brizoUri: 'https://brizo.marketplace.dev-ocean.com',
-      //brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
-      //secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
+      nodeUri: 'https://nile.dev-ocean.com',
+      aquariusUri: 'https://aquarius.marketplace.dev-ocean.com',
+      brizoUri: 'https://brizo.marketplace.dev-ocean.com',
+      brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
+      secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
       // local Spree connection
-      nodeUri: 'http://localhost:8545',
-      aquariusUri: 'http://aquarius:5000',
-      brizoUri: 'http://localhost:8030',
-      brizoAddress: '0x068Ed00cF0441e4829D9784fCBe7b9e26D4BD8d0',
-      secretStoreUri: 'http://localhost:12001',
+      //nodeUri: 'http://localhost:8545',
+      //aquariusUri: 'http://aquarius:5000',
+      //brizoUri: 'http://localhost:8030',
+      //brizoAddress: '0x068Ed00cF0441e4829D9784fCBe7b9e26D4BD8d0',
+      //secretStoreUri: 'http://localhost:12001',
       verbose: true
     })
     this.setState({ ocean })

From 79c66240f65fa56be01ce8ba285984a87dc1099f Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Mon, 30 Mar 2020 10:10:38 +0300
Subject: [PATCH 13/22] fixes

---
 src/Compute.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index 44541e6..1c9c453 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -9,10 +9,11 @@ export default function Compute({ ocean, web3 }) {
   const [jobId, setJobId] = useState('')
   const [agreementId, setAgreementId] = useState('')
   const [ddoAlgorithmId, setDdoAlgorithmId] = useState('')
-  const [divAlgoStyle, setdivAlgoStyle] = useState('')
+  const [isAlgoInputVisible, setIsAlgoInputVisible] = useState('')
   const [textRawAlgo, setTextRawAlgo] = useState('')
-  const [publishLogState, setPublishLogState] = useState('')
-  const [publishOutputState, setPublishOutputState] = useState('')
+  const [publishLogState, setPublishLogState] = useState(false)
+  const [publishOutputState, setPublishOutputState] = useState(false)
+
   // publish a dataset and an algorithm
   async function publish() {
     try {
@@ -59,12 +60,8 @@ export default function Compute({ ocean, web3 }) {
     try {
       const accounts = await ocean.accounts.list()
       const ComputeOutput = {
-        publishAlgorithmLog:
-          publishLogState === '' || publishLogState === false ? false : true,
-        publishOutput:
-          publishOutputState === '' || publishOutputState === false
-            ? false
-            : true,
+        publishAlgorithmLog: publishLogState,
+        publishOutput: publishOutputState,
         brizoAddress: ocean.config.brizoAddress,
         brizoUri: ocean.config.brizoUri,
         metadataUri: ocean.config.aquariusUri,
@@ -117,8 +114,8 @@ export default function Compute({ ocean, web3 }) {
   }
 
   async function showDivAlgo() {
-    if (divAlgoStyle === 'none') setdivAlgoStyle('block')
-    else setdivAlgoStyle('none')
+    const style = isAlgoInputVisible ? false : true
+    setIsAlgoInputVisible(style)
   }
 
   async function updateRawAlgoCode(event) {
@@ -129,10 +126,10 @@ export default function Compute({ ocean, web3 }) {
     setDdoAssetId(event.target.value)
   }
   async function handlePublishOutputState(event) {
-    setPublishOutputState(event.target.checked)
+    setPublishOutputState(!!event.target.checked)
   }
   async function handlePublishLogState(event) {
-    setPublishLogState(event.target.checked)
+    setPublishLogState(!!event.target.checked)
   }
 
   if (!web3) {
@@ -175,7 +172,7 @@ export default function Compute({ ocean, web3 }) {
           Order and start compute service with raw algorithm
         </button>
         <button onClick={showDivAlgo}>Show/Hide Raw Algo</button>
-        <div style={{ display: divAlgoStyle }}>
+        <div style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
           <textarea
             rows="10"
             cols="120"

From af3e96c958d69a9fbf52dddc1e4257041ee44031 Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Mon, 30 Mar 2020 10:13:14 +0300
Subject: [PATCH 14/22] fixes

---
 src/Compute.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index 1c9c453..f95e859 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -70,7 +70,6 @@ export default function Compute({ ocean, web3 }) {
         secretStoreUri: ocean.config.secretStoreUri
       }
       console.log(ComputeOutput)
-
       // order the compute service
       const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
       setAgreementId(agreement)
@@ -114,8 +113,7 @@ export default function Compute({ ocean, web3 }) {
   }
 
   async function showDivAlgo() {
-    const style = isAlgoInputVisible ? false : true
-    setIsAlgoInputVisible(style)
+    setIsAlgoInputVisible(isAlgoInputVisible ? false : true)
   }
 
   async function updateRawAlgoCode(event) {
@@ -126,10 +124,10 @@ export default function Compute({ ocean, web3 }) {
     setDdoAssetId(event.target.value)
   }
   async function handlePublishOutputState(event) {
-    setPublishOutputState(!!event.target.checked)
+    setPublishOutputState(event.target.checked)
   }
   async function handlePublishLogState(event) {
-    setPublishLogState(!!event.target.checked)
+    setPublishLogState(event.target.checked)
   }
 
   if (!web3) {

From a536be4f72a6b741b67fef4dd6a01faa43a0264f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 30 Mar 2020 12:02:07 +0200
Subject: [PATCH 15/22] compute section restructuring and markup

---
 src/Compute.js                             | 121 +++++++++++++++------
 src/{compute-asset.js => asset-compute.js} |   0
 2 files changed, 86 insertions(+), 35 deletions(-)
 rename src/{compute-asset.js => asset-compute.js} (100%)

diff --git a/src/Compute.js b/src/Compute.js
index f95e859..eadaca5 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { asset } from './asset'
-import { algoAsset, createComputeService, rawAlgoMeta } from './compute-asset'
+import { algoAsset, createComputeService, rawAlgoMeta } from './asset-compute'
 
 export default function Compute({ ocean, web3 }) {
   const [ddoAssetId, setDdoAssetId] = useState('')
@@ -83,7 +83,7 @@ export default function Compute({ ocean, web3 }) {
       )
       setJobId(status.jobId)
       console.log(status)
-      alert('Job created.  You can query for status now')
+      alert('Compute job created. You can query for its status now.')
     } catch (error) {
       console.error(error.message)
     }
@@ -123,9 +123,11 @@ export default function Compute({ ocean, web3 }) {
   async function updateDdoAssetId(event) {
     setDdoAssetId(event.target.value)
   }
+
   async function handlePublishOutputState(event) {
     setPublishOutputState(event.target.checked)
   }
+
   async function handlePublishLogState(event) {
     setPublishLogState(event.target.checked)
   }
@@ -136,30 +138,71 @@ export default function Compute({ ocean, web3 }) {
 
   return (
     <>
-      <h3>Compute</h3>
+      <h2>Compute</h2>
       <ComputeSection>
+        <h3>1. Publish Dataset</h3>
         <button onClick={publish}>Publish dataset with compute service</button>
-        Asset DID:
-        <input type="text" value={ddoAssetId} onChange={updateDdoAssetId} />
+
+        <p>
+          <Label for="ddoAssetId">Asset DID</Label>
+          <input
+            type="text"
+            id="ddoAssetId"
+            value={ddoAssetId}
+            onChange={updateDdoAssetId}
+          />
+        </p>
       </ComputeSection>
       <ComputeSection>
+        <h3>2. Publish Algorithm</h3>
         <button onClick={publishalgo}>Publish algorithm</button>
-        Algo DID:
-        <input type="text" value={ddoAlgorithmId} readOnly />
+        <p>
+          <Label for="ddoAlgorithmId">Algorithm DID</Label>
+          <code id="ddoAlgorithmId">{ddoAlgorithmId}</code>
+        </p>
       </ComputeSection>
       <ComputeSection>
-        <input
-          type="checkbox"
-          checked={publishOutputState}
-          onChange={handlePublishOutputState}
-        />
-        Publish Output into the Marketplace
-        <input
-          type="checkbox"
-          checked={publishLogState}
-          onChange={handlePublishLogState}
-        />
-        Publish Algorithm Logs into the Marketplace
+        <h3>3. Start Compute Job</h3>
+
+        <p>
+          <Label for="publishOutputState">
+            <input
+              type="checkbox"
+              id="publishOutputState"
+              checked={publishOutputState}
+              onChange={handlePublishOutputState}
+            />
+            Publish Output into the Marketplace
+          </Label>
+          <Label for="publishLogState">
+            <input
+              type="checkbox"
+              id="publishLogState"
+              checked={publishLogState}
+              onChange={handlePublishLogState}
+            />
+            Publish Algorithm Logs into the Marketplace
+          </Label>
+        </p>
+
+        <div>
+          <button onClick={showDivAlgo}>Show/Hide Raw Algorithm</button>
+          <p style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
+            <Label for="jobStatus">Raw Algorithm</Label>
+            <textarea
+              style={{ width: '100%' }}
+              rows="10"
+              value={textRawAlgo}
+              onChange={updateRawAlgoCode}
+            />
+          </p>
+        </div>
+
+        <p>
+          <Label for="jobId">Compute Job ID</Label>
+          <code>{jobId}</code>
+        </p>
+
         <button
           onClick={startWithPublishedAlgo}
           disabled={!ddoAssetId || !ddoAlgorithmId}
@@ -169,24 +212,23 @@ export default function Compute({ ocean, web3 }) {
         <button onClick={startWithRawAlgo} disabled={!ddoAssetId}>
           Order and start compute service with raw algorithm
         </button>
-        <button onClick={showDivAlgo}>Show/Hide Raw Algo</button>
-        <div style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
-          <textarea
-            rows="10"
-            cols="120"
-            value={textRawAlgo}
-            onChange={updateRawAlgoCode}
-          />
-        </div>
-        Job ID:
-        <input type="text" value={jobId} readOnly />
       </ComputeSection>
       <ComputeSection>
+        <h3>4. Get Compute Job Status</h3>
+
+        <p>
+          <Label for="jobStatus">Compute Job Status</Label>
+          <pre
+            id="jobStatus"
+            style={{ padding: '1rem', background: 'ghostwhite' }}
+          >
+            <code>{jobStatus}</code>
+          </pre>
+        </p>
+
         <button onClick={getStatus} disabled={!jobId}>
           Get Job Status
         </button>
-        Compute status:
-        <textarea rows="15" cols="120" value={jobStatus} readOnly />
       </ComputeSection>
     </>
   )
@@ -197,9 +239,10 @@ function ComputeSection({ children }) {
     <>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center'
+          textAlign: 'left',
+          paddingBottom: '1rem',
+          maxWidth: '40rem',
+          margin: '1rem auto'
         }}
       >
         {children}
@@ -208,3 +251,11 @@ function ComputeSection({ children }) {
     </>
   )
 }
+
+function Label({ children, ...props }) {
+  return (
+    <label style={{ display: 'block', fontSize: '0.8rem' }} {...props}>
+      {children}
+    </label>
+  )
+}
diff --git a/src/compute-asset.js b/src/asset-compute.js
similarity index 100%
rename from src/compute-asset.js
rename to src/asset-compute.js

From f33500dff0b6320acfb8626ea8e2ec0c8ada4349 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 30 Mar 2020 12:28:11 +0200
Subject: [PATCH 16/22] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2b4132d..d284af7 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
-    "@oceanprotocol/squid": "^2.0.0-beta.4",
+    "@oceanprotocol/squid": "^2.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0",

From 046c21f2f87f76bd992f07689ce0b3ea2c49f9bb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 30 Mar 2020 12:33:55 +0200
Subject: [PATCH 17/22] more package updates

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d284af7..1e9cae0 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,11 @@
   "description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
   "dependencies": {
     "@oceanprotocol/squid": "^2.0.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.0",
-    "web3": "^1.2.5",
-    "prettier": "^1.19.1"
+    "prettier": "^2.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "web3": "^1.2.6"
   },
   "scripts": {
     "start": "react-scripts start",

From 8b724ea9e7b4c629187c8f201f503576a976e7d7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 30 Mar 2020 12:34:27 +0200
Subject: [PATCH 18/22] markup fixes

---
 src/Compute.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index eadaca5..32ab920 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -144,7 +144,7 @@ export default function Compute({ ocean, web3 }) {
         <button onClick={publish}>Publish dataset with compute service</button>
 
         <p>
-          <Label for="ddoAssetId">Asset DID</Label>
+          <Label htmlFor="ddoAssetId">Asset DID</Label>
           <input
             type="text"
             id="ddoAssetId"
@@ -153,19 +153,21 @@ export default function Compute({ ocean, web3 }) {
           />
         </p>
       </ComputeSection>
+
       <ComputeSection>
         <h3>2. Publish Algorithm</h3>
         <button onClick={publishalgo}>Publish algorithm</button>
         <p>
-          <Label for="ddoAlgorithmId">Algorithm DID</Label>
+          <Label htmlFor="ddoAlgorithmId">Algorithm DID</Label>
           <code id="ddoAlgorithmId">{ddoAlgorithmId}</code>
         </p>
       </ComputeSection>
+
       <ComputeSection>
         <h3>3. Start Compute Job</h3>
 
         <p>
-          <Label for="publishOutputState">
+          <Label htmlFor="publishOutputState">
             <input
               type="checkbox"
               id="publishOutputState"
@@ -174,7 +176,7 @@ export default function Compute({ ocean, web3 }) {
             />
             Publish Output into the Marketplace
           </Label>
-          <Label for="publishLogState">
+          <Label htmlFor="publishLogState">
             <input
               type="checkbox"
               id="publishLogState"
@@ -188,7 +190,7 @@ export default function Compute({ ocean, web3 }) {
         <div>
           <button onClick={showDivAlgo}>Show/Hide Raw Algorithm</button>
           <p style={{ display: isAlgoInputVisible ? 'block' : 'none' }}>
-            <Label for="jobStatus">Raw Algorithm</Label>
+            <Label htmlFor="jobStatus">Raw Algorithm</Label>
             <textarea
               style={{ width: '100%' }}
               rows="10"
@@ -199,7 +201,7 @@ export default function Compute({ ocean, web3 }) {
         </div>
 
         <p>
-          <Label for="jobId">Compute Job ID</Label>
+          <Label htmlFor="jobId">Compute Job ID</Label>
           <code>{jobId}</code>
         </p>
 
@@ -213,18 +215,16 @@ export default function Compute({ ocean, web3 }) {
           Order and start compute service with raw algorithm
         </button>
       </ComputeSection>
+
       <ComputeSection>
         <h3>4. Get Compute Job Status</h3>
 
-        <p>
-          <Label for="jobStatus">Compute Job Status</Label>
-          <pre
-            id="jobStatus"
-            style={{ padding: '1rem', background: 'ghostwhite' }}
-          >
-            <code>{jobStatus}</code>
-          </pre>
-        </p>
+        <pre
+          id="jobStatus"
+          style={{ padding: '1rem', background: 'ghostwhite' }}
+        >
+          <code>{jobStatus}</code>
+        </pre>
 
         <button onClick={getStatus} disabled={!jobId}>
           Get Job Status

From 303ed00df23ccd3fdc24d20da797ea5aa75e8ea2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 30 Mar 2020 12:41:13 +0200
Subject: [PATCH 19/22] consistency fixes

---
 src/Compute.js       | 12 ++++++------
 src/asset-compute.js |  2 +-
 src/asset.js         |  4 +++-
 src/index.js         |  2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index 32ab920..0d069ba 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import { asset } from './asset'
-import { algoAsset, createComputeService, rawAlgoMeta } from './asset-compute'
+import asset from './asset'
+import { assetAlgo, createComputeService, rawAlgoMeta } from './asset-compute'
 
 export default function Compute({ ocean, web3 }) {
   const [ddoAssetId, setDdoAssetId] = useState('')
@@ -45,7 +45,7 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing algo.')
 
-      const ddoAlgorithmNew = await ocean.assets.create(algoAsset, accounts[0])
+      const ddoAlgorithmNew = await ocean.assets.create(assetAlgo, accounts[0])
       console.log(ddoAlgorithmNew)
       console.log('Algo asset successfully submitted.')
       // keep track of this registered asset for consumption later on
@@ -59,7 +59,7 @@ export default function Compute({ ocean, web3 }) {
   async function startCompute(algorithmId, algorithmMeta) {
     try {
       const accounts = await ocean.accounts.list()
-      const ComputeOutput = {
+      const computeOutput = {
         publishAlgorithmLog: publishLogState,
         publishOutput: publishOutputState,
         brizoAddress: ocean.config.brizoAddress,
@@ -69,7 +69,7 @@ export default function Compute({ ocean, web3 }) {
         owner: accounts[0].getId(),
         secretStoreUri: ocean.config.secretStoreUri
       }
-      console.log(ComputeOutput)
+      console.log(computeOutput)
       // order the compute service
       const agreement = await ocean.compute.order(accounts[0], ddoAssetId)
       setAgreementId(agreement)
@@ -79,7 +79,7 @@ export default function Compute({ ocean, web3 }) {
         agreement,
         algorithmId,
         encodeURIComponent(JSON.stringify(algorithmMeta)),
-        ComputeOutput
+        computeOutput
       )
       setJobId(status.jobId)
       console.log(status)
diff --git a/src/asset-compute.js b/src/asset-compute.js
index e3ee533..5adc1d6 100644
--- a/src/asset-compute.js
+++ b/src/asset-compute.js
@@ -1,4 +1,4 @@
-export const algoAsset = {
+export const assetAlgo = {
   main: {
     name: 'My great algo',
     dateCreated: '2012-02-01T10:55:11Z',
diff --git a/src/asset.js b/src/asset.js
index 9cc4fe3..fec3670 100644
--- a/src/asset.js
+++ b/src/asset.js
@@ -1,4 +1,4 @@
-export const asset = {
+const asset = {
   main: {
     name: '10 Monkey Species Small',
     dateCreated: '2012-02-01T10:55:11Z',
@@ -50,3 +50,5 @@ export const asset = {
     inLanguage: 'en'
   }
 }
+
+export default asset
diff --git a/src/index.js b/src/index.js
index 3013530..1cd0b67 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
-import { asset } from './asset'
+import asset from './asset'
 import Compute from './Compute'
 
 let web3

From 0ca13d408f72784c1b1634d9479d220e153f403d Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Mon, 30 Mar 2020 19:06:26 +0300
Subject: [PATCH 20/22] update

---
 src/Compute.js       |  7 +++----
 src/asset-compute.js | 26 --------------------------
 2 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index 0d069ba..b0a9ca2 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import asset from './asset'
-import { assetAlgo, createComputeService, rawAlgoMeta } from './asset-compute'
+import { assetAlgo, rawAlgoMeta } from './asset-compute'
 
 export default function Compute({ ocean, web3 }) {
   const [ddoAssetId, setDdoAssetId] = useState('')
@@ -20,8 +20,7 @@ export default function Compute({ ocean, web3 }) {
       const accounts = await ocean.accounts.list()
       console.log('Publishing asset.')
 
-      const service = await createComputeService(
-        ocean,
+      const service = await ocean.compute.createComputeServiceAttributes(
         accounts[0],
         '0',
         '2020-03-10T10:00:00Z'
@@ -78,7 +77,7 @@ export default function Compute({ ocean, web3 }) {
         accounts[0],
         agreement,
         algorithmId,
-        encodeURIComponent(JSON.stringify(algorithmMeta)),
+        algorithmMeta,
         computeOutput
       )
       setJobId(status.jobId)
diff --git a/src/asset-compute.js b/src/asset-compute.js
index 5adc1d6..5c13948 100644
--- a/src/asset-compute.js
+++ b/src/asset-compute.js
@@ -42,29 +42,3 @@ export const rawAlgoMeta = {
     tag: '10'
   }
 }
-
-export async function createComputeService(
-  ocean,
-  publisher,
-  price,
-  datePublished
-) {
-  const { templates } = ocean.keeper
-  const serviceAgreementTemplate = await templates.escrowComputeExecutionTemplate.getServiceAgreementTemplate()
-  const name = 'dataAssetComputingServiceAgreement'
-  return {
-    type: 'compute',
-    serviceEndpoint: ocean.brizo.getComputeEndpoint(),
-    templateId: templates.escrowComputeExecutionTemplate.getId(),
-    attributes: {
-      main: {
-        creator: publisher.getId(),
-        datePublished,
-        price,
-        timeout: 3600,
-        name
-      },
-      serviceAgreementTemplate
-    }
-  }
-}

From 82866b63237b7d9934eaec27c601a30968577f02 Mon Sep 17 00:00:00 2001
From: Alex Coseru <alex.coseru@gmail.com>
Date: Mon, 30 Mar 2020 19:08:46 +0300
Subject: [PATCH 21/22] Delete keeper.sh

---
 scripts/keeper.sh | 31 -------------------------------
 1 file changed, 31 deletions(-)
 delete mode 100755 scripts/keeper.sh

diff --git a/scripts/keeper.sh b/scripts/keeper.sh
deleted file mode 100755
index 9d14fdf..0000000
--- a/scripts/keeper.sh
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/bin/bash
-
-# Wait for contracts migration and extract Keeper artifacts
-
-RETRY_COUNT=0
-COMMAND_STATUS=1
-
-printf '\n\e[33m◯ Waiting for contracts to be generated...\e[0m\n'
-
-mkdir -p artifacts
-
-until [ $COMMAND_STATUS -eq 0 ] || [ $RETRY_COUNT -eq 120 ]; do
-  keeper_contracts_docker_id=$(docker container ls | grep keeper-contracts | awk '{print $1}')
-  docker cp ${keeper_contracts_docker_id}:/keeper-contracts/artifacts/ready ./artifacts/ > /dev/null 2>&1
-  COMMAND_STATUS=$?
-  sleep 5
-  (( RETRY_COUNT=RETRY_COUNT+1 ))
-done
-
-printf '\e[32m✔ Found new contract artifacts.\e[0m\n'
-
-rm -rf ./artifacts/
-
-if [ $COMMAND_STATUS -ne 0 ]; then
-  echo "Waited for more than two minutes, but keeper contracts have not been migrated yet. Did you run an Ethereum RPC client and the migration script?"
-  exit 1
-fi
-
-docker cp "${keeper_contracts_docker_id}":/keeper-contracts/artifacts/. ./node_modules/@oceanprotocol/keeper-contracts/artifacts/
-
-printf '\e[32m✔ Copied new contract artifacts.\e[0m\n'

From 107d1fa7d0c583cc8042339f1f5090ff9ee0920b Mon Sep 17 00:00:00 2001
From: alexcos20 <alex.coseru@gmail.com>
Date: Tue, 31 Mar 2020 10:37:49 +0300
Subject: [PATCH 22/22] fix Input DID

---
 src/Compute.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/Compute.js b/src/Compute.js
index b0a9ca2..d5ed20c 100644
--- a/src/Compute.js
+++ b/src/Compute.js
@@ -144,12 +144,7 @@ export default function Compute({ ocean, web3 }) {
 
         <p>
           <Label htmlFor="ddoAssetId">Asset DID</Label>
-          <input
-            type="text"
-            id="ddoAssetId"
-            value={ddoAssetId}
-            onChange={updateDdoAssetId}
-          />
+          <code id="ddoAssetId">{ddoAssetId}</code>
         </p>
       </ComputeSection>