refactor: topup wallet + into component (#2217)

* refactor: topup wallet `+` into component
this will also be used in the usermanager
* bundle

lnbits/core/templates/core/wallet.html

@@ -37,38 +37,13 @@
             <h3 class="q-my-none text-no-wrap">
               <strong v-text="formattedBalance"></strong>
               <small>{{LNBITS_DENOMINATION}}</small>
-              <q-btn
+              <lnbits-update-balance
                 v-if="'{{user.super_user}}' == 'True'"
+                :wallet_id="this.g.wallet.id"
                 flat
+                :callback="updateBalanceCallback"
                 round
-                color="primary"
-                icon="add"
-                size="md"
-              >
-                <q-popup-edit
-                  class="bg-accent text-white"
-                  v-slot="scope"
-                  v-model="credit"
-                >
-                  <q-input
-                    filled
-                    :label='$t("credit_label", { denomination: "{{LNBITS_DENOMINATION}}"})'
-                    :hint="$t('credit_hint')"
-                    v-model="scope.value"
-                    dense
-                    autofocus
-                    :mask="'{{LNBITS_DENOMINATION}}' != 'sats' ? '#.##' : '#'"
-                    fill-mask="0"
-                    reverse-fill-mask
-                    :step="'{{LNBITS_DENOMINATION}}' != 'sats' ? '0.01' : '1'"
-                    @keyup.enter="updateBalance(scope.value)"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="edit" />
-                    </template>
-                  </q-input>
-                </q-popup-edit>
-              </q-btn>
+              />
             </h3>
             <div class="row">
               <div class="col">

lnbits/static/js/base.js

@@ -144,6 +144,24 @@ window.LNbits = {
         '/api/v1/payments/' + paymentHash,
         wallet.inkey
       )
+    },
+    updateBalance: function (credit, wallet_id) {
+      return LNbits.api
+        .request('PUT', '/admin/api/v1/topup/', null, {
+          amount: credit,
+          id: wallet_id
+        })
+        .then(_ => {
+          Quasar.Notify.create({
+            type: 'positive',
+            message: 'Success! Added ' + credit + ' sats to ' + wallet_id,
+            icon: null
+          })
+          return parseInt(credit)
+        })
+        .catch(function (error) {
+          LNbits.utils.notifyApiError(error)
+        })
     }
   },
   events: {

lnbits/static/js/components.js

@@ -664,3 +664,58 @@ Vue.component('lnbits-dynamic-fields', {
     this.formData = this.buildData(this.options, this.value)
   }
 })
+
+Vue.component('lnbits-update-balance', {
+  mixins: [windowMixin],
+  props: ['wallet_id', 'callback'],
+  computed: {
+    denomination() {
+      return LNBITS_DENOMINATION
+    },
+    admin() {
+      return this.g.user.admin
+    }
+  },
+  data: function () {
+    return {
+      credit: 0
+    }
+  },
+  methods: {
+    updateBalance: function (credit) {
+      LNbits.api.updateBalance(credit, this.wallet_id).then(res => {
+        this.callback({value: res, wallet_id: this.wallet_id})
+      })
+    }
+  },
+  template: `
+      <q-btn
+        v-if="admin"
+        round
+        color="primary"
+        icon="add"
+        size="sm"
+      >
+        <q-popup-edit
+          class="bg-accent text-white"
+          v-slot="scope"
+          v-model="credit"
+        >
+          <q-input
+            filled
+            :label='$t("credit_label", { denomination: denomination })'
+            :hint="$t('credit_hint')"
+            v-model="scope.value"
+            dense
+            autofocus
+            @keyup.enter="updateBalance(scope.value)"
+          >
+            <template v-slot:append>
+              <q-icon name="edit" />
+            </template>
+          </q-input>
+        </q-popup-edit>
+        <q-tooltip>Topup Wallet</q-tooltip>
+      </q-btn>
+    `
+})

lnbits/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 103
+const CACHE_VERSION = 104
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/static/js/wallet.js

@@ -352,33 +352,6 @@ new Vue({
       this.parse.camera.show = false
       this.focusInput('textArea')
     },
-    updateBalance: function (credit) {
-      LNbits.api
-        .request(
-          'PUT',
-          '/admin/api/v1/topup/',
-          this.g.user.wallets[0].adminkey,
-          {
-            amount: credit,
-            id: this.g.wallet.id
-          }
-        )
-        .then(response => {
-          this.$q.notify({
-            type: 'positive',
-            message:
-              'Success! Added ' +
-              credit +
-              ' sats to ' +
-              this.g.user.wallets[0].id,
-            icon: null
-          })
-          this.balance += parseInt(credit)
-        })
-        .catch(function (error) {
-          LNbits.utils.notifyApiError(error)
-        })
-    },
     closeParseDialog: function () {
       setTimeout(() => {
         clearInterval(this.parse.paymentChecker)
@@ -832,6 +805,9 @@ new Vue({
     formatFiat(currency, amount) {
       return LNbits.utils.formatCurrency(amount, currency)
     },
+    updateBalanceCallback: function (res) {
+      this.balance += res.value
+    },
     exportCSV: function () {
       // status is important for export but it is not in paymentsTable
       // because it is manually added with payment detail link and icons