diff --git a/content/tutorials/get-use-compute-service.md b/content/tutorials/get-use-compute-service.md
deleted file mode 100644
index 58568cb1..00000000
--- a/content/tutorials/get-use-compute-service.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Get & Use a Compute Service
----
diff --git a/content/tutorials/get-use-data-set.md b/content/tutorials/get-use-data-set.md
deleted file mode 100644
index e7b01e29..00000000
--- a/content/tutorials/get-use-data-set.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Get & Use a Data Set
----
diff --git a/content/tutorials/introduction.md b/content/tutorials/introduction.md
index 01effeaa..52b4fc23 100644
--- a/content/tutorials/introduction.md
+++ b/content/tutorials/introduction.md
@@ -3,7 +3,7 @@ title: Overview of the Tutorials
description: What you can expect to find in these Ocean Protocol tutorials.
---
-These tutorials give examples of how to use Pleuston (a demo marketplace app) and Python to:
+These tutorials give examples of how to use squid-js (JavaScript) and squid-py (Python) to:
- publish a data set
- publish a compute service
diff --git a/content/tutorials/publish-compute-service.md b/content/tutorials/publish-compute-service.md
deleted file mode 100644
index 7e3be4bb..00000000
--- a/content/tutorials/publish-compute-service.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Publish a Compute Service
----
diff --git a/content/tutorials/publish-data-set.md b/content/tutorials/publish-data-set.md
deleted file mode 100644
index 61d65e42..00000000
--- a/content/tutorials/publish-data-set.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Publish a Data Set
----
-
-### Requirements ###
-- Javascript frontend or nodejs app running
-- Installed `@oceanprotocol/squid` and `web3` packages
-- All required services running ([oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images))
-
-### Publishing ###
- ```javascript
- // import package
- import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
- // create ocean with configuration
- const ocean = await new Ocean.getInstance({/* < your configuration > */})
- // get accounts
- const accounts = await ocean.getAccounts()
- // register your asset
- const ddo = await ocean.registerAsset(/* < your asset > */, accounts[0])
- ```
\ No newline at end of file
diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md
index 9340057d..1fb5c3e7 100644
--- a/content/tutorials/react-get-use-data-set.md
+++ b/content/tutorials/react-get-use-data-set.md
@@ -1,3 +1,4 @@
---
-title: React Get & Use a Data Set
+title: Get & Use a Data Set
+description: Tutorial to get and use a data set in a basic React app.
---
diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md
index 4f607bbd..0f4cf11a 100644
--- a/content/tutorials/react-publish-data-set.md
+++ b/content/tutorials/react-publish-data-set.md
@@ -1,126 +1,146 @@
---
-title: React Publish a Data Set
+title: Publish a Data Set
+description: Tutorial to add data set publishing capabilities to a basic React app.
---
-### Requirements ###
- - This is continuation of [React App / Setup](/tutorials/react-setup) so make sure you have all the steps running.
+## Requirements
-### Adding Publishing ###
+This is continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have all the steps running.
- 1. Open `src/App.js` in your marketplace dapp from [React App / Setup](/tutorials/react-setup)
- 2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
- ```javascript
- const asset = {
- base: {
- name: "Office Humidity",
- description: "Weather information of UK including temperature and humidity",
- dateCreated: "2012-02-01T10:55:11+00:00",
- author: "Met Office",
- size: "3.1bg",
- license: "Public Domain",
- copyrightHolder: "Met Office",
- contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
- contentType: "text/csv",
- links: [{
- name: "Dataset sample",
- type: "sample",
- url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
- }],
- tags: "weather, uk, 2011, temperature, humidity",
- price: 5,
- type: "dataset"
- },
- curation: {
- rating: 0,
- numVotes: 0,
- schema: 'Binary Voting'
- },
- additionalInformation: {
- updateFrequency: "yearly"
- }
- }
- ```
- 3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
- ```javascript
- async submitAsset(){
- const accounts = await this.ocean.getAccounts()
- const ddo = await this.ocean.registerAsset(asset, accounts[0])
- alert("Asset successfully submited:", JSON.stringify(ddo))
- }
- ```
- 4. Last thing we need is button to start our registration inside render function just after `
Marketplace dapp
`
- ```jsx
-
- ```
+## Adding Publishing
+
+1. Open `src/App.js` in your marketplace dapp from the [React App Setup](/tutorials/react-setup) tutorial.
+2. First lets add asset that we want to publish. To do that we need to add the following code after `window.ethereum.enable()` line.
+
+ ```javascript
+ const asset = {
+ base: {
+ name: 'Office Humidity',
+ description:
+ 'Weather information of UK including temperature and humidity',
+ dateCreated: '2012-02-01T10:55:11+00:00',
+ author: 'Met Office',
+ size: '3.1bg',
+ license: 'Public Domain',
+ copyrightHolder: 'Met Office',
+ contentUrls: [
+ 'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
+ ],
+ contentType: 'text/csv',
+ links: [
+ {
+ name: 'Dataset sample',
+ type: 'sample',
+ url:
+ 'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
+ }
+ ],
+ tags: 'weather, uk, 2011, temperature, humidity',
+ price: 5,
+ type: 'dataset'
+ },
+ curation: {
+ rating: 0,
+ numVotes: 0,
+ schema: 'Binary Voting'
+ },
+ additionalInformation: {
+ updateFrequency: 'yearly'
+ }
+ }
+ ```
+
+3. Now that we have asset to submit we need function to handle it. Just before `render() {` let's add:
+
+ ```javascript
+ async submitAsset(){
+ const accounts = await this.ocean.getAccounts()
+ const ddo = await this.ocean.registerAsset(asset, accounts[0])
+ alert("Asset successfully submited:", JSON.stringify(ddo))
+ }
+ ```
+
+4. Last thing we need is button to start our registration inside render function just after `
Marketplace dapp
`
+
+ ```jsx
+
+ ```
+
+## Finished
-### Finished ###
That's it, if you have no errors in your `console.log` and you receive alert after you click `Register asset` you have successfully registered an asset.
Here is full source of `src/App.js` that you should have if you followed this tutorial:
- ```javascript
- import React, { Component } from 'react';
- import './App.css';
- import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
- import * as Web3 from 'web3'
- const web3 = new Web3(window.web3.currentProvider)
- window.ethereum.enable()
- const asset = {
- base: {
- name: "Office Humidity",
- description: "Weather information of UK including temperature and humidity",
- dateCreated: "2012-02-01T10:55:11+00:00",
- author: "Met Office",
- size: "3.1bg",
- license: "Public Domain",
- copyrightHolder: "Met Office",
- contentUrls: ["https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip"],
- contentType: "text/csv",
- links: [{
- name: "Dataset sample",
- type: "sample",
- url: "http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/"
- }],
- tags: "weather, uk, 2011, temperature, humidity",
- price: 5,
- type: "dataset"
- },
- curation: {
- rating: 0,
- numVotes: 0,
- schema: 'Binary Voting'
- },
- additionalInformation: {
- updateFrequency: "yearly"
+
+```javascript
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+import * as Web3 from 'web3'
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+const asset = {
+ base: {
+ name: 'Office Humidity',
+ description: 'Weather information of UK including temperature and humidity',
+ dateCreated: '2012-02-01T10:55:11+00:00',
+ author: 'Met Office',
+ size: '3.1bg',
+ license: 'Public Domain',
+ copyrightHolder: 'Met Office',
+ contentUrls: [
+ 'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
+ ],
+ contentType: 'text/csv',
+ links: [
+ {
+ name: 'Dataset sample',
+ type: 'sample',
+ url:
+ 'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
}
- }
- class App extends Component {
- async componentDidMount() {
- this.ocean = await new Ocean.getInstance({
- web3Provider: web3,
- nodeUri: "http://localhost:8545",
- aquariusUri: "http://localhost:5000",
- brizoUri: "http://localhost:8030",
- parityUri: "http://localhost:8545",
- secretStoreUri: "http://localhost:12001",
- threshold: 0,
- password: "secret",
- address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
- })
- console.log("Finished loading contracts!")
- }
- async submitAsset(){
- const accounts = await this.ocean.getAccounts()
- const ddo = await this.ocean.registerAsset(asset, accounts[0])
- alert("Asset successfully submited:", JSON.stringify(ddo))
- }
- render() {
- return (
-
+ )
+ }
+}
+export default App
+```
diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md
index 0e3a951e..75fa4bcb 100644
--- a/content/tutorials/react-setup.md
+++ b/content/tutorials/react-setup.md
@@ -1,89 +1,102 @@
---
-title: React setup
+title: React App Setup
+description: Tutorial to set up a basic React app that uses squid-js.
---
-### Requirements ###
-- `nodejs` >= 10 and `npm` >= 5.2 installed.
-- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running.
-- Browser with [Metamask](https://metamask.io/) and some ether in your account.
+This tutorial shows how you can build a basic [React](https://reactjs.org/) app that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
-### Tutorial Steps ###
-1. Run `npx create-react-app marketplace` in you terminal. This will create folder `marketplace` with boilerplate react app.
+## Requirements
+
+- `nodejs` >= 10 installed. (You can check using `node -v`.)
+- `npm` >= 5.2 installed. (You can check using `npm -v`.)
+- [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) running, but with _Pleuston not running_. (Pleuston is another React app.)
+- A browser with [MetaMask](https://metamask.io/) and some Ether in your account (for the network you're connected to). See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
+
+## Tutorial Steps
+
+1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a boilerplate React app.
2. Move to your dapp directory with `cd marketplace` and run `yarn add @oceanprotocol/squid web3`. This adds OceanProtocol and Web3 packages to the dapp.
-3. At this point you can already run `yarn start` which starts dapp in your browser at [localhost:3000](http://localhost:3000).
-4. To clear react spinning icon open `src/App.js` and modify the source to:
- ```javascript
- import React, { Component } from 'react';
- import './App.css';
- class App extends Component {
- render() {
- return (
-
-
Marketplace dapp
-
- );
- }
- }
- export default App;
- ```
-5. Below `import './App.css';` lets import packages we installed, setup web3 and unlock Metamask accounts if locked.
- ```javascript
- import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
- import * as Web3 from 'web3'
- const web3 = new Web3(window.web3.currentProvider)
- window.ethereum.enable()
- ```
-6. After line `class App extends Component {` add following ocean initialization with all configuration. All OceanProtocol operations can be executed from this ocean instance.
- ```javascript
- async componentDidMount() {
- this.ocean = await new Ocean.getInstance({
- web3Provider: web3,
- nodeUri: "http://localhost:8545",
- aquariusUri: "http://localhost:5000",
- brizoUri: "http://localhost:8030",
- parityUri: "http://localhost:8545",
- secretStoreUri: "http://localhost:12001",
- threshold: 0,
- password: "secret",
- address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
- })
- console.log("Finished loading contracts!")
- }
- ```
+3. At this point you can already run `yarn start` which starts the dapp in your browser at [localhost:3000](http://localhost:3000).
+4. To clear the React spinning icon, open `src/App.js` and modify the source to:
-### Finished ###
-That's it, if you have no errors in your `console.log` then you have successfully initialized Ocean instance in you breand new react dapp and you are ready for next steps in this tutorial.
+ ```javascript
+ import React, { Component } from 'react'
+ import './App.css'
+ class App extends Component {
+ render() {
+ return (
+
+
Marketplace dapp
+
+ )
+ }
+ }
+ export default App
+ ```
-Here is full source of `src/App.js` that you should have if you followed this tutorial:
- ```javascript
- import React, { Component } from 'react';
- import './App.css';
- import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
- import * as Web3 from 'web3'
- const web3 = new Web3(window.web3.currentProvider)
- window.ethereum.enable()
- class App extends Component {
- async componentDidMount() {
- this.ocean = await new Ocean.getInstance({
- web3Provider: web3,
- nodeUri: "http://localhost:8545",
- aquariusUri: "http://localhost:5000",
- brizoUri: "http://localhost:8030",
- parityUri: "http://localhost:8545",
- secretStoreUri: "http://localhost:12001",
- threshold: 0,
- password: "secret",
- address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
- })
- console.log("Finished loading contracts!")
- }
- render() {
- return (
-
-
Marketplace dapp
-
- );
- }
- }
- export default App;
- ```
+5. Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
+
+ ```javascript
+ import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+ import * as Web3 from 'web3'
+ const web3 = new Web3(window.web3.currentProvider)
+ window.ethereum.enable()
+ ```
+
+6. After the line `class App extends Component {` add the following Ocean initialization with all configuration. All OceanProtocol operations can be executed from this Ocean instance.
+
+ ```javascript
+ async componentDidMount() {
+ this.ocean = await new Ocean.getInstance({
+ web3Provider: web3,
+ nodeUri: "http://localhost:8545",
+ aquariusUri: "http://localhost:5000",
+ brizoUri: "http://localhost:8030",
+ parityUri: "http://localhost:8545",
+ secretStoreUri: "http://localhost:12001",
+ threshold: 0,
+ password: "secret",
+ address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
+ })
+ console.log("Finished loading contracts!")
+ }
+ ```
+
+## Finished
+
+That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in you brand new React dapp and you are ready for the next steps in this tutorial.
+
+Here is the full source of `src/App.js` that you should have if you followed this tutorial:
+
+```javascript
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
+import * as Web3 from 'web3'
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+class App extends Component {
+ async componentDidMount() {
+ this.ocean = await new Ocean.getInstance({
+ web3Provider: web3,
+ nodeUri: 'http://localhost:8545',
+ aquariusUri: 'http://localhost:5000',
+ brizoUri: 'http://localhost:8030',
+ parityUri: 'http://localhost:8545',
+ secretStoreUri: 'http://localhost:12001',
+ threshold: 0,
+ password: 'secret',
+ address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
+ })
+ console.log('Finished loading contracts!')
+ }
+ render() {
+ return (
+
+
Marketplace dapp
+
+ )
+ }
+}
+export default App
+```
diff --git a/data/sidebars/tutorials.yml b/data/sidebars/tutorials.yml
index 1e63c4fc..0815ebaa 100644
--- a/data/sidebars/tutorials.yml
+++ b/data/sidebars/tutorials.yml
@@ -7,25 +7,11 @@
- title: Set Up Azure Storage
link: /tutorials/azure-for-brizo/
-- group: Publish
- items:
- - title: Publish a Data Set
- link: /tutorials/publish-data-set/
- - title: Publish a Compute Service
- link: /tutorials/publish-compute-service/
-
-- group: Consume
- items:
- - title: Get & Use a Data Set
- link: /tutorials/get-use-data-set/
- - title: Get & Use a Compute Service
- link: /tutorials/get-use-compute-service/
-
-- group: React app
+- group: React App Tutorial
items:
- title: Setup
link: /tutorials/react-setup/
- title: Publish a Data Set
link: /tutorials/react-publish-data-set/
- title: Get & Use a Data Set
- link: /tutorials/react-get-use-data-set/
\ No newline at end of file
+ link: /tutorials/react-get-use-data-set/
diff --git a/src/templates/ApiSwagger.module.scss b/src/templates/ApiSwagger.module.scss
index 4057c0f2..a029bcc6 100644
--- a/src/templates/ApiSwagger.module.scss
+++ b/src/templates/ApiSwagger.module.scss
@@ -19,7 +19,9 @@
margin-left: 0;
}
- &:before { display: none;}
+ &:before {
+ display: none;
+ }
}
}