Skip to content
This repository was archived by the owner on May 24, 2022. It is now read-only.

Commit f2b97ae

Browse files
amaury1093amaury1093
authored
Merge pull request #216 from paritytech/ac-rm-overlay
RequireHealthOverlay: App (require connection) and TxForm & Signer (require sync)
2 parents 7a63c11 + 6a1ceff commit f2b97ae

File tree

9 files changed

+318
-288
lines changed

9 files changed

+318
-288
lines changed

‎packages/fether-react/src/App/App.js‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ import ReactResizeDetector from 'react-resize-detector';
1717

1818
import Accounts from '../Accounts';
1919
import Onboarding from '../Onboarding';
20-
import Overlay from '../Overlay';
20+
import RequireHealth from '../RequireHealthOverlay';
2121
import Send from '../Send';
22-
import withHealth, { STATUS } from '../utils/withHealth';
2322
import Tokens from '../Tokens';
2423
import Whitelist from '../Whitelist';
2524

@@ -29,7 +28,6 @@ const Router =
2928
process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
3029
const electron = isElectron() ? window.require('electron') : null;
3130

32-
@withHealth
3331
@inject('onboardingStore')
3432
@observer
3533
class App extends Component {
@@ -41,23 +39,12 @@ class App extends Component {
4139
electron.ipcRenderer.send('asynchronous-message', 'app-resize', height);
4240
};
4341

44-
render () {
45-
return (
46-
<ReactResizeDetector handleHeight onResize={this.handleResize}>
47-
<Router>
48-
<div className='content'>{this.renderScreen()}</div>
49-
</Router>
50-
</ReactResizeDetector>
51-
);
52-
}
53-
5442
/**
5543
* Decide which screen to render.
5644
*/
57-
renderScreen () {
45+
render () {
5846
const {
59-
onboardingStore: { isFirstRun },
60-
health: { status }
47+
onboardingStore: { isFirstRun }
6148
} = this.props;
6249

6350
if (isFirstRun) {
@@ -69,26 +56,33 @@ class App extends Component {
6956
}
7057

7158
return (
72-
<div className='window'>
73-
{status !== STATUS.GOOD && <Overlay />}
74-
75-
{/* Don't display child components requiring RPCs if API is not yet set */
76-
![STATUS.DOWNLOADING, STATUS.LAUNCHING].includes(status) && (
77-
<Switch>
78-
{/* The next line is the homepage */}
79-
<Redirect exact from='/' to='/accounts' />
80-
<Route path='/accounts' component={Accounts} />
81-
<Route path='/onboarding' component={Onboarding} />
82-
<Route path='/tokens/:accountAddress' component={Tokens} />
83-
<Route path='/whitelist/:accountAddress' component={Whitelist} />
84-
<Route
85-
path='/send/:tokenAddress/from/:accountAddress'
86-
component={Send}
87-
/>
88-
<Redirect from='*' to='/' />
89-
</Switch>
90-
)}
91-
</div>
59+
<ReactResizeDetector handleHeight onResize={this.handleResize}>
60+
<div className='content'>
61+
<div className='window'>
62+
{/* Don't display child components requiring RPCs if API is not yet set */}
63+
<RequireHealth require='connected' fullscreen>
64+
<Router>
65+
<Switch>
66+
{/* The next line is the homepage */}
67+
<Redirect exact from='/' to='/accounts' />
68+
<Route path='/accounts' component={Accounts} />
69+
<Route path='/onboarding' component={Onboarding} />
70+
<Route path='/tokens/:accountAddress' component={Tokens} />
71+
<Route
72+
path='/whitelist/:accountAddress'
73+
component={Whitelist}
74+
/>
75+
<Route
76+
path='/send/:tokenAddress/from/:accountAddress'
77+
component={Send}
78+
/>
79+
<Redirect from='*' to='/' />
80+
</Switch>
81+
</Router>
82+
</RequireHealth>
83+
</div>
84+
</div>
85+
</ReactResizeDetector>
9286
);
9387
}
9488
}

‎packages/fether-react/src/Health/Health.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ class Health extends Component {
6464
case STATUS.NOINTERNET:
6565
return 'No Internet connection';
6666
case STATUS.NOPEERS:
67-
return 'Not connected to any peers';
67+
return 'Not connected to any peer';
6868
case STATUS.LAUNCHING:
6969
return 'Launching the node...';
7070
case STATUS.SYNCING:

‎packages/fether-react/src/Overlay/Overlay.js‎

Lines changed: 0 additions & 113 deletions
This file was deleted.

‎packages/fether-react/src/RequireHealthOverlay/RequireHealthOverlay.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
2+
// This file is part of Parity.
3+
//
4+
// SPDX-License-Identifier: BSD-3-Clause
5+
6+
import React, { Component } from 'react';
7+
import PropTypes from 'prop-types';
8+
9+
import withHealth, { STATUS } from '../utils/withHealth';
10+
import loading from '../assets/img/icons/loading.svg';
11+
12+
function statusMatches (status, require) {
13+
switch (require) {
14+
case 'connected':
15+
return (
16+
status !== STATUS.NOINTERNET &&
17+
status !== STATUS.DOWNLOADING &&
18+
status !== STATUS.LAUNCHING
19+
);
20+
case 'sync':
21+
return status === STATUS.GOOD;
22+
}
23+
}
24+
25+
@withHealth
26+
class RequireHealthOverlay extends Component {
27+
static propTypes = {
28+
require: PropTypes.oneOf(['connected', 'sync']),
29+
fullscreen: PropTypes.bool
30+
};
31+
32+
state = {
33+
visible: false // false | true | id of the timeout that will make the overlay visible
34+
// We want to display the overlay after 2s of problematic health. Syncing
35+
// to new blocks from the top of the chain takes 1s and we don't want to
36+
// display the overlay in that case.
37+
};
38+
39+
componentDidMount () {
40+
// Initial render check. Display overlay immediately if problematic health.
41+
if (!statusMatches(this.props.health.status, this.props.require)) {
42+
this.setState({ visible: true });
43+
}
44+
}
45+
46+
componentDidUpdate () {
47+
if (statusMatches(this.props.health.status, this.props.require)) {
48+
// If there is an ongoing timeout to make the overlay visible, clear it
49+
if (typeof this.state.visible === 'number') {
50+
clearTimeout(this.state.visible);
51+
}
52+
53+
if (this.state.visible !== false) {
54+
this.setState({ visible: false });
55+
}
56+
} else {
57+
// Bad node health
58+
// Display the overlay after 2s (if there is no ongoing timeout)
59+
if (this.state.visible === false) {
60+
this.setState({
61+
visible: setTimeout(() => {
62+
this.setState({ visible: true });
63+
}, 2000)
64+
});
65+
}
66+
}
67+
}
68+
69+
componentWillUnmount () {
70+
if (typeof this.state.visible === 'number') {
71+
clearTimeout(this.state.visible);
72+
}
73+
}
74+
75+
render () {
76+
const { visible } = this.state;
77+
const { fullscreen } = this.props;
78+
79+
return visible === true ? (
80+
<div
81+
className={['alert-screen', fullscreen ? '-full-screen' : ''].join(' ')}
82+
>
83+
<div className='alert-screen_content'>
84+
<div className='alert-screen_image'>
85+
<img alt='loading' src={loading} />
86+
</div>
87+
<div className='alert-screen_text'>
88+
<h1>{this.renderTitle()}</h1>
89+
<p>{this.renderDescription()}</p>
90+
</div>
91+
</div>
92+
</div>
93+
) : (
94+
this.props.children
95+
);
96+
}
97+
98+
renderTitle = () => {
99+
const {
100+
health: { status }
101+
} = this.props;
102+
103+
switch (status) {
104+
case STATUS.CLOCKNOTSYNC:
105+
return 'Your clock is not sync';
106+
case STATUS.DOWNLOADING:
107+
return 'Downloading Parity...';
108+
case STATUS.NOINTERNET:
109+
return 'No Internet connection';
110+
case STATUS.NOPEERS:
111+
return 'Bad connectivity';
112+
case STATUS.LAUNCHING:
113+
return 'Connecting to the node...';
114+
case STATUS.SYNCING:
115+
return 'Syncing...';
116+
default:
117+
return '';
118+
}
119+
};
120+
121+
renderDescription = () => {
122+
const {
123+
health: { status, payload }
124+
} = this.props;
125+
126+
switch (status) {
127+
case STATUS.CLOCKNOTSYNC:
128+
return `Mac: System Preferences -> Date & Time -> Uncheck and recheck "Set date and time automatically"
129+
Windows: Control Panel -> "Clock, Language, and Region" -> "Date and Time" -> Uncheck and recheck "Set date and time automatically"`;
130+
case STATUS.SYNCING:
131+
case STATUS.DOWNLOADING:
132+
return payload && payload.percentage && payload.percentage.gt(0)
133+
? `${payload.percentage.toFixed(0)}%`
134+
: '';
135+
case STATUS.NOINTERNET:
136+
return 'Please connect to the Internet';
137+
case STATUS.NOPEERS:
138+
return 'Getting some more peers...';
139+
default:
140+
return '';
141+
}
142+
};
143+
}
144+
145+
export default RequireHealthOverlay;

packages/fether-react/src/Overlay/index.js renamed to packages/fether-react/src/RequireHealthOverlay/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
//
44
// SPDX-License-Identifier: BSD-3-Clause
55

6-
import Overlay from './Overlay';
6+
import RequireHealthOverlay from './RequireHealthOverlay';
77

8-
export default Overlay;
8+
export default RequireHealthOverlay;

0 commit comments

Comments
 (0)