vuex store of lightning balance

src/components/AuthenticatedVerticalNavbar.vue

@@ -9,8 +9,13 @@
           </span>
         </p>
         <h3>
-          {{ state.showBalance ? `162,500` : `******` }}
-          <small style="font-size: 1rem;">Sats</small>
+          <ICountUp
+            :endVal="walletBalance"
+            :options="{'startVal': walletBalance}"
+            v-if="state.showBalance"
+          />
+          <span v-else>***,***</span>
+          <small style="font-size: 1rem;">&nbsp;{{ walletUnit }}</small>
         </h3>
       </div>
       <!-- <div class="py-2"></div> -->
@@ -129,7 +134,7 @@
 </template>
 
 <script>
-// import Vue from "vue";
+import ICountUp from "vue-countup-v2";
 
 export default {
   data() {
@@ -139,7 +144,14 @@ export default {
       }
     };
   },
-  computed: {},
+  computed: {
+    walletBalance() {
+      return this.$store.getters.getWalletBalance;
+    },
+    walletUnit() {
+      return this.$store.getters.getWalletUnit;
+    }
+  },
   methods: {
     toggleBalance() {
       return (this.state.showBalance = !this.state.showBalance);
@@ -148,7 +160,9 @@ export default {
   props: {
     isMobileMenu: Boolean
   },
-  components: {}
+  components: {
+    ICountUp
+  }
 };
 </script>
 

src/components/CardWidget.vue

@@ -28,7 +28,7 @@
               <h3 class="mb-1" v-if="numericTitle">
                 <ICountUp
                   :endVal="numericTitle.value"
-                  :options="{'prefix': numericTitle.prefix, 'suffix': numericTitle.suffix}"
+                  :options="{'prefix': numericTitle.prefix, 'suffix': numericTitle.suffix, 'startVal': numericTitle.value}"
                 />
               </h3>
               <p class="text-muted mb-0">{{ subTitle }}</p>

src/components/LightningWallet.vue

@@ -5,11 +5,11 @@
     status-type="success"
     title
     :numericTitle="{
-      value: state.balance,
+      value: walletBalance,
       suffix: '',
       prefix: ''
     }"
-    sub-title="Sats"
+    :sub-title="walletUnit"
     icon="icon-app-lightning.svg"
     :loading="state.loading"
   >
@@ -334,7 +334,7 @@ export default {
   data() {
     return {
       state: {
-        balance: 162500, //net user's balance in sats
+        //balance: 162500, //net user's balance in sats
         mode: "balance", //balance (default mode), receive (create invoice), invoice, send, sent
         txs: [
           //array of last 3 txs
@@ -377,7 +377,14 @@ export default {
     };
   },
   props: {},
-  computed: {},
+  computed: {
+    walletBalance() {
+      return this.$store.getters.getWalletBalance;
+    },
+    walletUnit() {
+      return this.$store.getters.getWalletUnit;
+    }
+  },
   methods: {
     getTimeFromNow(timestamp) {
       return moment(timestamp).fromNow(); //used in the list of txs, eg "a few seconds ago"
@@ -424,7 +431,7 @@ export default {
 
       //slight delay in updating the balance so the checkmark's animation completes first
       window.setTimeout(() => {
-        this.state.balance = this.state.balance - 1000;
+        this.$store.commit("updateWalletBalance", this.walletBalance - 1000);
       }, 4000);
     },
     createInvoice() {

src/store/index.js

@@ -19,7 +19,11 @@ const state = {
   onboardingStep: 0,
   selectedWifi: "",
   isDarkMode: userSelectedDarkMode,
-  isMobileMenuOpen: true
+  isMobileMenuOpen: true,
+  wallet: {
+    balance: 162500,
+    unit: 'Sats' //Sats or BTC
+  }
 };
 
 // Getters
@@ -35,6 +39,12 @@ const getters = {
   },
   isMobileMenuOpen(state) {
     return state.isMobileMenuOpen;
+  },
+  getWalletBalance(state) {
+    return state.wallet.balance;
+  },
+  getWalletUnit(state) {
+    return state.wallet.unit;
   }
 }
 
@@ -70,6 +80,12 @@ const mutations = {
       document.body.style.overflow = "auto";
       state.isMobileMenuOpen = false
     }
+  },
+  updateWalletBalance(state, newBalance) {
+    state.wallet.balance = newBalance;
+  },
+  changeWalletUnit(state, unit) {
+    state.wallet.unit = unit;
   }
 }
 
@@ -89,6 +105,12 @@ const actions = {
   },
   toggleMobileMenu(context) {
     context.commit('toggleMobileMenu');
+  },
+  updateWalletBalance(context, newBalance) {
+    context.commit('updateWalletBalance', newBalance);
+  },
+  changeWalletUnit(context, unit) {
+    context.commit('changeWalletUnit', unit);
   }
 }