Merge pull request #107 from oceanprotocol/fix/docs

Update docs

src/hooks/useConsume/README.md

@@ -6,18 +6,17 @@ Get access to, and download a data asset.
 
 ```tsx
 import React from 'react'
-import { useWeb3, useMetadata, useConsume } from '@oceanprotocol/react'
+import { useOcean, useConsume } from '@oceanprotocol/react'
 
 const did = 'did:op:0x000000000'
 
 export default function MyComponent() {
-  // Get web3 from Web3Provider context
+  const { accountId } = useOcean()
-  const { web3, account } = useWeb3()
 
   // Get metadata for this asset
-  const { title, metadata } = useMetadata(did)
+  const { title, price } = useMetadata(did)
 
-  // consume asset
+  // Consume helpers
   const { consume, consumeStep } = useConsume()
 
   async function handleDownload() {
@@ -27,9 +26,9 @@ export default function MyComponent() {
   return (
     <div>
       <h1>{title}</h1>
-      <p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
+      <p>Price: {price}</p>
 
-      <p>Your account: {account}</p>
+      <p>Your account: {accountId}</p>
       <button onClick={handleDownload}>
         {consumeStep || 'Download Asset'}
       </button>

src/hooks/useConsume/useConsume.ts

@@ -3,6 +3,7 @@ import { useOcean } from '../../providers'
 import { feedback } from '../../utils'
 import { DID, Logger, ServiceType } from '@oceanprotocol/lib'
 import { checkAndBuyDT } from '../../utils/dtUtils'
+
 interface UseConsume {
   consume: (
     did: DID | string,

src/hooks/useMetadata/README.md

@@ -3,9 +3,10 @@
 Get metadata for a specific data asset.
 
 `useMetadata` has 3 uses:
- - `useMetadata(did)` : it gets the ddo and then loads all the values (title, metadata etc)
+
- - `useMetadata(ddo)` : it uses the passed ddo and the loads all the values, in case you already got a list of ddo, so you don't have to fetch the ddo once again
+- `useMetadata(did)` : it gets the DDO and then loads all the values (title, metadata etc)
- - `useMetadata()` : loads nothing, useful for using functions like `getBestPrice` or `getBestPool` (maybe more in the future) with minimal calls
+- `useMetadata(ddo)` : it uses the passed DDO and the loads all the values, in case you already got a list of DDOs, so you don't have to fetch the DDO once again
+- `useMetadata()` : loads nothing, useful for using functions like `getPrice` or `getPool` with minimal calls
 
 ## Usage
 
@@ -17,14 +18,14 @@ const did = 'did:op:0x000000000'
 
 export default function MyComponent() {
   // Get metadata for this asset
-  const { ddo, title, metadata, bestPrice} = useMetadata(did)
+  const { title, metadata, price } = useMetadata(did)
 
   const { main, additionalInformation } = metadata
 
   return (
     <div>
       <h1>{title}</h1>
-      <p>Price: {bestPrice}</p>
+      <p>Price: {price}</p>
     </div>
   )
 }

src/hooks/usePublish/README.md

@@ -0,0 +1,48 @@
+# `usePublish`
+
+Publish data sets, and create data tokens and liquidity pools for them.
+
+## Usage
+
+```tsx
+import React from 'react'
+import { useOcean, usePublish } from '@oceanprotocol/react'
+import { Metadata } from '@oceanprotocol/lib'
+
+export default function MyComponent() {
+  const { accountId } = useOcean()
+
+  // Publish helpers
+  const { publish, publishStep } = usePublish()
+
+  const metadata: MetaData = {
+    main: {
+      name: 'Asset'
+    },
+    additionalInformation: {
+      description: 'My Cool Asset'
+    }
+  }
+
+  const priceOptions = {
+    price: 10,
+    tokensToMint: 10,
+    type: 'fixed',
+    weightOnDataToken: '',
+    liquidityProviderFee: ''
+  }
+
+  async function handlePublish() {
+    const ddo = await publish(metadata, priceOptions, 'access')
+  }
+
+  return (
+    <div>
+      <h1>Publish</h1>
+
+      <p>Your account: {accountId}</p>
+      <button onClick={handlePublish}>Publish</button>
+    </div>
+  )
+}
+```

src/providers/OceanProvider/README.md

@@ -14,13 +14,8 @@ Wrap your whole app with the `OceanProvider`:
 
 ```tsx
 import React, { ReactNode } from 'react'
-import { OceanProvider, Config } from '@oceanprotocol/react'
+import { OceanProvider } from '@oceanprotocol/react'
-
+import { ConfigHelper } from '@oceanprotocol/lib'
-const config: Config = {
-  nodeUri: '',
-  metadataStoreUri: '',
-  ...
-}
 
 const web3ModalOpts = {
   network: 'mainnet', // optional
@@ -33,10 +28,15 @@ export default function MyApp({
 }: {
   children: ReactNode
 }): ReactNode {
+  const oceanInitialConfig = new ConfigHelper().getConfig(
+    'mainnet',
+    'INFURA_PROJECT_ID'
+  )
+
   return (
-    <OceanProvider config={config} web3ModalOpts={web3ModalOpts}>
+    <OceanProvider initialConfig={config} web3ModalOpts={web3ModalOpts}>
-        <h1>My App</h1>
+      <h1>My App</h1>
-        {children}
+      {children}
     </OceanProvider>
   )
 }