mirror of
https://github.com/oceanprotocol/react-tutorial
synced 2024-11-22 01:36:58 +01:00
Initial commit
This commit is contained in:
parent
d3c97dc830
commit
3be2415f76
11
.prettierrc
Normal file
11
.prettierrc
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"printWidth": 80,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
|
"fluid": false
|
||||||
|
}
|
||||||
30
package.json
Normal file
30
package.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "react-tutorial",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "React + squid.js interacting in the most minimal way with Ocean Protocol.",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "src/index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"@oceanprotocol/keeper-contracts": "0.10.3",
|
||||||
|
"@oceanprotocol/squid": "0.6.6",
|
||||||
|
"react": "16.8.6",
|
||||||
|
"react-dom": "16.8.6",
|
||||||
|
"react-scripts": "3.0.1",
|
||||||
|
"web3": "1.2.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "3.3.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
|
"not op_mini all"
|
||||||
|
]
|
||||||
|
}
|
||||||
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
69
src/asset.js
Normal file
69
src/asset.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
const asset = {
|
||||||
|
base: {
|
||||||
|
name: '10 Monkey Species Small',
|
||||||
|
dateCreated: '2012-02-01T10:55:11Z',
|
||||||
|
author: 'Mario',
|
||||||
|
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',
|
||||||
|
resourceId: 'test'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
checksum: '',
|
||||||
|
categories: ['image'],
|
||||||
|
tags: ['image data', 'classification', 'animals'],
|
||||||
|
type: 'dataset',
|
||||||
|
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
|
||||||
118
src/index.js
Normal file
118
src/index.js
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import { Ocean } from '@oceanprotocol/squid'
|
||||||
|
import Web3 from 'web3'
|
||||||
|
import asset from './asset'
|
||||||
|
|
||||||
|
let web3
|
||||||
|
|
||||||
|
if (window.web3) {
|
||||||
|
web3 = new Web3(window.web3.currentProvider)
|
||||||
|
window.ethereum.enable()
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
state = {
|
||||||
|
ocean: undefined,
|
||||||
|
results: []
|
||||||
|
}
|
||||||
|
|
||||||
|
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',
|
||||||
|
verbose: true
|
||||||
|
})
|
||||||
|
this.setState({ ocean })
|
||||||
|
console.log('Finished loading contracts.')
|
||||||
|
}
|
||||||
|
|
||||||
|
async registerAsset() {
|
||||||
|
try {
|
||||||
|
const accounts = await this.state.ocean.accounts.list()
|
||||||
|
const ddo = await this.state.ocean.assets.create(asset, accounts[0])
|
||||||
|
console.log('Asset successfully submitted.')
|
||||||
|
console.log(ddo)
|
||||||
|
alert(
|
||||||
|
'Asset successfully submitted. Look into your console to see the response DDO object.'
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async searchAssets() {
|
||||||
|
try {
|
||||||
|
const search = await this.state.ocean.assets.search(
|
||||||
|
'10 Monkey Species Small'
|
||||||
|
)
|
||||||
|
this.setState({ results: search.results })
|
||||||
|
console.log(search)
|
||||||
|
alert(
|
||||||
|
'Asset successfully retrieved. Look into your console to see the search response.'
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async consumeAsset() {
|
||||||
|
try {
|
||||||
|
// get all accounts
|
||||||
|
const accounts = await this.state.ocean.accounts.list()
|
||||||
|
// get first asset from search results
|
||||||
|
const consumeAsset = this.state.results[0]
|
||||||
|
// get service we want to execute
|
||||||
|
const service = consumeAsset.findServiceByType('Access')
|
||||||
|
// order service agreement
|
||||||
|
const agreement = await this.state.ocean.assets.order(
|
||||||
|
consumeAsset.id,
|
||||||
|
service.serviceDefinitionId,
|
||||||
|
accounts[0]
|
||||||
|
)
|
||||||
|
// consume it
|
||||||
|
await this.state.ocean.assets.consume(
|
||||||
|
agreement,
|
||||||
|
consumeAsset.id,
|
||||||
|
service.serviceDefinitionId,
|
||||||
|
accounts[0],
|
||||||
|
'',
|
||||||
|
0
|
||||||
|
)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{ fontFamily: '"Fira Code", monospace', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
<h1>
|
||||||
|
<span role="img" aria-label="squid">
|
||||||
|
🦑
|
||||||
|
</span>
|
||||||
|
<br /> My Little Ocean
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{!web3 && <p>No Web3 Browser!</p>}
|
||||||
|
|
||||||
|
<button onClick={() => this.registerAsset()} disabled={!web3}>
|
||||||
|
Register asset
|
||||||
|
</button>
|
||||||
|
<hr />
|
||||||
|
<button onClick={() => this.searchAssets()}>Search assets</button>
|
||||||
|
<button onClick={() => this.consumeAsset()} disabled={!web3}>
|
||||||
|
Consume asset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('root'))
|
||||||
Loading…
Reference in New Issue
Block a user