Merge branch 'develop' into fix/fix-service-integrations-and-urls

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/assets/particles.js

@@ -1,7 +1,7 @@
 const particlesOptions = {
   particles: {
     number: {
-      value: 90,
+      value: 120,
       density: {
         enable: true,
         value_area: 1500,
@@ -9,14 +9,14 @@ const particlesOptions = {
     },
     line_linked: {
       enable: true,
-      opacity: 0.04,
+      opacity: 0.06,
     },
     move: {
       direction: 'none',
       speed: 0.12,
     },
     size: {
-      value: 1.5,
+      value: 1.6,
     },
     opacity: {
       anim: {

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/InitializationScreen/CustomLoader/style.css

@@ -1,5 +1,5 @@
 #loading-screen {
-    padding-top: 12em;
+    padding-top: 14em;
     text-align: center;
     font-size: large;
     height: 100%;

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 {
-  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) => (
-        <Table.Row className="status-value">
-            <Table.Cell>
-                <CopyToClipboard text={peerId}>
-                    <span>{peerId}</span>
-                </CopyToClipboard>
-            </Table.Cell>
-        </Table.Row>
-
+        <StatusValueRow value={peerId} key={peerId} />
     )), [peerIds]);
 
   const bootstrapPeers = useMemo(() => bootstrapPeerIds
     .map((bootstrapPeerId) => (
-        <Table.Row className="status-value">
-            <Table.Cell>
-                <CopyToClipboard text={bootstrapPeerId}>
-                    <span>{bootstrapPeerId}</span>
-                </CopyToClipboard>
-            </Table.Cell>
-        </Table.Row>
-
+        <StatusValueRow value={bootstrapPeerId} key={bootstrapPeerId} />
     )), [bootstrapPeerIds]);
 
   return (
-      <Segment padded>
-          <Header textAlign="center">
-              <Image src={ipfsLogo} size="small" />
-              IPFS Status
-          </Header>
-          <Table className="status-table" compact textAlign="center" columns={1}>
-              <Table.Body>
-                  <Table.Row>
-                      <Table.Cell className="status-key">Peer ID</Table.Cell>
-                  </Table.Row>
-                  <Table.Row>
-                      <Table.Cell
-                        className="status-value"
-                      >
-                          <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>
+      <StatusSegment
+        headerTitle="IPFS Status"
+        headerImage={ipfsLogo}
+      >
+          <StatusKeyRow value="Peer ID" />
+          <StatusValueRow value={ipfsId} />
+          <StatusKeyRow value="Peers" />
+          {peers.length === 0 ? (<StatusValueRow />) : null}
+          {peers}
+          <StatusKeyRow value="Bootstrap Peers" />
+          {bootstrapPeers.length === 0 ? (<StatusValueRow />) : null}
+          {bootstrapPeers}
+      </StatusSegment>
   );
 };
 

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css

@@ -7,4 +7,7 @@
     border-radius: 0;
     margin-top: 0;
     margin-bottom: 4rem;
+    z-index: 1;
+    position: relative;
+    border-bottom: solid rgba(255, 255, 255,0.2) 1px;
 }

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
+import Particles from 'react-particles-js';
+import particlesOptions from '../../assets/particles';
 import MainLayoutMenu from './MainLayoutMenu';
+import MainLayoutEthereumStatus from './MainLayoutEthereumStatus';
 import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
 import './styles.css';
 
@@ -10,6 +13,7 @@ const MainLayout = (props) => {
 
   return (
       <div id="main-layout">
+          <Particles className="particles" params={particlesOptions} />
           <MainLayoutMenu />
           <Grid id="main-layout-grid">
               <Grid.Column width={4} />
@@ -17,6 +21,7 @@ const MainLayout = (props) => {
                   {children}
               </Grid.Column>
               <Grid.Column width={4}>
+                  <MainLayoutEthereumStatus />
                   <MainLayoutIPFSStatus />
               </Grid.Column>
           </Grid>

packages/concordia-app/src/layouts/RegisterLayout/styles.css

@@ -3,6 +3,5 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: -1;
-    background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(37, 45, 63) 0%, rgb(11,37,64) 100%) repeat scroll 0 0;
+    background: var(--secondary-color);
 }

yarn.lock

@@ -1542,10 +1542,10 @@
     orbit-db-identity-provider "~0.3.1"
     redux-saga "~1.1.3"
 
-"@ezerous/drizzle@~0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.2.tgz#2e575d0709cc29c77b984d96562b8749d8f477c9"
-  integrity sha512-oTJ77+yGdgg2KPIeIvRczFnPrBg8aXdNisHfM0ztjd7T/Ui8+Nw1HNhMVaw2xTuR53pio3SD8FBU1JrEUKOABQ==
+"@ezerous/drizzle@~0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.3.tgz#ee28dfe2cf7d8773087e190281ba5f6629cd1b48"
+  integrity sha512-PqjqcQfYfy6YyLT7gtVo43jEJXDxxot1chIUFqJ5belcfFWBsa6pzPhJP52DXfyOQsTkx4Q0QF5l6N/p0asrdg==
   dependencies:
     deepmerge "~4.2.2"
     is-plain-object "~5.0.0"
@@ -17183,9 +17183,6 @@ snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
   integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
 
 snapdragon-node@^2.0.1:
   version "2.1.1"