feat: add Concordia status segment

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

@@ -9,7 +9,7 @@ const StatusKeyRow = (props) => {
   return (
       <Segment padded>
           <Header textAlign="center">
-              <Image src={headerImage} size="small" />
+              <Image className="status-header-image" src={headerImage} />
               {headerTitle}
           </Header>
           <Table className="status-table" compact textAlign="center" columns={1}>

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

@@ -4,7 +4,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 const StatusValueRow = (props) => {
   const { value } = props;
-  return (value) ? (
+  return (value || value === 0) ? (
       <Table.Row className="status-value">
           <Table.Cell>
               <CopyToClipboard text={value}>

packages/concordia-app/src/components/Status/styles.css

@@ -2,6 +2,10 @@
     border: 1px solid var(--secondary-color) !important;
 }
 
+.status-header-image{
+    width: 2.5rem !important;
+}
+
 .status-key {
     background-color: var(--secondary-color);
     color: white;

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

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
+import { drizzle } from '../../../redux/store';
+import StatusSegment from '../../../components/Status/StatusSegment';
+import StatusKeyRow from '../../../components/Status/StatusKeyRow';
+import StatusValueRow from '../../../components/Status/StatusValueRow';
+import appLogo from '../../../assets/images/app_logo_circle.svg';
+
+const MainLayoutConcordiaStatus = () => {
+  const {
+    contracts: {
+      [FORUM_CONTRACT]: {
+        methods: {
+          numUsers: { cacheCall: numUsersChainData },
+          numTopics: { cacheCall: numTopicsChainData },
+          numPosts: { cacheCall: numPostsChainData },
+        },
+      },
+    },
+  } = drizzle;
+
+  const [numUsers, setNumUsers] = useState(null);
+  const [numTopics, setNumTopics] = useState(null);
+  const [numPosts, setNumPosts] = useState(null);
+  const [numUsersCallHash, setNumUsersCallHash] = useState(null);
+  const [numTopicsCallHash, setNumTopicsCallHash] = useState(null);
+  const [numPostsCallHash, setNumPostsCallHash] = useState(null);
+  const numUsersResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numUsers[numUsersCallHash]);
+  const numTopicsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numTopics[numTopicsCallHash]);
+  const numPostsResult = useSelector((state) => state.contracts[FORUM_CONTRACT].numPosts[numPostsCallHash]);
+
+  useEffect(() => {
+    if (numUsersCallHash === null) {
+      setNumUsersCallHash(numUsersChainData());
+    }
+  }, [numUsersCallHash, numUsersChainData]);
+
+  useEffect(() => {
+    if (numTopicsCallHash === null) {
+      setNumTopicsCallHash(numTopicsChainData());
+    }
+  }, [numTopicsCallHash, numTopicsChainData]);
+
+  useEffect(() => {
+    if (numPostsCallHash === null) {
+      setNumPostsCallHash(numPostsChainData());
+    }
+  }, [numPostsCallHash, numPostsChainData]);
+
+  useEffect(() => {
+    if (numUsersResult) {
+      setNumUsers(parseInt(numUsersResult.value, 10));
+    }
+  }, [numUsersResult]);
+
+  useEffect(() => {
+    if (numTopicsResult) {
+      setNumTopics(parseInt(numTopicsResult.value, 10));
+    }
+  }, [numTopicsResult]);
+
+  useEffect(() => {
+    if (numPostsResult) {
+      setNumPosts(parseInt(numPostsResult.value, 10));
+    }
+  }, [numPostsResult]);
+
+  return (
+      <StatusSegment
+        headerTitle="Concordia Status"
+        headerImage={appLogo}
+      >
+          <StatusKeyRow value="Total Users" />
+          <StatusValueRow value={numUsers} />
+          <StatusKeyRow value="Total Topics" />
+          <StatusValueRow value={numTopics} />
+          <StatusKeyRow value="Total Posts" />
+          <StatusValueRow value={numPosts} />
+      </StatusSegment>
+  );
+};
+
+export default MainLayoutConcordiaStatus;

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

@@ -4,6 +4,7 @@ import { Grid } from 'semantic-ui-react';
 import Particles from 'react-particles-js';
 import particlesOptions from '../../assets/particles';
 import MainLayoutMenu from './MainLayoutMenu';
+import MainLayoutConcordiaStatus from './MainLayoutConcordiaStatus';
 import MainLayoutEthereumStatus from './MainLayoutEthereumStatus';
 import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
 import './styles.css';
@@ -21,6 +22,7 @@ const MainLayout = (props) => {
                   {children}
               </Grid.Column>
               <Grid.Column width={4}>
+                  <MainLayoutConcordiaStatus />
                   <MainLayoutEthereumStatus />
                   <MainLayoutIPFSStatus />
               </Grid.Column>