Tiny improvements

app/src/components/LoadingContainer.js

@@ -30,11 +30,9 @@ class LoadingContainer extends Component {
       return(
         <main className="loading-screen">
           <div>
-            <div>
+            <img src={ethereum_logo} alt="ethereum_logo" className="loading-img"/>
-              <img src={ethereum_logo} alt="ethereum_logo" className="loading-img"/>
+            <p><strong>We can't find any Ethereum accounts!</strong></p>
-              <p><strong>We can't find any Ethereum accounts!</strong></p>
+            <p>Please make sure that MetaMask is unlocked.</p>
-              <p>Please make sure that MetaMask is unlocked.</p>
-            </div>
           </div>
         </main>
       )
@@ -44,13 +42,11 @@ class LoadingContainer extends Component {
       return(
         <main className="loading-screen">
           <div>
-            <div>
+            <img src={ethereum_logo} alt="ethereum_logo" className="loading-img"/>
-              <img src={ethereum_logo} alt="ethereum_logo" className="loading-img"/>
+            <p><strong>Initializing contracts...</strong></p>
-              <p><strong>Initializing contracts...</strong></p>
+            <p>If this takes too long please make sure they are deployed to the network
-              <p>If this takes too long please make sure they are deployed to the network
+              and you are connected to the correct one.
-                and you are connected to the correct one.
+            </p>
-              </p>
-            </div>
           </div>
         </main>
       )
@@ -60,24 +56,23 @@ class LoadingContainer extends Component {
       return(
         <main className="loading-screen">
           <div>
-            <div>
+            <img src={ipfs_logo} alt="ipfs_logo" className="loading-img"/>
-              <img src={ipfs_logo} alt="ipfs_logo" className="loading-img"/>
+            <p><strong>Initializing IPFS...</strong></p>
-              <p><strong>Initializing IPFS...</strong></p>
-            </div>
           </div>
         </main>
       )
     }
 
     if (!this.props.orbitReady) {
+      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.";
       return(
         <main className="loading-screen">
           <div>
-            <div>
+            <img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img"/>
-              <img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img"/>
+            <p><strong>Preparing OrbitDB...</strong></p>
-              <p><strong>Preparing OrbitDB...</strong></p>
+            <p>{message}</p>
-              <p>Please sign the transaction in MetaMask to create the databases.</p>
-            </div>
           </div>
         </main>
       )
@@ -89,10 +84,8 @@ class LoadingContainer extends Component {
     return(
       <main className="loading-screen">
         <div>
-          <div>
+          <img src={logo} alt="app_logo" className="loading-img"/>
-            <img src={logo} alt="app_logo" className="loading-img"/>
+          <p><strong>Loading dapp...</strong></p>
-            <p><strong>Loading dapp...</strong></p>
-          </div>
         </div>
       </main>
     )

app/src/components/NewPost.js

@@ -92,8 +92,7 @@ class NewPost extends Component {
       <div className="post" ref={this.newPostOuterRef}>
         <Divider horizontal>
           <span className="grey-text">
-#
+            #{postIndex}
-            {postIndex}
           </span>
         </Divider>
         <Grid>
@@ -111,18 +110,13 @@ class NewPost extends Component {
                 <div className="stretch-space-between">
                   <span><strong>{username}</strong></span>
                   <span className="grey-text">
-                    {previewEnabled
+                    {previewEnabled && <TimeAgo date={previewDate} />}
-                                        && <TimeAgo date={previewDate} />
-                                        }
                   </span>
                 </div>
                 <div className="stretch-space-between">
                   <span>
                     <strong>
-                      {previewEnabled
+                      {previewEnabled && (`Subject: ${postSubjectInput}`)}
-                                        && (`Subject: ${
-                                          postSubjectInput}`)
-                                        }
                     </strong>
                   </span>
                 </div>

app/src/helpers/EpochTimeConverter.js

@@ -5,7 +5,7 @@ const epochTimeConverter = (timestamp) => {
     timestampDate.getMonth() + 1}/${
     timestampDate.getFullYear()}, ${
     timestampDate.getHours()}:${
-    timestampDate.getMinutes()}:${
+    ("0"+timestampDate.getMinutes()).slice(-2)}:${
     timestampDate.getSeconds()}`);
 };
 

app/src/redux/sagas/drizzleUtilsSaga.js

@@ -20,7 +20,6 @@ function* init() {
       const host = "http://127.0.0.1:8545"; //Ganache development blockchain
       const fallbackProvider = new Web3.providers.HttpProvider(host);
       web3 = yield call(getWeb3, { fallbackProvider });
-
       forumContract = yield call(getContractInstance, { web3, artifact: Forum });
       initFlag = true;
       yield put({
@@ -40,7 +39,6 @@ function* init() {
 
 // If the method below proves to be problematic/ineffective (i.e. getting current account
 // from state), consider getting it from @drizzle-utils/get-accounts instead
-// with (yield call(getAccounts, {web3}))[0];
 function* getCurrentAccount() {
   return (yield select(accounts))[0];
 }

app/src/redux/sagas/orbitSaga.js

@@ -100,7 +100,8 @@ function* orbitSaga() {
   ]);
   yield takeLatest(ACCOUNT_CHANGED, getOrbitDBInfo);
   yield takeEvery(ADD_PEER_DATABASE, addPeerDatabase);
-  yield takeEvery(ACCOUNTS_FETCHED, updatePeersState);
+  if(process.env.NODE_ENV==='development')
+    yield takeEvery(ACCOUNTS_FETCHED, updatePeersState);
 }
 
 export default orbitSaga;