oceanprotocol/react
1
0
Fork 0
mirror of https://github.com/oceanprotocol/react.git synced 2025-02-14 21:10:38 +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 ```tsx
import React, { ReactNode } from 'react' import React, { ReactNode } from 'react'
import Web3 from 'web3'
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react' import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
const config: Config = { const config: Config = {
@ -65,7 +64,7 @@ export default function MyApp({
}): ReactNode { }): ReactNode {
return ( return (
<Web3Provider> <Web3Provider>
{(web3: Web3) => ( {({ web3 }) => (
<OceanProvider config={config} web3={web3}> <OceanProvider config={config} web3={web3}>
<h1>My App</h1> <h1>My App</h1>
{children} {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. 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 ```tsx
import React from 'react' import React from 'react'
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react' import {
useWeb3,
useOcean,
useMetadata,
useConsume
} from '@oceanprotocol/react'
const did = 'did:op:0x000000000' const did = 'did:op:0x000000000'
export default function MyComponent() { 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() const { ocean, account } = useOcean()
// Get metadata for this asset // Get metadata for this asset
@ -108,17 +115,19 @@ export default function MyComponent() {
// consume asset // consume asset
const { consume, consumeStep } = useConsume() const { consume, consumeStep } = useConsume()
async function handleClick() { async function handleDownload() {
await consume(did) await consume(did)
} }
return ( return (
<div> <div>
<h1>{title}</h1> <h1>{title}</h1>
<p>Price: {metadata.main.price}</p> <p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
<p>Your account: {account}</p> <p>Your account: {account}</p>
<button onClick={handleClick}>{consumeStep || 'Download Asset'}</button> <button onClick={handleDownload}>
{consumeStep || 'Download Asset'}
</button>
</div> </div>
) )
} }