1
0
mirror of https://github.com/oceanprotocol/react.git synced 2025-02-14 21:10:38 +01:00

Merge pull request #107 from oceanprotocol/fix/docs

Update docs
This commit is contained in:
Matthias Kretschmann 2020-09-07 16:52:22 +02:00 committed by GitHub
commit 0f9e6f927d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 22 deletions

View File

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

View File

@ -3,6 +3,7 @@ import { useOcean } from '../../providers'
import { feedback } from '../../utils'
import { DID, Logger, ServiceType } from '@oceanprotocol/lib'
import { checkAndBuyDT } from '../../utils/dtUtils'
interface UseConsume {
consume: (
did: DID | string,

View File

@ -3,9 +3,10 @@
Get metadata for a specific data asset.
`useMetadata` has 3 uses:
- `useMetadata(did)` : it gets the ddo and then loads all the values (title, metadata etc)
- `useMetadata(ddo)` : it uses the passed ddo and the loads all the values, in case you already got a list of ddo, so you don't have to fetch the ddo once again
- `useMetadata()` : loads nothing, useful for using functions like `getBestPrice` or `getBestPool` (maybe more in the future) with minimal calls
- `useMetadata(did)` : it gets the DDO and then loads all the values (title, metadata etc)
- `useMetadata(ddo)` : it uses the passed DDO and the loads all the values, in case you already got a list of DDOs, so you don't have to fetch the DDO once again
- `useMetadata()` : loads nothing, useful for using functions like `getPrice` or `getPool` with minimal calls
## Usage
@ -17,14 +18,14 @@ const did = 'did:op:0x000000000'
export default function MyComponent() {
// Get metadata for this asset
const { ddo, title, metadata, bestPrice} = useMetadata(did)
const { title, metadata, price } = useMetadata(did)
const { main, additionalInformation } = metadata
return (
<div>
<h1>{title}</h1>
<p>Price: {bestPrice}</p>
<p>Price: {price}</p>
</div>
)
}

View File

@ -0,0 +1,48 @@
# `usePublish`
Publish data sets, and create data tokens and liquidity pools for them.
## Usage
```tsx
import React from 'react'
import { useOcean, usePublish } from '@oceanprotocol/react'
import { Metadata } from '@oceanprotocol/lib'
export default function MyComponent() {
const { accountId } = useOcean()
// Publish helpers
const { publish, publishStep } = usePublish()
const metadata: MetaData = {
main: {
name: 'Asset'
},
additionalInformation: {
description: 'My Cool Asset'
}
}
const priceOptions = {
price: 10,
tokensToMint: 10,
type: 'fixed',
weightOnDataToken: '',
liquidityProviderFee: ''
}
async function handlePublish() {
const ddo = await publish(metadata, priceOptions, 'access')
}
return (
<div>
<h1>Publish</h1>
<p>Your account: {accountId}</p>
<button onClick={handlePublish}>Publish</button>
</div>
)
}
```

View File

@ -14,13 +14,8 @@ Wrap your whole app with the `OceanProvider`:
```tsx
import React, { ReactNode } from 'react'
import { OceanProvider, Config } from '@oceanprotocol/react'
const config: Config = {
nodeUri: '',
metadataStoreUri: '',
...
}
import { OceanProvider } from '@oceanprotocol/react'
import { ConfigHelper } from '@oceanprotocol/lib'
const web3ModalOpts = {
network: 'mainnet', // optional
@ -33,8 +28,13 @@ export default function MyApp({
}: {
children: ReactNode
}): ReactNode {
const oceanInitialConfig = new ConfigHelper().getConfig(
'mainnet',
'INFURA_PROJECT_ID'
)
return (
<OceanProvider config={config} web3ModalOpts={web3ModalOpts}>
<OceanProvider initialConfig={config} web3ModalOpts={web3ModalOpts}>
<h1>My App</h1>
{children}
</OceanProvider>