From ebed6ee666c144979e42d0f452fec081516911d6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 16 Sep 2019 17:50:22 +0200
Subject: [PATCH] update docs

---
 README.md           | 43 ++++++++++++++++++++++++++++++++++++++++++-
 package.json        |  1 +
 src/Network.js      | 23 ++++++++++++++++++++++-
 src/Network.test.js | 19 +++++++++++++++++++
 src/rpc.js          | 24 ++----------------------
 5 files changed, 86 insertions(+), 24 deletions(-)
 create mode 100644 src/Network.test.js

diff --git a/README.md b/README.md
index 6ccf120..d26bfe9 100644
--- a/README.md
+++ b/README.md
@@ -8,12 +8,25 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/ed14f83f8328dec5da11/maintainability)](https://codeclimate.com/github/oceanprotocol/status/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/ed14f83f8328dec5da11/test_coverage)](https://codeclimate.com/github/oceanprotocol/status/test_coverage)
 
-<img width="1373" alt="Screen Shot 2019-09-16 at 14 51 28" src="https://user-images.githubusercontent.com/90316/64959471-7ff30000-d891-11e9-84be-96151bb7ea2d.png">
+<a href="https://status.oceanprotocol.com"><img width="1373" alt="Status Interface" src="https://user-images.githubusercontent.com/90316/64959471-7ff30000-d891-11e9-84be-96151bb7ea2d.png"></a>
 
+- [🦑 Features](#-features)
 - [🏄 Get Started](#-get-started)
+- [👩‍🔬 Testing](#-testing)
+- [✨ Code Style](#-code-style)
 - [🎁 Contributing](#-contributing)
 - [🏛 License](#-license)
 
+## 🦑 Features
+
+- Fetches and displays information for each of Ocean's remote RPC endpoints
+  - online/offline status
+  - current block number
+  - response time
+- current block number is linked to respective explorer
+- automatically refetch all data every 5 sec.
+- Gets network metadata from [@ethereum-navigator/atlas](https://github.com/ethereum-navigator/atlas)
+
 ## 🏄 Get Started
 
 ```bash
@@ -21,6 +34,34 @@ npm install
 npm start
 ```
 
+## 👩‍🔬 Testing
+
+Test suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library) for unit testing.
+
+To run all linting and unit tests:
+
+```bash
+npm test
+```
+
+For local development, you can start the test runner in a watch mode.
+
+```bash
+npm run test:watch
+```
+
+## ✨ Code Style
+
+For linting and auto-formatting you can use from the root of the project:
+
+```bash
+# lint all js with eslint
+npm run lint
+
+# auto format all js & css with prettier, taking all configs into account
+npm run format
+```
+
 ## 🎁 Contributing
 
 See the page titled "[Ways to Contribute](https://docs.oceanprotocol.com/concepts/contributing/)" in the Ocean Protocol documentation.
diff --git a/package.json b/package.json
index 8e6b210..fdc8417 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "production": [
       ">0.2%",
       "not dead",
+      "not ie <= 11",
       "not op_mini all"
     ],
     "development": [
diff --git a/src/Network.js b/src/Network.js
index 7474219..32c0c71 100644
--- a/src/Network.js
+++ b/src/Network.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { getStatusAndBlock, getClientVersion } from './rpc'
+import { axiosRpcRequest } from './rpc'
 import styles from './Network.module.scss'
 
 Network.propTypes = {
@@ -30,6 +30,27 @@ export default function Network({ network }) {
     return () => clearInterval(timer)
   }, [network])
 
+  async function getStatusAndBlock(network, setStatus, setBlock, setLatency) {
+    const response = await axiosRpcRequest(network.url, 'eth_blockNumber')
+
+    if (response.status !== 200) {
+      setStatus('Offline')
+      return
+    }
+
+    setStatus('Online')
+    setLatency(response.duration)
+
+    const blockNumber = parseInt(response.data.result, 16)
+
+    setBlock(blockNumber)
+  }
+
+  async function getClientVersion(network, setClientVersion) {
+    const response = await axiosRpcRequest(network.url, 'web3_clientVersion')
+    setClientVersion(response.data.result)
+  }
+
   const isOnline = status === 'Online'
 
   return (
diff --git a/src/Network.test.js b/src/Network.test.js
new file mode 100644
index 0000000..7c551e2
--- /dev/null
+++ b/src/Network.test.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Network from './Network'
+
+describe('Network', () => {
+  const network = {
+    name: 'Pacific',
+    project: 'Ocean Protocol',
+    type: 'mainnet',
+    networkId: '0xCEA11',
+    url: 'https://pacific.oceanprotocol.com',
+    explorer: 'https://submarine.oceanprotocol.com'
+  }
+
+  it('renders without crashing', () => {
+    const { container } = render(<Network network={network} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})
diff --git a/src/rpc.js b/src/rpc.js
index 71fd416..de74e60 100644
--- a/src/rpc.js
+++ b/src/rpc.js
@@ -36,28 +36,8 @@ async function axiosRpcRequest(url, method) {
     return response
   } catch (error) {
     console.error(error.message)
+    return error
   }
 }
 
-async function getStatusAndBlock(network, setStatus, setBlock, setLatency) {
-  const response = await axiosRpcRequest(network.url, 'eth_blockNumber')
-
-  if (response.status !== 200) {
-    setStatus('Offline')
-    return
-  }
-
-  setStatus('Online')
-  setLatency(response.duration)
-
-  const blockNumber = parseInt(response.data.result, 16)
-
-  setBlock(blockNumber)
-}
-
-async function getClientVersion(network, setClientVersion) {
-  const response = await axiosRpcRequest(network.url, 'web3_clientVersion')
-  setClientVersion(response.data.result)
-}
-
-export { getStatusAndBlock, getClientVersion }
+export { axiosRpcRequest }