oceanprotocol/react
1
0
Fork 0
mirror of https://github.com/oceanprotocol/react.git synced 2024-12-23 01:29:49 +01:00
Code Releases Activity

more web3 additions

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-04-27 17:33:21 +02:00
parent 9a16afab5f
commit ffe391995e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -50,7 +50,6 @@ First, wrap your App with the `Web3Provider` and the `OceanProvider`.
```tsx
import React, { ReactNode } from 'react'
import Web3 from 'web3'
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
const config: Config = {
@ -65,7 +64,7 @@ export default function MyApp({
}): ReactNode {
return (
<Web3Provider>
{(web3: Web3) => (
{({ web3 }) => (
<OceanProvider config={config} web3={web3}>
<h1>My App</h1>
{children}
@ -76,7 +75,7 @@ export default function MyApp({
}
```
The `OceanProvider` requires a Web3 instance to be passed as prop. To get you started, we added a basic `Web3Provider` which assumes an injected provider (like MetaMask), and will ask for permissions automatically on first mount.
The `OceanProvider` requires a Web3 instance to be passed as prop so you can replace the builtin `Web3Provider` with whatever library which returns a Web3 instance. To get you started, we added a basic `Web3Provider` which assumes an injected provider (like MetaMask), and will ask for user permissions automatically on first mount.
We suggest you replace this provider with a more complete solution, since there are many UX considerations not handled in that basic provider, like activate only on user intent, listen for account & network changes, display connection instructions and errors, etc.
@ -91,12 +90,20 @@ Then within your component use the provided hooks to interact with Ocean's funct
```tsx
import React from 'react'
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
import {
useWeb3,
useOcean,
useMetadata,
useConsume
} from '@oceanprotocol/react'
const did = 'did:op:0x000000000'
export default function MyComponent() {
// Initialize, get existing, or reinitialize Ocean
// Get web3 from built-in Web3Provider context
const { web3 } = useWeb3()
// Get Ocean instance from built-in OceanProvider context
const { ocean, account } = useOcean()
// Get metadata for this asset
@ -108,17 +115,19 @@ export default function MyComponent() {
// consume asset
const { consume, consumeStep } = useConsume()
async function handleClick() {
async function handleDownload() {
await consume(did)
}
return (
<div>
<h1>{title}</h1>
<p>Price: {metadata.main.price}</p>
<p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
<p>Your account: {account}</p>
<button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
<button onClick={handleDownload}>
{consumeStep || 'Download Asset'}
</button>
</div>
)
}