55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
# `Web3Provider`
|
|
|
|
To get you started, we added this basic `Web3Provider` which assumes an injected provider (like MetaMask), and will ask for user permissions automatically on first mount.
|
|
|
|
Also provides a `useWeb3` helper hook to access its context values from any component.
|
|
|
|
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.
|
|
|
|
Some great solutions we liked to work with:
|
|
|
|
- [web3-react](https://github.com/NoahZinsmeister/web3-react)
|
|
- [web3modal](https://github.com/web3modal/web3modal)
|
|
|
|
## Usage
|
|
|
|
Wrap your whole app with the `Web3Provider`:
|
|
|
|
```tsx
|
|
import { Web3Provider } from '@oceanprotocol/react'
|
|
|
|
function MyApp() {
|
|
return (
|
|
<Web3Provider>
|
|
{({ web3, chainId, account, balance, enable }) => (
|
|
<ul>
|
|
<li>Web3 available: {`${Boolean(web3)}`}</li>
|
|
<li>Chain ID: {chainId}</li>
|
|
<li>Account: {account}</li>
|
|
<li>Balance: {balance}</li>
|
|
</ul>
|
|
)}
|
|
</Web3Provider>
|
|
)
|
|
}
|
|
```
|
|
|
|
You can then access the provider context values with the `useWeb3` hook:
|
|
|
|
```tsx
|
|
import { useWeb3 } from '@oceanprotocol/react'
|
|
|
|
function MyComponent() {
|
|
const { web3, chainId, account, balance, enable } = useWeb3()
|
|
|
|
return (
|
|
<ul>
|
|
<li>Web3 available: {`${Boolean(web3)}`}</li>
|
|
<li>Chain ID: {chainId}</li>
|
|
<li>Account: {account}</li>
|
|
<li>Balance: {balance}</li>
|
|
</ul>
|
|
)
|
|
}
|
|
```
|