Merge pull request #863 from motorina0/onchain_review_fixes

onchain extension - review & fix

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

@@ -111,7 +111,7 @@
         <q-td colspan="100%">
           <div class="row items-center q-mt-md q-mb-lg">
             <div class="col-2 q-pr-lg"></div>
-            <div class="col-4 q-pr-lg">
+            <div class="col-2 q-pr-lg">
               <q-btn
                 unelevated
                 dense
@@ -123,6 +123,16 @@
                 QR Code</q-btn
               >
             </div>
+            <div class="col-2 q-pr-lg">
+              <q-btn
+                outline
+                color="grey"
+                icon="content_copy"
+                @click="copyText(props.row.address)"
+                class="q-ml-sm"
+                >Copy</q-btn
+              >
+            </div>
             <div class="col-2 q-pr-lg">
               <q-btn
                 outline

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

@@ -74,6 +74,16 @@ async function addressList(path) {
       satBtc(val, showUnit = true) {
         return satOrBtc(val, showUnit, this.satsDenominated)
       },
+      // todo: bad. base.js not present in custom components
+      copyText: function (text, message, position) {
+        var notify = this.$q.notify
+        Quasar.utils.copyToClipboard(text).then(function () {
+          notify({
+            message: message || 'Copied to clipboard!',
+            position: position || 'bottom'
+          })
+        })
+      },
       getWalletName: function (walletId) {
         const wallet = (this.accounts || []).find(wl => wl.id === walletId)
         return wallet ? wallet.title : 'unknown'

lnbits/extensions/watchonly/static/components/serial-signer/serial-signer.js

@@ -69,7 +69,8 @@ async function serialSigner(path) {
           })
 
           navigator.serial.addEventListener('disconnect', () => {
-            console.log('### navigator.serial event: disconnected!', event)
+            console.log('### navigator.serial event: disconnected!')
+            this.selectedPort = null
             this.hww.authenticated = false
             this.$q.notify({
               type: 'warning',
@@ -113,14 +114,13 @@ async function serialSigner(path) {
               /* Ignore the error */
             })
           if (this.selectedPort) await this.selectedPort.close()
-          this.selectedPort = null
+
           this.$q.notify({
             type: 'positive',
             message: 'Serial port disconnected!',
             timeout: 5000
           })
         } catch (error) {
-          this.selectedPort = null
           this.$q.notify({
             type: 'warning',
             message: 'Cannot close serial port!',
@@ -128,6 +128,7 @@ async function serialSigner(path) {
             timeout: 10000
           })
         } finally {
+          this.selectedPort = null
           this.hww.authenticated = false
         }
       },

lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html

@@ -1,16 +1,16 @@
 <div>
   <q-card>
     <div class="row items-center no-wrap q-mb-md">
-      <div class="col-2 q-ml-lg">
+      <div class="col-md-2 col-xs-4 q-ml-lg">
         <q-btn unelevated @click="show = true" color="primary" icon="settings">
         </q-btn>
       </div>
-      <div class="col-8">
+      <div class="col-md-8 col-xs-4">
         <div class="row justify-center q-gutter-x-md items-center">
-          <div class="text-h3">{{satBtc(total)}}</div>
+          <div :class="{'text-h4': $q.screen.gt.md}">{{satBtc(total)}}</div>
         </div>
       </div>
-      <div class="col-2 float-right">
+      <div class="col-md-2 col-xs-4 q-pr-lg">
         <slot name="serial"></slot>
       </div>
     </div>

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

@@ -2,7 +2,7 @@
   <q-card>
     <q-card-section>
       <div class="row items-center no-wrap q-mb-md">
-        <div class="col">
+        <div class="col-4">
           <q-btn-dropdown
             split
             unelevated
@@ -30,9 +30,8 @@
             </q-list>
           </q-btn-dropdown>
         </div>
-
+        <div class="col-4 q-pl-lg"></div>
-        <div class="col-auto q-pr-lg"></div>
+        <div class="col-4 q-pl-lg">
-        <div class="col-auto q-pl-lg">
           <q-input
             borderless
             dense

lnbits/extensions/watchonly/templates/watchonly/index.html

@@ -13,6 +13,7 @@
           :network="config.network"
           :sats-denominated="config.sats_denominated"
           @signed:psbt="updateSignedPsbt"
+          class="q-pr-lg float-right"
         ></serial-signer>
       </template>
     </wallet-config>
@@ -33,7 +34,7 @@
     {% raw %}
     <q-card>
       <div class="row q-pt-sm q-pb-sm items-center no-wrap q-mb-md">
-        <div class="col-3 q-pl-md">
+        <div class="col-md-3 col-sm-5 q-pl-md">
           <q-btn
             unelevated
             class="btn-full"
@@ -43,14 +44,14 @@
             >Scan Blockchain</q-btn
           >
         </div>
-        <div class="col-6">
+        <div class="col-md-6 col-sm-2 q-pl-md">
           <q-spinner
             v-if="scan.scanning == true"
             color="primary"
             size="2.55em"
           ></q-spinner>
         </div>
-        <div class="col-3 q-pr-md">
+        <div class="col-md-3 col-sm-5 q-pr-md">
           <q-btn
             v-if="!showPayment"
             unelevated
@@ -170,14 +171,24 @@
         ></qrcode>
       </q-responsive>
       <p v-if="currentAddress">
+        <q-btn
+          flat
+          dense
+          size="ms"
+          icon="content_copy"
+          @click="copyText(props.row.address)"
+          class="q-ml-sm"
+        ></q-btn>
+
         {{ currentAddress.address }}
+
         <q-btn
           flat
           dense
           size="ms"
           icon="launch"
           type="a"
-          :href="mempoolHostname + '/address/' + currentAddress.address"
+          :href="'https://' + mempoolHostname + '/address/' + currentAddress.address"
           target="_blank"
         ></q-btn>
       </p>