feat: UI/UX improvements

lnbits/extensions/watchonly/static/components/address-list/address-list.js

@@ -4,7 +4,7 @@ async function addressList(path) {
     name: 'address-list',
     template,
 
-    props: ['accounts', 'mempool_endpoint', 'inkey'],
+    props: ['accounts', 'mempool_endpoint', 'inkey', 'sats_denominated'],
     watch: {
       immediate: true,
       accounts(newVal, oldVal) {

lnbits/extensions/watchonly/static/components/payment/payment.js

@@ -0,0 +1,21 @@
+async function payment(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('payment', {
+    name: 'payment',
+    template,
+
+    props: ['mempool_endpoint', 'sats_denominated'],
+
+    data: function () {
+      return {}
+    },
+
+    methods: {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, this['sats_denominated'])
+      }
+    },
+
+    created: async function () {}
+  })
+}

lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html

@@ -1,18 +1,18 @@
 <q-card>
   <q-card-section>
     <div class="row items-center no-wrap q-mb-md">
-      <!-- <div v-if="payment.show" class="col-3 q-pr-lg">
+      <div v-if="selectable" class="col-3 q-pr-lg">
         <q-select
           filled
           dense
           emit-value
-          v-model="payment.utxoSelectionMode"
+          v-model="utxoSelectionMode"
-          :options="payment.utxoSelectionModes"
+          :options="utxoSelectionModes"
           label="Selection Mode"
           @input="applyUtxoSelectionMode"
         ></q-select>
       </div>
-      <div v-if="payment.show" class="col-1 q-pr-lg">
+      <div v-if="selectable" class="col-1 q-pr-lg">
         <q-btn
           outline
           icon="refresh"
@@ -20,9 +20,9 @@
           @click="applyUtxoSelectionMode"
           class="q-ml-sm"
         ></q-btn>
-      </div> -->
+      </div>
-      <!-- <div v-if="payment.show" class="col-5 q-pr-lg"></div> -->
+      <div v-if="selectable" class="col-5 q-pr-lg"></div>
-      <div class="col-9 q-pr-lg"></div>
+      <div v-if="!selectable" class="col-9 q-pr-lg"></div>
       <div class="col-3 float-right">
         <q-input
           borderless
@@ -43,7 +43,7 @@
       dense
       :data="utxos"
       row-key="id"
-      :columns="utxosTable.columns"
+      :columns="columns"
       :pagination.sync="utxosTable.pagination"
       :filter="utxosTable.filter"
     >
@@ -60,7 +60,7 @@
             />
           </q-td>
 
-          <q-td key="selected" :props="props">
+          <q-td v-if="selectable" key="selected" :props="props">
             <div>
               <q-checkbox v-model="props.row.selected"></q-checkbox>
             </div>
@@ -133,10 +133,9 @@
       <template v-slot:bottom-row>
         <q-tr>
           <q-td colspan="100%">
-            <div class="row items-center no-wrap q-mb-md">
+            <div class="row items-center no-wrap q-mb-md q-pt-lg">
-              
               <div class="col-12">
-                <div >
+                <div>
                   <span class="text-weight-bold">Selected Amount: </span>
 
                   <q-badge class="text-subtitle2 q-ml-lg" color="green"

lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js

@@ -4,7 +4,14 @@ async function utxoList(path) {
     name: 'utxo-list',
     template,
 
-    props: ['utxos', 'accounts', 'sats_denominated', 'mempool_endpoint'],
+    props: [
+      'utxos',
+      'accounts',
+      'selectable',
+      'payed-amount',
+      'sats_denominated',
+      'mempool_endpoint'
+    ],
 
     data: function () {
       return {
@@ -18,7 +25,8 @@ async function utxoList(path) {
             {
               name: 'selected',
               align: 'left',
-              label: ''
+              label: '',
+              selectable: true
             },
             {
               name: 'status',
@@ -59,7 +67,21 @@ async function utxoList(path) {
             rowsPerPage: 10
           },
           filter: ''
-        }
+        },
+        utxoSelectionModes: [
+          'Manual',
+          'Random',
+          'Select All',
+          'Smaller Inputs First',
+          'Larger Inputs First'
+        ],
+        utxoSelectionMode: 'Random'
+      }
+    },
+
+    computed: {
+      columns: function() {
+        return this.utxosTable.columns.filter(c => c.selectable ? this.selectable : true)
       }
     },
 
@@ -76,6 +98,37 @@ async function utxoList(path) {
           .filter(u => u.selected)
           .reduce((t, a) => t + (a.amount || 0), 0)
         return total
+      },
+      applyUtxoSelectionMode: function () {
+        const payedAmount = this['payed-amount']
+        const mode = this.payment.utxoSelectionMode
+        this.utxos.data.forEach(u => (u.selected = false))
+        const isManual = mode === 'Manual'
+        if (isManual || !payedAmount) return
+
+        const isSelectAll = mode === 'Select All'
+        if (isSelectAll || payedAmount >= this.utxos.total) {
+          this.utxos.data.forEach(u => (u.selected = true))
+          return
+        }
+        const isSmallerFirst = mode === 'Smaller Inputs First'
+        const isLargerFirst = mode === 'Larger Inputs First'
+
+        let selectedUtxos = this.utxos.data.slice()
+        if (isSmallerFirst || isLargerFirst) {
+          const sortFn = isSmallerFirst
+            ? (a, b) => a.amount - b.amount
+            : (a, b) => b.amount - a.amount
+          selectedUtxos.sort(sortFn)
+        } else {
+          // default to random order
+          selectedUtxos = _.shuffle(selectedUtxos)
+        }
+        selectedUtxos.reduce((total, utxo) => {
+          utxo.selected = total < payedAmount
+          total += utxo.amount
+          return total
+        }, 0)
       }
     },
 

lnbits/extensions/watchonly/static/js/index.js

@@ -6,6 +6,7 @@ const watchOnly = async () => {
   await addressList('static/components/address-list/address-list.html')
   await history('static/components/history/history.html')
   await utxoList('static/components/utxo-list/utxo-list.html')
+  await payment('static/components/payment/payment.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -29,6 +30,7 @@ const watchOnly = async () => {
         currentAddress: null,
 
         tab: 'addresses',
+        paymentTab: 'destination',
 
         config: {
           data: {
@@ -79,7 +81,8 @@ const watchOnly = async () => {
         history: [],
 
         showAddress: false,
-        addressNote: ''
+        addressNote: '',
+        showPayment: false
       }
     },
 
@@ -279,8 +282,9 @@ const watchOnly = async () => {
           ) || {}
       },
       goToPaymentView: async function () {
-        this.payment.show = true
+        // this.payment.show = true
-        this.tab = 'utxos'
+        this.showPayment = true
+        // this.tab = 'utxos'
         await this.initPaymentData()
       },
       sendMaxToAddress: function (paymentAddress = {}) {
@@ -880,37 +884,6 @@ const watchOnly = async () => {
           .reduce((t, a) => t + (a.amount || 0), 0)
         return total
       },
-      applyUtxoSelectionMode: function () {
-        const payedAmount = this.getTotalPaymentAmount()
-        const mode = this.payment.utxoSelectionMode
-        this.utxos.data.forEach(u => (u.selected = false))
-        const isManual = mode === 'Manual'
-        if (isManual || !payedAmount) return
-
-        const isSelectAll = mode === 'Select All'
-        if (isSelectAll || payedAmount >= this.utxos.total) {
-          this.utxos.data.forEach(u => (u.selected = true))
-          return
-        }
-        const isSmallerFirst = mode === 'Smaller Inputs First'
-        const isLargerFirst = mode === 'Larger Inputs First'
-
-        let selectedUtxos = this.utxos.data.slice()
-        if (isSmallerFirst || isLargerFirst) {
-          const sortFn = isSmallerFirst
-            ? (a, b) => a.amount - b.amount
-            : (a, b) => b.amount - a.amount
-          selectedUtxos.sort(sortFn)
-        } else {
-          // default to random order
-          selectedUtxos = _.shuffle(selectedUtxos)
-        }
-        selectedUtxos.reduce((total, utxo) => {
-          utxo.selected = total < payedAmount
-          total += utxo.amount
-          return total
-        }, 0)
-      },
 
       //################### MEMPOOL API ###################
       getAddressTxsDelayed: async function (addrData) {

lnbits/extensions/watchonly/static/js/tables.js

@@ -64,14 +64,7 @@ const tableData = {
     signedTx: null,
     signedTxHex: null,
     sentTxId: null,
-    utxoSelectionModes: [
+
-      'Manual',
-      'Random',
-      'Select All',
-      'Smaller Inputs First',
-      'Larger Inputs First'
-    ],
-    utxoSelectionMode: 'Manual',
     signModes: [
       {
         label: 'Serial Port Device',