diff --git a/README.md b/README.md
index 46776b9..ff45e67 100644
--- a/README.md
+++ b/README.md
@@ -15,16 +15,16 @@
![iu](https://user-images.githubusercontent.com/90316/80356686-1650c080-887a-11ea-854e-bdc2bbdb0c20.jpeg)
-**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and most stuff does not work yet.**
+**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and most stuff changes weekly. More importantly, it only works against bleeding edge v3 components of Ocean Protocol which are not completely public yet.**
---
**Table of Contents**
- [🏗 Installation](#-installation)
-- [🏄 Usage](#-usage)
- - [1. Providers](#1-providers)
- - [2. Hooks](#2-hooks)
+- [🏄 Quick Start](#-quick-start)
+ - [1. Add Provider](#1-add-provider)
+ - [2. Use Hooks](#2-use-hooks)
- [🦑 Development](#-development)
- [✨ Code Style](#-code-style)
- [👩🔬 Testing](#-testing)
@@ -43,62 +43,25 @@
npm install @oceanprotocol/react
```
-## 🏄 Usage
+## 🏄 Quick Start
-First, wrap your whole app with the [`Web3Provider`](src/providers/Web3Provider) and the [`OceanProvider`](src/providers/OceanProvider).
+### 1. Add Provider
-### 1. Providers
+First, wrap your whole app with the [``](src/providers/OceanProvider).
-```tsx
-import React, { ReactNode } from 'react'
-import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
-
-const config: Config = {
- nodeUri: '',
- aquariusUri: '',
- ...
-}
-
-export default function MyApp({
- children
-}: {
- children: ReactNode
-}): ReactNode {
- return (
-
-
- My App
- {children}
-
- )}
-
- )
-}
-```
-
-The `OceanProvider` requires a Web3 instance to be passed as prop so you can replace the basic [`Web3Provider`](src/providers/Web3Provider) with whatever component/library/provider returning a Web3 instance.
-
-### 2. Hooks
+### 2. Use Hooks
Then within your component use the included hooks to interact with Ocean's functionality. Each hook can be used independently:
```tsx
import React from 'react'
-import {
- useWeb3,
- useOcean,
- useMetadata,
- useConsume
-} from '@oceanprotocol/react'
+import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
const did = 'did:op:0x000000000'
export default function MyComponent() {
- // Get web3 from built-in Web3Provider context
- const { web3 } = useWeb3()
-
// Get Ocean instance from built-in OceanProvider context
- const { ocean, account } = useOcean()
+ const { ocean, web3, account } = useOcean()
// Get metadata for this asset
const { title, metadata } = useMetadata(did)
diff --git a/src/providers/OceanProvider/README.md b/src/providers/OceanProvider/README.md
index a268ae5..f983494 100644
--- a/src/providers/OceanProvider/README.md
+++ b/src/providers/OceanProvider/README.md
@@ -2,11 +2,11 @@
The `OceanProvider` maintains a connection to the Ocean Protocol network in multiple steps:
-1. On mount, connect to Aquarius instance right away so any asset metadata can be retrieved before, and independent of any Web3 connections.
-2. Once Web3 becomes available, a connection to all Ocean Protocol network components is established.
-3. Once Ocean becomes available, spits out some info about it.
+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.
-Also provides a `useOcean` helper hook to access its context values from any component.
+With the included `useOcean` helper hook you can access all context values from any component.
## Usage
@@ -22,6 +22,12 @@ const config: Config = {
...
}
+const web3ModalOpts = {
+ network: 'mainnet', // optional
+ cacheProvider: true, // optional
+ providerOptions // required
+}
+
export default function MyApp({
children
}: {
@@ -36,6 +42,8 @@ export default function MyApp({
}
```
+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).
+
You can then access the provider context values with the `useOcean` hook:
```tsx