channel management complete

src/components/Channels/Channel.vue

@@ -4,11 +4,8 @@
       <b-col col cols="12" xl="3">
         <!-- on large screens -->
         <div class="d-none d-xl-block">
-          <status
-            :variant="getStatus(channel.type)['variant']"
-            size="sm"
-          >{{ getStatus(channel.type)['text'] }}</status>
-          <div>
+          <status :variant="statusVariant" size="sm">{{ channel.status }}</status>
+          <div v-if="channel.status !== 'Closing'">
             <span
               class
               style="margin-left: 2px;"
@@ -18,11 +15,8 @@
 
         <!-- on small screens -->
         <div class="d-xl-none d-flex justify-content-between align-items-center mb-1">
-          <status
-            :variant="getStatus(channel.type)['variant']"
-            size="sm"
-          >{{ getStatus(channel.type)['text'] }}</status>
-          <div>
+          <status :variant="statusVariant" size="sm">{{ channel.status }}</status>
+          <div v-if="channel.status !== 'Closing'">
             <small
               class
               style="margin-left: 2px;"
@@ -60,12 +54,31 @@ import Status from "@/components/Status";
 import Bar from "@/components/Channels/Bar";
 
 export default {
-  computed: {},
+  computed: {
+    statusVariant() {
+      if (this.channel.status === "Online") {
+        return "success";
+      }
+      if (this.channel.status === "Offline") {
+        return "default";
+      }
+      if (this.channel.status === "Opening") {
+        return "warning";
+      }
+      if (this.channel.status === "Closing") {
+        return "danger";
+      }
+      if (this.channel.status === "Unkown") {
+        return "danger";
+      }
+      return "default";
+    }
+  },
   data() {
     return {};
   },
   methods: {
-    getStatus() {
+    getStatusVariant() {
       if (this.channel.type === "OPEN") {
         return {
           text: "Online",

src/components/Channels/Manage.vue

@@ -35,7 +35,10 @@
           >{{ channel.isPrivate ? 'Private' : 'Public' }} Channel</span>
         </div>
 
-        <div class="d-flex justify-content-between align-items-center mb-3">
+        <div
+          class="d-flex justify-content-between align-items-center mb-3"
+          v-if="channel.status !== 'Closing'"
+        >
           <span class="text-muted">Opened By</span>
           <span
             class="text-capitalize font-weight-bold"
@@ -63,7 +66,10 @@
           >{{ parseInt(channel.capacity).toLocaleString() }} Sats</span>
         </div>
 
-        <div class="d-flex justify-content-between align-items-center mb-3">
+        <div
+          class="d-flex justify-content-between align-items-center mb-3"
+          v-if="channel.status !== 'Closing' && channel.status !== 'Opening'"
+        >
           <span class="text-muted">Withdrawal Timelock</span>
           <span
             class="text-capitalize font-weight-bold"
@@ -80,7 +86,7 @@
           </div>
         </div>
 
-        <div class="d-flex justify-content-end">
+        <div class="d-flex justify-content-end" v-if="canCloseChannel">
           <b-button class="mt-2" variant="danger" @click="reviewChannelClose">Close Channel</b-button>
         </div>
       </div>
@@ -89,7 +95,7 @@
         <h3 class="mb-3">Are you sure you want to close this channel?</h3>
         <p>
           Your local channel balance of
-          <b>{{ parseInt(channel.localBalance).toLocaleString() }} Sats</b> will be returned to your Bitcoin wallet.
+          <b>{{ parseInt(channel.localBalance).toLocaleString() }} Sats</b> (excluding mining fee) will be returned to your Bitcoin wallet.
         </p>
         <b-alert
           variant="warning"
@@ -123,7 +129,17 @@ export default {
       isClosing: false
     };
   },
-  computed: {},
+  computed: {
+    canCloseChannel() {
+      if (
+        this.channel.status === "Opening" ||
+        this.channel.status === "Closing"
+      ) {
+        return false;
+      }
+      return true;
+    }
+  },
   methods: {
     reviewChannelClose() {
       this.isReviewingChannelClose = true;

src/global-styles/custom.scss

@@ -25,6 +25,9 @@ $dark-mode-card-bg: #2A3244;
     &muted {
         fill: #6c757d;
     }
+    &default {
+        fill: #6c757d;
+    }
 }
 // .vh100 {
 //     min-height: 100vh;

src/store/modules/lightning.js

@@ -211,9 +211,9 @@ const actions = {
 
           if (channel.type === "OPEN") {
             if (channel.active) {
-              channel.status = "online";
+              channel.status = "Online";
             } else {
-              channel.status = "offline";
+              channel.status = "Offline";
             }
 
             if (remoteBalance > maxReceive) {
@@ -227,7 +227,7 @@ const actions = {
             confirmedBalance += localBalance;
           } else if (channel.type === "PENDING_OPEN_CHANNEL") {
             pendingBalance += localBalance;
-            channel.status = "opening";
+            channel.status = "Opening";
           } else if (
             [
               "WAITING_CLOSING_CHANNEL",
@@ -236,13 +236,13 @@ const actions = {
             ].indexOf(channel.type) > -1
           ) {
             pendingBalance += localBalance;
-            channel.status = "closing";
+            channel.status = "Closing";
 
             // Lnd doesn't provide initiator or autopilot data via rpc. So, we just display a generic closing message.
             channel.name = "Closing Channel";
             channel.purpose = "A channel that is in the process of closing";
           } else {
-            channel.status = "unknown";
+            channel.status = "Unknown";
           }
 
           if (channel.name === "" && !channel.initiator) {

src/views/Lightning.vue

@@ -105,7 +105,7 @@
         <lightning-wallet></lightning-wallet>
       </b-col>
       <b-col col cols="12" md="6" xl="8">
-        <card-widget header="Channels">
+        <card-widget header="Payment Channels">
           <template v-slot:header-right>
             <b-button
               variant="outline-primary"