Merge branch 'develop' into feature/add-ci-support

packages/concordia-app/package.json

@@ -24,11 +24,11 @@
     ]
   },
   "dependencies": {
-    "@ezerous/breeze": "~0.4.0",
+    "@ezerous/breeze": "~0.7.0",
-    "@ezerous/drizzle": "~0.4.1",
+    "@ezerous/drizzle": "~0.4.2",
     "@ezerous/eth-identity-provider": "~0.1.2",
     "@reduxjs/toolkit": "~1.4.0",
-    "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "@welldone-software/why-did-you-render": "~6.0.5",
     "concordia-contracts": "~0.1.0",
     "concordia-shared": "~0.1.0",
     "i18next": "^19.8.3",
@@ -38,6 +38,7 @@
     "prop-types": "~15.7.2",
     "react": "~16.13.1",
     "react-avatar": "~3.9.7",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "~16.13.1",
     "react-i18next": "^11.7.3",
     "react-markdown": "^5.0.3",

packages/concordia-app/public/locales/en/translation.json

@@ -7,8 +7,9 @@
   "clear.databases.modal.clearing.progress.message": "This might take a minute...",
   "clear.databases.modal.clearing.progress.title": "Clearing all Concordia databases",
   "clear.databases.modal.description.body.user": "Although this action is generally recoverable some of your topics and posts may be permanently lost.",
-  "clear.databases.modal.description.pre": "You are about to clear the Concordia databases stored locally in your browser.",
+  "clear.databases.modal.description.pre.guest": "You are about to clear the Concordia databases stored locally in your browser.",
-  "clear.databases.modal.form.username.label.guest": "Please type concordia to confirm.",
+  "clear.databases.modal.description.pre.user": "Be careful, {{username}}! You are about to clear the Concordia databases stored locally in your browser.",
+  "clear.databases.modal.form.username.label.guest": "Please type Concordia to confirm.",
   "clear.databases.modal.form.username.label.user": "Please type your username to confirm.",
   "clear.databases.modal.title": "Clear all Concordia databases. Are you sure?",
   "custom.loading.tab.pane.default.generic.message": "Magic in the background",

packages/concordia-app/src/assets/css/index.css

@@ -5,12 +5,10 @@
     --secondary-color-highlighted: #061A30;
 }
 
