1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

Merge branch 'master' into feature/form-components

This commit is contained in:
Jernej Pregelj 2019-02-04 17:33:05 +01:00 committed by GitHub
commit 2e5d51070e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 4438 additions and 820 deletions

4654
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -17,6 +17,7 @@
"dependencies": {
"@oceanprotocol/squid": "^0.2.7",
"classnames": "^2.2.6",
"query-string": "^6.2.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
@ -24,13 +25,15 @@
},
"devDependencies": {
"@types/classnames": "^2.2.7",
"@types/jest": "23.3.12",
"@types/node": "10.12.18",
"@types/react": "16.7.20",
"@types/jest": "23.3.13",
"@types/node": "10.12.19",
"@types/query-string": "^6.2.0",
"@types/react": "16.7.22",
"@types/react-dom": "16.0.11",
"@types/react-router-dom": "^4.3.1",
"@types/web3": "^1.0.18",
"node-sass": "^4.11.0",
"prettier": "^1.16.1",
"prettier": "^1.16.2",
"prettier-stylelint": "^0.4.2",
"react-scripts": "2.1.3",
"stylelint-config-bigchaindb": "^1.2.1",

View File

@ -1,20 +1,110 @@
import React, { Component } from 'react'
import Web3 from 'web3'
import styles from './App.module.scss'
import { User, userDefaults } from './context/User'
import { User } from './context/User'
import { provideOcean } from './ocean'
import Routes from './Routes'
import './styles/global.scss'
import Routes from './Routes'
import {
nodeHost,
nodePort,
nodeScheme
} from './config'
interface IState {
isLogged: boolean,
web3: any,
ocean: {},
startLogin: () => void,
}
class App extends Component<{},IState> {
public startLogin: () => void
constructor(props: {}) {
super(props)
this.startLogin = (event?) => {
if (event) {
event.preventDefault()
}
this.startLoginProcess()
}
this.state = {
isLogged: false,
web3: {},
ocean: {},
startLogin: this.startLogin,
}
}
public async componentDidMount() {
this.bootstrap()
}
class App extends Component {
public render() {
return (
<div className={styles.app}>
<User.Provider value={userDefaults}>
<User.Provider value={this.state}>
<Routes />
</User.Provider>
</div>
)
}
private startLoginProcess = async () => {
if((window as any).web3) {
const web3 = new Web3((window as any).web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
if (accounts.length === 0 && (window as any).ethereum) {
await (window as any).ethereum.enable()
const { ocean } = await provideOcean()
this.setState(state => ({
isLogged: true,
web3,
ocean
}))
} else {
this.setState(state => ({
isLogged: true,
web3
}))
}
} catch (e) {
this.setDefaultProvider()
}
} else {
this.setDefaultProvider()
}
}
private bootstrap = async () => {
if((window as any).web3) {
const web3 = new Web3((window as any).web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
if (accounts.length > 0) {
const { ocean } = await provideOcean()
this.setState(state => ({
isLogged: true,
web3,
ocean
}))
}
} catch (e) {
this.setDefaultProvider()
}
} else {
this.setDefaultProvider()
}
}
private setDefaultProvider = () => {
this.setState(state => ({
isLogged: false,
web3: new Web3(new Web3.providers.HttpProvider(`${nodeScheme}://${nodeHost}:${nodePort}`))
}))
}
}
export default App

View File

@ -1,14 +1,23 @@
import React from 'react'
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 NotFound from './pages/NotFound'
import Styleguide from './pages/Styleguide'
import Publish from './pages/Publish'
import Search from './pages/Search'
const Routes = () => (
<Router>
<Switch>
<Route exact={true} component={Home} path="/" />
<Route component={Styleguide} path="/styleguide" />
<Route component={About} path="/about" />
<Route component={Publish} path="/publish" />
<Route component={Search} path="/search" />
<Route component={Details} path="/asset/:did" />
<Route component={NotFound} />
</Switch>
</Router>

25
src/config.ts Normal file
View File

@ -0,0 +1,25 @@
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 brizoScheme = 'https'
export const brizoHost = 'localhost'
export const brizoPort = 8030
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 threshold = 0
export const password = 'node0'
export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
export const verbose = true

View File

@ -1,7 +1,8 @@
import React from 'react'
export const userDefaults = {
logged: false
}
export const User = React.createContext(userDefaults)
export const User = React.createContext({
isLogged: false,
web3: {},
ocean: {},
startLogin: () => {/* empty */}
})

41
src/models/AssetModel.ts Normal file
View File

@ -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

49
src/ocean.ts Normal file
View File

@ -0,0 +1,49 @@
import {
Ocean
} from '@oceanprotocol/squid/dist/node/squid'
import {
address,
aquariusHost,
aquariusPort,
aquariusScheme,
brizoHost,
brizoPort,
brizoScheme,
nodeHost,
nodePort,
nodeScheme,
parityHost,
parityPort,
parityScheme,
password,
secretStoreHost,
secretStorePort,
secretStoreScheme,
threshold,
verbose
} from './config'
export async function provideOcean() {
const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
const parityUri = `${parityScheme}://${parityHost}:${parityPort}`
const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
const config = {
nodeUri,
aquariusUri,
brizoUri,
parityUri,
secretStoreUri,
threshold,
password,
address,
verbose
}
const ocean = await Ocean.getInstance(config)
return { ocean }
}

View File

@ -0,0 +1,16 @@
@import '../styles/variables';
.about {
background: $brand-black;
color: $brand-white;
min-height: calc(100vh - #{$page-frame} * 2);
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
> div {
text-align: center;
width: 100%;
}
}

21
src/pages/About.tsx Normal file
View File

@ -0,0 +1,21 @@
import React, { Component } from 'react'
import Button from '../components/atoms/Button'
import styles from './About.module.scss'
class About extends Component {
public render() {
return (
<div className={styles.about}>
<Button>I am a button</Button>
<Button primary={true}>I am a primary button</Button>
<Button href="https://hello.com">
I am a link disguised as a button
</Button>
</div>
)
}
}
export default About

66
src/pages/Details.tsx Normal file
View File

@ -0,0 +1,66 @@
import { Logger } from '@oceanprotocol/squid'
import queryString from 'query-string'
import React, { Component } from 'react'
import { User } from '../context/User'
interface IState {
ddo: any,
metadata: any
}
interface IProps {
location: any,
match: any
}
class Details extends Component<IProps, IState> {
public state = { ddo: null, metadata: null }
public async componentDidMount() {
const ddo = await this.context.ocean.resolveDID(this.props.match.params.did)
const { metadata } = ddo.findServiceByType('Metadata')
this.setState({ddo, metadata})
}
public render() {
return (
<>
{this.state.metadata ? (this.showDetails(this.state.ddo)): (<div>Loading</div>)}
</>
)
}
private purchaseAsset = async (ddo: any) => {
const account = await this.context.ocean.getAccounts()
const service = ddo.findServiceByType('Access')
const serviceAgreementSignatureResult: any = await this.context.ocean
.signServiceAgreement(
ddo.id,
service.serviceDefinitionId,
account[0])
Logger.log('serviceAgreementSignatureResult', serviceAgreementSignatureResult)
await this.context.ocean
.initializeServiceAgreement(
ddo.id,
service.serviceDefinitionId,
serviceAgreementSignatureResult.serviceAgreementId,
serviceAgreementSignatureResult.serviceAgreementSignature,
(files: any) => Logger.log(`Got files, first files length in bytes: ${files[0].length}`),
account[0],
)
}
private showDetails = (ddo: any) => {
return (
<>
<div>{JSON.stringify(this.state.metadata)}</div>
<button onClick={this.purchaseAsset.bind(this, ddo)}>Purchase asset</button>
</>
)
}
}
Details.contextType = User
export default Details

View File

@ -1,17 +1,48 @@
import React, { Component } from 'react'
import React, { ChangeEvent, Component, FormEvent } from 'react'
import { Link } from 'react-router-dom'
import Button from '../components/atoms/Button'
import styles from './Home.module.scss'
class Home extends Component {
interface IState {
search?: string
}
interface IProps {
history: any
}
class Home extends Component<IProps, IState> {
public state = { search: '' }
public render() {
return (
<div className={styles.home}>
<div>Home</div>
<Link to={'/styleguide'}>Styleguide</Link>
<div>
<form onSubmit={this.searchAssets}>
<input type="text" name="search" value={this.state.search} onChange={this.inputChange} />
<Button>Search</Button>
</form>
</div>
</div>
)
}
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
this.setState({
[event.target.name]: event.target.value
})
}
private searchAssets = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
this.props.history.push(`/search?q=${this.state.search}`)
}
}
export default Home

162
src/pages/Publish.tsx Normal file
View File

@ -0,0 +1,162 @@
import React, { ChangeEvent, Component, FormEvent } from 'react'
import Button from '../components/atoms/Button'
import { User } from '../context/User'
import AssetModel from '../models/AssetModel'
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
interface IState {
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 = {
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}>
<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>
<User.Consumer>
{states => ( /* tslint:disable-next-line */
<div>
{states.isLogged ? (<div><Button>Register asset (we are logged)</Button></div>) : (<div><button onClick={states.startLogin}>Register asset (login first)</button></div>)}
</div>
)}
</User.Consumer>
</form>
</div>
)
}
private inputChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
this.setState({
[event.target.name]: event.target.value
})
}
private inputToArrayChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
this.setState({
[event.target.name]: [event.target.value]
})
}
private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
const account = await this.context.ocean.getAccounts()
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 this.context.ocean.registerAsset(newAsset, account[0])
}
}
Publish.contextType = User
export default Publish

