mirror of
https://github.com/oceanprotocol/react-tutorial
synced 2024-11-21 17:26: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