Clarified top-up success msg (#2381)

* Update admin_api.py
Common misconception is that the top up related to the funds on the funding source. 
Success msg  extended with info that correlated funds on funding source are needed and the amount is virtual until fitting.

* chore: code format
* feat: customise top-up message
* refactor: move the `Quasar.Notify` to `components.js`
* refactor: use `this.$q.notify` instead of `Quasar.Notify.create`

---------

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/static/i18n/en.js

@@ -33,6 +33,8 @@ window.localisation.en = {
   reset_defaults_tooltip: 'Delete all settings and reset to defaults.',
   download_backup: 'Download database backup',
   name_your_wallet: 'Name your %{name} wallet',
+  wallet_topup_ok:
+    'Success creating virtual funds (%{amount} sats). Payments depend on actual funds on funding source.',
   paste_invoice_label: 'Paste an invoice, payment request or lnurl code *',
   lnbits_description:
     'Easy to set up and lightweight, LNbits can run on any Lightning Network funding source and even LNbits itself! You can run LNbits for yourself, or easily offer a custodian solution for others. Each wallet has its own API keys and there is no limit to the number of wallets you can make. Being able to partition funds makes LNbits a useful tool for money management and as a development tool. Extensions add extra functionality to LNbits so you can experiment with a range of cutting-edge technologies on the lightning network. We have made developing extensions as easy as possible, and as a free and open-source project, we encourage people to develop and submit their own.',

lnbits/static/js/admin.js

@@ -199,8 +199,9 @@ new Vue({
         .then(response => {
           this.$q.notify({
             type: 'positive',
-            message:
-              'Success! Added ' + this.wallet.amount + ' to ' + this.wallet.id,
+            message: this.$t('wallet_topup_ok', {
+              amount: this.wallet.amount
+            }),
             icon: null
           })
           this.wallet = {}

lnbits/static/js/base.js

@@ -138,22 +138,10 @@ window.LNbits = {
       )
     },
     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)
-        })
+      return LNbits.api.request('PUT', '/admin/api/v1/topup/', null, {
+        amount: credit,
+        id: wallet_id
+      })
     }
   },
   events: {

lnbits/static/js/components.js

@@ -691,9 +691,25 @@ Vue.component('lnbits-update-balance', {
   },
   methods: {
     updateBalance: function (credit) {
-      LNbits.api.updateBalance(credit, this.wallet_id).then(res => {
-        this.callback({value: res, wallet_id: this.wallet_id})
-      })
+      LNbits.api
+        .updateBalance(credit, this.wallet_id)
+        .then(res => {
+          this.callback({value: res, wallet_id: this.wallet_id})
+        })
+        .then(_ => {
+          credit = parseInt(credit)
+          this.$q.notify({
+            type: 'positive',
+            message: this.$t('wallet_topup_ok', {
+              amount: credit
+            }),
+            icon: null
+          })
+          return credit
+        })
+        .catch(function (error) {
+          LNbits.utils.notifyApiError(error)
+        })
     }
   },
   template: `