Orbit & other minor improvements

app/package.json

@@ -30,8 +30,12 @@
     "uuid": "3.3.2",
     "web3": "1.0.0-beta.50"
   },
+  "devDependencies": {
+    "libp2p-websocket-star-rendezvous": "0.3.0"
+  },
   "scripts": {
     "start": "react-scripts start",
+    "rendezvous": "rendezvous --port=9090 --host=127.0.0.1",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

app/src/assets/images/ethereum_logo.svg

@@ -0,0 +1 @@
+<svg height="64" viewBox="0 0 49.91744 49.931196" width="64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m720.6 306.4h508.7v266h-508.7z" height="100%" width="100%"/></clipPath><clipPath id="b"><path d="m720.6 0h254.4v572.4h-254.4z" height="100%" width="100%"/></clipPath><clipPath id="c"><path d="m975 0h254.4v572.4h-254.4z" height="100%" width="100%"/></clipPath><clipPath id="d"><path d="m720.6 470.3h254.4v358.4h-254.4z" height="100%" width="100%"/></clipPath><clipPath id="e"><path d="m975 470.3h254.5v358.4h-254.5z" height="100%" width="100%"/></clipPath><g fill="#010101"><path clip-path="url(#a)" d="m975 306.4-254.4 115.7 254.4 150.3 254.3-150.3z" opacity=".6" transform="matrix(.06025243658 0 0 .06025243658 -33.79041826347 .00000056684)"/><path clip-path="url(#b)" d="m720.6 422.1 254.4 150.3v-572.4z" opacity=".45" transform="matrix(.06025243658 0 0 .06025243658 -33.79041826347 .00000056684)"/><path clip-path="url(#c)" d="m975 0v572.4l254.3-150.3z" opacity=".8" transform="matrix(.06025243658 0 0 .06025243658 -33.79041826347 .00000056684)"/><path clip-path="url(#d)" d="m720.6 470.3 254.4 358.4v-208.1z" opacity=".45" transform="matrix(.06025243658 0 0 .06025243658 -33.79041826347 .00000056684)"/><path clip-path="url(#e)" d="m975 620.6v208.1l254.5-358.4z" opacity=".8" transform="matrix(.06025243658 0 0 .06025243658 -33.79041826347 .00000056684)"/></g></svg>

app/src/assets/images/ipfs_logo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" style="enable-background:new" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" height="512" width="512" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.99999 511.99998" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<defs>
+<linearGradient id="b" y2="771.51" gradientUnits="userSpaceOnUse" x2="527.72" y1="771.51" x1="84.315">
+<stop stop-color="#4a9ea1" offset="0"/>
+</linearGradient>
+<linearGradient id="a" y2="771.48" gradientUnits="userSpaceOnUse" x2="512.36" y1="771.48" x1="99.675">
+<stop stop-color="#63d3d7" offset="0"/>
+</linearGradient>
+</defs>
+<g transform="translate(-50.017 -515.51)">
+<path d="m84.315 899.51 221.7 128 221.7-128v-256l-221.7-127.99-221.7 128z" fill="url(#b)"/>
+<path fill="url(#a)" d="m283.13 546.35-160.74 92.806c0.32126 2.8543 0.32125 5.7352 0 8.5894l160.75 92.806c13.554-10.001 32.043-10.001 45.597 0l160.75-92.807c-0.32126-2.8543-0.32293-5.7338-0.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03-160.92 93.84c1.884 16.739-7.3611 32.751-22.799 39.489l0.18062 184.58c2.6325 1.1489 5.1267 2.5886 7.438 4.294l160.75-92.805c-1.884-16.739 7.3611-32.752 22.799-39.49v-185.61c-2.6325-1.1489-5.1281-2.5886-7.4394-4.294zm-397.81 1.0315c-2.3112 1.7054-4.8054 3.1465-7.438 4.2954v185.61c15.438 6.7378 24.683 22.75 22.799 39.489l160.74 92.806c2.3112-1.7054 4.8069-3.1465 7.4394-4.2954v-185.61c-15.438-6.7378-24.683-22.75-22.799-39.489l-160.74-92.81z"/>
+</g>
+<g transform="translate(0 -196.66)">
+<path d="m256 708.66 221.7-128v-256l-221.7 128v256z" fill-opacity=".25098"/>
+<path d="m256 708.66v-256l-221.7-128v256l221.7 128z" fill-opacity=".039216"/>
+<path d="m34.298 324.66 221.7 128 221.7-128-221.7-128-221.7 128z" fill-opacity=".13018"/>
+</g>
+</svg>

app/src/components/ProfileInformation.js

@@ -15,6 +15,12 @@ const callsInfo = [
   }, {
     contract: 'Forum',
     method: 'getOrbitDBId'
+  }, {
+    contract: 'Forum',
+    method: 'getOrbitTopicsDB'
+  }, {
+    contract: 'Forum',
+    method: 'getOrbitPostsDB'
   }];
 
 class ProfileInformation extends Component {
@@ -27,7 +33,9 @@ class ProfileInformation extends Component {
     this.state = {
       pageStatus: 'initialized',
       dateOfRegister: '',
-      orbitDBId: ''
+      orbitDBId: '',
+      topicsDBId: '',
+      postsDBId: ''
     };
   }
 
@@ -40,7 +48,7 @@ class ProfileInformation extends Component {
   }
 
   getBlockchainData() {
-    const { pageStatus, dateOfRegister, orbitDBId } = this.state;
+    const { pageStatus, dateOfRegister, orbitDBId, topicsDBId, postsDBId } = this.state;
     const { drizzleStatus, address, contracts } = this.props;
 
     if (pageStatus === 'initialized'
@@ -87,11 +95,29 @@ class ProfileInformation extends Component {
           });
         }
       }
