mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Merge pull request #325 from oceanprotocol/v2
v2: DDO schema update in React tutorial
This commit is contained in:
GitHub
commit
8e79c676d6
@ -34,7 +34,7 @@ Consuming means downloading one or multiple files attached to an asset. During t
|
||||
|
||||
With the following code we start the consume process with the first search result, then go on to download its first attached file. Put it after the `searchAssets()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 69-95 GITHUB-EMBED
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/src/index.js jsx 69-95 GITHUB-EMBED
|
||||
|
||||
We still need a button to start consumption. In the render function, just after the _Search assets_ button, add:
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ To do that, we need to define the asset based on the [OEP-08](https://github.com
|
||||
|
||||
Let's create a new file `src/asset.js` and fill it with:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/asset.js js GITHUB-EMBED
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/src/asset.js js GITHUB-EMBED
|
||||
|
||||
Then import this asset definition at the top of `src/index.js`:
|
||||
|
||||
|
||||
@ -17,7 +17,6 @@ The final source of this tutorial is also available as a CodeSandbox:
|
||||
|
||||
- `Node.js` >= 10 is installed. You can check using `node -v`
|
||||
- `npm` >= 5.2 is installed. You can check using `npm -v`
|
||||
- [Docker](https://www.docker.com/products/docker-desktop) & [Docker Compose](https://docs.docker.com/compose/install/)
|
||||
- A Web3 capable browser, like Firefox/Chrome with [MetaMask](https://metamask.io) installed, [connected to Nile network](http://localhost:8000/tutorials/connect-to-networks/#connect-to-the-nile-testnet)
|
||||
- Some Nile ETH from the Nile Faucet. You can either go to [commons.nile.dev-ocean.com/faucet](https://commons.nile.dev-ocean.com/faucet), or execute this command replacing `<YOUR ADDRESS>` with your MetaMask account address:
|
||||
|
||||
@ -42,7 +41,7 @@ marketplace/
|
||||
|
||||
First, create a new project folder for your new app, e.g. `marketplace`. Within that, add a new file `package.json` with the following content:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/package.json json GITHUB-EMBED
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/package.json json GITHUB-EMBED
|
||||
|
||||
Notice the `@oceanprotocol/squid` dependency, which is the [Ocean Protocol JavaScript library](https://github.com/oceanprotocol/squid-js). Save that file, and in your terminal install the dependencies we have just defined in `package.json`:
|
||||
|
||||
@ -58,7 +57,7 @@ GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a94
|
||||
|
||||
Create a new folder `src/` and within that a `index.js` file with the following content as our base, where we already import squid-js and web3.js:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 1-4,6,14,97-108,119-124 GITHUB-EMBED
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/src/index.js jsx 1-4,6,14,97-108,119-124 GITHUB-EMBED
|
||||
|
||||
At this point you can start up the app and see the result in your browser:
|
||||
|
||||
|
||||
58
package.json
58
package.json
@ -25,59 +25,59 @@
|
||||
"@oceanprotocol/art": "^2.2.0",
|
||||
"axios": "^0.19.0",
|
||||
"classnames": "^2.2.6",
|
||||
"gatsby": "^2.17.7",
|
||||
"gatsby-image": "^2.2.30",
|
||||
"gatsby-plugin-catch-links": "^2.1.15",
|
||||
"gatsby-plugin-google-analytics": "^2.1.23",
|
||||
"gatsby-plugin-manifest": "^2.2.26",
|
||||
"gatsby-plugin-offline": "^3.0.17",
|
||||
"gatsby-plugin-react-helmet": "^3.1.13",
|
||||
"gatsby-plugin-sass": "^2.1.20",
|
||||
"gatsby-plugin-sharp": "^2.2.36",
|
||||
"gatsby-plugin-sitemap": "^2.2.19",
|
||||
"gatsby": "^2.18.1",
|
||||
"gatsby-image": "^2.2.33",
|
||||
"gatsby-plugin-catch-links": "^2.1.17",
|
||||
"gatsby-plugin-google-analytics": "^2.1.28",
|
||||
"gatsby-plugin-manifest": "^2.2.29",
|
||||
"gatsby-plugin-offline": "^3.0.22",
|
||||
"gatsby-plugin-react-helmet": "^3.1.15",
|
||||
"gatsby-plugin-sass": "^2.1.23",
|
||||
"gatsby-plugin-sharp": "^2.3.2",
|
||||
"gatsby-plugin-sitemap": "^2.2.21",
|
||||
"gatsby-plugin-svgr": "^2.0.2",
|
||||
"gatsby-remark-autolink-headers": "^2.1.16",
|
||||
"gatsby-remark-autolink-headers": "^2.1.18",
|
||||
"gatsby-remark-code-titles": "^1.1.0",
|
||||
"gatsby-remark-component": "^1.1.3",
|
||||
"gatsby-remark-copy-linked-files": "^2.1.28",
|
||||
"gatsby-remark-copy-linked-files": "^2.1.30",
|
||||
"gatsby-remark-embed-video": "^2.0.1",
|
||||
"gatsby-remark-github": "^2.0.0",
|
||||
"gatsby-remark-images": "^3.1.28",
|
||||
"gatsby-remark-responsive-iframe": "^2.2.25",
|
||||
"gatsby-remark-smartypants": "^2.1.14",
|
||||
"gatsby-remark-vscode": "^1.2.1",
|
||||
"gatsby-source-filesystem": "^2.1.35",
|
||||
"gatsby-source-graphql": "^2.1.21",
|
||||
"gatsby-transformer-remark": "^2.6.32",
|
||||
"gatsby-transformer-sharp": "^2.3.2",
|
||||
"gatsby-transformer-xml": "^2.1.17",
|
||||
"gatsby-transformer-yaml": "^2.2.15",
|
||||
"gatsby-remark-images": "^3.1.32",
|
||||
"gatsby-remark-responsive-iframe": "^2.2.27",
|
||||
"gatsby-remark-smartypants": "^2.1.16",
|
||||
"gatsby-remark-vscode": "^1.3.1",
|
||||
"gatsby-source-filesystem": "^2.1.38",
|
||||
"gatsby-source-graphql": "^2.1.23",
|
||||
"gatsby-transformer-remark": "^2.6.37",
|
||||
"gatsby-transformer-sharp": "^2.3.5",
|
||||
"gatsby-transformer-xml": "^2.1.19",
|
||||
"gatsby-transformer-yaml": "^2.2.17",
|
||||
"giphy-js-sdk-core": "^1.0.6",
|
||||
"intersection-observer": "^0.7.0",
|
||||
"react": "^16.11.0",
|
||||
"react-dom": "^16.11.0",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-scrollspy": "^3.4.0",
|
||||
"rehype-react": "^4.0.1",
|
||||
"remark": "^11.0.1",
|
||||
"remark": "^11.0.2",
|
||||
"remark-github-plugin": "^1.3.1",
|
||||
"remark-react": "^6.0.0",
|
||||
"shortid": "^2.2.15",
|
||||
"slugify": "^1.3.4",
|
||||
"slugify": "^1.3.6",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
"swagger-client": "^3.9.5"
|
||||
"swagger-client": "^3.9.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/webpack": "^4.3.3",
|
||||
"dotenv": "^8.2.0",
|
||||
"eslint": "^6.6.0",
|
||||
"eslint-config-oceanprotocol": "^1.5.0",
|
||||
"eslint-config-prettier": "^6.5.0",
|
||||
"eslint-config-prettier": "^6.7.0",
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"markdownlint-cli": "^0.19.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^1.18.2",
|
||||
"prettier": "^1.19.1",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"stylelint": "^11.1.1",
|
||||
"stylelint-config-bigchaindb": "^1.2.2",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user