diff --git a/content/tutorials/images/react-app-01.png b/content/tutorials/images/react-app-01.png
new file mode 100644
index 00000000..af583ed5
Binary files /dev/null and b/content/tutorials/images/react-app-01.png differ
diff --git a/content/tutorials/images/react-app-02.png b/content/tutorials/images/react-app-02.png
new file mode 100644
index 00000000..7547b5a1
Binary files /dev/null and b/content/tutorials/images/react-app-02.png differ
diff --git a/content/tutorials/images/react-app-03.png b/content/tutorials/images/react-app-03.png
new file mode 100644
index 00000000..255a0af0
Binary files /dev/null and b/content/tutorials/images/react-app-03.png differ
diff --git a/content/tutorials/images/react-app-04.png b/content/tutorials/images/react-app-04.png
new file mode 100644
index 00000000..869c9ac2
Binary files /dev/null and b/content/tutorials/images/react-app-04.png differ
diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md
index 5b88567f..850943b1 100644
--- a/content/tutorials/react-publish-data-set.md
+++ b/content/tutorials/react-publish-data-set.md
@@ -7,64 +7,69 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have done all the steps described in there.
-## Adding Publishing
+Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial.
-1. Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial.
-2. First, let's add the asset that we want to publish. To do that, we need to add the following code after `window.ethereum.enable()` line.
+## Define Asset
- ```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'
- }
- }
- ```
+First, let's add the asset that we want to publish.
-3. Now that we have an asset to submit, we need function to handle it. Just before `render() {` let's add:
+To do that, we need to add the following code after `window.ethereum.enable()` line, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
- ```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))
- }
- ```
+```js
+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'
+ }
+}
+```
-4. The last thing we need is a button to start our registration inside the render function just after `
Marketplace app
`:
+## Handle Asset Publishing
- ```jsx
-
- ```
+Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
+
+```js
+async submitAsset() {
+ const accounts = await this.ocean.getAccounts()
+ const ddo = await this.ocean.registerAsset(asset, accounts[0])
+ alert('Asset successfully submited: ', JSON.stringify(ddo))
+}
+```
+
+The last thing we need is a button to start our registration inside the render function just after `
diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md
index 83f026bc..c6a8bf60 100644
--- a/content/tutorials/react-setup.md
+++ b/content/tutorials/react-setup.md
@@ -13,62 +13,89 @@ description: This tutorial shows how you can build a basic [React](https://react
- Edit the `brizo.env` file and set all `AZURE_`... values.
- Run `./start_ocean.sh --no-pleuston --local-pond-node`. This runs all services locally, including a local Parity Ethereum node.
-## Tutorial Steps
+## New Create React App
-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 app directory with `cd marketplace` and run `npm install @oceanprotocol/squid web3`. This adds the Ocean Protocol JavaScript library and Web3 packages to the app.
-3. At this point you can already run `npm start` which starts the app 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:
+First, kick start your new React app by creating a boilerplate with Create React App:
- ```jsx
- import React, { Component } from 'react'
- import './App.css'
+```bash
+npx create-react-app marketplace
+```
- class App extends Component {
- render() {
- return (
-
-
Marketplace app
-
- )
- }
- }
+This will create a folder named `marketplace` with a boilerplate React app. Go into that new folder and add the Ocean Protocol JavaScript library and Web3 packages to the app's dependencies:
- export default App
- ```
+```bash
+cd marketplace/
+npm install @oceanprotocol/squid web3
+```
-5. Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
+At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000):
- ```javascript
- import { Ocean } from '@oceanprotocol/squid'
- import * as Web3 from 'web3'
+
- const web3 = new Web3(window.web3.currentProvider)
- window.ethereum.enable()
- ```
+## Add Markup & Web3
-6. At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+Let's make it ours, open `src/App.js` and replace the whole source with:
- ```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!")
- }
- ```
+```jsx
+import React, { Component } from 'react'
+import './App.css'
+
+class App extends Component {
+ render() {
+ return (
+
+
Marketplace app
+
+ )
+ }
+}
+
+export default App
+```
+
+Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
+
+```js
+import { Ocean } from '@oceanprotocol/squid'
+import * as Web3 from 'web3'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+```
+
+After those steps you should see this, and MetaMask should have asked you to allow access to your account:
+
+
+
+
+## Create Ocean instance
+
+Now that we are successfully connected with Web3, we can setup our Ocean instance.
+
+At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+
+```js
+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!")
+}
+```
## Final Result
-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 app and you are ready for the next steps in this tutorial.
+That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in your brand new React app and you are ready for the [next part of this tutorial](/tutorials/react-publish-data-set/).
+
+
Here is the full source of `src/App.js` that you should have if you followed this tutorial:
@@ -99,7 +126,7 @@ class App extends Component {
render() {
return (
-
+
Marketplace app
)
@@ -108,3 +135,5 @@ class App extends Component {
export default App
```
+
+Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).