diff --git a/packages/concordia-app/src/assets/css/loading-container.css b/packages/concordia-app/src/assets/css/loading-component.css
similarity index 57%
rename from packages/concordia-app/src/assets/css/loading-container.css
rename to packages/concordia-app/src/assets/css/loading-component.css
index 95dda93..f23835c 100644
--- a/packages/concordia-app/src/assets/css/loading-container.css
+++ b/packages/concordia-app/src/assets/css/loading-component.css
@@ -1,7 +1,11 @@
-html {
+body {
overflow: hidden;
}
+ul {
+ list-style-position: inside;
+}
+
.loading-screen {
text-align: center;
font-size: large;
@@ -12,10 +16,12 @@ html {
height: 12em;
}
-ul {
- list-style-position: inside;
+.ui.container {
+ height: 26em;
}
-.bar {
- margin-top: 5em;
+.ui.progress {
+ width: 40vw;
+ margin-left: auto !important;
+ margin-right: auto !important;
}
diff --git a/packages/concordia-app/src/assets/images/logo.png b/packages/concordia-app/src/assets/images/app_logo.png
similarity index 100%
rename from packages/concordia-app/src/assets/images/logo.png
rename to packages/concordia-app/src/assets/images/app_logo.png
diff --git a/packages/concordia-app/src/components/LoadingComponent.jsx b/packages/concordia-app/src/components/LoadingComponent.jsx
new file mode 100644
index 0000000..6f4ab70
--- /dev/null
+++ b/packages/concordia-app/src/components/LoadingComponent.jsx
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { Container, Progress } from 'semantic-ui-react';
+
+// CSS
+import '../assets/css/loading-component.css';
+
+// Images
+import ethereum_logo from '../assets/images/ethereum_logo.svg';
+import ipfs_logo from '../assets/images/ipfs_logo.svg';
+import orbitdb_logo from '../assets/images/orbitdb_logo.png';
+import app_logo from '../assets/images/app_logo.png';
+
+class LoadingComponent extends Component {
+ render(){
+ const { image_type, message_list, progress_type } = this.props ;
+ let imageSrc, imageAlt, listItems, indicating, error;
+
+ if (image_type === "ethereum"){
+ imageSrc = ethereum_logo;
+ imageAlt = "ethereum_logo";
+ }
+ else if (image_type === "ipfs"){
+ imageSrc = ipfs_logo;
+ imageAlt = "ipfs_logo";
+ }
+ else if (image_type === "orbit"){
+ imageSrc = orbitdb_logo;
+ imageAlt = "orbitdb_logo";
+ }
+ else if (image_type === "app"){
+ imageSrc = app_logo;
+ imageAlt = "app_logo";
+ }
+
+ if(progress_type === "indicating")
+ indicating = true;
+ else if(progress_type === "error")
+ error = true;
+
+ if(message_list){
+ listItems = message_list.map((listItem) =>
+
{listItem}
+ );
+ }
+
+ const list = message_list ? : '';
+
+ return(
+
+
+
+ {this.props.title}
+ {this.props.message}
+ {list}
+
+
+ );
+ }
+}
+
+LoadingComponent.propTypes = {
+ title: PropTypes.string.isRequired,
+ message: PropTypes.string.isRequired,
+ message_list: PropTypes.arrayOf(PropTypes.string),
+ image_type: PropTypes.string.isRequired,
+ progress: PropTypes.number.isRequired,
+ progress_type: PropTypes.string.isRequired,
+};
+
+export default LoadingComponent;
diff --git a/packages/concordia-app/src/components/LoadingContainer.jsx b/packages/concordia-app/src/components/LoadingContainer.jsx
index b7c5b89..fe3f4f0 100644
--- a/packages/concordia-app/src/components/LoadingContainer.jsx
+++ b/packages/concordia-app/src/components/LoadingContainer.jsx
@@ -1,164 +1,143 @@
import React, { Children, Component } from 'react';
import { connect } from 'react-redux';
-import { Progress } from 'semantic-ui-react'
+import { Container, Progress } from 'semantic-ui-react'
+
+import { breezeConstants } from '@ezerous/breeze'
+
+import LoadingComponent from './LoadingComponent';
// CSS
-import '../assets/css/loading-container.css';
+import '../assets/css/loading-component.css';
// Images
import ethereum_logo from '../assets/images/ethereum_logo.svg';
import ipfs_logo from '../assets/images/ipfs_logo.svg';
import orbitdb_logo from '../assets/images/orbitdb_logo.png';
-import logo from '../assets/images/logo.png';
+import logo from '../assets/images/app_logo.png';
class LoadingContainer extends Component {
render() {
- if (this.props.web3.status === 'initializing') {
- return (
-
-
-
-
Connecting to the Ethereum network...
-
Please make sure to unlock MetaMask.
-
-
-
- );
+ if ((this.props.web3.status === 'initializing' || !this.props.web3.networkId)
+ && !this.props.web3.networkFailed) {
+ return
}
if (this.props.web3.status === 'failed' || this.props.web3.networkFailed) {
- return (
-
-
-
-
No connection to the Ethereum network!
- Please make sure that:
-
- - MetaMask is unlocked and pointed to the correct network
- - The app has been granted the right to connect to your account
-
-
-
-
- );
+ return
}
if (this.props.web3.status === 'initialized' && this.props.web3.accountsFailed) {
- return (
-
-
-
-
We can't find any Ethereum accounts!
-
Please make sure that MetaMask is unlocked.
-
-
-
- );
+ return
}
- if (!this.props.contractInitialized) {
- return (
-
-
-
-
Initializing contracts...
-
-
-
- );
+ if (this.props.drizzleStatus.initializing
+ || (!this.props.drizzleStatus.failed && !this.props.contractInitialized && this.props.contractDeployed )){
+ return
}
if (!this.props.contractDeployed) {
- return (
-
-
-
-
No contracts found on the current network!
-
Please make sure that you are connected to the correct network
- and the contracts are deployed.
-
-
-
- );
+ return
}
- if (!this.props.ipfsInitialized && !this.props.ipfsFailed) {
- return (
-
-
-
-
Initializing IPFS...
-
-
-
- );
+ if (this.props.ipfsStatus === breezeConstants.STATUS_INITIALIZING) {
+ return
}
- if (this.props.ipfsFailed) {
- return (
-
-
-
-
IPFS initialization failed!
-
-
-
- );
+ if (this.props.ipfsStatus === breezeConstants.STATUS_FAILED) {
+ return
}
- if (!this.props.orbitInitialized && !this.props.orbitFailed) {
+ if (this.props.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.';
- return (
-
-
-
-
Preparing OrbitDB...
-
{message}
-
-
-
- );
+ return
+ }
+
+ if (this.props.orbitStatus === breezeConstants.STATUS_FAILED) {
+ return
}
- if (this.props.orbitFailed) {
- return (
-
-
-
-
OrbitDB initialization failed!
-
-
-
- );
+ // Just in case our redux logic changes in the future
+ if (!this.props.drizzleStatus.initialized){
+ return
}
- if (this.props.drizzleStatus.initialized) return Children.only(this.props.children);
-
- return (
-
-
-
-
Loading dapp...
-
-
-
- );
+ return Children.only(this.props.children);
}
}
const mapStateToProps = (state) => ({
- accounts: state.accounts,
drizzleStatus: state.drizzleStatus,
breezeStatus: state.breezeStatus,
+ ipfsStatus: state.ipfs.status,
+ orbitStatus: state.orbit.status,
web3: state.web3,
+ accounts: state.accounts,
contractInitialized: state.contracts.Forum.initialized,
contractDeployed: state.contracts.Forum.deployed,
- ipfsInitialized: state.ipfs.initialized,
- ipfsFailed: state.ipfs.failed,
- orbitInitialized: state.orbit.initialized,
- orbitFailed: state.orbit.failed
});
export default connect(mapStateToProps)(LoadingContainer);
diff --git a/packages/concordia-app/src/options/drizzleOptions.js b/packages/concordia-app/src/options/drizzleOptions.js
index cf46366..1e12286 100644
--- a/packages/concordia-app/src/options/drizzleOptions.js
+++ b/packages/concordia-app/src/options/drizzleOptions.js
@@ -10,6 +10,7 @@ const drizzleOptions = {
events: {
Forum: ['UserSignedUp', 'UsernameUpdated', 'TopicCreated', 'PostCreated']
},
+ reloadWindowOnNetworkChange: true,
reloadWindowOnAccountChange: true // We need it to reinitialize breeze and create new Orbit databases
};
diff --git a/packages/concordia-app/src/orbit/orbitUtils.js b/packages/concordia-app/src/orbit/orbitUtils.js
index 7084289..20da73b 100644
--- a/packages/concordia-app/src/orbit/orbitUtils.js
+++ b/packages/concordia-app/src/orbit/orbitUtils.js
@@ -5,7 +5,3 @@ export async function determineDBAddress({orbit, dbName, type, identityId}) {
})).root;
return `/orbitdb/${ipfsMultihash}/${dbName}`;
}
-
-
-
-
diff --git a/packages/concordia-app/src/redux/sagas/orbitSaga.js b/packages/concordia-app/src/redux/sagas/orbitSaga.js
index 388a710..bff64bb 100644
--- a/packages/concordia-app/src/redux/sagas/orbitSaga.js
+++ b/packages/concordia-app/src/redux/sagas/orbitSaga.js
@@ -11,12 +11,12 @@ export function * initOrbitDatabases (action) {
function * orbitSaga () {
// Not sure which will come first
const res = yield all([
+ take(drizzleActions.drizzle.DRIZZLE_INITIALIZED),
take(breezeActions.breeze.BREEZE_INITIALIZED),
- take(action => action.type === drizzleActions.account.ACCOUNTS_FETCHED
- && action.accounts.length > 0)
+ take(action => action.type === drizzleActions.account.ACCOUNTS_FETCHED)
]);
- yield initOrbitDatabases({breeze:res[0].breeze, account: res[1].accounts[0]});
+ yield initOrbitDatabases({breeze:res[1].breeze, account: res[2].accounts[0]});
}
export default orbitSaga