diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json
index ec3fa75..db994d8 100644
--- a/packages/concordia-app/package.json
+++ b/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",
diff --git a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx b/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx
index fc5db8a..081c4e6 100644
--- a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx
+++ b/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);
diff --git a/packages/concordia-app/src/components/Status/StatusKeyRow.jsx b/packages/concordia-app/src/components/Status/StatusKeyRow.jsx
new file mode 100644
index 0000000..c3dfda4
--- /dev/null
+++ b/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 (
+
+ {value}
+
+ );
+};
+
+export default StatusKeyRow;
diff --git a/packages/concordia-app/src/components/Status/StatusSegment.jsx b/packages/concordia-app/src/components/Status/StatusSegment.jsx
new file mode 100644
index 0000000..7c95004
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+};
+
+export default StatusKeyRow;
diff --git a/packages/concordia-app/src/components/Status/StatusValueRow.jsx b/packages/concordia-app/src/components/Status/StatusValueRow.jsx
new file mode 100644
index 0000000..be09d0a
--- /dev/null
+++ b/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) ? (
+
+
+
+ {value}
+
+
+
+ ) : (
+
+ -
+
+ );
+};
+
+export default StatusValueRow;
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/styles.css b/packages/concordia-app/src/components/Status/styles.css
similarity index 100%
rename from packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/styles.css
rename to packages/concordia-app/src/components/Status/styles.css
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx
new file mode 100644
index 0000000..fa54c81
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MainLayoutEthereumStatus;
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx
index 44f460e..2348982 100644
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx
+++ b/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 {
- Header, Image, Segment, Table,
-} from 'semantic-ui-react';
-
+import StatusSegment from '../../../components/Status/StatusSegment';
+import StatusKeyRow from '../../../components/Status/StatusKeyRow';
+import StatusValueRow from '../../../components/Status/StatusValueRow';
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) => (
-
-
-
- {peerId}
-
-
-
-
+
)), [peerIds]);
const bootstrapPeers = useMemo(() => bootstrapPeerIds
.map((bootstrapPeerId) => (
-
-
-
- {bootstrapPeerId}
-
-
-
-
+
)), [bootstrapPeerIds]);
return (
-
-
-
-
-
- Peer ID
-
-
-
-
- {ipfsId}
-
-
-
-
- Peers
-
- {peers.length === 0
- ? (
-
- -
-
- ) : null}
- {peers}
-
- Bootstrap Peers
-
- {bootstrapPeers.length === 0
- ? (
-
- -
-
- ) : null}
- {bootstrapPeers}
-
-
-
+
+
+
+
+ {peers.length === 0 ? () : null}
+ {peers}
+
+ {bootstrapPeers.length === 0 ? () : null}
+ {bootstrapPeers}
+
);
};
diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx
index 0014393..ade0e34 100644
--- a/packages/concordia-app/src/layouts/MainLayout/index.jsx
+++ b/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}
+