Cashu: minor UI fixes (#1462)

lnbits/extensions/cashu/templates/cashu/wallet.html

@@ -263,10 +263,15 @@ page_container %}
                           <div>{{props.row.memo}}</div>
                         </q-td> -->
                       <q-td key="bolt11" :props="props">
-                        <div>{{props.row.bolt11}}</div>
+                        <div @click="copyText(props.row.bolt11)">
+                          {{shortenString(props.row.bolt11, 20, 10)}}
+                          <q-tooltip>Click to copy</q-tooltip>
+                        </div>
                       </q-td>
                       <q-td key="hash" :props="props">
-                        <div>{{props.row.hash}}</div>
+                        <div @click="copyText(props.row.hash)">
+                          {{props.row.hash}}
+                        </div>
                       </q-td>
                       <q-td key="mint" :props="props">
                         <div>{{props.row.mint}}</div>
@@ -334,7 +339,6 @@ page_container %}
                       >
                         <div>{{props.row.amount}}</div>
                       </q-td>
-
                       <q-td key="date" :props="props">
                         <div>{{props.row.date}}</div>
                       </q-td>
@@ -342,7 +346,10 @@ page_container %}
                           <div>{{props.row.memo}}</div>
                         </q-td> -->
                       <q-td key="token" :props="props">
-                        <div>{{props.row.token}}</div>
+                        <div @click="copyText(props.row.token)">
+                          {{shortenString(props.row.token, 10, 40)}}
+                          <q-tooltip>Click to copy</q-tooltip>
+                        </div>
                       </q-td>
                     </q-tr>
                   </template>
@@ -460,14 +467,9 @@ page_container %}
         @hide="closeParseDialog"
         position="top"
       >
-        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+        <q-card class="q-pa-lg q-pt-xl">
           <div v-if="payInvoiceData.invoice">
-            <!-- <h6 v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" class="q-my-none">
-              {% raw %} {{
-              parseFloat(String(payInvoiceData.invoice.fsat).replaceAll(",",
-              "")) / 100 }} {% endraw %} asdasdasd {{LNBITS_DENOMINATION}} {%
-              raw %}
-            </h6> -->
+            {% raw %}
             <h6 class="q-my-none">
               {{ payInvoiceData.invoice.fsat }}{% endraw %}
               {{LNBITS_DENOMINATION}} {% raw %} asdasdsd
@@ -487,8 +489,12 @@ page_container %}
                 color="primary"
                 :disabled="payInvoiceData.blocking"
                 @click="melt"
-                >Pay</q-btn
-              >
+                :label="!payInvoiceData.blocking? 'Pay' : 'Paying...'"
+                ><q-spinner-tail
+                  v-if="payInvoiceData.blocking"
+                  color="white"
+                  size="1em"
+              /></q-btn>
               <q-btn v-close-popup flat color="grey" class="q-ml-auto"
                 >Cancel</q-btn
               >
@@ -618,7 +624,7 @@ page_container %}
             <q-form
               v-if="!camera.show"
               @submit="decodeRequest"
-              class="q-gutter-md"
+              class="q-gutter-md lnbits__dialog-card"
             >
               <q-input
                 ref="pasteInput"
@@ -626,7 +632,7 @@ page_container %}
                 dense
                 v-model.trim="payInvoiceData.data.request"
                 type="textarea"
-                label="Enter a Lightning invoice *"
+                label="Enter a Lightning invoice"
               >
               </q-input>
               <div class="row q-mt-lg">
@@ -1371,6 +1377,15 @@ page_container %}
         }
         return url
       },
+      shortenString: function (s, length = 20, lastchars = 5) {
+        if (s.length > length + lastchars) {
+          return (
+            s.substring(0, length) +
+            '...' +
+            s.substring(s.length - lastchars, s.length)
+          )
+        }
+      },
       activateMint: async function (url, verbose = false, stop_workers = true) {
         if (url == this.activeMintURL) {
           return
@@ -1484,17 +1499,6 @@ page_container %}
           clearInterval(this.payInvoiceData.paymentChecker)
         }, 10000)
       },
-
-      onPaymentReceived: function (paymentHash) {
-        this.fetchPayments()
-        this.fetchBalance()
-
-        if (this.receive.paymentHash === paymentHash) {
-          this.receive.show = false
-          this.receive.paymentHash = null
-          clearInterval(this.receive.paymentChecker)
-        }
-      },
       decodeQR: function (res) {
         this.camera.data = res
         // this.payInvoiceData.data.request = res
@@ -1635,31 +1639,6 @@ page_container %}
         })
       },
 
-      deleteWallet: function (walletId, user) {
-        LNbits.utils
-          .confirmDialog('Are you sure you want to delete this wallet?')
-          .onOk(() => {
-            LNbits.href.deleteWallet(walletId, user)
-          })
-      },
-      fetchPayments: function () {
-        return
-      },
-      fetchBalance: function () {},
-      exportCSV: function () {
-        // status is important for export but it is not in paymentsTable
-        // because it is manually added with payment detail link and icons
-        // and would cause duplication in the list
-        let columns = this.paymentsTable.columns
-        columns.unshift({
-          name: 'pending',
-          align: 'left',
-          label: 'Pending',
-          field: 'pending'
-        })
-        LNbits.utils.exportCSV(columns, this.payments)
-      },
-
       /////////////////////////////////// WALLET ///////////////////////////////////
       showInvoiceCreateDialog: async function () {
         console.log('##### showInvoiceCreateDialog')
@@ -2123,7 +2102,6 @@ page_container %}
       melt: async function () {
         // todo: get fees from server and add to inputs
         this.payInvoiceData.blocking = true
-
         console.log('#### pay lightning')
         const amount_invoice = this.payInvoiceData.invoice.sat
         const amount =
@@ -2307,7 +2285,6 @@ page_container %}
       },
 
       ////////////// UI HELPERS //////////////
-
       setInvoicePaid: async function (payment_hash) {
         const invoice = this.invoicesCashu.find(i => i.hash === payment_hash)
         invoice.status = 'paid'