diff --git a/packages/fether-react/src/App/App.js b/packages/fether-react/src/App/App.js index a41634b62537fa666a7118ac24fc99c4084cd7c3..0386d04b5ea5f97a5201710ecc98264504e30435 100644 --- a/packages/fether-react/src/App/App.js +++ b/packages/fether-react/src/App/App.js @@ -18,6 +18,7 @@ import ReactResizeDetector from 'react-resize-detector'; import Accounts from '../Accounts'; import BackupAccount from '../BackupAccount'; import Onboarding from '../Onboarding'; +import RequireHealthOverlay from '../RequireHealthOverlay'; import Send from '../Send'; import Tokens from '../Tokens'; import Whitelist from '../Whitelist'; @@ -48,20 +49,29 @@ class App extends Component { parityStore: { api } } = this.props; + if (isFirstRun) { + return ( +
+ +
+ ); + } + // The child components make use of light.js and light.js needs to be passed // an API first, otherwise it will throw an error. // We set parityStore.api right after we set the API for light.js, so we // verify here that parityStore.api is defined, and if not we don't render - // the children. + // the children, just a . if (!api) { - return null; - } - - if (isFirstRun) { return ( -
- -
+ + + {/* Adding these components to have minimum height on window */} +
+
+
+ + ); } diff --git a/packages/fether-react/src/Health/Health.js b/packages/fether-react/src/Health/Health.js index 4ed6a6d3e132bce5d46af1701c4a697c9a73d8fc..9ba42c033ee98ac23d71a721c79c74bb9b6be073 100644 --- a/packages/fether-react/src/Health/Health.js +++ b/packages/fether-react/src/Health/Health.js @@ -4,15 +4,23 @@ // SPDX-License-Identifier: BSD-3-Clause import React, { Component } from 'react'; - +import { branch } from 'recompose'; import { chainName$, withoutLoading } from '@parity/light.js'; import light from '@parity/light.js-react'; import withHealth from '../utils/withHealth'; -@light({ - chainName: () => chainName$().pipe(withoutLoading()) -}) @withHealth +@branch( + ({ + health: { + status: { good, syncing } + } + }) => good || syncing, + // Only call light.js chainName$ if we're syncing or good + light({ + chainName: () => chainName$().pipe(withoutLoading()) + }) +) class Health extends Component { render () { return ( @@ -49,18 +57,18 @@ class Health extends Component { chainName } = this.props; - if (!status.nodeConnected && !status.internet) { + if (status.downloading) { + return `Downloading Parity Ethereum (${ + payload.downloading.syncPercentage + }%)`; + } else if (status.launching) { + return 'Launching the node...'; + } else if (!status.nodeConnected && !status.internet) { return 'No internet. No node connected'; } else if (!status.nodeConnected && status.internet) { return 'Connecting to node...'; } else if (status.nodeConnected && !status.internet) { return 'No internet. Connected to node'; - } else if (status.downloading) { - return `Downloading Parity Ethereum... (${ - payload.downloading.syncPercentage - }%)`; - } else if (status.launching) { - return 'Launching the node...'; } else if (!status.clockSync) { return 'Clock of host not in sync'; } else if (!status.peers) { diff --git a/packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js b/packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js index a3b0619289003dcfc96617c00fef3eb61b65f6db..8fb1dff822fa061d1e85861784ff8dcc33207de4 100644 --- a/packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js +++ b/packages/fether-react/src/RequireHealthOverlay/HealthModal/HealthModal.js @@ -5,6 +5,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { branch } from 'recompose'; import { chainName$, withoutLoading } from '@parity/light.js'; import light from '@parity/light.js-react'; import { Modal } from 'fether-ui'; @@ -12,10 +13,18 @@ import { Modal } from 'fether-ui'; import withHealth from '../../utils/withHealth'; import loading from '../../assets/img/icons/loading.svg'; -@light({ - chainName: () => chainName$().pipe(withoutLoading()) -}) @withHealth +@branch( + ({ + health: { + status: { syncing } + } + }) => syncing, + // Only call light.js chainName$ if we're syncing + light({ + chainName: () => chainName$().pipe(withoutLoading()) + }) +) class HealthModal extends Component { static propTypes = { chainName: PropTypes.string, @@ -46,16 +55,16 @@ class HealthModal extends Component { health: { status } } = this.props; - if (!status.nodeConnected && !status.internet) { + if (status.downloading) { + return 'Downloading Parity Ethereum...'; + } else if (status.launching) { + return 'Launching the node...'; + } else if (!status.nodeConnected && !status.internet) { return 'No internet. No node connected'; } else if (!status.nodeConnected && status.internet) { return 'Connecting to node...'; } else if (status.nodeConnected && !status.internet) { return 'No internet. Connected to node'; - } else if (status.downloading) { - return 'Downloading Parity Ethereum...'; - } else if (status.launching) { - return 'Launching the node...'; } else if (!status.clockSync) { return 'Clock of host not in sync'; } else if (!status.peers) { diff --git a/packages/fether-react/src/utils/withHealth.js b/packages/fether-react/src/utils/withHealth.js index 1fa6c54439a9f9adc77db918f45e3f062082e921..20014046be605f13739cdeb50e3a9875a929dfca 100644 --- a/packages/fether-react/src/utils/withHealth.js +++ b/packages/fether-react/src/utils/withHealth.js @@ -127,21 +127,20 @@ export default compose( ]) => { const isDownloading = online && downloadProgress > 0 && !isParityRunning; - const isNodeConnected = - !isDownloading && isApiConnected && isParityRunning; - const isNoPeers = peerCount === undefined || peerCount.lte(1); + const isNoPeers = + isApiConnected && (peerCount === undefined || peerCount.lte(1)); const isGood = - isSync && !isNoPeers && isClockSync && isNodeConnected && online; + isSync && !isNoPeers && isClockSync && isApiConnected && online; // Status - list of all states of health store const status = { internet: online, // Internet connection - nodeConnected: isNodeConnected, // Connected to local Parity Ethereum node + nodeConnected: isApiConnected, // Connected to local Parity Ethereum node clockSync: isClockSync, // Local clock is not synchronised downloading: isDownloading, // Currently downloading Parity Ethereum launching: !isApiConnected, // Launching Parity Ethereum only upon startup peers: !isNoPeers, // Connecion to peer nodes - syncing: !isSync, // Synchronising blocks + syncing: isApiConnected && !isSync, // Synchronising blocks good: isGood // Synchronised and no issues };