btc/sats system wide switch complete

src/components/BitcoinWallet.vue

@@ -275,15 +275,7 @@
                 <small>Mining fee</small>
               </span>
               <span class="text-right text-muted">
-                <b>
-                  {{
-                  (
-                  walletBalance -
-                  withdraw.amount -
-                  fees.fast.total
-                  ) | unit | localize
-                  }}
-                </b>
+                <b>{{ projectedBalanceInSats | unit | localize }}</b>
                 <small>&nbsp;{{ unit | formatUnit }}</small>
                 <br />
                 <small>Remaining balance</small>
@@ -477,7 +469,7 @@
 import moment from "moment";
 import { mapState, mapGetters } from "vuex";
 
-import { satsToBtc } from "@/helpers/units.js";
+import { satsToBtc, btcToSats } from "@/helpers/units.js";
 import API from "@/helpers/api";
 
 import CountUp from "@/components/Utility/CountUp";
@@ -526,7 +518,15 @@ export default {
     }),
     ...mapGetters({
       transactions: "bitcoin/transactions"
-    })
+    }),
+    projectedBalanceInSats() {
+      const remainingBalanceInSats =
+        this.$store.state.bitcoin.balance.total -
+        this.withdraw.amount -
+        this.fees.fast.total;
+
+      return remainingBalanceInSats;
+    }
   },
   methods: {
     getTimeFromNow(timestamp) {
@@ -627,8 +627,6 @@ export default {
         satPerByte: parseInt(this.fees.fast.perByte)
       };
 
-      console.log(payload);
-
       try {
         const res = await API.post(
           `${process.env.VUE_APP_API_URL}/v1/lnd/transaction`,
@@ -653,10 +651,19 @@ export default {
   watch: {
     "withdraw.amountInput": function(val) {
       if (this.unit === "sats") {
-        this.withdraw.amount = val;
+        this.withdraw.amount = Number(val);
       } else if (this.unit === "btc") {
-        this.withdraw.amount = val * 1e8;
+        this.withdraw.amount = btcToSats(val);
+      }
+      this.fetchWithdrawalFees();
+    },
+    unit: function(val) {
+      if (val === "sats") {
+        this.withdraw.amount = Number(this.withdraw.amountInput);
+      } else if (val === "btc") {
+        this.withdraw.amount = btcToSats(this.withdraw.amountInput);
       }
+      this.fetchWithdrawalFees();
     }
   },
   async created() {

src/components/Channels/Open.vue

@@ -11,19 +11,26 @@
           size="lg"
           v-model="peerConnectionCode"
           :disabled="isOpening"
+          autofocus
         ></b-input>
       </b-col>
       <b-col col cols="12" sm="6">
-        <label class="sr-onlsy" for="funding-amount">Sats</label>
-        <b-input
-          id="funding-amount"
-          class="mb-3 neu-input"
-          type="number"
-          size="lg"
-          v-model="fundingAmount"
-          @input="fetchFees"
-          :disabled="isOpening"
-        ></b-input>
+        <label class="sr-onlsy" for="funding-amount">Amount</label>
+        <b-input-group class="mb-3 neu-input-group">
+          <b-input
+            id="funding-amount"
+            class="neu-input"
+            type="text"
+            size="lg"
+            v-model="fundingAmountInput"
+            @input="fetchFees"
+            style="padding-right: 82px"
+            :disabled="isOpening"
+          ></b-input>
+          <b-input-group-append class="neu-input-group-append">
+            <sats-btc-switch class="align-self-center" size="sm"></sats-btc-switch>
+          </b-input-group-append>
+        </b-input-group>
 
         <!-- <small>{{ btc.confirmed.toLocaleString() }} Sats available out of {{ btc.total.toLocaleString() }} and {{ btc.pending.toLocaleString() }} pending</small> -->
       </b-col>
@@ -31,18 +38,21 @@
       <b-col col cols="12">
         <div class="mt-2 d-flex w-100 justify-content-between">
           <div>
-            <small class="text-danger align-self-center" v-if="error">{{
+            <small class="text-danger align-self-center" v-if="error">
+              {{
               error
-            }}</small>
+              }}
+            </small>
             <small
               class="text-muted align-self-center"
               v-else-if="fee.fast.total"
-              >Mining fee: {{ fee.fast.total }} Sats</small
-            >
+            >Mining fee: {{ fee.fast.total }} Sats</small>
           </div>
-          <b-button type="submit" variant="success" :disabled="isOpening">{{
+          <b-button type="submit" variant="success" :disabled="isOpening">
+            {{
             this.isOpening ? "Opening..." : "Open Channel"
-          }}</b-button>
+            }}
+          </b-button>
         </div>
       </b-col>
     </b-row>
@@ -50,13 +60,20 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 import API from "@/helpers/api";
+import { btcToSats } from "@/helpers/units.js";
+
+import SatsBtcSwitch from "@/components/Utility/SatsBtcSwitch";
+
 export default {
   props: {},
   data() {
     return {
       peerConnectionCode: "",
-      fundingAmount: "",
+      fundingAmountInput: "",
+      fundingAmount: 0,
       isOpening: false,
       fee: {
         fast: {
@@ -85,15 +102,15 @@ export default {
     };
   },
   computed: {
-    // btc() {
-    //   return this.$store.state.bitcoin.balance;
-    // }
+    ...mapState({
+      unit: state => state.system.unit
+    })
   },
   methods: {
     async openChannel() {
       this.isOpening = true;
 
-      if (!this.peerConnectionCode || !this.fundingAmount) {
+      if (!this.peerConnectionCode || this.fundingAmount <= 0) {
         this.error = "Please fill all fields";
         this.isOpening = false;
         return;
@@ -175,10 +192,18 @@ export default {
             amt: this.fundingAmount
           };
 
-          const estimates = await API.get(
-            `${process.env.VUE_APP_API_URL}/v1/lnd/channel/estimateFee`,
-            { params: payload }
-          );
+          let estimates;
+
+          try {
+            estimates = await API.get(
+              `${process.env.VUE_APP_API_URL}/v1/lnd/channel/estimateFee`,
+              { params: payload }
+            );
+          } catch (error) {
+            if (error.response && error.response.data) {
+              this.error = error.response.data;
+            }
+          }
 
           if (estimates) {
             for (const [speed, estimate] of Object.entries(estimates)) {
@@ -200,7 +225,26 @@ export default {
       }, 500);
     }
   },
-  components: {}
+  watch: {
+    unit: function(val) {
+      if (val === "sats") {
+        this.fundingAmount = Number(this.fundingAmountInput);
+      } else if (val === "btc") {
+        this.fundingAmount = btcToSats(this.fundingAmountInput);
+      }
+      this.fetchFees();
+    },
+    fundingAmountInput: function(val) {
+      if (this.unit === "sats") {
+        this.fundingAmount = Number(val);
+      } else if (this.unit === "btc") {
+        this.fundingAmount = btcToSats(val);
+      }
+    }
+  },
+  components: {
+    SatsBtcSwitch
+  }
 };
 </script>
 

src/components/LightningWallet.vue

@@ -656,7 +656,7 @@ import moment from "moment";
 
 import { mapState } from "vuex";
 
-import { satsToBtc } from "@/helpers/units.js";
+import { satsToBtc, btcToSats } from "@/helpers/units.js";
 import API from "@/helpers/api";
 
 import CountUp from "@/components/Utility/CountUp";
@@ -986,9 +986,9 @@ export default {
     },
     "receive.amountInput": function(val) {
       if (this.unit === "sats") {
-        this.receive.amount = val;
+        this.receive.amount = Number(val);
       } else if (this.unit === "btc") {
-        this.receive.amount = val * 1e8;
+        this.receive.amount = btcToSats(val);
       }
     }
   },

src/components/Utility/CountUp.vue

@@ -131,7 +131,7 @@ export default {
           this.create();
         } else {
           if (newVal.endVal !== oldVal.endVal) {
-            this.instance.update(newVal);
+            this.update(newVal.endVal);
           }
         }
       },

src/views/Lightning.vue

@@ -115,10 +115,15 @@
             <div class="px-3 px-lg-4">
               <b-row>
                 <b-col col cols="6" xl="3">
-                  <stat title="Connections" :value="numPeers" suffix="Peers"></stat>
+                  <stat title="Connections" :value="numPeers" suffix="Peers" showNumericChange></stat>
                 </b-col>
                 <b-col col cols="6" xl="3">
-                  <stat title="Active Channels" :value="numActiveChannels" suffix="Channels"></stat>
+                  <stat
+                    title="Active Channels"
+                    :value="numActiveChannels"
+                    suffix="Channels"
+                    showNumericChange
+                  ></stat>
                 </b-col>
                 <b-col col cols="6" xl="3">
                   <stat