+
+      if (topicsDBId === '') {
+        const transaction = contracts[callsInfo[2].contract][callsInfo[2].method][this.dataKey[2]];
+        if (transaction) {
+          this.setState({
+            topicsDBId: transaction.value
+          });
+        }
+      }
+
+      if (postsDBId === '') {
+        const transaction = contracts[callsInfo[3].contract][callsInfo[3].method][this.dataKey[3]];
+        if (transaction) {
+          this.setState({
+            postsDBId: transaction.value
+          });
+        }
+      }
     }
   }
 
   render() {
-    const { orbitDBId, dateOfRegister } = this.state;
+    const { orbitDBId, topicsDBId, postsDBId, dateOfRegister } = this.state;
     const { avatarUrl, username, address, numberOfTopics, numberOfPosts, self } = this.props;
 
     return (
@@ -118,6 +144,14 @@ class ProfileInformation extends Component {
               <td><strong>OrbitDB:</strong></td>
               <td>{orbitDBId}</td>
             </tr>
+            <tr>
+              <td><strong>TopicsDB:</strong></td>
+              <td>{topicsDBId}</td>
+            </tr>
+            <tr>
+              <td><strong>PostsDB:</strong></td>
+              <td>{postsDBId}</td>
+            </tr>
             <tr>
               <td><strong>Number of topics created:</strong></td>
               <td>{numberOfTopics}</td>

app/src/components/Topic.js

@@ -113,11 +113,12 @@ function getTopicSubject(state, props){
         if(orbitData && orbitData.subject)
           return orbitData.subject;
       }
-      const db = orbit.replicatedDatabases.find(db => db.fullAddress === `/orbitdb/${topicData.value[0]}/topics`);
-      if(db && db.ready && db.store){
-        const localOrbitData = db.store.get(topicID);
-        if (localOrbitData){
-          return localOrbitData.subject;
+      else{
+        const db = orbit.peerDatabases.find(db => db.fullAddress === `/orbitdb/${topicData.value[0]}/topics`);
+        if(db && db.store){
+          const localOrbitData = db.store.get(topicID);
+          if (localOrbitData)
+            return localOrbitData.subject;
         }
       }
     }

app/src/containers/LoadingContainer.js

@@ -1,6 +1,7 @@
 import React, { Children, Component } from 'react';
 import { connect } from 'react-redux';
-import ipfs_logo from '../assets/images/ipfs_logo.png';
+import ethereum_logo from '../assets/images/ethereum_logo.svg';
+import ipfs_logo from '../assets/images/ipfs_logo.svg';
 
 //TODO: Add OrbitDB Loading thingy
 class LoadingContainer extends Component {
@@ -15,7 +16,7 @@ class LoadingContainer extends Component {
         <main className="container loading-screen">
           <div className="pure-g">
             <div className="pure-u-1-1">
-              <h1><span role="img" aria-label="Fox Face">🦊</span></h1>
+              <img src={ethereum_logo} alt="ethereum_logo" height="50"/>
               <p><strong>This browser has no connection to the Ethereum network.</strong></p>
               <p>
                 Please make sure that:
@@ -36,7 +37,7 @@ class LoadingContainer extends Component {
         <main className="loading-screen">
           <div>
             <div>
-              <h1><span role="img" aria-label="Fox Face">🦊</span></h1>
+              <img src={ethereum_logo} alt="ethereum_logo" height="50"/>
               <p><strong>We can't find any Ethereum accounts!</strong>.</p>
             </div>
           </div>
@@ -49,7 +50,7 @@ class LoadingContainer extends Component {
         <main className="loading-screen">
           <div>
             <div>
-              <h1><span role="img" aria-label="Gear">⚙</span></h1>
+              <img src={ethereum_logo} alt="ethereum_logo" height="50"/>
               <p><strong>Initializing contracts...</strong></p>
               <p>If this takes too long please make sure they are deployed to the network
                 and you are connected to the correct one.

app/src/helpers/EpochTimeConverter.js

@@ -1,8 +1,8 @@
 const epochTimeConverter = (timestamp) => {
   const timestampDate = new Date(0);
   timestampDate.setUTCSeconds(timestamp);
-  return (`${timestampDate.getMonth() + 1} ${
-    timestampDate.getDate()}, ${
+  return (`${timestampDate.getDate()}/${
+    timestampDate.getMonth() + 1}/${
     timestampDate.getFullYear()}, ${
     timestampDate.getHours()}:${
     timestampDate.getMinutes()}:${

app/src/redux/actions/orbitActions.js

@@ -3,8 +3,7 @@ const DATABASES_CREATED = 'DATABASES_CREATED';
 const DATABASES_LOADED = 'DATABASES_LOADED';
 const DATABASES_NOT_READY = 'DATABASES_NOT_READY';
 const ADD_PEER_DATABASE = 'ADD_PEER_DATABASE';
-const OPENING_PEER_DATABASE = 'OPENING_PEER_DATABASE';
-const PEER_DATABASE_LOADED = 'PEER_DATABASE_LOADED';
+const PEER_DATABASE_ADDED = 'PEER_DATABASE_ADDED';
 const UPDATE_PEERS = 'UPDATE_PEERS';
 
 function updateDatabases(type, orbitdb, topicsDB, postsDB) {
@@ -30,8 +29,7 @@ export { DATABASES_CREATED,
   IPFS_INITIALIZED,
   UPDATE_PEERS,
   ADD_PEER_DATABASE,
-  OPENING_PEER_DATABASE,
-  PEER_DATABASE_LOADED,
+  PEER_DATABASE_ADDED,
   addPeerDatabase,
   updateDatabases
 };

app/src/redux/reducers/orbitReducer.js

@@ -1,8 +1,8 @@
 import {
   DATABASES_CREATED,
   DATABASES_LOADED,
-  DATABASES_NOT_READY, OPENING_PEER_DATABASE,
-  IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_LOADED
+  DATABASES_NOT_READY,
+  IPFS_INITIALIZED, UPDATE_PEERS, PEER_DATABASE_ADDED
 } from '../actions/orbitActions';
 
 const initialState = {
@@ -13,7 +13,7 @@ const initialState = {
   topicsDB: null,
   postsDB: null,
   pubsubPeers: {topicsDBPeers:[], postsDBPeers:[]},
-  replicatedDatabases: [],
+  peerDatabases: [],
   id: null
 };
 
@@ -52,22 +52,14 @@ const orbitReducer = (state = initialState, action) => {
         postsDB: null,
         id: null
       };
-    case OPENING_PEER_DATABASE:
-      if(state.replicatedDatabases.find(db => db.fullAddress === action.fullAddress))
+    case PEER_DATABASE_ADDED:
+      if(state.peerDatabases.find(db => db.fullAddress === action.fullAddress))
         return state;
+      console.debug(`Added peer database ${action.fullAddress}`);
       return {
         ...state,
-        replicatedDatabases:[...state.replicatedDatabases,
-          {fullAddress: action.fullAddress, ready: false, store: null}]
-      };
-    case PEER_DATABASE_LOADED:
-      return {
-        ...state,
-        replicatedDatabases: [...state.replicatedDatabases.map((db) => {
-          if (db.fullAddress !== action.fullAddress)
-            return db; // This isn't the item we care about - keep it as-is
-          return { ...db, ready: true, store: action.store}  // Otherwise return an updated value
-        })]
+        peerDatabases:[...state.peerDatabases,
+          {fullAddress: action.fullAddress, store: action.store}]
       };
     case UPDATE_PEERS:
       return {

app/src/redux/sagas/orbitSaga.js

@@ -4,7 +4,7 @@ import { forumContract, getCurrentAccount } from './drizzleUtilsSaga';
 import { loadDatabases, orbitSagaOpen } from '../../utils/orbitUtils';
 import { DRIZZLE_UTILS_SAGA_INITIALIZED } from '../actions/drizzleUtilsActions';
 import {
-  ADD_PEER_DATABASE, PEER_DATABASE_LOADED,
+  ADD_PEER_DATABASE, PEER_DATABASE_ADDED,
   DATABASES_NOT_READY,
   IPFS_INITIALIZED, OPENING_PEER_DATABASE,
   UPDATE_PEERS
@@ -65,12 +65,9 @@ function* addPeerDatabase(action) {
   if(peerOrbitAddresses.size>size){
     const { orbitdb } = yield select(state => state.orbit);
     if(orbitdb){
-      yield put.resolve({
-        type: OPENING_PEER_DATABASE, fullAddress
-      });
       const store = yield call(orbitSagaOpen, orbitdb, fullAddress);
       yield put({
-        type: PEER_DATABASE_LOADED, fullAddress, store: store
+        type: PEER_DATABASE_ADDED, fullAddress, store: store
       });
     }
   }

app/src/utils/orbitUtils.js

@@ -16,14 +16,12 @@ function initIPFS() {
     ipfs.id(function (error, identity) {
       if (error)
         console.error(`IPFS id() error: ${error}`);
-      console.debug(`IPFS initialized with id: ${identity.id}`);
+      console.debug(`IPFS initialized with id ${identity.id}`);
     })
   });
 }
 
 async function createDatabases() {
-  console.debug("Deleting local storage..."); // Else we are in danger of reusing an existing orbit
-  localStorage.clear(); // Perhaps not needed at all when orbit ids are used in Orbit 0.20.x+
   console.debug('Creating databases...');
   const ipfs = getIPFS();
   const orbitdb = new OrbitDB(ipfs);