1
0
mirror of https://github.com/oceanprotocol/react.git synced 2025-02-14 21:10:38 +01:00
This commit is contained in:
mihaisc 2020-05-20 13:38:09 +03:00
commit 0518170b9e
6 changed files with 482 additions and 331 deletions

View File

@ -4,10 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
#### [v0.0.7](https://github.com/oceanprotocol/react/compare/v0.0.6...v0.0.7)
> 19 May 2020
- Bump @typescript-eslint/parser from 2.29.0 to 2.33.0 [`#18`](https://github.com/oceanprotocol/react/pull/18)
- Bump @typescript-eslint/eslint-plugin from 2.29.0 to 2.33.0 [`#17`](https://github.com/oceanprotocol/react/pull/17)
- Bump release-it from 13.5.6 to 13.6.0 [`#16`](https://github.com/oceanprotocol/react/pull/16)
- Bump eslint-plugin-react from 7.19.0 to 7.20.0 [`#15`](https://github.com/oceanprotocol/react/pull/15)
- Bump @types/react from 16.9.34 to 16.9.35 [`#14`](https://github.com/oceanprotocol/react/pull/14)
- bump packages [`9aac101`](https://github.com/oceanprotocol/react/commit/9aac1017e2a43daa34b9eac8ab9576c4c3ca6f9a)
- update docs & examples [`d03d001`](https://github.com/oceanprotocol/react/commit/d03d001e6831c2a3fadd74f3b16f9d71d6930c27)
- Bump release-it from 13.6.0 to 13.6.1 [`80655e8`](https://github.com/oceanprotocol/react/commit/80655e8f336d72b970dd3ce1a4c73a253455f263)
#### [v0.0.6](https://github.com/oceanprotocol/react/compare/v0.0.5...v0.0.6) #### [v0.0.6](https://github.com/oceanprotocol/react/compare/v0.0.5...v0.0.6)
> 14 May 2020 > 14 May 2020
- Release 0.0.6 [`259f956`](https://github.com/oceanprotocol/react/commit/259f95655f4b585f0e3417653e1803145d422293)
- use compute logs [`54f8e07`](https://github.com/oceanprotocol/react/commit/54f8e07b60d5b2f11d27e14cc0267664fa744872) - use compute logs [`54f8e07`](https://github.com/oceanprotocol/react/commit/54f8e07b60d5b2f11d27e14cc0267664fa744872)
#### [v0.0.5](https://github.com/oceanprotocol/react/compare/v0.0.4...v0.0.5) #### [v0.0.5](https://github.com/oceanprotocol/react/compare/v0.0.4...v0.0.5)

697
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "@oceanprotocol/react", "name": "@oceanprotocol/react",
"version": "0.0.6", "version": "0.0.7",
"description": "React hooks & components on top of squid.js", "description": "React hooks & components on top of squid.js",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/esm/index.js", "module": "dist/esm/index.js",
@ -20,7 +20,7 @@
"dist/" "dist/"
], ],
"dependencies": { "dependencies": {
"@oceanprotocol/squid": "^2.1.1", "@oceanprotocol/squid": "^2.2.0",
"axios": "^0.19.2", "axios": "^0.19.2",
"react": "^16.13.1", "react": "^16.13.1",
"web3connect": "^1.0.0-beta.33" "web3connect": "^1.0.0-beta.33"
@ -28,10 +28,10 @@
"devDependencies": { "devDependencies": {
"@release-it/bumper": "^1.1.1", "@release-it/bumper": "^1.1.1",
"@types/react": "^16.9.34", "@types/react": "^16.9.34",
"@typescript-eslint/eslint-plugin": "^2.29.0", "@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.29.0", "@typescript-eslint/parser": "^2.34.0",
"auto-changelog": "^2.0.0", "auto-changelog": "^2.0.0",
"eslint": "^6.8.0", "eslint": "^7.0.0",
"eslint-config-oceanprotocol": "^1.5.0", "eslint-config-oceanprotocol": "^1.5.0",
"eslint-config-prettier": "^6.11.0", "eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3", "eslint-plugin-prettier": "^3.1.3",
@ -69,7 +69,7 @@
"tagName": "v${version}" "tagName": "v${version}"
}, },
"github": { "github": {
"release": false "release": true
}, },
"npm": { "npm": {
"publish": false "publish": false

View File

@ -1,12 +1,6 @@
# `useCompute` # `useCompute`
The `OceanProvider` maintains a connection to the Ocean Protocol network in multiple steps: Start a compute job on a data asset and retrieve its status.
1. On mount, connect to Aquarius instance right away so any asset metadata can be retrieved before, and independent of any Web3 connections.
2. Once Web3 becomes available, a connection to all Ocean Protocol network components is established.
3. Once Ocean becomes available, spits out some info about it.
Also provides a `useOcean` helper hook to access its context values from any component.
## Usage ## Usage
@ -14,7 +8,6 @@ Also provides a `useOcean` helper hook to access its context values from any com
import React from 'react' import React from 'react'
import { import {
useWeb3, useWeb3,
useOcean,
useMetadata, useMetadata,
useCompute, useCompute,
computeOptions, computeOptions,
@ -25,18 +18,15 @@ import {
const did = 'did:op:0x000000000' const did = 'did:op:0x000000000'
export default function MyComponent() { export default function MyComponent() {
// Get web3 from built-in Web3Provider context // Get web3 from Web3Provider context
const { web3 } = useWeb3() const { web3, account } = useWeb3()
// Get Ocean instance from built-in OceanProvider context
const { ocean, account } = useOcean()
// Get metadata for this asset // Get metadata for this asset
const { title, metadata } = useMetadata(did) const { title, metadata } = useMetadata(did)
// compute asset // compute asset
const { compute, computeStep } = useCompute() const { compute, computeStep } = useCompute()
// raw code text // raw code text
const [algorithmRawCode, setAlgorithmRawCode] = useState('') const [algorithmRawCode, setAlgorithmRawCode] = useState('')
const [computeContainer, setComputeContainer] = useState<ComputeValue>() const [computeContainer, setComputeContainer] = useState<ComputeValue>()
@ -48,6 +38,7 @@ export default function MyComponent() {
const fileText = await readFileContent(files[0]) const fileText = await readFileContent(files[0])
setAlgorithmRawCode(fileText) setAlgorithmRawCode(fileText)
} }
async function handleSelectChange(event: any) { async function handleSelectChange(event: any) {
const comType = event.target.value const comType = event.target.value
setComputeContainer(comType) setComputeContainer(comType)

View File

@ -0,0 +1,39 @@
# `useConsume`
Get access to, and download a data asset.
## Usage
```tsx
import React from 'react'
import { useWeb3, useMetadata, useConsume } from '@oceanprotocol/react'
const did = 'did:op:0x000000000'
export default function MyComponent() {
// Get web3 from Web3Provider context
const { web3, account } = useWeb3()
// Get metadata for this asset
const { title, metadata } = useMetadata(did)
// consume asset
const { consume, consumeStep } = useConsume()
async function handleDownload() {
await consume(did)
}
return (
<div>
<h1>{title}</h1>
<p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
<p>Your account: {account}</p>
<button onClick={handleDownload}>
{consumeStep || 'Download Asset'}
</button>
</div>
)
}
```

View File

@ -0,0 +1,26 @@
# `useMetadata`
Get metadata for a specific data asset.
## Usage
```tsx
import React from 'react'
import { useMetadata } from '@oceanprotocol/react'
const did = 'did:op:0x000000000'
export default function MyComponent() {
// Get metadata for this asset
const { title, metadata } = useMetadata(did)
const { main, additionalInformation } = metadata
return (
<div>
<h1>{title}</h1>
<p>Price: {main.price}</p>
</div>
)
}
```