fix: show erro messages

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

@@ -17,68 +17,7 @@
               :sats-denominated="sats_denominated"
               @update:outputs="handleOutputsChange"
             ></send-to>
-            <!-- <div class="row items-center no-wrap q-mb-md">
-                <div class="col-12">
-                  <q-table
-                    :columns="summaryTable.columns"
-                    :data="summary.data"
-                    hide-bottom
-                  >
-                    <template v-slot:body="props">
-                      <q-tr :props="props">
-                        <q-td key="totalInputs" :props="props">
-                          <q-badge class="text-subtitle2" color="green">
-                            {{satBtc(getTotalSelectedUtxoAmount())}}
-                          </q-badge>
-                        </q-td>
-                        <q-td key="totalOutputs" :props="props">
-                          <q-badge class="text-subtitle2" color="blue">
-                            {{satBtc(totalPayedAmount)}}
-                          </q-badge>
-                        </q-td>
-                        <q-td key="fees" :props="props">
-                          <q-badge class="text-subtitle2" color="orange">
-                            {{satBtc(feeValue)}}
-                          </q-badge>
-                        </q-td>
-                        <q-td key="change" :props="props">
-                          <q-badge
-                            v-if="payment.changeAmount >= 0"
-                            class="text-subtitle2"
-                            color="green"
-                          >
-                            {{payment.changeAmount ?
-                            satBtc(payment.changeAmount): 'no change'}}
-                          </q-badge>
-                          <q-badge
-                            v-if="payment.changeAmount > 0 && payment.changeAmount < DUST_LIMIT"
-                            color="red"
-                          >
-                            Below dust limit. Will be used as feee.
-                          </q-badge>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </q-table>
-                </div>
-              </div> -->
 
-            <!--               
-              <div
-                v-if="payment.changeAmount < 0"
-                class="row items-center no-wrap q-mb-md"
-              >
-                <div class="col-12">
-                  <q-badge
-                    class="text-subtitle2 float-left"
-                    color="yellow"
-                    text-color="black"
-                  >
-                    The payed amount is higher than the selected amount!
-                  </q-badge>
-                </div>
-              </div>
-  -->
           </q-card-section>
         </q-card>
 
@@ -177,10 +116,23 @@
                 ></q-toggle>
               </div>
 
-              <div class="col-8">
+              <div class="col-4">
+                <q-badge
+                  v-if="changeAmount > 0 && changeAmount < DUST_LIMIT"
+                  class="text-subtitle2 float-right"
+                  color="yellow"
+                  text-color="black"
+                >
+                  Below dust limit. Will be used as fee.
+                </q-badge>
+              </div>
+              <div class="col-4">
                 <div class="float-right">
                   <span>Change:</span>
-                  <span class="text-subtitle2 q-ml-md">
+                  <span v-if="changeAmount < 0" class="text-subtitle2 q-ml-md">
+                    {{satBtc(0)}}
+                  </span>
+                  <span v-if="changeAmount >= 0" class="text-subtitle2 q-ml-md">
                     {{satBtc(changeAmount)}}
                   </span>
                 </div>
@@ -223,11 +175,25 @@
 
         <div class="row items-center no-wrap q-mb-md q-pt-lg">
           <div class="col-3">
-            <q-btn unelevated color="green" type="submit" class="btn-full"
+            <q-btn
+              unelevated
+              :disabled="changeAmount < 0"
+              color="green"
+              type="submit"
+              class="btn-full"
               >Check & Send</q-btn
             >
           </div>
-          <div class="col-9"></div>
+          <div class="col-9">
+            <q-badge
+              v-if="changeAmount < 0"
+              class="text-subtitle2 float-right"
+              color="yellow"
+              text-color="black"
+            >
+              The payed amount is higher than the selected amount!
+            </q-badge>
+          </div>
         </div>
       </q-tab-panel>
 

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

@@ -53,8 +53,7 @@ async function payment(path) {
           .reduce((t, a) => t + (a.amount || 0), 0)
       },
       changeAmount: function () {
-        return Math.max(
+        return (
-          0,
           this.selectedAmount -
           this.totalPayedAmount -
           this.feeRate * this.txSizeNoChange

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

@@ -111,7 +111,6 @@ async function utxoList(path) {
         this.applyUtxoSelectionMode()
       },
       applyUtxoSelectionMode: function () {
-        console.log('### this.utxoSelectAmount', this.utxoSelectAmount)
         const mode = this.utxoSelectionMode
         const isSelectAll = mode === 'Select All'
         if (isSelectAll) {
@@ -119,10 +118,11 @@ async function utxoList(path) {
           return
         }
 
-        this.utxos.forEach(u => (u.selected = false))
         const isManual = mode === 'Manual'
         if (isManual || !this.utxoSelectAmount) return
 
+        this.utxos.forEach(u => (u.selected = false))
+
         const isSmallerFirst = mode === 'Smaller Inputs First'
         const isLargerFirst = mode === 'Larger Inputs First'
         let selectedUtxos = this.utxos.slice()

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

@@ -31,10 +31,6 @@ const tableData = {
     total: 0
   },
   payment: {
-    data: [{address: '', amount: undefined}], // todo: remove
-
-    changeAmount: 0,
-
     fee: 0,
     txSize: 0,
     tx: null,