update docs

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.

package.json

@@ -37,6 +37,7 @@
     "production": [
       ">0.2%",
       "not dead",
+      "not ie <= 11",
       "not op_mini all"
     ],
     "development": [

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 (

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()
+  })
+})

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) {
+export { axiosRpcRequest }
-  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 }