feat: basic use of custom components

lnbits/extensions/watchonly/static/js/components/my-checkbox/my-checkbox.html

@@ -0,0 +1,5 @@
+<div class="checkbox-wrapper" @click="check">
+    <div :class="{ checkbox: true, checked: checked }"></div>
+    <div class="title">{{ title }}</div>
+    <q-btn color="primary">XXX</q-btn>
+</div>

lnbits/extensions/watchonly/static/js/components/my-checkbox/my-checkbox.js

@@ -0,0 +1,18 @@
+async function initMyCheckbox(path) {
+    const t = await loadTemplateAsync(path)
+    Vue.component('my-checkbox', {
+        name:'my-checkbox',
+        template: t,
+        data() {
+            return { checked: false, title: 'Check me' }
+        },
+        methods: {
+            check() {
+                this.checked = !this.checked;
+                console.log('### checked', this.checked)
+            }
+        }
+    });
+}
+
+

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

@@ -1,4 +1,6 @@
+const watchOnly = async () => {
   Vue.component(VueQrcode.name, VueQrcode)
+  await initMyCheckbox('static/js/components/my-checkbox/my-checkbox.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -8,6 +10,10 @@ Vue.filter('reverse', function (value) {
   new Vue({
     el: '#vue',
     mixins: [windowMixin],
+    mounted: function () {
+      console.log('### mounted')
+    },
+    // components: ['my-checkbox'],
     data: function () {
       return {
         DUST_LIMIT: 546,
@@ -147,7 +153,9 @@ new Vue({
                 '/watchonly/api/v1/wallet/' + walletAccountId,
                 this.g.user.wallets[0].adminkey
               )
-            this.walletAccounts = _.reject(this.walletAccounts, function (obj) {
+              this.walletAccounts = _.reject(this.walletAccounts, function (
+                obj
+              ) {
                 return obj.id === walletAccountId
               })
               await this.refreshWalletAccounts()
@@ -163,7 +171,8 @@ new Vue({
             } catch (error) {
               this.$q.notify({
                 type: 'warning',
-              message: 'Error while deleting wallet account. Please try again.',
+                message:
+                  'Error while deleting wallet account. Please try again.',
                 timeout: 10000
               })
             }
@@ -229,7 +238,8 @@ new Vue({
           )
 
           const lastAcctiveAddress =
-          uniqueAddresses.filter(a => !a.isChange && a.hasActivity).pop() || {}
+            uniqueAddresses.filter(a => !a.isChange && a.hasActivity).pop() ||
+            {}
 
           uniqueAddresses.forEach(a => {
             a.expanded = false
@@ -326,7 +336,8 @@ new Vue({
         const lastAcctiveAddress =
           this.addresses.data
             .filter(
-            a => a.wallet === addressData.wallet && !a.isChange && a.hasActivity
+              a =>
+                a.wallet === addressData.wallet && !a.isChange && a.hasActivity
             )
             .pop() || {}
         addressData.gapLimitExceeded =
@@ -472,7 +483,8 @@ new Vue({
       },
       getFeeRateLabel: function (feeRate) {
         const fees = this.payment.recommededFees
-      if (feeRate >= fees.fastestFee) return `High Priority (${feeRate} sat/vB)`
+        if (feeRate >= fees.fastestFee)
+          return `High Priority (${feeRate} sat/vB)`
         if (feeRate >= fees.halfHourFee)
           return `Medium Priority (${feeRate} sat/vB)`
         if (feeRate >= fees.hourFee) return `Low Priority (${feeRate} sat/vB)`
@@ -718,7 +730,8 @@ new Vue({
         else if (msg[0] == COMMAND_PASSWORD) this.handleLoginResponse(msg[1])
         else if (msg[0] == COMMAND_PASSWORD_CLEAR)
           this.handleLogoutResponse(msg[1])
-      else if (msg[0] == COMMAND_SEND_PSBT) this.handleSendPsbtResponse(msg[1])
+        else if (msg[0] == COMMAND_SEND_PSBT)
+          this.handleSendPsbtResponse(msg[1])
         else if (msg[0] == COMMAND_WIPE) this.handleWipeResponse(msg[1])
         else console.log('### handleSerialPortResponse', value)
       },
@@ -1038,7 +1051,9 @@ new Vue({
 
             if (addressHistory.length) {
               // search only if it ever had any activity
-            const utxos = await this.getAddressTxsUtxoDelayed(addrData.address)
+              const utxos = await this.getAddressTxsUtxoDelayed(
+                addrData.address
+              )
               this.updateUtxosForAddress(addrData, utxos)
             }
 
@@ -1123,9 +1138,7 @@ new Vue({
       getAddressTxsDelayed: async function (addrData) {
         const {
           bitcoin: {addresses: addressesAPI}
-      } = mempoolJS({
-        hostname: new URL(this.config.data.mempool_endpoint).hostname
-      })
+        } = mempoolJS()
 
         const fn = async () =>
           addressesAPI.getAddressTxs({
@@ -1138,9 +1151,7 @@ new Vue({
       refreshRecommendedFees: async function () {
         const {
           bitcoin: {fees: feesAPI}
-      } = mempoolJS({
-        hostname: new URL(this.config.data.mempool_endpoint).hostname
-      })
+        } = mempoolJS()
 
         const fn = async () => feesAPI.getFeesRecommended()
         this.payment.recommededFees = await retryWithDelay(fn)
@@ -1148,9 +1159,7 @@ new Vue({
       getAddressTxsUtxoDelayed: async function (address) {
         const {
           bitcoin: {addresses: addressesAPI}
-      } = mempoolJS({
-        hostname: new URL(this.config.data.mempool_endpoint).hostname
-      })
+        } = mempoolJS()
 
         const fn = async () =>
           addressesAPI.getAddressTxsUtxo({
@@ -1161,9 +1170,7 @@ new Vue({
       fetchTxHex: async function (txId) {
         const {
           bitcoin: {transactions: transactionsAPI}
-      } = mempoolJS({
-        hostname: new URL(this.config.data.mempool_endpoint).hostname
-      })
+        } = mempoolJS()
 
         try {
           const response = await transactionsAPI.getTxHex({txid: txId})
@@ -1202,7 +1209,9 @@ new Vue({
           ? 0.0
           : (val / 100000000).toFixed(8)
         if (!showUnit) return value
-      return this.config.data.sats_denominated ? value + ' sat' : value + ' BTC'
+        return this.config.data.sats_denominated
+          ? value + ' sat'
+          : value + ' BTC'
       },
       getAccountDescription: function (accountType) {
         return getAccountDescription(accountType)
@@ -1217,3 +1226,5 @@ new Vue({
       }
     }
   })
+}
+watchOnly()

lnbits/extensions/watchonly/static/js/utils.js

@@ -139,3 +139,23 @@ const readFromSerialPort = serial => {
   }
   return readStringUntil
 }
+
+function loadTemplateAsync(path) {
+  const result = new Promise(resolve => {
+    const xhttp = new XMLHttpRequest()
+    console.log('### 300')
+
+    xhttp.onreadystatechange = function () {
+      if (this.readyState == 4) {
+        if (this.status == 200) resolve(this.responseText)
+
+        if (this.status == 404) resolve('Page not found.')
+      }
+    }
+
+    xhttp.open('GET', path, true)
+    xhttp.send()
+  })
+
+  return result
+}

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

@@ -31,7 +31,9 @@
             </q-btn>
           </div>
 
-          <div class="col-auto q-pr-lg"></div>
+          <div class="col-auto q-pr-lg">
+            <my-checkbox></my-checkbox>
+          </div>
           <div class="col-auto q-pl-lg">
             <q-input
               borderless
@@ -1710,5 +1712,6 @@
 <script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
+<script src="{{ url_for('watchonly_static', path='js/components/my-checkbox/my-checkbox.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}