mirror of
https://github.com/oceanprotocol/react.git
synced 2024-07-01 06:02:20 +02:00
100 lines
1.9 KiB
Markdown
100 lines
1.9 KiB
Markdown
# @oceanprotocol/react
|
|
|
|
> React hooks & components on top of squid.js
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @oceanprotocol/react
|
|
```
|
|
|
|
## Usage
|
|
|
|
First, wrap your App with the `OceanProvider`:
|
|
|
|
```tsx
|
|
import React from 'react'
|
|
import { OceanProvider } from '@oceanprotocol/react'
|
|
|
|
export default function MyApp({ children }: { children: any }) {
|
|
// TODO: setup web3 first
|
|
// or fallback to injected providers by default
|
|
// so it works with any browser wallet out of the box
|
|
|
|
return (
|
|
<OceanProvider web3={web3}>
|
|
<h1>My App</h1>
|
|
{children}
|
|
</OceanProvider>
|
|
|
|
)
|
|
}
|
|
```
|
|
|
|
Then within your component use the provided hooks to interact with Ocean's functionality:
|
|
|
|
```tsx
|
|
import React from 'react'
|
|
import { useOcean, OceanConfig, useConsume } from '@oceanprotocol/react'
|
|
|
|
const oceanConfig: OceanConfig = {
|
|
nodeUri: '',
|
|
...
|
|
}
|
|
|
|
export default function MyComponent() {
|
|
// Initialize, get existing, or reinitialize Ocean
|
|
const { ocean, account } = useOcean(oceanConfig)
|
|
|
|
// consume asset
|
|
const { consumeAsset, isLoading, step } = useConsume(ocean)
|
|
|
|
async function handleClick() {
|
|
const ddo = 'did:op:0x000000000'
|
|
await consumeAsset(ddo, account)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
Your account: {account}
|
|
|
|
<button onClick={handleClick}>
|
|
{isLoading ? step : 'Download Asset' }
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Specs
|
|
|
|
#### `useOcean()`
|
|
|
|
```tsx
|
|
interface UseOcean {
|
|
ocean: Ocean
|
|
account: string
|
|
balance: { ocean: string, eth: string }
|
|
status: OceanConnectionStatus
|
|
}
|
|
|
|
const result: UseOcean = useOcean(config: OceanConfig)
|
|
```
|
|
|
|
|
|
#### `useConsume()`
|
|
|
|
```tsx
|
|
interface ConsumeOptions {
|
|
ocean: Ocean
|
|
}
|
|
|
|
interface UseConsume {
|
|
consumeAsset: (ddo: DDO, account: string) => void
|
|
isLoading: boolean
|
|
step: number
|
|
error: string | undefined
|
|
}
|
|
|
|
const result: UseConsume = useConsume(options: ConsumeOptions)
|
|
``` |