loading screen

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
+    <loading v-if="loading" :text="loadingText"></loading>
     <!-- component matched by the route will render here -->
-    <router-view></router-view>
+    <router-view v-else></router-view>
   </div>
 </template>
 
@@ -10,14 +11,75 @@
 </style>
 
 <script>
+import { mapState } from "vuex";
+import Loading from "@/components/Loading";
+
 export default {
   name: "App",
+  data() {
+    return {
+      loading: true,
+      loadingText: "Loading..."
+    };
+  },
+  computed: {
+    ...mapState({
+      isApiOperational: state => state.system.api.operational,
+      isBitcoinOperational: state => state.bitcoin.operational,
+      isBitcoinCalibrating: state => state.bitcoin.calibrating,
+      isLndOperational: state => state.lightning.operational,
+      isLndUnlocked: state => state.lightning.unlocked
+    })
+  },
   methods: {
+    //to do: move this to the specific layout that needs this 100vh fix
     updateViewPortHeightCSS() {
       return document.documentElement.style.setProperty(
         "--vh100",
         `${window.innerHeight}px`
       );
+    },
+    async checkIfLoading() {
+      // First check if API is activx
+      await this.$store.dispatch("system/getApi");
+      if (!this.isApiOperational) {
+        this.loading = true;
+        this.loadingText = "Starting API...";
+        return;
+      }
+
+      // Then check if bitcoind is operational
+      await this.$store.dispatch("bitcoin/getStatus");
+      if (!this.isBitcoinOperational) {
+        this.loading = true;
+        this.loadingText = "Starting Bitcoin Core...";
+        return;
+      }
+
+      // Then check if bitcoind is calibrating
+      if (this.isBitcoinCalibrating) {
+        this.loading = true;
+        this.loadingText = "Calibrating Bitcoin Core...";
+        return;
+      }
+
+      // Then check if lnd is operational
+
+      await this.$store.dispatch("lightning/getStatus");
+      if (!this.isLndOperational) {
+        this.loading = true;
+        this.loadingText = "Starting LND...";
+        return;
+      }
+
+      //Then check if lnd is unlocked
+      if (!this.isLndUnlocked) {
+        this.loading = true;
+        this.loadingText = "Unlocking LND...";
+        return;
+      }
+
+      this.loading = false;
     }
   },
   created() {
@@ -25,6 +87,11 @@ export default {
     //for 100vh consistency
     window.addEventListener("resize", this.updateViewPortHeightCSS);
 
+    //immediately check loading on first load, then check every 3 seconds...
+    this.checkIfLoading();
+    window.setInterval(this.checkIfLoading, 5000);
+
+    //to do: remove this
     this.$store.dispatch("fetchWalletBalance");
   },
   mounted() {
@@ -36,6 +103,10 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.updateViewPortHeightCSS);
+    window.clearInterval(this.checkIfLoading);
+  },
+  components: {
+    Loading
   }
 };
 </script>

src/components/AuthenticatedVerticalNavbar.vue

@@ -16,7 +16,7 @@
           />-->
           <span v-if="state.showBalance">{{ walletBalance.toLocaleString() }}</span>
           <span v-else>***,***</span>
-          <small style="font-size: 1rem;">&nbsp;{{ walletUnit }}</small>
+          <small style="font-size: 1rem;">&nbsp;Sats</small>
         </h3>
       </div>
       <!-- <div class="py-2"></div> -->
