web3 tests and publish flow

package-lock.json

@@ -1060,6 +1060,14 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@types/bn.js": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-4.11.4.tgz",
+      "integrity": "sha512-AO8WW+aRcKWKQAYTfKLzwnpL6U+TfPqS+haRrhCy5ff04Da8WZud3ZgVjspQXaEXJDcTlsjUEVvL39wegDek5w==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/history": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz",
@@ -1149,6 +1157,20 @@
       "integrity": "sha512-42zEJkBpNfMEAvWR5WlwtTH22oDzcMjFsL9gDGExwF8X8WvAiw7Vwop7hPw03QT8TKfec83LwbHj6SvpqM4ELQ==",
       "dev": true
     },
+    "@types/underscore": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.8.9.tgz",
+      "integrity": "sha512-vfzZGgZKRFy7KEWcBGfIFk+h6B+thDCLfkD1exMBMRlUsx2icA+J6y4kAbZs/TjSTeY1duw89QUU133TSzr60Q=="
+    },
+    "@types/web3": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@types/web3/-/web3-1.0.15.tgz",
+      "integrity": "sha512-LL5w6LCV+GQh+JUefiEfUPrOuzPLsNbRkF1mE9Fr6zppo9xBEXAT2p4ywn1oqhZ4EkAli1DgxeylW4t6Icx3AQ==",
+      "requires": {
+        "@types/bn.js": "*",
+        "@types/underscore": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@oceanprotocol/squid": "^0.2.7",
+    "@types/web3": "^1.0.15",
     "query-string": "^6.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",

src/Routes.tsx

@@ -4,9 +4,9 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import About from './pages/About'
 import Details from './pages/Details'
 import Home from './pages/Home'
-import Search from './pages/Search'
 import NotFound from './pages/NotFound'
 import Publish from './pages/Publish'
+import Search from './pages/Search'
 
 const Routes = () => (
     <Router>

src/config.ts

@@ -1,25 +1,25 @@
-export const nodeScheme = 'http';
-export const nodeHost = 'localhost';
-export const nodePort = 8545;
+export const nodeScheme = 'http'
+export const nodeHost = 'localhost'
+export const nodePort = 8545
 
-export const aquariusScheme = 'http';
-export const aquariusHost = 'localhost';
-export const aquariusPort = 5000;
+export const aquariusScheme = 'http'
+export const aquariusHost = 'localhost'
+export const aquariusPort = 5000
 
-export const brizoScheme = 'https';
-export const brizoHost = 'localhost';
-export const brizoPort = 8030;
+export const brizoScheme = 'https'
+export const brizoHost = 'localhost'
+export const brizoPort = 8030
 
-export const parityScheme = 'http';
-export const parityHost = 'localhost';
-export const parityPort = 8545;
+export const parityScheme = 'http'
+export const parityHost = 'localhost'
+export const parityPort = 8545
 
-export const secretStoreScheme = 'http';
-export const secretStoreHost = 'localhost';
-export const secretStorePort = 12001;
+export const secretStoreScheme = 'http'
+export const secretStoreHost = 'localhost'
+export const secretStorePort = 12001
 
-export const threshold = 0;
-export const password = 'node0';
-export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e';
+export const threshold = 0
+export const password = 'node0'
+export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
 
-export const verbose = true;
+export const verbose = true

src/models/AssetModel.ts

@@ -0,0 +1,41 @@
+const AssetModel = {
+    'assetId': null,
+    'publisherId': null,
+
+    // OEP-08 Attributes
+    // https://github.com/oceanprotocol/OEPs/tree/master/8
+    'base': {
+        'name': null,
+        'description': null,
+        'dateCreated': null,
+        'size': null,
+        'author': null,
+        'type': '',
+        'license': null,
+        'copyrightHolder': null,
+        'encoding': null,
+        'compression': null,
+        'contentType': null,
+        'workExample': null,
+        'contentUrls': [],
+        'links': [{
+            'name': null,
+            'type': null,
+            'url': null
+        }],
+        'inLanguage': null,
+        'tags': [],
+        'price': null
+    },
+    'curation': {
+        'rating': null,
+        'numVotes': null,
+        'schema': null
+    },
+    'additionalInformation': {
+        'updateFrequency': null,
+        'structuredMarkup': []
+    }
+}
+
+export default AssetModel

src/pages/Publish.tsx

@@ -1,38 +1,166 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
+import Web3 from 'web3'
 import Button from '../components/atoms/Button'
+import AssetModel from '../models/AssetModel'
+import { provideOcean } from '../ocean'
+
+type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
 interface IState {
-    value?: string
+    name?: string,
+    dateCreated?: Date,
+    description?: string,
+    files?: string[],
+    price?: number,
+    author?: string,
+    type?: AssetType,
+    license?: string,
+    copyrightHolder?: string,
+    categories?: string[],
+    tags?: string[]
 }
 
 class Publish extends Component<{}, IState> {
 
-    public state = { value: '' }
+    public state = {
+        name: '',
+        dateCreated: new Date(),
+        description: '',
+        files: [''],
+        price: 0,
+        author: '',
+        type: 'dataset' as AssetType,
+        license: '',
+        copyrightHolder: '',
+        categories: [''],
+    }
 
     public render() {
         return (
             <div>
                 <h1>Publish</h1>
                 <form onSubmit={this.registerAsset}>
-                    <label>
-                        Name:
-                        <input type="text" name="value" value={this.state.value} onChange={this.inputChange} />
-                    </label>
-                    <Button>I am a button</Button>
+                  <div>Name:<input type="text" name="name" value={this.state.name} onChange={this.inputChange} /></div>
+                  <div>Description:<input type="text" name="description" value={this.state.description} onChange={this.inputChange} /></div>
+                  <div>Price:<input type="number" name="price" value={this.state.price} onChange={this.inputChange} /></div>
+                  <div>Author:<input type="text" name="author" value={this.state.author} onChange={this.inputChange} /></div>
+                  <div>Files:<input type="text" name="files" value={this.state.files[0]} onChange={this.inputToArrayChange} /></div>
+                  <div>Type:
+                      <select name="type" value={this.state.type} onChange={this.inputChange}>
+                          <option value="dataset">Data set</option>
+                          <option value="algorithm">Algorithm</option>
+                          <option value="container">Container</option>
+                          <option value="workflow">Workflow</option>
+                          <option value="other">Other</option>
+                      </select>
+                  </div>
+                  <div>License:
+                      <select name="license" value={this.state.license} onChange={this.inputChange}>
+                          <option value="none">No License Specified</option>
+                          <option value="Public Domain">Public Domain</option>
+                          <option value="CC BY">CC BY: Attribution</option>
+                          <option value="CC BY-SA">CC BY-SA: Attribution ShareAlike</option>
+                          <option value="CC BY-ND">CC BY-ND: Attribution-NoDerivs</option>
+                          <option value="CC BY-NC">CC BY-NC: Attribution-NonCommercial</option>
+                          <option value="CC BY-NC-SA">CC BY-NC-SA: Attribution-NonCommercial-ShareAlike</option>
+                          <option value="CC BY-NC-ND">CC BY-NC-ND: Attribution-NonCommercial-NoDerivs</option>
+                      </select>
+                  </div>
+                  <div>Category:
+                      <select name="categories" value={this.state.categories[0]} onChange={this.inputToArrayChange}>
+                          <option value="No Category Specified">No Category Specified</option>
+                          <option value="Image Recognition">Image Recognition</option>
+                          <option value="Dataset Of Datasets">Dataset Of Datasets</option>
+                          <option value="Language">Language</option>
+                          <option value="Performing Arts">Performing Arts</option>
+                          <option value="Visual Arts & Design">Visual Arts & Design</option>
+                          <option value="Philosophy">Philosophy</option>
+                          <option value="History">History</option>
+                          <option value="Theology">Theology</option>
+                          <option value="Anthropology & Archeology">Anthropology & Archeology</option>
+                          <option value="Sociology">Sociology</option>
+                          <option value="Psychology">Psychology</option>
+                          <option value="Politics">Politics</option>
+                          <option value="Interdisciplinary">Interdisciplinary</option>
+                          <option value="Economics & Finance">Economics & Finance</option>
+                          <option value="Demography">Demography</option>
+                          <option value="Biology">Biology</option>
+                          <option value="Chemistry">Chemistry</option>
+                          <option value="Physics & Energy">Physics & Energy</option>
+                          <option value="Earth & Climate">Earth & Climate</option>
+                          <option value="Space & Astronomy">Space & Astronomy</option>
+                          <option value="Mathematics">Mathematics</option>
+                          <option value="Computer Technology">Computer Technology</option>
+                          <option value="Engineering">Engineering</option>
+                          <option value="Agriculture & Bio Engineering">Agriculture & Bio Engineering</option>
+                          <option value="Transportation">Transportation</option>
+                          <option value="Urban Planning">Urban Planning</option>
+                          <option value="Medicine">Medicine</option>
+                          <option value="Language">Language</option>
+                          <option value="Business & Management">Business & Management</option>
+                          <option value="Sports & Recreation">Sports & Recreation</option>
+                          <option value="Communication & Journalism">Communication & Journalism</option>
+                          <option value="Other">Other</option>
+                      </select>
+                  </div>
+                  <div>CopyrightHolder:<input type="text" name="copyrightHolder" value={this.state.copyrightHolder} onChange={this.inputChange} /></div>
+                  <div><Button>Register asset</Button></div>
                 </form>
             </div>
         )
     }
 
-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    private inputChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
         this.setState({
             [event.target.name]: event.target.value
         })
     }
 
-    private registerAsset = (event: FormEvent<HTMLFormElement>) => {
+    private inputToArrayChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+        this.setState({
+            [event.target.name]: [event.target.value]
+        })
+    }
+
+    private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        // console.log("submit", this.state.value)
+
+        const web3 = new Web3((window as any).web3.currentProvider)
+
+        await (window as any).ethereum.enable()
+
+        const accounts = await web3.eth.getAccounts()
+
+        const { ocean } = await provideOcean()
+        const account = await ocean.getAccounts()
+
+        console.log(account)
+
+        const newAsset = {
+            // OEP-08 Attributes
+            // https://github.com/oceanprotocol/OEPs/tree/master/8
+            base: Object.assign(AssetModel.base, {
+                name: this.state.name,
+                description: this.state.description,
+                dateCreated: (new Date()).toString(),
+                author: this.state.author,
+                license: this.state.license,
+                copyrightHolder: this.state.copyrightHolder,
+                contentUrls: [this.state.files],
+                price: this.state.price,
+                type: this.state.type,
+                size: '',
+                encoding: '',
+                compression: undefined,
+                contentType: '',
+                workExample: undefined,
+                inLanguage: undefined,
+                tags: ''
+            }),
+            curation: Object.assign(AssetModel.curation),
+            additionalInformation: Object.assign(AssetModel.additionalInformation)
+        }
+        const ddo = await ocean.registerAsset(newAsset, account[0])
     }
 }
 

src/pages/Search.tsx

@@ -1,9 +1,9 @@
+import queryString from 'query-string'
 import React, { Component } from 'react'
 import { provideOcean } from '../ocean'
-import queryString from 'query-string'
 
 interface IState {
-    results?: Array<any>
+    results?: any[]
 }
 
 interface IProps {
@@ -15,7 +15,7 @@ class Search extends Component<IProps, IState>  {
 
     public state = { results: [] }
 
-    async componentDidMount() {
+    public async componentDidMount() {
       // temporary ocean init and asset retrieval
       const { ocean } = await provideOcean()
       const searchParams = queryString.parse(this.props.location.search)