git.iko.soy/bridge
on master help sign in
feat: implement online status in walletgen
3bd9a57Matt Condon (shrugs)
src/Root.js+1−1
compare with master
unifiedsplit
@@ -15,7 +15,7 @@ class Root extends React.Component {
15 super(props);
15 super(props);
16
16
17 this.state = {
17 this.state = {
18− appView: 'bridge',
18+ appView: 'walletgen',
19 };
19 };
20
20
21 this.setView = this.setView.bind(this);
21 this.setView = this.setView.bind(this);
src/bridge/store/online.js+16−2
@@ -6,12 +6,26 @@ import React, {
6 useState,
6 useState,
7} from 'react';
7} from 'react';
8
8
9+export const ONLINE_STATUS = {
10+ ONLINE: Symbol('ONLINE'),
11+ OFFLINE: Symbol('OFFLINE'),
12+ UNKNOWN: Symbol('UNKNOWN'),
13+};
14+
15+const getNetworkState = () => {
16+ if ('onLine' in navigator) {
17+ return navigator.onLine ? ONLINE_STATUS.ONLINE : ONLINE_STATUS.OFFLINE;
18+ }
19+
20+ return ONLINE_STATUS.UNKNOWN;
21+};
22+
9function _useOnline() {
23function _useOnline() {
10− const [online, setOnline] = useState(window.navigator.onLine);
24+ const [online, setOnline] = useState(getNetworkState());
11
25
12 useEffect(() => {
26 useEffect(() => {
13 function handleOnlineStatus(event) {
27 function handleOnlineStatus(event) {
14− setOnline(window.navigator.onLine);
28+ setOnline(getNetworkState());
15 }
29 }
16
30
17 window.addEventListener('online', handleOnlineStatus);
31 window.addEventListener('online', handleOnlineStatus);
src/walletgen/Walletgen.js+21−42
@@ -4,7 +4,7 @@ import * as lodash from 'lodash';
4import Header from './components/Header';
4import Header from './components/Header';
5import Footer from './components/Footer';
5import Footer from './components/Footer';
6
6
7−import { NETWORK_STATES, PROFILE_STATES, GEN_STATES } from './lib/constants';
7+import { PROFILE_STATES, GEN_STATES } from './lib/constants';
8
8
9import PrivacyPolicy from './views/PrivacyPolicy';
9import PrivacyPolicy from './views/PrivacyPolicy';
10import Welcome from './views/Welcome';
10import Welcome from './views/Welcome';
@@ -18,9 +18,7 @@ import Download from './views/Download';
18import Done from './views/Done';
18import Done from './views/Done';
19
19
20import './style/index.css';
20import './style/index.css';
21−
21+import { OnlineProvider } from '../bridge/store/online';
22−const checkNetwork = () =>
23− navigator.onLine ? NETWORK_STATES.ONLINE : NETWORK_STATES.OFFLINE;
24
22
25const ROUTES = [
23const ROUTES = [
26 { path: '/Welcome', Component: Welcome },
24 { path: '/Welcome', Component: Welcome },
@@ -41,7 +39,6 @@ class Walletgen extends React.Component {
41 constructor(props) {
39 constructor(props) {
42 super(props);
40 super(props);
43 this.state = {
41 this.state = {
44− network: checkNetwork(),
45 'profile.state': PROFILE_STATES.NOSTART,
42 'profile.state': PROFILE_STATES.NOSTART,
46 'profile.value': null,
43 'profile.value': null,
47 'profile.shipCount': 0,
44 'profile.shipCount': 0,
@@ -65,18 +62,9 @@ class Walletgen extends React.Component {
65 };
62 };
66 }
63 }
67
64
68− componentDidMount = () => {
69− window.addEventListener('online', () =>
70− this.setState({ network: NETWORK_STATES.ONLINE })
71− );
72− window.addEventListener('offline', () =>
73− this.setState({ network: NETWORK_STATES.OFFLINE })
74− );
75− };
76−
77 setGlobalState = state => this.setState(state);
65 setGlobalState = state => this.setState(state);
78
66
79− router = (network, path) => {
67+ router = path => {
80 const route = key => {
68 const route = key => {
81 const { Component } = lodash.find(ROUTES, { path: key });
69 const { Component } = lodash.find(ROUTES, { path: key });
82 const globals = {
70 const globals = {
@@ -87,39 +75,30 @@ class Walletgen extends React.Component {
87 };
75 };
88
76
89 return route(path);
77 return route(path);
90−
91− // return network === NETWORK_STATES.ONLINE
92− // ? <NetworkWarning />
93− // : !(network === NETWORK_STATES.OFFLINE)
94− // ? <h1>Detecting your network state.</h1>
95− // : route(path)
96 };
78 };
97
79
98 render() {
80 render() {
99− const { network, route, currentStep, lastRoute } = this.state;
81+ const { route, currentStep, lastRoute } = this.state;
100
82
101− const routed = this.router(network, route); // hacky prod
83+ const routed = this.router(route);
102− // const routed = this.router(NETWORK_STATES.OFFLINE, true, route) // hacky dev
103
84
104 return (
85 return (
86+ <OnlineProvider>
105− <main className={'container'}>
87+ <main className={'container'}>
106− <Header
107− network={network}
108− currentStep={currentStep}
88+ <Header currentStep={currentStep} totalSteps={TOTAL_STEPS} />
109− totalSteps={TOTAL_STEPS}
89+
110− />
111−
112− <div className={'row wrapper'}>
90+ <div className={'row wrapper'}>
113− <div className={'col-'}>{routed}</div>
91+ <div className={'col-'}>{routed}</div>
114− <div className={'push'} />
92+ <div className={'push'} />
115− </div>
93+ </div>
116−
94+
117− <Footer
95+ <Footer
118− route={route}
96+ route={route}
119− lastRoute={lastRoute}
97+ lastRoute={lastRoute}
120− setGlobalState={this.setGlobalState}
98+ setGlobalState={this.setGlobalState}
121− />
99+ />
122− </main>
100+ </main>
101+ </OnlineProvider>
123 );
102 );
124 }
103 }
125}
104}
src/walletgen/components/Header.js+34−23
@@ -1,7 +1,7 @@
1import React from 'react';
1import React from 'react';
2import { seq } from '../lib/lib';
2import { seq } from '../lib/lib';
3
3
4−import { NETWORK_STATES } from '../lib/constants';
4+import { useOnline, ONLINE_STATUS } from '../../bridge/store/online';
5
5
6const StatusIndicator = props => (
6const StatusIndicator = props => (
7 <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
7 <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
@@ -12,27 +12,38 @@ const StatusIndicator = props => (
12 </div>
12 </div>
13);
13);
14
14
15−const ChooseIndicator = props =>
15+function ChooseIndicator(props) {
16− props.network === NETWORK_STATES.ONLINE ? (
16+ const online = useOnline();
17+
18+ switch (online) {
19+ case ONLINE_STATUS.ONLINE:
20+ return (
17− <StatusIndicator
21+ <StatusIndicator
18− message={'You are online.'}
22+ message={'You are online.'}
19− c1={'bg-red'}
23+ c1={'bg-red'}
20− c2={'bg-red'}
24+ c2={'bg-red'}
21− error
25+ error
22− />
26+ />
23− ) : props.network === NETWORK_STATES.OFFLINE ? (
27+ );
28+ case ONLINE_STATUS.OFFLINE:
29+ return (
24− <StatusIndicator
30+ <StatusIndicator
25− message={'You are offline.'}
31+ message={'You are offline.'}
26− c1={'bg-green'}
32+ c1={'bg-green'}
27− c2={'bg-green'}
33+ c2={'bg-green'}
28− />
34+ />
29− ) : (
35+ );
36+ case ONLINE_STATUS.UNKNOWN:
37+ default:
38+ return (
30− <StatusIndicator
39+ <StatusIndicator
31− message={'Checking network connection..'}
40+ message={'Checking network connection..'}
32− c1={'bg-orange'}
41+ c1={'bg-orange'}
33− c2={'bg-orange'}
42+ c2={'bg-orange'}
34− />
43+ />
35− );
44+ );
45+ }
46+}
36
47
37const ProgressIndicator = ({ currentStep, totalSteps }) => (
48const ProgressIndicator = ({ currentStep, totalSteps }) => (
38 <div className={'relative h-9 col- mb-0'}>
49 <div className={'relative h-9 col- mb-0'}>
@@ -61,7 +72,7 @@ const Header = props => (
61 totalSteps={props.totalSteps}
72 totalSteps={props.totalSteps}
62 currentStep={props.currentStep}
73 currentStep={props.currentStep}
63 />
74 />
64− <ChooseIndicator network={props.network} />
75+ <ChooseIndicator />
65 </div>
76 </div>
66 <div className={'col-md-8 h-15 flex align-center'}>
77 <div className={'col-md-8 h-15 flex align-center'}>
67 <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
78 <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
src/walletgen/lib/constants.js−7
@@ -11,12 +11,6 @@ const GALAXY_ENTROPY_BITS = 384;
11
11
12const SEED_ENTROPY_BITS = 128;
12const SEED_ENTROPY_BITS = 128;
13
13
14−const NETWORK_STATES = {
15− ONLINE: Symbol('ONLINE'),
16− OFFLINE: Symbol('OFFLINE'),
17− UNKNOWN: Symbol('UNKNOWN'),
18−};
19−
20const GEN_STATES = {
14const GEN_STATES = {
21 ENY_NOSTART: Symbol('ENY_NOSTART'),
15 ENY_NOSTART: Symbol('ENY_NOSTART'),
22 ENY_PENDING: Symbol('ENY_PENDING'),
16 ENY_PENDING: Symbol('ENY_PENDING'),
@@ -48,7 +42,6 @@ const PROFILE_STATES = {
48};
42};
49
43
50export {
44export {
51− NETWORK_STATES,
52 GEN_STATES,
45 GEN_STATES,
53 BUTTON_STATES,
46 BUTTON_STATES,
54 PROFILE_STATES,
47 PROFILE_STATES,