2020-04-24 16:38:24 +02:00
|
|
|
# @oceanprotocol/react
|
|
|
|
|
|
|
|
> React hooks & components on top of squid.js
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install @oceanprotocol/react
|
|
|
|
```
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
2020-04-24 16:49:59 +02:00
|
|
|
First, wrap your App with the `OceanProvider`:
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
import React from 'react'
|
|
|
|
import { OceanProvider } from '@oceanprotocol/react'
|
|
|
|
|
|
|
|
export default function MyApp({ children }: { children: any }) {
|
2020-04-24 16:55:12 +02:00
|
|
|
// TODO: setup web3 first
|
|
|
|
|
2020-04-24 16:49:59 +02:00
|
|
|
return (
|
2020-04-24 16:55:12 +02:00
|
|
|
<OceanProvider web3={web3}>
|
2020-04-24 16:49:59 +02:00
|
|
|
<h1>My App</h1>
|
|
|
|
{children}
|
|
|
|
</OceanProvider>
|
|
|
|
|
|
|
|
)
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
Then within your component use the provided hooks to interact with Ocean's functionality:
|
|
|
|
|
2020-04-24 16:38:24 +02:00
|
|
|
```tsx
|
|
|
|
import React from 'react'
|
|
|
|
import { useOcean, OceanConfig, useConsume } from '@oceanprotocol/react'
|
|
|
|
|
|
|
|
const oceanConfig: OceanConfig = {
|
|
|
|
nodeUri: '',
|
|
|
|
...
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function MyComponent() {
|
2020-04-24 16:49:59 +02:00
|
|
|
// Initialize, get existing, or reinitalize Ocean
|
2020-04-24 16:55:12 +02:00
|
|
|
const { ocean, account } = useOcean(oceanConfig)
|
2020-04-24 16:49:59 +02:00
|
|
|
|
|
|
|
// consume asset
|
2020-04-24 16:55:12 +02:00
|
|
|
const { consumeAsset, isLoading, step } = useConsume(ocean)
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
|
|
async function handleClick() {
|
|
|
|
const ddo = 'did:op:0x000000000'
|
2020-04-24 16:55:12 +02:00
|
|
|
await consumeAsset(ddo, account)
|
2020-04-24 16:38:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
Your account: {account}
|
|
|
|
|
|
|
|
<button onClick={handleClick}>
|
|
|
|
{isLoading ? step : 'Download Asset' }
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
```
|