mirror of
https://github.com/oceanprotocol/react.git
synced 2025-02-14 21:10:38 +01:00
commit
0f9e6f927d
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
48
src/hooks/usePublish/README.md
Normal file
48
src/hooks/usePublish/README.md
Normal 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>
|
||||
)
|
||||
}
|
||||
```
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user