diff --git a/packages/fether-react/src/Health/Health.js b/packages/fether-react/src/Health/Health.js index fc2f584e63645f508911f69261076f30254d8935..aba62e3430187331c7faa1587955e762dc84fd9b 100644 --- a/packages/fether-react/src/Health/Health.js +++ b/packages/fether-react/src/Health/Health.js @@ -60,6 +60,8 @@ class Health extends Component { return `Downloading... (${payload.percentage}%)`; case STATUS.GOOD: return 'Synced'; + case STATUS.NOINTERNET: + return 'No Internet connection'; case STATUS.NOPEERS: return 'Not connected to any peers'; case STATUS.RUNNING: diff --git a/packages/fether-react/src/Overlay/Overlay.js b/packages/fether-react/src/Overlay/Overlay.js index bc8407a69a4153ec7f4a15e4de6baef5bfc8664a..6408ed7729996d75552623680001f3932e67f668 100644 --- a/packages/fether-react/src/Overlay/Overlay.js +++ b/packages/fether-react/src/Overlay/Overlay.js @@ -83,6 +83,8 @@ class Overlays extends Component { return payload && payload.percentage && payload.percentage.gt(0) ? `${payload.percentage.toFixed(0)}%` : ''; + case STATUS.NOINTERNET: + return 'Please connect to the Internet'; case STATUS.NOPEERS: return 'Getting some more peers...'; default: @@ -102,6 +104,8 @@ class Overlays extends Component { return 'Your clock is not sync'; case STATUS.DOWNLOADING: return 'Downloading Parity...'; + case STATUS.NOINTERNET: + return 'No Internet connection'; case STATUS.NOPEERS: return 'Bad connectivity'; case STATUS.RUNNING: diff --git a/packages/fether-react/src/stores/healthStore.js b/packages/fether-react/src/stores/healthStore.js index 55206bb593465f7ae1754c8750277215b8b0f619..fe94cd603c2f5c79800061c9ee6e33e988287d99 100644 --- a/packages/fether-react/src/stores/healthStore.js +++ b/packages/fether-react/src/stores/healthStore.js @@ -22,17 +22,23 @@ export const STATUS = { CLOCKNOTSYNC: Symbol('CLOCKNOTSYNC'), // Local clock is not sync DOWNLOADING: Symbol('DOWNLOADING'), // Currently downloading Parity GOOD: Symbol('GOOD'), // Everything's fine + NOINTERNET: Symbol('NOINTERNET'), // No Internet connection NOPEERS: Symbol('NOPEERS'), // Not connected to any peers RUNNING: Symbol('RUNNING'), // Parity is running (only checked at startup) SYNCING: Symbol('SYNCING') // Obvious }; export class HealthStore { + @observable hasInternet; @observable peerCount; @observable syncing; @observable clockSync; constructor () { + this.setHasInternet(navigator.onLine); + window.addEventListener('online', () => this.setHasInternet(true)); + window.addEventListener('offline', () => this.setHasInternet(false)); + peerCount$(({withoutLoading: true})).subscribe(this.setPeerCount); syncing$().subscribe(this.setSyncing); @@ -106,7 +112,11 @@ export class HealthStore { return { status: STATUS.CLOCKNOTSYNC }; } - if (this.peerCount && this.peerCount.eq(0)) { + if (!this.hasInternet) { + return { status: STATUS.NOINTERNET }; + } + + if (this.peerCount && this.peerCount.lte(1)) { return { status: STATUS.NOPEERS }; } @@ -129,6 +139,11 @@ export class HealthStore { setSyncing = syncing => { this.syncing = syncing; }; + + @action + setHasInternet = hasInternet => { + this.hasInternet = hasInternet; + }; } export default new HealthStore();