diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md index bcdc5c50..0cec128b 100644 --- a/content/tutorials/react-get-use-data-set.md +++ b/content/tutorials/react-get-use-data-set.md @@ -20,8 +20,11 @@ In the previous tutorial we added asset publishing. We can now search for publis // src/App.js // ... async retrieveAssets() { - this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small") - console.log(this.dbAssets) + this.search = await this.ocean.assets.search('10 Monkey Species Small') + console.log(this.search) + alert( + 'Asset successfully retrieved. Look into your console to see the search response.' + ) } // ... ``` @@ -48,25 +51,25 @@ async consumeAsset() { // get all accounts const accounts = await this.ocean.accounts.list() // get first asset - const consumeAsset = this.dbAssets[0] + const consumeAsset = this.search.results[0] // get service we want to execute const service = consumeAsset.findServiceByType('Access') // order service agreement const agreement = await this.ocean.assets.order( - consumeAsset.id, - service.serviceDefinitionId, - accounts[0] + consumeAsset.id, + service.serviceDefinitionId, + accounts[0] ) // consume it await this.ocean.assets.consume( - agreement, - consumeAsset.id, - service.serviceDefinitionId, - accounts[0], - '', - 0 + agreement, + consumeAsset.id, + service.serviceDefinitionId, + accounts[0], + '', + 0 ) -} + } // ... ``` @@ -129,8 +132,8 @@ class App extends Component { } async retrieveAssets() { - this.dbAssets = await this.ocean.assets.search('10 Monkey Species Small') - console.log(this.dbAssets) + this.search = await this.ocean.assets.search('10 Monkey Species Small') + console.log(this.search) alert( 'Asset successfully retrieved. Look into your console to see the search response.' ) @@ -140,7 +143,7 @@ class App extends Component { // get all accounts const accounts = await this.ocean.accounts.list() // get first asset - const consumeAsset = this.dbAssets[0] + const consumeAsset = this.search.results[0] // get service we want to execute const service = consumeAsset.findServiceByType('Access') // order service agreement diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md index e0b56a00..1bc1dcb6 100644 --- a/content/tutorials/react-setup.md +++ b/content/tutorials/react-setup.md @@ -11,18 +11,20 @@ description: This tutorial shows how you can build a basic [React](https://react - Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory: - (Optional but recommended) Clean out all your old Docker stuff using `docker system prune --all --volumes` - - Use startup script in Barge to run a local Spree Testnet. Compiling and deploying the contracts takes some time so it takes a few minutes until the network is ready to be interacted with: + - Use the startup script in Barge to run a local Spree Testnet: ```bash - export KEEPER_VERSION=v0.9.1 - export AQUARIUS_VERSION=v0.2.2 - export BRIZO_VERSION=v0.3.5 + export KEEPER_VERSION=v0.9.1 && \ + export AQUARIUS_VERSION=v0.2.2 && \ + export BRIZO_VERSION=v0.3.5 && \ ./start_ocean.sh --latest --no-pleuston --local-spree-node ``` - A Web3 capable browser, like Firefox/Chrome with MetaMask installed - [Some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in your MetaMask account +Note that compiling and deploying the contracts in your local Docker network takes some time so it can take a few minutes until the network is ready to be interacted with. That usually is the case once `keeper-contracts_1` container doesn't show any messages anymore. + ## New Create React App First, kickstart your new React app by creating a boilerplate with Create React App: @@ -31,7 +33,7 @@ First, kickstart your new React app by creating a boilerplate with Create React npx create-react-app marketplace ``` -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: +This will create a folder named `marketplace` with a boilerplate React app. Go into that new folder and add the [Ocean Protocol JavaScript library](https://github.com/oceanprotocol/squid-js) to the app's dependencies: ```bash cd marketplace/