wallet: navigator.onLine status

src/js/actions/WalletActions.js

@@ -3,7 +3,7 @@
 
 import * as WALLET from './constants/wallet';
 
-import type { RouterLocationState } from '../flowtype';
+import type { RouterLocationState, ThunkAction, Dispatch, GetState } from '../flowtype';
 
 export type WalletAction = {
     type: typeof WALLET.SET_INITIAL_URL,
@@ -14,6 +14,23 @@ export type WalletAction = {
     opened: boolean
 } | {
     type: typeof WALLET.ON_BEFORE_UNLOAD
+} | {
+    type: typeof WALLET.ONLINE_STATUS,
+    online: boolean
+}
+
+export const init = (): ThunkAction => {
+    return (dispatch: Dispatch, getState: GetState): void => {
+
+        const updateOnlineStatus = (event) => {
+            dispatch({
+                type: WALLET.ONLINE_STATUS,
+                online: navigator.onLine
+            })
+        }
+        window.addEventListener('online',  updateOnlineStatus);
+        window.addEventListener('offline', updateOnlineStatus);
+    }
 }
 
 export const onBeforeUnload = (): WalletAction => {

src/js/actions/constants/wallet.js

@@ -4,3 +4,4 @@
 export const ON_BEFORE_UNLOAD: 'wallet__on_before_unload' = 'wallet__on_before_unload';
 export const TOGGLE_DEVICE_DROPDOWN: 'wallet__toggle_dropdown' = 'wallet__toggle_dropdown';
 export const SET_INITIAL_URL: 'wallet__set_initial_url' = 'wallet__set_initial_url';
+export const ONLINE_STATUS: 'wallet__online_status' = 'wallet__online_status';

src/js/components/wallet/index.js

@@ -15,13 +15,20 @@ import ModalContainer from '../modal';
 import Notifications from '../common/Notification';
 import Log from '../common/Log';
 
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
 import type { State, Dispatch } from '../../flowtype';
 
-type Props = {
+type WalletContainerProps = {
-    children: React.Node
+    wallet: $ElementType<State, 'wallet'>,
+    children?: React.Node
 }
 
-const Content = (props: Props) => {
+type ContentProps = {
+    children?: React.Node
+}
+
+
+const Content = (props: ContentProps) => {
     return (
         <article>
             <nav>
@@ -36,10 +43,11 @@ const Content = (props: Props) => {
     );
 }
 
-const Wallet = (props: Props) => {
+const Wallet = (props: WalletContainerProps) => {
     return (
         <div className="app">
             <Header />
+            {/* <div>{ props.wallet.online ? "ONLINE" : "OFFLINE" }</div> */}
             <main>
                 <AsideContainer />
                 <Content>
@@ -51,6 +59,12 @@ const Wallet = (props: Props) => {
     );
 }
 
+const mapStateToProps: MapStateToProps<State, {}, WalletContainerProps> = (state: State, own: {}): WalletContainerProps => {
+    return {
+        wallet: state.wallet
+    };
+}
+
 export default withRouter(
-    connect(null, null)(Wallet)
+    connect(mapStateToProps, null)(Wallet)
 );

src/js/reducers/WalletReducer.js

@@ -13,6 +13,7 @@ import type { Action, RouterLocationState, TrezorDevice } from '../flowtype';
 
 type State = {
     ready: boolean;
+    online: boolean;
     dropdownOpened: boolean;
     initialParams: ?RouterLocationState;
     initialPathname: ?string;
@@ -21,6 +22,7 @@ type State = {
 
 const initialState: State = {
     ready: false,
+    online: navigator.onLine,
     dropdownOpened: false,
     initialParams: null,
     initialPathname: null,
@@ -43,6 +45,12 @@ export default function wallet(state: State = initialState, action: Action): Sta
                 ready: true
             }
 
+        case WALLET.ONLINE_STATUS :
+            return {
+                ...state,
+                online: action.online
+            }
+
         case WALLET.TOGGLE_DEVICE_DROPDOWN :
             return {
                 ...state,

src/js/services/LocalStorageService.js

@@ -2,6 +2,7 @@
 'use strict';
 
 import * as LocalStorageActions from '../actions/LocalStorageActions';
+import * as WalletActions from '../actions/WalletActions';
 
 import { DEVICE } from 'trezor-connect';
 import * as CONNECT from '../actions/constants/TrezorConnect';
@@ -90,6 +91,7 @@ const LocalStorageService: Middleware = (api: MiddlewareAPI) => (next: Middlewar
     if (action.type === LOCATION_CHANGE) {
         const { location } = api.getState().router;
         if (!location) {
+            api.dispatch( WalletActions.init() );
             // load data from config.json and local storage
             api.dispatch( LocalStorageActions.loadData() );
         }