calculate lnd balance from channels

src/components/ChannelList.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="channel-list-container">
     <div class="channel-list">
-      <b-row
-        v-for="(channel, index) in [...channels, ...channels]"
-        :key="index"
-        class="py-3 px-4 channel"
-        align-v="center"
-      >
+      <transition-group name="list" appear>
+        <div v-for="(channel, index) in channels" :key="index" class="py-3 px-4 channel">
+          <b-row align-v="center">
             <b-col col cols="12" xl="3">
               <!-- on large screens -->
               <div class="d-none d-xl-block">
@@ -72,6 +69,8 @@
             </b-col>
           </b-row>
         </div>
+      </transition-group>
+    </div>
   </div>
 </template>
 
@@ -150,7 +149,7 @@ export default {
   }
 }
 .channel-list {
-  max-height: 20rem;
+  height: 20rem; //to do: change to max-height
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch; //momentum scroll on iOS
 }
@@ -166,4 +165,27 @@ export default {
   border-radius: 5px;
   background: red;
 }
+
+//list transitions
+
+.list-enter-active,
+.list-leave-active {
+  transition: transform 0.8s, opacity 0.8s ease;
+}
+.list-enter {
+  transform: translate3d(0, 10px, 0);
+  opacity: 0;
+}
+.list-enter-to {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+.list-leave {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+.list-leave-to {
+  transform: translate3d(0, 10px, 0);
+  opacity: 0;
+}
 </style>

src/components/LightningWallet.vue

@@ -572,7 +572,7 @@ export default {
 
       //refresh data
       this.$store.dispatch("lightning/getTransactions");
-      this.$store.dispatch("lightning/getBalance");
+      this.$store.dispatch("lightning/getChannels");
 
       //clear any intervals
       window.clearInterval(this.state.receive.invoiceStatusPoller);
@@ -623,7 +623,7 @@ export default {
 
         //refresh
         this.$store.dispatch("lightning/getTransactions");
-        this.$store.dispatch("lightning/getBalance");
+        this.$store.dispatch("lightning/getChannels");
       } catch (error) {
         this.state.error = JSON.stringify(error.response)
           ? error.response.data
@@ -770,7 +770,7 @@ export default {
               window.clearInterval(this.state.receive.invoiceStatusPoller);
 
               //refresh
-              this.$store.dispatch("lightning/getBalance");
+              this.$store.dispatch("lightning/getChannels");
               this.$store.dispatch("lightning/getTransactions");
             }
 

src/layouts/DashboardLayout.vue

@@ -119,7 +119,7 @@ export default {
       this.$store.dispatch("bitcoin/getBalance");
       this.$store.dispatch("bitcoin/getTransactions");
       this.$store.dispatch("lightning/getTransactions");
-      this.$store.dispatch("lightning/getBalance");
+      this.$store.dispatch("lightning/getChannels");
     }
   },
   created() {