From d03d001e6831c2a3fadd74f3b16f9d71d6930c27 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 19 May 2020 18:26:26 +0200
Subject: [PATCH] update docs & examples

---
 src/hooks/useCompute/README.md  | 19 +++++-----------
 src/hooks/useConsume/README.md  | 39 +++++++++++++++++++++++++++++++++
 src/hooks/useMetadata/README.md | 26 ++++++++++++++++++++++
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useCompute/README.md b/src/hooks/useCompute/README.md
index c188975..f424015 100644
--- a/src/hooks/useCompute/README.md
+++ b/src/hooks/useCompute/README.md
@@ -1,12 +1,6 @@
 # `useCompute`
 
-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.
-
-Also provides a `useOcean` helper hook to access its context values from any component.
+Start a compute job on a data asset and retrieve its status.
 
 ## Usage
 
@@ -14,7 +8,6 @@ Also provides a `useOcean` helper hook to access its context values from any com
 import React from 'react'
 import {
   useWeb3,
-  useOcean,
   useMetadata,
   useCompute,
   computeOptions,
@@ -25,18 +18,15 @@ import {
 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()
+  // Get web3 from Web3Provider context
+  const { web3, account } = useWeb3()
 
   // Get metadata for this asset
   const { title, metadata } = useMetadata(did)
 
-
   // compute asset
   const { compute, computeStep } = useCompute()
+
   // raw code text
   const [algorithmRawCode, setAlgorithmRawCode] = useState('')
   const [computeContainer, setComputeContainer] = useState<ComputeValue>()
@@ -48,6 +38,7 @@ export default function MyComponent() {
     const fileText = await readFileContent(files[0])
     setAlgorithmRawCode(fileText)
   }
+
   async function handleSelectChange(event: any)  {
     const comType = event.target.value
     setComputeContainer(comType)
diff --git a/src/hooks/useConsume/README.md b/src/hooks/useConsume/README.md
index e69de29..c69a05f 100644
--- a/src/hooks/useConsume/README.md
+++ b/src/hooks/useConsume/README.md
@@ -0,0 +1,39 @@
+# `useConsume`
+
+Get access to, and download a data asset.
+
+## Usage
+
+```tsx
+import React from 'react'
+import { useWeb3, useMetadata, useConsume } from '@oceanprotocol/react'
+
+const did = 'did:op:0x000000000'
+
+export default function MyComponent() {
+  // Get web3 from Web3Provider context
+  const { web3, account } = useWeb3()
+
+  // Get metadata for this asset
+  const { title, metadata } = useMetadata(did)
+
+  // consume asset
+  const { consume, consumeStep } = useConsume()
+
+  async function handleDownload() {
+    await consume(did)
+  }
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>Price: {web3.utils.fromWei(metadata.main.price)}</p>
+
+      <p>Your account: {account}</p>
+      <button onClick={handleDownload}>
+        {consumeStep || 'Download Asset'}
+      </button>
+    </div>
+  )
+}
+```
diff --git a/src/hooks/useMetadata/README.md b/src/hooks/useMetadata/README.md
index e69de29..1294751 100644
--- a/src/hooks/useMetadata/README.md
+++ b/src/hooks/useMetadata/README.md
@@ -0,0 +1,26 @@
+# `useMetadata`
+
+Get metadata for a specific data asset.
+
+## Usage
+
+```tsx
+import React from 'react'
+import { useMetadata } from '@oceanprotocol/react'
+
+const did = 'did:op:0x000000000'
+
+export default function MyComponent() {
+  // Get metadata for this asset
+  const { title, metadata } = useMetadata(did)
+
+  const { main, additionalInformation } = metadata
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>Price: {main.price}</p>
+    </div>
+  )
+}
+```