|
|
|
@ -1,6 +1,11 @@ |
|
|
|
import React, { Children, Component } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Progress } from 'semantic-ui-react' |
|
|
|
|
|
|
|
// CSS |
|
|
|
import '../assets/css/loading-container.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'; |
|
|
|
@ -8,31 +13,56 @@ import logo from '../assets/images/logo.png'; |
|
|
|
|
|
|
|
class LoadingContainer extends Component { |
|
|
|
render() { |
|
|
|
if (this.props.web3.status === 'failed' || !this.props.web3.networkId) { |
|
|
|
if (this.props.web3.status === 'initializing') { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>Connecting to the Ethereum network...</strong></p> |
|
|
|
<p>Please make sure to unlock MetaMask.</p> |
|
|
|
<Progress percent="20" size='tiny' active /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.props.web3.status === 'failed' || this.props.web3.networkFailed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div className="pure-g"> |
|
|
|
<div className="pure-u-1-1"> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>This browser has no connection to the Ethereum network</strong></p> |
|
|
|
<p><strong>No connection to the Ethereum network!</strong></p> |
|
|
|
Please make sure that: |
|
|
|
<ul> |
|
|
|
<li>MetaMask is unlocked and pointed to the correct network</li> |
|
|
|
<li>The app has been granted the right to connect to your account</li> |
|
|
|
</ul> |
|
|
|
<Progress percent="20" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.props.web3.status === 'initialized' && Object.keys(this.props.accounts).length === 0) { |
|
|
|
if (this.props.web3.status === 'initialized' && this.props.web3.accountsFailed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>We can't find any Ethereum accounts!</strong></p> |
|
|
|
<p>Please make sure that MetaMask is unlocked.</p> |
|
|
|
<Progress percent="20" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.props.contractInitialized) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>Initializing contracts...</strong></p><p/> |
|
|
|
<Progress percent="40" size='tiny' active /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
@ -41,48 +71,64 @@ class LoadingContainer extends Component { |
|
|
|
if (!this.props.contractDeployed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>No contracts found on the current network!</strong></p> |
|
|
|
<p>Please make sure that you are connected to the correct network |
|
|
|
and the contracts are deployed.</p> |
|
|
|
<Progress percent="40" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.props.contractInitialized) { |
|
|
|
if (!this.props.ipfsInitialized && !this.props.ipfsFailed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div> |
|
|
|
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> |
|
|
|
<p><strong>Initializing contracts...</strong></p> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ipfs_logo} alt="ipfs_logo" className="loading-img" /> |
|
|
|
<p><strong>Initializing IPFS...</strong></p><p/> |
|
|
|
<Progress percent="60" size='tiny' active /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.props.ipfsInitialized) { |
|
|
|
if (this.props.ipfsFailed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={ipfs_logo} alt="ipfs_logo" className="loading-img" /> |
|
|
|
<p><strong>Initializing IPFS...</strong></p> |
|
|
|
<p><strong>IPFS initialization failed!</strong></p><p/> |
|
|
|
<Progress percent="60" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.props.orbitInitialized) { |
|
|
|
if (!this.props.orbitInitialized && !this.props.orbitFailed) { |
|
|
|
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 className="ui container"> |
|
|
|
<img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img" /> |
|
|
|
<p><strong>Preparing OrbitDB...</strong></p> |
|
|
|
<p>{message}</p> |
|
|
|
<Progress percent="80" size='tiny' active /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
if (this.props.orbitFailed) { |
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={orbitdb_logo} alt="orbitdb_logo" className="loading-img" /> |
|
|
|
<p><strong>OrbitDB initialization failed!</strong></p><p/> |
|
|
|
<Progress percent="80" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
@ -92,9 +138,10 @@ class LoadingContainer extends Component { |
|
|
|
|
|
|
|
return ( |
|
|
|
<main className="loading-screen"> |
|
|
|
<div> |
|
|
|
<div className="ui container"> |
|
|
|
<img src={logo} alt="app_logo" className="loading-img" /> |
|
|
|
<p><strong>Loading dapp...</strong></p> |
|
|
|
<p><strong>Loading dapp...</strong></p><p/> |
|
|
|
<Progress percent="90" size='tiny' error /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
); |
|
|
|
@ -109,7 +156,9 @@ const mapStateToProps = (state) => ({ |
|
|
|
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); |
|
|
|
|
Ezerous
4 years ago