frontend: blocks modal

src/App.js

@@ -1,9 +1,15 @@
 import React from 'react'
-import { Layout, Loading, Main } from './components'
+import { Layout, Loading, Main, Modals } from './components'
 import { withRouter } from 'react-router-dom'
 import socket from './socket'
 
-const initialState = { loading: true, blocks: [], timestamp: 0 }
+const initialState = {
+  loading: true,
+  blocks: [],
+  timestamp: 0,
+  modal: null,
+  validator: null,
+}
 
 class App extends React.Component {
   initializeSocket() {
@@ -20,12 +26,37 @@ class App extends React.Component {
     })
   }
 
+  setShowModal(showModal) {
+    this.setState({ showModal })
+  }
+  showValidator(account) {
+    //const validator = this.state.validators.find((v) => v.account === account)
+    //if (!validator) return
+
+    this.setState({ validator: { account } })
+    this.setShowModal('validator')
+  }
+
   renderError() {
     if (this.state.showModal === 'Error') return
     this.setShowModal('Error')
   }
   renderApp() {
-    return <Main {...this.state} />
+    return (
+      <div>
+        <Modals
+          setShowModal={this.setShowModal}
+          showModal={this.state.showModal}
+          validator={this.state.validator}
+          blocks={this.state.blocks}
+        />
+        <Main
+          setShowModal={this.setShowModal}
+          showValidator={this.showValidator}
+          {...this.state}
+        />
+      </div>
+    )
   }
   render() {
     if (this.state.loading) return <Loading />
@@ -44,6 +75,8 @@ class App extends React.Component {
   constructor() {
     super()
     this.state = initialState
+    this.setShowModal = this.setShowModal.bind(this)
+    this.showValidator = this.showValidator.bind(this)
   }
 }
 

src/components/Main/index.js

@@ -34,7 +34,7 @@ const Main = (props) => {
                     {moment(timestamp).format('HH:mm:ss')}
                   </div>
                   {(blocktime / 1000).toFixed(3)} s
-                  <div>
+                  <div onClick={() => props.showValidator(author)}>
                     <small>{author}</small>
                   </div>
                 </div>

src/components/Modals/Validator.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Button, Modal } from 'react-bootstrap'
+
+const Validator = (props) => {
+  const { account, handle = '' } = props.validator
+
+  const blocks = props.blocks.filter((b) => b.author === account)
+  const title = handle === '' ? account : handle
+  const blocktime =
+    blocks.map((b) => b.blocktime).reduce((a, b) => a + b, 0) / blocks.length
+
+  return (
+    <Modal
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered
+      show={props.show}
+      onHide={props.onHide}
+    >
+      <Modal.Header className="no-border" closeButton>
+        <Modal.Title id="contained-modal-title-vcenter ">{title}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="text-center">
+        <div className="p-3 font-weight-bold">
+          Average Blocktime: {(blocktime / 1000).toFixed(3)} s
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="dark" onClick={props.onHide}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export default Validator

src/components/Modals/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Validator from './Validator'
+
+const Modals = (props) => {
+  const { setShowModal, showModal, blocks, validator } = props
+  return (
+    <div>
+      {showModal === 'validator' ? (
+        <Validator
+          show={true}
+          onHide={setShowModal}
+          blocks={blocks.filter((b) => b.author === validator.account)}
+          validator={validator}
+        />
+      ) : null}
+    </div>
+  )
+}
+export default Modals

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as Layout } from "./Layout";
 export { default as Loading } from "./Loading";
 export { default as Main } from "./Main";
+export { default as Modals } from "./Modals";