toggle sats/btc invoice amount

src/components/AuthenticatedVerticalNavbar.vue

@@ -18,7 +18,7 @@
             <span class="loading-placeholder loading-placeholder-lg w-75" v-else></span>
           </span>
           <span v-else>***,***</span>
-          <sats-btc-switch class="mt-3"></sats-btc-switch>
+          <sats-btc-switch class="mt-3" size="md"></sats-btc-switch>
         </h3>
       </div>
       <!-- <div class="py-2"></div> -->

src/components/LightningWallet.vue

@@ -308,17 +308,22 @@
             </a>
           </div>
 
-          <label class="sr-onlsy" for="input-sats">Sats</label>
-          <b-input
-            id="input-sats"
-            class="mb-3 neu-input"
-            type="number"
-            size="lg"
-            min="1"
-            autofocus
-            v-model.number="receive.amount"
-            :disabled="receive.isGeneratingInvoice"
-          ></b-input>
+          <label class="sr-onlsy" for="input-sats">Amount</label>
+          <b-input-group class="mb-3 neu-input-group">
+            <b-input
+              id="input-sats"
+              class="neu-input"
+              type="text"
+              size="lg"
+              autofocus
+              v-model.number="receive.amountInput"
+              :disabled="receive.isGeneratingInvoice"
+              style="padding-right: 82px"
+            ></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>
 
           <label class="sr-onlsy" for="input-description">
             Description
@@ -365,6 +370,7 @@
             <!-- Invoice amount + description -->
             <span v-else>
               Invoice of
+              <!-- {{ receive.amount | unit | localize}} -->
               <b>
                 {{ receive.amount | unit | localize }}
                 {{ unit | formatUnit }}
@@ -633,7 +639,7 @@
         style="border-radius: 0; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; padding-top: 1rem; padding-bottom: 1rem;"
         @click="createInvoice"
         v-else-if="mode === 'receive'"
-        :disabled="!receive.amount || receive.amount < 1"
+        :disabled="!receive.amount || receive.amount <= 0"
       >Create Invoice</b-button>
 
       <!-- spacer if no button -->
@@ -658,6 +664,7 @@ import CardWidget from "@/components/CardWidget";
 import InputCopy from "@/components/InputCopy";
 import QrCode from "@/components/Utility/QrCode.vue";
 import CircularCheckmark from "@/components/Utility/CircularCheckmark.vue";
+import SatsBtcSwitch from "@/components/Utility/SatsBtcSwitch";
 
 export default {
   data() {
@@ -737,6 +744,7 @@ export default {
       //reset state
       this.receive = {
         amount: null,
+        amountInput: "",
         description: "",
         paymentRequest: "",
         invoiceQR: "1",
@@ -966,6 +974,13 @@ export default {
           this.receive.invoiceStatusPollerInprogress = false;
         }, 1000);
       }
+    },
+    "receive.amountInput": function(val) {
+      if (this.unit === "sats") {
+        this.receive.amount = val;
+      } else if (this.unit === "btc") {
+        this.receive.amount = val * 1e8;
+      }
     }
   },
   async created() {
@@ -981,7 +996,8 @@ export default {
     CountUp,
     QrCode,
     InputCopy,
-    CircularCheckmark
+    CircularCheckmark,
+    SatsBtcSwitch
   }
 };
 </script>

src/components/Utility/SatsBtcSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="toggleUnit" class="toggle">
+  <div @click="toggleUnit" class="toggle" :class="`toggle-${size}`">
     <div class="toggle-bg-text justify-content-center d-flex align-items-center">
       <span class="text-center">Sats</span>
       <span class="text-center">BTC</span>
@@ -16,6 +16,12 @@
 
 <script>
 export default {
+  props: {
+    size: {
+      type: String, //sm, md, lg
+      default: "md"
+    }
+  },
   data() {
     return {};
   },
@@ -39,7 +45,8 @@ export default {
 <style scoped lang="scss">
 .toggle {
   border-radius: 54px;
-  width: 130px;
+  width: 120px;
+  height: 36px;
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -48,37 +55,60 @@ export default {
   background: linear-gradient(346.78deg, #f7fcfc 0%, #fafcfa 100%);
   border: 1px solid rgba(0, 0, 0, 0.04);
   box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.1);
-}
-.toggle-bg-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  span {
-    width: 65px;
+  .toggle-switch {
+    margin: 2px;
+    height: 30px;
+    width: 60px;
     border-radius: 30px;
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     font-size: 1rem;
     font-weight: 600;
-    color: #cfd2d4;
+    background: #fff;
+    //   color: #fff;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    &.toggle-left {
+      transform: translateX(0);
+    }
+    &.toggle-right {
+      transform: translateX(54px);
+    }
+  }
+  .toggle-bg-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    span {
+      width: 60px;
+      border-radius: 30px;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #cfd2d4;
+    }
+  }
+  &.toggle-sm {
+    width: 80px;
+    height: 26px;
+    border-radius: 30px;
+    .toggle-bg-text {
+      span {
+        font-size: 0.75rem;
+      }
+    }
+    .toggle-switch {
+      margin: 2px;
+      height: 20px;
+      width: 40px;
+      font-size: 0.75rem;
+      border-radius: 30px;
+      &.toggle-left {
+        transform: translateX(0);
+      }
+      &.toggle-right {
+        transform: translateX(34px);
+      }
+    }
   }
-}
-.toggle-switch {
-  margin: 2px;
-  height: 30px;
-  width: 65px;
-  border-radius: 30px;
-  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-  font-size: 1rem;
-  font-weight: 600;
-  background: #fff;
-  //   color: #fff;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-}
-.toggle-left {
-  transform: translateX(0);
-}
-.toggle-right {
-  transform: translateX(59px);
 }
 </style>

src/global-styles/custom.scss

@@ -97,6 +97,28 @@ a {
         box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.2);
     }
 }
+
+.neu-input-group {
+    .neu-input {
+        padding-right: 2rem;
+        border-radius: 0.3rem !important;
+    }
+    .neu-input-group-append {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        // border: 2px solid rgba(0, 0, 0, 0.02);
+        border-top-right-radius: 0.3rem;
+        border-bottom-right-radius: 0.3rem;
+        z-index: 3;
+        // background: rgb(255,255,255);
+        // background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9346113445378151) 22%, rgba(255,255,255,1) 100%);
+        height: 100%;
+        padding-left: 0.5rem;
+        padding-right:0.5rem;
+    }
+}
   
 
 .dropdown-menu {