60
src/pages/Search.tsx Normal file
View File

@ -0,0 +1,60 @@
import queryString from 'query-string'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { provideOcean } from '../ocean'
interface IState {
results: any[]
}
interface IProps {
location: any,
history: any
}
class Search extends Component<IProps, IState> {
public state = { results: [] }
public async componentDidMount() {
// temporary ocean init and asset retrieval
const { ocean } = await provideOcean()
const searchParams = queryString.parse(this.props.location.search)
const queryRequest: any = {
offset: 100,
page: 0,
query: {
$text: {
$search: searchParams.q
}
}
}
const assets = await ocean.searchAssets(queryRequest)
this.setState(state => ({results:assets}))
}
public render() {
return (
<>
{this.state.results.length ? (this.state.results.map(asset => this.renderAssetBox(asset))): (<div>No data sets yet</div>)}
</>
)
}
private renderAssetBox = (asset:any) => {
const { metadata } = asset.findServiceByType('Metadata')
return (
<div key={asset.id} onClick={this.openDetails.bind(this, asset.id)}>
<div>{asset.id}</div>
<div>{metadata.base.name}</div>
<div>{metadata.base.description}</div>
</div>
)
}
private openDetails = (assetId:string) => {
this.props.history.push(`/asset/${assetId}`)
}
}
export default Search