2020-04-28 16:51:17 +02:00
# `OceanProvider`
The `OceanProvider` maintains a connection to the Ocean Protocol network in multiple steps:
2020-07-31 01:48:26 +02:00
1. On mount, setup [Web3Modal ](https://github.com/Web3Modal/ ).
2. Once connection with Web3Modal is started, Web3 becomes available.
3. Once Web3 becomes available, connection to Ocean Protocol components are initiated, all available under the `ocean` object.
2020-04-28 16:51:17 +02:00
2020-07-31 01:48:26 +02:00
With the included `useOcean` helper hook you can access all context values from any component.
2020-04-28 16:51:17 +02:00
## Usage
Wrap your whole app with the `OceanProvider` :
```tsx
import React, { ReactNode } from 'react'
2020-09-07 16:29:05 +02:00
import { OceanProvider } from '@oceanprotocol/react'
import { ConfigHelper } from '@oceanprotocol/lib'
2020-04-28 16:51:17 +02:00
2020-07-31 01:48:26 +02:00
const web3ModalOpts = {
network: 'mainnet', // optional
cacheProvider: true, // optional
providerOptions // required
}
2020-09-08 21:13:32 +02:00
const oceanDefaultConfig = new ConfigHelper().getConfig(
'mainnet',
'YOUR_INFURA_PROJECT_ID'
)
const config = {
...oceanDefaultConfig,
2020-10-13 16:48:52 +02:00
metadataCacheUri: 'https://your-metadata-cache.com',
2020-09-08 21:13:32 +02:00
providerUri: 'https://your-provider.com'
}
2020-04-28 16:51:17 +02:00
export default function MyApp({
children
}: {
children: ReactNode
}): ReactNode {
return (
2020-09-07 16:29:05 +02:00
< OceanProvider initialConfig = {config} web3ModalOpts = {web3ModalOpts} >
< h1 > My App< / h1 >
{children}
2020-04-28 16:51:17 +02:00
< / OceanProvider >
)
}
```
2020-07-31 01:48:26 +02:00
The `OceanProvider` uses [Web3Modal ](https://github.com/Web3Modal/ ) to make its initial wallet connection. If you do not pass `web3ModalOpts` as a prop, only the default injected provider will be available. Adding more providers requires you to add them as dependencies to your project and pass them as `providerOptions` . See all the available [Provider Options ](https://github.com/Web3Modal/web3modal#provider-options ).
2020-04-28 16:51:17 +02:00
You can then access the provider context values with the `useOcean` hook:
```tsx
import { useOcean } from '@oceanprotocol/react'
function MyComponent() {
2020-07-30 23:18:23 +02:00
const { ocean, accountId } = useOcean()
2020-04-28 16:51:17 +02:00
return (
< ul >
< li > Ocean available: {`${Boolean(ocean)}`}< / li >
2020-07-30 23:18:23 +02:00
< li > Account: {accountId}< / li >
2020-04-28 16:51:17 +02:00
< / ul >
)
}
```