isolate rpc functions, move to css modules

src/App.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
-import './App.scss'
+import styles from './App.module.scss'
 import atlas from '@ethereum-navigator/atlas'
 import Network from './Network'
 
 export default function App() {
   return (
-    <div className="App">
-      <header className="header">
+    <div className={styles.app}>
+      <header className={styles.header}>
         <Logo />
         <h1>Ocean Protocol Status</h1>
         <p>
@@ -16,7 +16,7 @@ export default function App() {
         </p>
       </header>
 
-      <div className="networks">
+      <div className={styles.networks}>
         {atlas
           .filter(
             item => item.project === 'Ocean Protocol' && item.name !== 'Spree'

src/App.module.scss

@@ -0,0 +1,38 @@
+@import './styles/variables';
+
+.app {
+  text-align: center;
+  padding: $spacer / 2;
+}
+
+h1, h2 {
+    color: $brand-white;
+}
+
+.header {
+    text-align: center;
+    margin-top: $spacer;
+
+    h1 {
+        margin-bottom: $spacer / 2;
+    }
+
+    p {
+        font-size: $font-size-large;
+        color: $brand-white;
+        margin: auto;
+        max-width: 35rem;
+    }
+
+    svg {
+        width: 75px;
+        height: 75px;
+    }
+}
+
+.networks {
+    display: grid;
+    gap: $spacer;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    margin-top: $spacer * 2;
+}

src/App.scss

@@ -1,82 +0,0 @@
-@import './styles/variables';
-
-.App {
-  text-align: center;
-  padding: $spacer / 2;
-}
-
-h1, h2 {
-    color: $brand-white;
-}
-
-.header {
-    h1 {
-        margin-bottom: $spacer / 2;
-    }
-
-    p {
-        font-size: $font-size-large;
-        color: $brand-white;
-        margin: auto;
-        max-width: 35rem;
-    }
-
-    svg {
-        width: 85px;
-        height: 85px;
-    }
-}
-
-.networks {
-    display: grid;
-    gap: $spacer;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    margin-top: $spacer * 2;
-}
-
-.network {
-    border: 1px solid $brand-grey-dark;
-    padding: $spacer;
-    border-radius: $border-radius;
-    text-align: left;
-
-    h2 {
-        margin-bottom: $spacer / 4;
-        margin-top: 0;
-
-        span { color: $brand-grey-light; font-size: $font-size-base; }
-    }
-
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.block {
-    a {
-        color: $brand-grey-lighter;
-    }
-}
-
-.status {
-    margin-bottom: 0;
-}
-
-.success {
-    color: $green;
-}
-
-.error {
-    color: $red;
-}
-
-.latency {
-    display: inline-block;
-    margin-left: $spacer / 4;
-    font-size: $font-size-mini;
-}
-
-.clientVersion {
-    font-size: $font-size-mini;
-
-}

src/Network.js

@@ -1,70 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import axios from 'axios'
-
-// Measure response time and deliver as `response.duration`
-axios.interceptors.request.use(
-  config => {
-    config.metadata = { startTime: new Date() }
-    return config
-  },
-  error => Promise.reject(error)
-)
-
-axios.interceptors.response.use(
-  response => {
-    response.config.metadata.endTime = new Date()
-    response.duration =
-      response.config.metadata.endTime - response.config.metadata.startTime
-    return response
-  },
-  error => {
-    error.config.metadata.endTime = new Date()
-    error.duration =
-      error.config.metadata.endTime - error.config.metadata.startTime
-    return Promise.reject(error)
-  }
-)
-
-async function getStatusAndBlock(network, setStatus, setBlock, setLatency) {
-  try {
-    const response = await axios.post(network.url, {
-      method: 'eth_blockNumber',
-      params: [],
-      id: 1,
-      jsonrpc: '2.0'
-    })
-
-    if (response.status !== 200) {
-      setStatus('Offline')
-      return
-    }
-
-    setStatus('Online')
-    setLatency(response.duration)
-
-    const blockNumber = parseInt(response.data.result, 16)
-
-    setBlock(blockNumber)
-  } catch (error) {
-    console.error(error.message)
-  }
-}
-
-async function getClientVersion(network, setClientVersion) {
-  try {
-    const response = await axios.post(network.url, {
-      method: 'web3_clientVersion',
-      params: [],
-      id: 1,
-      jsonrpc: '2.0'
-    })
-
-    setClientVersion(response.data.result)
-  } catch (error) {
-    console.error(error.message)
-  }
-}
+import { getStatusAndBlock, getClientVersion } from './rpc'
+import styles from './Network.module.scss'
 
 export default function Network({ network }) {
   const [status, setStatus] = useState('...')
@@ -86,21 +23,27 @@ export default function Network({ network }) {
   const isOnline = status === 'Online'
 
   return (
-    <div className="network">
-      <h2>
-        {network.name} <span>{network.type}</span>
+    <div className={styles.network}>
+      <h2 className={styles.title}>
+        {network.name}
+        <span>{network.type}</span>
+        <code>{network.networkId}</code>
       </h2>
       <p>
         <code>{network.url}</code>
       </p>
-      <p className="status">
-        <span className={isOnline ? 'success' : 'error'}>{status}</span>
-        <span className="latency">{latency} ms</span>
+      <p className={styles.status}>
+        <span className={isOnline ? styles.success : styles.error}>
+          {status}
+        </span>
+        <span className={styles.latency} title="Latency">
+          {latency} ms
+        </span>
       </p>
-      <p className="block">
+      <p className={styles.block}>
         At block #<a href={`${network.explorer}/blocks/${block}`}>{block}</a>
       </p>
-      <p className="clientVersion">{clientVersion}</p>
+      <p className={styles.clientVersion}>{clientVersion}</p>
     </div>
   )
 }
@@ -108,6 +51,7 @@ export default function Network({ network }) {
 Network.propTypes = {
   network: PropTypes.shape({
     name: PropTypes.string.isRequired,
+    networkId: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     explorer: PropTypes.string.isRequired

src/Network.module.scss

@@ -0,0 +1,59 @@
+@import './styles/variables';
+
+.network {
+    border: 1px solid $brand-grey-dark;
+    padding: $spacer;
+    border-radius: $border-radius;
+    text-align: left;
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.title {
+    margin-bottom: $spacer / 4;
+    margin-top: 0;
+    font-size: $font-size-h2;
+
+    span,
+    code { 
+        color: $brand-grey-light; 
+        font-size: $font-size-base; 
+        display: inline-block;
+        margin-left: $spacer / 2;
+    }
+
+    code {
+        font-weight: $font-weight-base;
+    }
+}
+
+.block {
+    a {
+        color: $brand-grey-lighter;
+    }
+}
+
+.status {
+    margin-bottom: 0;
+}
+
+.success {
+    color: $green;
+}
+
+.error {
+    color: $red;
+}
+
+.latency {
+    display: inline-block;
+    margin-left: $spacer / 4;
+    font-size: $font-size-mini;
+}
+
+.clientVersion {
+    font-size: $font-size-mini;
+
+}

src/rpc.js

@@ -0,0 +1,63 @@
+import axios from 'axios'
+
+// Measure response time and deliver as `response.duration`
+axios.interceptors.request.use(
+  config => {
+    config.metadata = { startTime: new Date() }
+    return config
+  },
+  error => Promise.reject(error)
+)
+
+axios.interceptors.response.use(
+  response => {
+    response.config.metadata.endTime = new Date()
+    response.duration =
+      response.config.metadata.endTime - response.config.metadata.startTime
+    return response
+  },
+  error => {
+    error.config.metadata.endTime = new Date()
+    error.duration =
+      error.config.metadata.endTime - error.config.metadata.startTime
+    return Promise.reject(error)
+  }
+)
+
+async function axiosRpcRequest(url, method) {
+  try {
+    const response = await axios.post(url, {
+      method,
+      params: [],
+      id: 1,
+      jsonrpc: '2.0'
+    })
+
+    return response
+  } catch (error) {
+    console.error(error.message)
+  }
+}
+
+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 }