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( +
    + + {imageAlt} +

    {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 ( -
    -
    - ethereum_logo -

    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 ( -
    -
    - ethereum_logo -

    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 ( -
    -
    - ethereum_logo -

    We can't find any Ethereum accounts!

    -

    Please make sure that MetaMask is unlocked.

    - -
    -
    - ); + return } - if (!this.props.contractInitialized) { - return ( -
    -
    - ethereum_logo -

    Initializing contracts...

    - -

    -
    - ); + if (this.props.drizzleStatus.initializing + || (!this.props.drizzleStatus.failed && !this.props.contractInitialized && this.props.contractDeployed )){ + return } if (!this.props.contractDeployed) { - return ( -
    -
    - ethereum_logo -

    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 ( -
    -
    - ipfs_logo -

    Initializing IPFS...

    - -

    -
    - ); + if (this.props.ipfsStatus === breezeConstants.STATUS_INITIALIZING) { + return } - if (this.props.ipfsFailed) { - return ( -
    -
    - ipfs_logo -

    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 ( -
    -
    - orbitdb_logo -

    Preparing OrbitDB...

    -

    {message}

    - -
    -
    - ); + return + } + + if (this.props.orbitStatus === breezeConstants.STATUS_FAILED) { + return } - if (this.props.orbitFailed) { - return ( -
    -
    - orbitdb_logo -

    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 ( -
    -
    - app_logo -

    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