-body.app {
+body {
-    height: auto;
-    padding-bottom: 4rem;
     overflow: auto;
     margin: 0;
-    background: #E6E6E6;
+    background: white;
 }
 
 div {

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 === 'Concordia') {
       setUserConfirmed(true);
     } else {
       setUserConfirmed(false);
@@ -63,7 +63,7 @@ const ClearDatabasesModal = (props) => {
       return (
           <>
               <p>
-                  {t('clear.databases.modal.description.pre')}
+                  {t('clear.databases.modal.description.pre.user', { username: user.username })}
               </p>
               <p>
                   {t('clear.databases.modal.description.body.user')}
@@ -88,7 +88,7 @@ const ClearDatabasesModal = (props) => {
     return (
         <>
             <p>
-                {t('clear.databases.modal.description.pre')}
+                {t('clear.databases.modal.description.pre.guest')}
             </p>
             <Form>
                 <Form.Field>
@@ -105,7 +105,7 @@ const ClearDatabasesModal = (props) => {
             </Form>
         </>
     );
-  }, [confirmationInput, isClearing, t, user.hasSignedUp]);
+  }, [confirmationInput, isClearing, t, user.hasSignedUp, user.username]);
 
   return useMemo(() => (
       <Modal

packages/concordia-app/src/components/InitializationScreen/CustomLoader/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Container, Progress } from 'semantic-ui-react';
@@ -10,11 +10,9 @@ import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
 import orbitdbLogo from '../../../assets/images/orbitdb_logo.svg';
 import appLogo from '../../../assets/images/app_logo_circle.svg';
 
-const LoadingComponent = (props) => {
+import './style.css';
-  useEffect(() => function cleanup() {
-    document.body.classList.add('app');
-  }, []);
 
+const LoadingComponent = (props) => {
   const {
     imageType, messageList, progressType, title, message, progress,
   } = props;
@@ -48,14 +46,20 @@ const LoadingComponent = (props) => {
   const list = messageList ? <ul>{listItems}</ul> : '';
 
   return (
-      <main className="loading-screen">
+      <main id="loading-screen">
-          <Container>
+          <Container id="loading-screen-container">
-              <img src={imageSrc} alt={imageAlt} className="loading-img" />
+              <img src={imageSrc} alt={imageAlt} id="loading-img" />
               <p><strong>{title}</strong></p>
               <p>{message}</p>
               {list}
           </Container>
-          <Progress percent={progress} size="small" indicating={indicating} error={error} />
+          <Progress
+            id="loading-screen-progress"
+            percent={progress}
+            size="small"
+            indicating={indicating}
+            error={error}
+          />
       </main>
   );
 };

packages/concordia-app/src/assets/css/loading-component.css → packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css

@@ -1,27 +1,24 @@
-body {
+#loading-screen {
-    overflow: hidden;
+    padding-top: 12em;
-}
-
-.loading-screen {
-    margin-top: 12em;
     text-align: center;
     font-size: large;
+    height: 100%;
 }
 
-.loading-screen ul {
+#loading-screen ul {
     list-style-position: inside;
 }
 
-.loading-img {
+#loading-img {
     margin-bottom: 3em;
     height: 12em;
 }
 
-.ui.container {
+#loading-screen-container {
     height: 26em;
 }
 
-.ui.progress {
+#loading-screen-progress {
     width: 40vw;
     margin-left: auto !important;
     margin-right: auto !important;

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

@@ -4,9 +4,6 @@ import { useSelector } from 'react-redux';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import CustomLoader from './CustomLoader';
 
-// CSS
-import '../../assets/css/loading-component.css';
-
 const InitializationLoader = ({ children }) => {
   const initializing = useSelector((state) => state.drizzleStatus.initializing);
   const failed = useSelector((state) => state.drizzleStatus.failed);
@@ -94,7 +91,7 @@ const InitializationLoader = ({ children }) => {
     );
   }
 
-  if (ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
+  if (ipfsStatus === breezeConstants.STATUS_UNINITIALIZED || ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
     return (
         <CustomLoader
           title="Initializing IPFS..."
@@ -118,7 +115,7 @@ const InitializationLoader = ({ children }) => {
     );
   }
 
-  if (orbitStatus === breezeConstants.STATUS_INITIALIZING) {
+  if (orbitStatus === breezeConstants.STATUS_UNINITIALIZED || orbitStatus === breezeConstants.STATUS_INITIALIZING) {
     const message = process.env.NODE_ENV === 'development'
       ? 'If needed, please sign the transaction in MetaMask to create the databases.'
       : 'Please sign the transaction in MetaMask to create the databases.';

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

@@ -87,7 +87,7 @@ const PostCreate = (props) => {
         postsDb
           .put(contractPostId, {
             [POST_CONTENT]: postContent,
-          }, { pin: true })
+          })
           .then(() => {
             setPostContent('');
             setPosting(false);

packages/concordia-app/src/components/TopicList/TopicListRow/styles.css

@@ -26,7 +26,7 @@
 
 .topic-row-avatar {
     margin: auto;
-    padding-left: 1rem !important;
+    padding-left: 1.4rem !important;
     padding-right: 0 !important;
     font-size: 2rem;
     color: red;
@@ -37,7 +37,7 @@
 }
 
 .topic-row-content {
-    padding-left: 2rem !important;
+    padding-left: 3rem !important;
 }
 
 .topic-row-subject {

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

@@ -1,6 +1,4 @@
 #topic-list{
-    height: 100%;
+    height: auto;
-    margin-bottom: 4em;
     clear: both;
 }
-

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

@@ -0,0 +1,85 @@
+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 ipfsLogo from '../../../assets/images/ipfs_logo.svg';
+import './styles.css';
+
+const MainLayoutIPFSStatus = () => {
+  const ipfsId = useSelector((state) => state.ipfs.id);
+  const peerIds = useSelector((state) => state.ipfs.peers);
+  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>
+
+    )), [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>
+
+    )), [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>
+  );
+};
+
+export default MainLayoutIPFSStatus;

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

@@ -0,0 +1,18 @@
+.status-table {
+    border: 1px solid var(--secondary-color) !important;
+}
+
+.status-key {
+    background-color: var(--secondary-color);
+    color: white;
+    font-weight: 700;
+}
+
+.status-value {
+    font-size: 0.95rem;
+    cursor: pointer;
+}
+
+.status-value:hover {
+    color: grey;
+}

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

@@ -31,7 +31,7 @@ const MainLayoutMenu = () => {
   return (
       <AppContext.Consumer>
           {() => (
-              <Menu inverted>
+              <Menu inverted id="main-layout-menu">
                   <Menu.Item
                     id="home-button"
                     link

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

@@ -2,8 +2,9 @@
     padding: 1.2em;
 }
 
-.ui.inverted.menu {
+#main-layout-menu {
     background: var(--secondary-color) !important;
     border-radius: 0;
+    margin-top: 0;
     margin-bottom: 4rem;
 }

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
 import MainLayoutMenu from './MainLayoutMenu';
+import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
 import './styles.css';
 
 const MainLayout = (props) => {
@@ -9,7 +11,16 @@ const MainLayout = (props) => {
   return (
       <div id="main-layout">
           <MainLayoutMenu />
+          <Grid id="main-layout-grid">
+              <Grid.Column width={4} />
+              <Grid.Column width={8}>
                   {children}
+              </Grid.Column>
+              <Grid.Column width={4}>
+                  <MainLayoutIPFSStatus />
+              </Grid.Column>
+          </Grid>
+
       </div>
   );
 };

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

@@ -1,3 +1,11 @@
 #main-layout {
-    height: 100%;
+    height: auto;
+    min-height: 100%;
+    background-color: #E6E6E6;
+    padding-bottom: 4rem;
+}
+
+#main-layout-grid{
+    margin-right: 0;
+    margin-left: 0;
 }

packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js

@@ -104,9 +104,7 @@ function* updateReduxState({ database }) {
 function* peerDbReplicationSaga() {
   yield takeEvery(FETCH_USER_DATABASE, fetchUserDb);
 
-  yield takeEvery(ORBIT_DB_REPLICATED, updateReduxState);
+  yield takeEvery([ORBIT_DB_READY, ORBIT_DB_REPLICATED, ORBIT_DB_WRITE], updateReduxState);
-  yield takeEvery(ORBIT_DB_READY, updateReduxState);
-  yield takeEvery(ORBIT_DB_WRITE, updateReduxState);
 }
 
 export default peerDbReplicationSaga;

packages/concordia-app/src/views/About/index.jsx

@@ -2,7 +2,7 @@ import React, {
   memo, useEffect, useState,
 } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Container, Image } from 'semantic-ui-react';
+import { Container, Image, Segment } from 'semantic-ui-react';
 import AboutMd from '../../assets/About.md';
 import appLogo from '../../assets/images/app_logo_circle.svg';
 
@@ -26,9 +26,10 @@ const About = () => {
   }, []);
 
   return (
-      <Container id="about-container">
+      <Container>
+          <Segment id="about-segment">
               <div style={{ textAlign: 'center' }}>
-              <Image id="app-logo" src={appLogo} size="small" centered />
+                  <Image id="about-app-logo" src={appLogo} size="small" centered />
                   {`v${process.env.REACT_APP_VERSION}`}
               </div>
               <ReactMarkdown
@@ -38,6 +39,7 @@ const About = () => {
                   linkReference: targetBlank(),
                 }}
               />
+          </Segment>
       </Container>
   );
 };

packages/concordia-app/src/views/About/styles.css

@@ -1,3 +1,7 @@
-#app-logo{
+#about-segment{
+    padding: 3rem;
+}
+
+#about-app-logo{
     margin-bottom: 1rem;
 }

packages/concordia-app/src/views/Home/Board/styles.css

@@ -5,5 +5,7 @@
 
 #new-topic-button{
     float:right;
+    margin-top: 1px;
     margin-bottom: 2em;
+    margin-right: 0;
 }

packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx

@@ -112,7 +112,7 @@ const EditInformationModal = (props) => {
       .map((keyValueToStore) => {
         if (keyValueToStore.value !== '') {
           return userDb
-            .put(keyValueToStore.key, keyValueToStore.value, { pin: true });
+            .put(keyValueToStore.key, keyValueToStore.value);
         }
 
         return userDb.del(keyValueToStore.key);

packages/concordia-app/src/views/Register/PersonalInformationStep/index.jsx

@@ -90,7 +90,7 @@ const PersonalInformationStep = (props) => {
       keyValuesToStore
         .reduce((acc, keyValueToStore) => acc
           .then(() => userDb
-            .put(keyValueToStore.key, keyValueToStore.value, { pin: true })),
+            .put(keyValueToStore.key, keyValueToStore.value)),
         Promise.resolve())
         .then(() => pushNextStep())
         .catch((reason) => {

packages/concordia-app/src/views/Topic/TopicCreate/index.jsx

@@ -71,11 +71,11 @@ const TopicCreate = (props) => {
         const postsDb = Object.values(stores).find((store) => store.dbname === POSTS_DATABASE);
 
         topicsDb
-          .put(topicId, { [TOPIC_SUBJECT]: subjectInput }, { pin: true })
+          .put(topicId, { [TOPIC_SUBJECT]: subjectInput })
           .then(() => postsDb
             .put(postId, {
               [POST_CONTENT]: contentInput,
-            }, { pin: true }))
+            }))
           .then(() => {
             history.push(`/topics/${topicId}`);
           })

packages/concordia-pinner/.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
     'no-console': 'off',
     'no-shadow': 'warn',
     'no-multi-str': 'warn',
+    'no-underscore-dangle': 0,
     'jsx-a11y/label-has-associated-control': [2, {
       labelAttributes: ['label'],
       controlComponents: ['Input'],

packages/concordia-pinner/package.json

@@ -16,18 +16,18 @@
     "concordia-shared": "~0.1.0",
     "esm": "~3.2.25",
     "express": "^4.17.1",
-    "ipfs": "~0.52.1",
+    "ipfs": "~0.54.2",
     "is-reachable": "^5.0.0",
     "level": "~6.0.1",
     "libp2p": "~0.30.0",
-    "libp2p-bootstrap": "~0.12.1",
+    "libp2p-bootstrap": "~0.12.2",
     "libp2p-gossipsub": "~0.8.0",
     "libp2p-kad-dht": "~0.20.1",
     "libp2p-mdns": "~0.15.0",
     "libp2p-mplex": "~0.10.0",
     "libp2p-noise": "~2.0.1",
     "libp2p-tcp": "~0.15.1",
-    "libp2p-webrtc-star": "~0.20.2",
+    "libp2p-webrtc-star": "~0.21.1",
     "lodash": "^4.17.20",
     "orbit-db": "~0.26.0",
     "orbit-db-identity-provider": "~0.3.1",

packages/concordia-pinner/src/app.js

@@ -25,7 +25,6 @@ const getStats = async (orbit) => {
   const { address: resolvedRendezvousUrl } = await getResolvedRendezvousUrl();
 
   try {
-    // eslint-disable-next-line no-underscore-dangle
     const ipfs = orbit._ipfs;
     const { id } = await ipfs.id();
     const peers = await ipfs.swarm.peers();

packages/concordia-pinner/src/index.js

@@ -85,6 +85,14 @@ const main = async () => {
             topics: [eventJsonInterface.signature],
           }, handleWeb3LogEvent(web3, eventJsonInterface, orbit));
 
+          orbit._ipfs.libp2p.connectionManager.on(
+            'peer:connect',
+            (peerInfo) => console.log('Peer connected: ', peerInfo.remotePeer.toB58String()),
+          );
+          orbit._ipfs.libp2p.connectionManager.on(
+            'peer:disconnect',
+            (peerInfo) => console.log('Peer disconnected: ', peerInfo.remotePeer.toB58String()),
+          );
           startAPI(orbit);
         })));
 };

packages/concordia-rendezvous/package.json

@@ -7,6 +7,6 @@
     "start": "star-signal --port=9090 --host=127.0.0.1"
   },
   "dependencies": {
-    "libp2p-webrtc-star": "~0.20.5"
+    "libp2p-webrtc-star": "~0.21.1"
   }
 }