feat: add Ethereum status

packages/concordia-app/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@ezerous/breeze": "~0.7.0",
-    "@ezerous/drizzle": "~0.4.2",
+    "@ezerous/drizzle": "~0.4.3",
     "@ezerous/eth-identity-provider": "~0.1.2",
     "@reduxjs/toolkit": "~1.4.0",
     "@welldone-software/why-did-you-render": "~6.0.5",

packages/concordia-app/src/components/ClearDatabasesModal/index.jsx

@@ -23,7 +23,7 @@ const ClearDatabasesModal = (props) => {
   useEffect(() => {
     if (user.hasSignedUp && confirmationInput === user.username) {
       setUserConfirmed(true);
-    } else if (!user.hasSignedUp && confirmationInput === 'Concordia') {
+    } else if (!user.hasSignedUp && confirmationInput.toLowerCase() === 'concordia') {
       setUserConfirmed(true);
     } else {
       setUserConfirmed(false);

packages/concordia-app/src/components/Status/StatusKeyRow.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+
+const StatusKeyRow = (props) => {
+  const { value } = props;
+  return (
+      <Table.Row>
+          <Table.Cell className="status-key">{value}</Table.Cell>
+      </Table.Row>
+  );
+};
+
+export default StatusKeyRow;

packages/concordia-app/src/components/Status/StatusSegment.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  Header, Image, Segment, Table,
+} from 'semantic-ui-react';
+import './styles.css';
+
+const StatusKeyRow = (props) => {
+  const { headerTitle, headerImage, children } = props;
+  return (
+      <Segment padded>
+          <Header textAlign="center">
+              <Image src={headerImage} size="small" />
+              {headerTitle}
+          </Header>
+          <Table className="status-table" compact textAlign="center" columns={1}>
+              <Table.Body>
+                  {children}
+              </Table.Body>
+          </Table>
+      </Segment>
+  );
+};
+
+export default StatusKeyRow;

packages/concordia-app/src/components/Status/StatusValueRow.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Table } from 'semantic-ui-react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const StatusValueRow = (props) => {
+  const { value } = props;
+  return (value) ? (
+      <Table.Row className="status-value">
+          <Table.Cell>
+              <CopyToClipboard text={value}>
+                  <span>{value}</span>
+              </CopyToClipboard>
+          </Table.Cell>
+      </Table.Row>
+  ) : (
+      <Table.Row>
+          <Table.Cell>-</Table.Cell>
+      </Table.Row>
+  );
+};
+
+export default StatusValueRow;

packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import StatusSegment from '../../../components/Status/StatusSegment';
+import StatusKeyRow from '../../../components/Status/StatusKeyRow';
+import StatusValueRow from '../../../components/Status/StatusValueRow';
+
+import ethereumLogo from '../../../assets/images/ethereum_logo.svg';
+
+const MainLayoutEthereumStatus = () => {
+  const userAddress = useSelector((state) => state.user.address);
+  const blockNumber = useSelector((state) => state.currentBlock.number);
+  const blockHash = useSelector((state) => state.currentBlock.hash);
+
+  return (
+      <StatusSegment
+        headerTitle="Ethereum Status"
+        headerImage={ethereumLogo}
+      >
+          <StatusKeyRow value="User Address" />
+          <StatusValueRow value={userAddress} />
+          <StatusKeyRow value="Block Number" />
+          <StatusValueRow value={blockNumber} />
+          <StatusKeyRow value="Block Hash" />
+          <StatusValueRow value={blockHash} />
+      </StatusSegment>
+  );
+};
+
+export default MainLayoutEthereumStatus;

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx

@@ -1,12 +1,9 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import StatusSegment from '../../../components/Status/StatusSegment';
-import {
+import StatusKeyRow from '../../../components/Status/StatusKeyRow';
-  Header, Image, Segment, Table,
+import StatusValueRow from '../../../components/Status/StatusValueRow';
-} from 'semantic-ui-react';
-
 import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
-import './styles.css';
 
 const MainLayoutIPFSStatus = () => {
   const ipfsId = useSelector((state) => state.ipfs.id);
@@ -14,71 +11,28 @@ const MainLayoutIPFSStatus = () => {
   const bootstrapPeerIds = useSelector((state) => state.ipfs.bootstrapPeers);
   const peers = useMemo(() => peerIds
     .map((peerId) => (
-        <Table.Row className="status-value">
+        <StatusValueRow value={peerId} key={peerId} />
-            <Table.Cell>
-                <CopyToClipboard text={peerId}>
-                    <span>{peerId}</span>
-                </CopyToClipboard>
-            </Table.Cell>
-        </Table.Row>
-
     )), [peerIds]);
 
   const bootstrapPeers = useMemo(() => bootstrapPeerIds
     .map((bootstrapPeerId) => (
-        <Table.Row className="status-value">
+        <StatusValueRow value={bootstrapPeerId} key={bootstrapPeerId} />
-            <Table.Cell>
-                <CopyToClipboard text={bootstrapPeerId}>
-                    <span>{bootstrapPeerId}</span>
-                </CopyToClipboard>
-            </Table.Cell>
-        </Table.Row>
-
     )), [bootstrapPeerIds]);
 
   return (
-      <Segment padded>
+      <StatusSegment
-          <Header textAlign="center">
+        headerTitle="IPFS Status"
-              <Image src={ipfsLogo} size="small" />
+        headerImage={ipfsLogo}
-              IPFS Status
+      >
-          </Header>
+          <StatusKeyRow value="Peer ID" />
-          <Table className="status-table" compact textAlign="center" columns={1}>
+          <StatusValueRow value={ipfsId} />
-              <Table.Body>
+          <StatusKeyRow value="Peers" />
-                  <Table.Row>
+          {peers.length === 0 ? (<StatusValueRow />) : null}
-                      <Table.Cell className="status-key">Peer ID</Table.Cell>
+          {peers}
-                  </Table.Row>
+          <StatusKeyRow value="Bootstrap Peers" />
-                  <Table.Row>
+          {bootstrapPeers.length === 0 ? (<StatusValueRow />) : null}
-                      <Table.Cell
+          {bootstrapPeers}
-                        className="status-value"
+      </StatusSegment>
-                      >
-                          <CopyToClipboard text={ipfsId}>
-                              <span>{ipfsId}</span>
-                          </CopyToClipboard>
-                      </Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                      <Table.Cell className="status-key">Peers</Table.Cell>
-                  </Table.Row>
-                  {peers.length === 0
-                    ? (
-                        <Table.Row>
-                            <Table.Cell>-</Table.Cell>
-                        </Table.Row>
-                    ) : null}
-                  {peers}
-                  <Table.Row>
-                      <Table.Cell className="status-key">Bootstrap Peers</Table.Cell>
-                  </Table.Row>
-                  {bootstrapPeers.length === 0
-                    ? (
-                        <Table.Row>
-                            <Table.Cell>-</Table.Cell>
-                        </Table.Row>
-                    ) : null}
-                  {bootstrapPeers}
-              </Table.Body>
-          </Table>
-      </Segment>
   );
 };
 

packages/concordia-app/src/layouts/MainLayout/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
 import MainLayoutMenu from './MainLayoutMenu';
+import MainLayoutEthereumStatus from './MainLayoutEthereumStatus';
 import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
 import './styles.css';
 
@@ -17,6 +18,7 @@ const MainLayout = (props) => {
                   {children}
               </Grid.Column>
               <Grid.Column width={4}>
+                  <MainLayoutEthereumStatus />
                   <MainLayoutIPFSStatus />
               </Grid.Column>
           </Grid>