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
};