feat: detect offline and online changes (#2088)

src/renderer/App.vue

@@ -118,7 +118,8 @@ export default {
     isReady: false,
     isUriTransactionOpen: false,
     uriTransactionSchema: {},
-    aliveRouteComponents: []
+    aliveRouteComponents: [],
+    onLineStatus: window.navigator.onLine || false
   }),
 
   keepableRoutes: Object.freeze({
@@ -254,6 +255,13 @@ export default {
     },
     language (value) {
       this.applyPluginLanguage(value)
+    },
+    onLineStatus (connected) {
+      if (connected) {
+        this.$success(this.$t('COMMON.INTERNET_STATUS.WITH_INTERNET_CONNECTION'))
+      } else {
+        this.$error(this.$t('COMMON.INTERNET_STATUS.NO_INTERNET_CONNECTION'))
+      }
     }
   },
 
@@ -284,9 +292,15 @@ export default {
 
   mounted () {
     this.__watchProcessURL()
+    window.addEventListener('online', this.updateOnlineStatus)
+    window.addEventListener('offline', this.updateOnlineStatus)
   },
 
   methods: {
+    updateOnlineStatus (event) {
+      this.onLineStatus = event.type === 'online'
+    },
+
     async loadEssential () {
       // We need to await plugins in order for all plugins to load properly
       try {

src/renderer/i18n/locales/en-US.js

@@ -28,6 +28,10 @@ export default {
     IS_MARKET_CHART_ENABLED: 'Price chart on the dashboard',
     INITIALIZING: 'Initializing...',
     NO_INTERNET_CONNECTION: 'Initialization is taking longer than expected. Please check your internet connectivity.',
+    INTERNET_STATUS: {
+      NO_INTERNET_CONNECTION: 'No internet connection. Please check your internet connectivity!',
+      WITH_INTERNET_CONNECTION: 'Internet connectivity established!'
+    },
     LANGUAGE: 'Application Language',
     LEDGER: 'Ledger',
     LEDGER_WALLET: 'This is a Ledger wallet',