mirror of
https://github.com/oceanprotocol/react.git
synced 2025-02-14 21:10:38 +01:00
Merge branch 'master' of https://github.com/oceanprotocol/react
This commit is contained in:
commit
0518170b9e
14
CHANGELOG.md
14
CHANGELOG.md
@ -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
697
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -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
|
||||||
|
@ -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)
|
||||||
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
Loading…
x
Reference in New Issue
Block a user