refactor: extract wallet-config

Makefile

@@ -7,7 +7,7 @@ format: prettier isort black
 check: mypy checkprettier checkblack
 
 prettier: $(shell find lnbits -name "*.js" -name ".html")
-	./node_modules/.bin/prettier --write lnbits/static/js/*.js lnbits/core/static/js/*.js lnbits/extensions/*/templates/*/*.html ./lnbits/core/templates/core/*.html lnbits/templates/*.html lnbits/extensions/*/static/js/*.js
+	./node_modules/.bin/prettier --write lnbits/static/js/*.js lnbits/core/static/js/*.js lnbits/extensions/*/templates/*/*.html ./lnbits/core/templates/core/*.html lnbits/templates/*.html lnbits/extensions/*/static/js/*.js lnbits/extensions/*/static/components/*/*.js
 
 black: $(shell find lnbits -name "*.py")
 	./venv/bin/black lnbits
@@ -21,7 +21,7 @@ isort: $(shell find lnbits -name "*.py")
 	./venv/bin/isort --profile black lnbits
 
 checkprettier: $(shell find lnbits -name "*.js" -name ".html")
-	./node_modules/.bin/prettier --check lnbits/static/js/*.js lnbits/core/static/js/*.js lnbits/extensions/*/templates/*/*.html ./lnbits/core/templates/core/*.html lnbits/templates/*.html lnbits/extensions/*/static/js/*.js
+	./node_modules/.bin/prettier --check lnbits/static/js/*.js lnbits/core/static/js/*.js lnbits/extensions/*/templates/*/*.html ./lnbits/core/templates/core/*.html lnbits/templates/*.html lnbits/extensions/*/static/js/*.js lnbits/extensions/*/static/components/*/*.js
 
 checkblack: $(shell find lnbits -name "*.py")
 	./venv/bin/black --check lnbits

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

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

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

@@ -0,0 +1,40 @@
+<div>
+    <q-card>
+
+        <div class="row items-center no-wrap q-mb-md">
+            <div class="col-11">
+                <div class="row justify-center q-gutter-x-md items-center">
+                    <div class="text-h3 q-pa-sm">{{satBtc(total)}}</div>
+                </div>
+            </div>
+            <div class="col-1">
+                <q-btn unelevated @click="config.show = true" color="primary" icon="settings">
+                </q-btn>
+            </div>
+        </div>
+    </q-card>
+
+    <q-dialog v-model="config.show" position="top">
+        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+            <q-form @submit="updateConfig" class="q-gutter-md">
+                <q-input filled dense v-model.trim="config.data.mempool_endpoint" type="text" label="Mempool Endpoint">
+                </q-input>
+
+                <q-input filled dense v-model.number="config.data.receive_gap_limit" type="number" min="0"
+                    label="Receive Gap Limit"></q-input>
+
+                <q-input filled dense v-model.number="config.data.change_gap_limit" type="number" min="0"
+                    label="Change Gap Limit"></q-input>
+
+                <q-toggle :label="config.data.sats_denominated ? 'sats denominated' : 'BTC denominated'"
+                    color="secodary" v-model="config.data.sats_denominated"></q-toggle>
+
+                <div class="row q-mt-lg">
+                    <q-btn unelevated color="primary" :disable="
+            !config.data.mempool_endpoint " type="submit">Update</q-btn>
+                    <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+                </div>
+            </q-form>
+        </q-card>
+    </q-dialog>
+</div>

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

@@ -0,0 +1,47 @@
+async function walletConfig(path) {
+  const t = await loadTemplateAsync(path)
+  Vue.component('wallet-config', {
+    name: 'wallet-config',
+    template: t,
+
+    props: ['total', 'config', 'adminkey'],
+    data: function () {
+      return {}
+    },
+
+    methods: {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, this.config.data.sats_denominated)
+      },
+      updateConfig: async function () {
+        // const wallet = this.g.user.wallets[0]
+        try {
+          await LNbits.api.request(
+            'PUT',
+            '/watchonly/api/v1/config',
+            this.adminkey,
+            this.config.data
+          )
+          this.config.show = false
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      },
+      getConfig: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/watchonly/api/v1/config',
+            this.adminkey
+          )
+          this.config.data = data
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      }
+    },
+    created: async function () {
+        await this.getConfig()
+    }
+  })
+}

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

@@ -1,6 +1,7 @@
 const watchOnly = async () => {
   Vue.component(VueQrcode.name, VueQrcode)
-  await initMyCheckbox('static/components/my-checkbox/my-checkbox.html')
+
+  await walletConfig('static/components/wallet-config/wallet-config.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -10,9 +11,6 @@ const watchOnly = async () => {
   new Vue({
     el: '#vue',
     mixins: [windowMixin],
-    mounted: function () {
-      console.log('### mounted')
-    },
     data: function () {
       return {
         DUST_LIMIT: 546,
@@ -81,32 +79,6 @@ const watchOnly = async () => {
 
     methods: {
       //################### CONFIG ###################
-      getConfig: async function () {
-        try {
-          const {data} = await LNbits.api.request(
-            'GET',
-            '/watchonly/api/v1/config',
-            this.g.user.wallets[0].adminkey
-          )
-          this.config.data = data
-        } catch (error) {
-          LNbits.utils.notifyApiError(error)
-        }
-      },
-      updateConfig: async function () {
-        const wallet = this.g.user.wallets[0]
-        try {
-          await LNbits.api.request(
-            'PUT',
-            '/watchonly/api/v1/config',
-            wallet.adminkey,
-            this.config.data
-          )
-          this.config.show = false
-        } catch (error) {
-          LNbits.utils.notifyApiError(error)
-        }
-      },
 
       //################### WALLETS ###################
       getWalletName: function (walletId) {
@@ -1202,15 +1174,7 @@ const watchOnly = async () => {
       },
 
       satBtc(val, showUnit = true) {
-        const value = this.config.data.sats_denominated
-          ? LNbits.utils.formatSat(val)
-          : val == 0
-          ? 0.0
-          : (val / 100000000).toFixed(8)
-        if (!showUnit) return value
-        return this.config.data.sats_denominated
-          ? value + ' sat'
-          : value + ' BTC'
+        return satOrBtc(val, showUnit, this.config.data.sats_denominated)
       },
       getAccountDescription: function (accountType) {
         return getAccountDescription(accountType)
@@ -1218,7 +1182,6 @@ const watchOnly = async () => {
     },
     created: async function () {
       if (this.g.user.wallets.length) {
-        await this.getConfig()
         await this.refreshWalletAccounts()
         await this.refreshAddresses()
         await this.scanAddressWithAmount()

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

@@ -140,10 +140,19 @@ const readFromSerialPort = serial => {
   return readStringUntil
 }
 
+function satOrBtc(val, showUnit = true, showSats = false) {
+  const value = showSats
+    ? LNbits.utils.formatSat(val)
+    : val == 0
+    ? 0.0
+    : (val / 100000000).toFixed(8)
+  if (!showUnit) return value
+  return showSats ? value + ' sat' : value + ' BTC'
+}
+
 function loadTemplateAsync(path) {
   const result = new Promise(resolve => {
     const xhttp = new XMLHttpRequest()
-    console.log('### 300')
 
     xhttp.onreadystatechange = function () {
       if (this.readyState == 4) {

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

@@ -2,25 +2,12 @@
 %} {% block page %}
 <div class="row q-col-gutter-md">
   <div class="col-12 col-md-7 q-gutter-y-md">
-    <q-card>
+    <wallet-config
+      :total="utxos.total"
+      :config="config"
+      :adminkey="g.user.wallets[0].adminkey"
+    ></wallet-config>
     {% raw %}
-      <div class="row items-center no-wrap q-mb-md">
-        <div class="col-11">
-          <div class="row justify-center q-gutter-x-md items-center">
-            <div class="text-h3 q-pa-sm">{{satBtc(utxos.total)}}</div>
-          </div>
-        </div>
-        <div class="col-1">
-          <q-btn
-            unelevated
-            @click="config.show = true"
-            color="primary"
-            icon="settings"
-          >
-          </q-btn>
-        </div>
-      </div>
-    </q-card>
 
     <q-card>
       <q-card-section>
@@ -31,9 +18,7 @@
             </q-btn>
           </div>
 
-          <div class="col-auto q-pr-lg">
-            <my-checkbox></my-checkbox>
-          </div>
+          <div class="col-auto q-pr-lg"></div>
           <div class="col-auto q-pl-lg">
             <q-input
               borderless
@@ -1455,57 +1440,6 @@
       </q-form>
     </q-card>
   </q-dialog>
-  <q-dialog v-model="config.show" position="top">
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <q-form @submit="updateConfig" class="q-gutter-md">
-        <q-input
-          filled
-          dense
-          v-model.trim="config.data.mempool_endpoint"
-          type="text"
-          label="Mempool Endpoint"
-        ></q-input>
-
-        <q-input
-          filled
-          dense
-          v-model.number="config.data.receive_gap_limit"
-          type="number"
-          min="0"
-          label="Receive Gap Limit"
-        ></q-input>
-
-        <q-input
-          filled
-          dense
-          v-model.number="config.data.change_gap_limit"
-          type="number"
-          min="0"
-          label="Change Gap Limit"
-        ></q-input>
-
-        <q-toggle
-          :label="config.data.sats_denominated ? 'sats denominated' : 'BTC denominated'"
-          color="secodary"
-          v-model="config.data.sats_denominated"
-        ></q-toggle>
-
-        <div class="row q-mt-lg">
-          <q-btn
-            unelevated
-            color="primary"
-            :disable="
-            !config.data.mempool_endpoint "
-            type="submit"
-            >Update</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
-        </div>
-      </q-form>
-    </q-card>
-  </q-dialog>
 
   <q-dialog v-model="addresses.show" position="top">
     <q-card v-if="addresses.data" class="q-pa-lg lnbits__dialog-card">
@@ -1713,5 +1647,6 @@
 <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='components/my-checkbox/my-checkbox.js') }}"></script>
+<script src="{{ url_for('watchonly_static', path='components/wallet-config/wallet-config.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}