@@ -148,12 +148,9 @@ export default {
   computed: {
     walletBalance() {
       return (
-        this.$store.state.wallet.balance.onChain +
-        this.$store.state.wallet.balance.offChain
+        this.$store.state.bitcoin.balance.total +
+        this.$store.state.lightning.balance.confirmed
       );
-    },
-    walletUnit() {
-      return this.$store.getters.getWalletUnit;
     }
   },
   methods: {

src/components/Loading.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="d-flex flex-column align-items-center justify-content-center min-vh100 p-2">
+    <img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
+
+    <!-- <h1 class="text-center mb-2">loading</h1> -->
+    <b-spinner class="my-4" variant="primary"></b-spinner>
+    <p class="text-muted w-75 text-center">{{ text }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: { text: String },
+  created() {},
+  methods: {},
+  components: {}
+};
+</script>
+
+<style lang="scss">
+.logo {
+  height: 20vh;
+  max-height: 200px;
+  width: auto;
+}
+</style>

src/store/index.js

@@ -1,8 +1,8 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import axios from "axios";
 
 //Modules
+import system from './modules/system';
 import bitcoin from './modules/bitcoin';
 import lightning from './modules/lightning';
 
@@ -25,13 +25,6 @@ const state = {
   selectedWifi: "",
   isDarkMode: userSelectedDarkMode,
   isMobileMenuOpen: true,
-  wallet: {
-    balance: {
-      onChain: 0,
-      offChain: 0
-    },
-    unit: 'Sats' //Sats or BTC
-  }
 };
 
 // Getters
@@ -47,12 +40,6 @@ const getters = {
   },
   isMobileMenuOpen(state) {
     return state.isMobileMenuOpen;
-  },
-  getWalletBalance(state) {
-    return state.wallet.balance.onChain + state.wallet.balance.offChain;
-  },
-  getWalletUnit(state) {
-    return state.wallet.unit;
   }
 }
 
@@ -88,16 +75,6 @@ const mutations = {
       document.body.style.overflow = "auto";
       state.isMobileMenuOpen = false
     }
-  },
-  updateWalletBalance(state, { balance, type }) {
-    if (type === 'onChain') {
-      state.wallet.balance.onChain = balance;
-    } else if (type === 'offChain') {
-      state.wallet.balance.offChain = balance;
-    }
-  },
-  changeWalletUnit(state, unit) {
-    state.wallet.unit = unit;
   }
 }
 
@@ -117,41 +94,6 @@ const actions = {
   },
   toggleMobileMenu(context) {
     context.commit('toggleMobileMenu');
-  },
-  // updateWalletBalance(context, newBalance) {
-  //   context.commit('updateWalletBalance', newBalance, 'offChain');
-  // },
-  changeWalletUnit(context, unit) {
-    context.commit('changeWalletUnit', unit);
-  },
-  fetchWalletBalance(context) {
-    axios
-      .get(`v1/lnd/wallet/btc`)
-      .then(res => {
-        const { totalBalance } = res.data;
-        context.commit('updateWalletBalance', { balance: Number(totalBalance), type: 'onChain' });
-      })
-      .catch(error => {
-        console.log(error);
-        alert(error);
-      })
-      .finally(() => {
-        // this.state.loading = false;
-      });
-
-    axios
-      .get(`v1/lnd/wallet/lightning`)
-      .then(res => {
-        const { balance, pendingOpenBalance } = res.data;
-        context.commit('updateWalletBalance', { balance: Number(balance) + Number(pendingOpenBalance), type: 'offChain' });
-      })
-      .catch(error => {
-        console.log(error);
-        alert(error);
-      })
-      .finally(() => {
-        // this.state.loading = false;
-      });
   }
 }
 
@@ -161,6 +103,7 @@ export default new Vuex.Store({
   actions,
   getters,
   modules: {
+    system,
     bitcoin,
     lightning
   }

src/store/modules/system.js

@@ -0,0 +1,38 @@
+import API from '@/helpers/api';
+
+// Initial state
+const state = () => ({
+    api: {
+        operational: false,
+        version: ""
+    }
+});
+
+// Functions to update the state directly
+const mutations = {
+    setApi(state, api) {
+        state.api = api;
+    }
+};
+
+// Functions to get data from the API
+const actions = {
+    async getApi({ commit }) {
+        const api = await API.get(`ping`);
+        commit('setApi', {
+            operational: !!(api && api.version),
+            version: api && api.version ? api.version : ""
+        });
+    }
+};
+
+const getters = {
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+};