ECEntrics
/
concordia
mirror of https://gitlab.com/ecentrics/concordia
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

LoadingContainer improvements

develop
Ezerous 4 years ago
parent
0c763fcd64
commit
b7a0314476
6 changed files with 108 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/concordia-app/package.json
  2. 13
      packages/concordia-app/src/assets/css/loading-container.css
  3. 3
      packages/concordia-app/src/components/App.jsx
  4. 87
      packages/concordia-app/src/components/LoadingContainer.jsx
  5. 7
      packages/concordia-app/src/options/breezeOptions.js
  6. 42
      yarn.lock

2
packages/concordia-app/package.json
View File

@ -40,6 +40,8 @@
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",
"react-scripts": "3.4.3", "react-scripts": "3.4.3",
"redux-saga": "1.1.3", "redux-saga": "1.1.3",
"semantic-ui-css": "2.4.1",
"semantic-ui-react": "1.2.1",
"web3": "1.2.11" "web3": "1.2.11"
}, },
"devDependencies": { "devDependencies": {

13
packages/concordia-app/src/assets/css/loading-container.css
View File

@ -1,12 +1,21 @@
html {
overflow: hidden;
}
.loading-screen { .loading-screen {
text-align: center; text-align: center;
font-size: large;
} }
.loading-img { .loading-img {
margin-bottom: 30px; margin-bottom: 3em;
height: 100px; height: 12em;
} }
ul { ul {
list-style-position: inside; list-style-position: inside;
} }
.bar {
margin-top: 5em;
}

3
packages/concordia-app/src/components/App.jsx
View File

@ -3,6 +3,9 @@ import { Provider } from 'react-redux'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import LoadingContainer from './LoadingContainer' import LoadingContainer from './LoadingContainer'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import 'semantic-ui-css/semantic.min.css'
import NotFound from '../components/NotFound'; import NotFound from '../components/NotFound';
const App = ({ store }) => ( const App = ({ store }) => (

87
packages/concordia-app/src/components/LoadingContainer.jsx
View File

@ -1,6 +1,11 @@
import React, { Children, Component } from 'react'; import React, { Children, Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Progress } from 'semantic-ui-react'
// CSS
import '../assets/css/loading-container.css'; import '../assets/css/loading-container.css';
// Images
import ethereum_logo from '../assets/images/ethereum_logo.svg'; import ethereum_logo from '../assets/images/ethereum_logo.svg';
import ipfs_logo from '../assets/images/ipfs_logo.svg'; import ipfs_logo from '../assets/images/ipfs_logo.svg';
import orbitdb_logo from '../assets/images/orbitdb_logo.png'; import orbitdb_logo from '../assets/images/orbitdb_logo.png';
@ -8,31 +13,56 @@ import logo from '../assets/images/logo.png';
class LoadingContainer extends Component { class LoadingContainer extends Component {
render() { 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 ( return (
<main className="loading-screen"> <main className="loading-screen">
<div className="pure-g"> <div className="ui container">
<div className="pure-u-1-1">
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> <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: Please make sure that:
<ul> <ul>
<li>MetaMask is unlocked and pointed to the correct network</li> <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> <li>The app has been granted the right to connect to your account</li>
</ul> </ul>
</div> <Progress percent="20" size='tiny' error />
</div> </div>
</main> </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 ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<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>
<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> </div>
</main> </main>
); );
@ -41,48 +71,64 @@ class LoadingContainer extends Component {
if (!this.props.contractDeployed) { if (!this.props.contractDeployed) {
return ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> <img src={ethereum_logo} alt="ethereum_logo" className="loading-img" />
<p><strong>No contracts found on the current network!</strong></p> <p><strong>No contracts found on the current network!</strong></p>
<p>Please make sure that you are connected to the correct network <p>Please make sure that you are connected to the correct network
and the contracts are deployed.</p> and the contracts are deployed.</p>
<Progress percent="40" size='tiny' error />
</div> </div>
</main> </main>
); );
} }
if (!this.props.contractInitialized) { if (!this.props.ipfsInitialized && !this.props.ipfsFailed) {
return ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<img src={ethereum_logo} alt="ethereum_logo" className="loading-img" /> <img src={ipfs_logo} alt="ipfs_logo" className="loading-img" />
<p><strong>Initializing contracts...</strong></p> <p><strong>Initializing IPFS...</strong></p><p/>
<Progress percent="60" size='tiny' active />
</div> </div>
</main> </main>
); );
} }
if (!this.props.ipfsInitialized) { if (this.props.ipfsFailed) {
return ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<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>IPFS initialization failed!</strong></p><p/>
<Progress percent="60" size='tiny' error />
</div> </div>
</main> </main>
); );
} }
if (!this.props.orbitInitialized) { if (!this.props.orbitInitialized && !this.props.orbitFailed) {
const message = process.env.NODE_ENV === 'development' const message = process.env.NODE_ENV === 'development'
? 'If needed, please sign the transaction in MetaMask to create the databases.' ? 'If needed, please sign the transaction in MetaMask to create the databases.'
: 'Please sign the transaction in MetaMask to create the databases.'; : 'Please sign the transaction in MetaMask to create the databases.';
return ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<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>{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> </div>
</main> </main>
); );
@ -92,9 +138,10 @@ class LoadingContainer extends Component {
return ( return (
<main className="loading-screen"> <main className="loading-screen">
<div> <div className="ui container">
<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><p/>
<Progress percent="90" size='tiny' error />
</div> </div>
</main> </main>
); );
@ -109,7 +156,9 @@ const mapStateToProps = (state) => ({
contractInitialized: state.contracts.Forum.initialized, contractInitialized: state.contracts.Forum.initialized,
contractDeployed: state.contracts.Forum.deployed, contractDeployed: state.contracts.Forum.deployed,
ipfsInitialized: state.ipfs.initialized, ipfsInitialized: state.ipfs.initialized,
ipfsFailed: state.ipfs.failed,
orbitInitialized: state.orbit.initialized, orbitInitialized: state.orbit.initialized,
orbitFailed: state.orbit.failed
}); });
export default connect(mapStateToProps)(LoadingContainer); export default connect(mapStateToProps)(LoadingContainer);

7
packages/concordia-app/src/options/breezeOptions.js
View File

@ -13,17 +13,16 @@ const breezeOptions = {
// Use local signaling server (see also rendezvous script in package.json) // Use local signaling server (see also rendezvous script in package.json)
// For more information: https://github.com/libp2p/js-libp2p-webrtc-star // For more information: https://github.com/libp2p/js-libp2p-webrtc-star
'/ip4/127.0.0.1/tcp/9090/wss/p2p-webrtc-star' '/ip4/127.0.0.1/tcp/9090/wss/p2p-webrtc-star'
], ]
}, },
}, },
preload: { preload: {
enabled: false, enabled: false
}, },
init: { init: {
emptyRepo: true, emptyRepo: true
} }
}, },
web3,
orbit: { orbit: {
identityProvider: EthereumIdentityProvider, identityProvider: EthereumIdentityProvider,
databases: [ databases: [

42
yarn.lock
View File

@ -1182,9 +1182,9 @@
"@ethersproject/strings" ">=5.0.0-beta.130" "@ethersproject/strings" ">=5.0.0-beta.130"
"@ethersproject/abi@^5.0.3": "@ethersproject/abi@^5.0.3":
version "5.0.3" version "5.0.4"
resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.0.3.tgz#27280ff9d44b94b5ac83064db81deb8d1b87dab1" resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.0.4.tgz#92d603307ad343f9465d5e0f546df3cf72709862"
integrity sha512-fSSs4sgaf5R1955QSpYXW2YkrYBgyOSyENyyMEyJwxTsKJKQPaReTQXafyeRc8ZLi3/2uzeqakH09r0S1hlFng== integrity sha512-T8woaIQHCJMZDAQim1vSp8ycsP2h1/TlnBHzQqR9atKknoqLiT26Wxr9AkhW1aufexkWrZTHbf2837469uS6Eg==
dependencies: dependencies:
"@ethersproject/address" "^5.0.3" "@ethersproject/address" "^5.0.3"
"@ethersproject/bignumber" "^5.0.6" "@ethersproject/bignumber" "^5.0.6"
@ -1724,9 +1724,9 @@
"@hapi/validate" "1.x.x" "@hapi/validate" "1.x.x"
"@hapi/shot@^5.0.1": "@hapi/shot@^5.0.1":
version "5.0.3" version "5.0.4"
resolved "https://registry.yarnpkg.com/@hapi/shot/-/shot-5.0.3.tgz#bc54913ee112dd4a30311d813c2a28cab28a69c9" resolved "https://registry.yarnpkg.com/@hapi/shot/-/shot-5.0.4.tgz#6c978314f21a054c041f4becc50095dd78d3d775"
integrity sha512-qbccs8KL4YSL9x0J/17Z6Udmtrrn32ieGbrCW8iivl2ha8YzlDy9Wvv1pFKh3mzbTsomWHGLF3UsKcQFk/BqPg== integrity sha512-PcEz0WJgFDA3xNSMeONgQmothFr7jhbbRRSAKaDh7chN7zOXBlhl13bvKZW6CMb2xVfJUmt34CW3e/oExMgBhQ==
dependencies: dependencies:
"@hapi/hoek" "9.x.x" "@hapi/hoek" "9.x.x"
"@hapi/validate" "1.x.x" "@hapi/validate" "1.x.x"
@ -2557,9 +2557,9 @@ acorn-globals@^4.1.0, acorn-globals@^4.3.0:
acorn-walk "^6.0.1" acorn-walk "^6.0.1"
acorn-jsx@^5.0.0, acorn-jsx@^5.2.0: acorn-jsx@^5.0.0, acorn-jsx@^5.2.0:
version "5.2.0" version "5.3.1"
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ== integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
acorn-walk@^6.0.1: acorn-walk@^6.0.1:
version "6.2.0" version "6.2.0"
@ -4878,9 +4878,9 @@ ee-first@1.1.1:
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.562: electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.562:
version "1.3.562" version "1.3.563"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.562.tgz#79c20277ee1c8d0173a22af00e38433b752bc70f" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.563.tgz#9da4e4f0d76c4b221784cc9ca81a8464e8180408"
integrity sha512-WhRe6liQ2q/w1MZc8mD8INkenHivuHdrr4r5EQHNomy3NJux+incP6M6lDMd0paShP3MD0WGe5R1TWmEClf+Bg== integrity sha512-JkEjRFmuSegdTBCPG+RS1zw9csObHoN4el+X9EfEALO0UT7us8swxspJx7cRsrMkjd8bmmRTAd0xuUhvvb5DLg==
elliptic@6.5.3, elliptic@^6.4.0, elliptic@^6.5.2, elliptic@^6.5.3: elliptic@6.5.3, elliptic@^6.4.0, elliptic@^6.5.2, elliptic@^6.5.3:
version "6.5.3" version "6.5.3"
@ -5498,9 +5498,9 @@ ethereumjs-util@^6.0.0:
rlp "^2.2.3" rlp "^2.2.3"
ethers@^5.0.8: ethers@^5.0.8:
version "5.0.11" version "5.0.12"
resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.0.11.tgz#af1175f0bb82fe6feef77b49db3cd7fd91034b56" resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.0.12.tgz#8986cf53a425d1a00af6bda886e9098b0448d1fb"
integrity sha512-cYUxf0IvGkJtvRaSOlmjoA07pqREN3bFw4yKJHmO3UhJAfDQlk4hQyyjHnROaNKB7YYBFFsE6FmDmOx057KQTA== integrity sha512-mgF1ZLd1y5r+hS1IPATKwKx5k/PCSqz4PEQjMR+er+Hhu6IefVVcoYATUMjmK4FG+3PAkorRMA9rJ4Y/fdW0UA==
dependencies: dependencies:
"@ethersproject/abi" "^5.0.3" "@ethersproject/abi" "^5.0.3"
"@ethersproject/abstract-provider" "^5.0.3" "@ethersproject/abstract-provider" "^5.0.3"
@ -9069,9 +9069,9 @@ multicodec@^1.0.0:
varint "^5.0.0" varint "^5.0.0"
multicodec@^2.0.0: multicodec@^2.0.0:
version "2.0.0" version "2.0.1"
resolved "https://registry.yarnpkg.com/multicodec/-/multicodec-2.0.0.tgz#e0c41d99ce29d5f92a9406a6a31169a3802a1ca3" resolved "https://registry.yarnpkg.com/multicodec/-/multicodec-2.0.1.tgz#0971bbef83fcb354315c837c9a3f3e2e422af371"
integrity sha512-2SLsdTCXqOpUfoSHkTaVzxnjjl5fsSO283Idb9rAYgKGVu188NFP5KncuZ8Ifg8H2gc5GOi2rkuhLumqv9nweQ== integrity sha512-YDYeWn9iGa76hOHAyyZa0kbt3tr5FLg1ZXUHrZUJltjnxxdbTIbHnxWLd2zTcMOjdT3QyO+Xs4bQgJUcC2RWUA==
dependencies: dependencies:
uint8arrays "1.0.0" uint8arrays "1.0.0"
varint "^5.0.0" varint "^5.0.0"
@ -13810,9 +13810,9 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
iconv-lite "0.4.24" iconv-lite "0.4.24"
whatwg-fetch@^3.0.0: whatwg-fetch@^3.0.0:
version "3.4.0" version "3.4.1"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.0.tgz#e11de14f4878f773fbebcde8871b2c0699af8b30" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
integrity sha512-rsum2ulz2iuZH08mJkT0Yi6JnKhwdw4oeyMjokgxd+mmqYSd9cPpOQf01TIWgjxG/U4+QR+AwKq6lSbXVxkyoQ== integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0: whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
version "2.3.0" version "2.3.0"

Write Preview
Loading…
Cancel
Save