refactor: move copyText and formatBalance into utils (#3584)

lnbits/static/js/init-app.js

@@ -95,6 +95,8 @@ window.i18n = new VueI18n.createI18n({
 window.app.mixin({
   data() {
     return {
+      api: window._lnbitsApi,
+      utils: window._lnbitsUtils,
       g: window.g,
       utils: window._lnbitsUtils,
       ...WINDOW_SETTINGS
@@ -107,6 +109,11 @@ window.app.mixin({
       const isVueRoute = matchedRoute?.matched?.length > 0
       return isVueRoute
     }
+  },
+  // backwards compatibility for extensions, should not be used in the future
+  methods: {
+    copyText: window._lnbitsUtils.copyText,
+    formatBalance: window._lnbitsUtils.formatBalance
   }
 })
 

lnbits/static/js/utils.js

@@ -1,4 +1,12 @@
 window._lnbitsUtils = {
+  copyText(text, message, position) {
+    Quasar.copyToClipboard(text).then(() => {
+      Quasar.Notify.create({
+        message: message || 'Copied to clipboard!',
+        position: position || 'bottom'
+      })
+    })
+  },
   confirmDialog(msg) {
     return Quasar.Dialog.create({
       message: msg,
@@ -52,6 +60,12 @@ window._lnbitsUtils = {
     const timestampMs = new Date(isoDateString).getTime()
     return moment.utc(timestampMs).local().fromNow()
   },
+  formatBalance(amount, denomination = 'sats') {
+    if (denomination === 'sats') {
+      return LNbits.utils.formatSat(amount) + ' sats'
+    }
+    return LNbits.utils.formatCurrency(amount / 100, denomination)
+  },
   formatCurrency(value, currency) {
     return new Intl.NumberFormat(window.i18n.global.locale, {
       style: 'currency',

lnbits/static/js/windowMixin.js

@@ -60,21 +60,6 @@ window.windowMixin = {
         }
       })
     },
-    formatBalance(amount) {
-      if (LNBITS_DENOMINATION != 'sats') {
-        return LNbits.utils.formatCurrency(amount / 100, LNBITS_DENOMINATION)
-      } else {
-        return LNbits.utils.formatSat(amount) + ' sats'
-      }
-    },
-    copyText(text, message, position) {
-      Quasar.copyToClipboard(text).then(() => {
-        Quasar.Notify.create({
-          message: message || 'Copied to clipboard!',
-          position: position || 'bottom'
-        })
-      })
-    },
     refreshRoute() {
       const path = window.location.pathname
       console.log(path)

lnbits/templates/components/lnbits-header-wallets.vue

@@ -85,7 +85,9 @@
           </div>
           <div class="row items-center q-pt-sm">
             <h6 class="q-my-none ellipsis full-width">
-              <strong v-text="formatBalance(wallet.sat)"></strong>
+              <strong
+                v-text="utils.formatBalance(wallet.sat, g.denomination)"
+              ></strong>
             </h6>
           </div>
         </q-card-section>

lnbits/templates/components/lnbits-manage-wallet-list.vue

@@ -40,7 +40,9 @@
           ><span v-text="walletRec.name"></span
         ></q-item-label>
         <q-item-label class="q-my-none ellipsis full-width" caption>
-          <strong v-text="formatBalance(walletRec.sat)"></strong>
+          <strong
+            v-text="utils.formatBalance(walletRec.sat, g.denomination)"
+          ></strong>
         </q-item-label>
       </q-item-section>
       <q-item-section

lnbits/templates/pages/wallet.vue

@@ -30,7 +30,9 @@
                     <div class="col-auto">
                       <div class="text-h3 q-my-none full-width">
                         <strong
-                          v-text="formatBalance(g.wallet.sat)"
+                          v-text="
+                            utils.formatBalance(g.wallet.sat, g.denomination)
+                          "
                           class="text-no-wrap"
                           :style="{
                             fontSize: 'clamp(0.75rem, 10vw, 3rem)',
@@ -94,7 +96,13 @@
                   <span
                     class="text-h5 text-italic"
                     style="opacity: 0.75"
-                    v-text="formatBalance(g.wallet.sat)"
+                    v-text="
+                      utils.formatBalance(
+                        g.wallet.sat,
+                        g.denomination,
+                        g.denomination
+                      )
+                    "
                   >
                   </span>
                 </div>
@@ -432,7 +440,9 @@
         <div class="column content-center text-center q-mb-md">
           <div v-if="!g.isFiatPriority">
             <h4 class="q-my-none text-bold">
-              <span v-text="formatBalance(parse.invoice.sat)"></span>
+              <span
+                v-text="utils.formatBalance(parse.invoice.sat, g.denomination)"
+              ></span>
             </h4>
           </div>
           <div v-else>
@@ -454,7 +464,11 @@
           <div v-if="g.fiatTracking">
             <div v-if="g.isFiatPriority">
               <h5 class="q-my-none text-bold">
-                <span v-text="formatBalance(parse.invoice.sat)"></span>
+                <span
+                  v-text="
+                    utils.formatBalance(parse.invoice.sat, g.denomination)
+                  "
+                ></span>
               </h5>
             </div>
             <div v-else style="opacity: 0.75">

lnbits/templates/pages/wallets.vue

@@ -93,7 +93,12 @@
                   <div class="row items-center q-pt-sm">
                     <h6 class="q-my-none ellipsis full-width">
                       <strong
-                        v-text="formatBalance(props.row.balance_msat / 1000)"
+                        v-text="
+                          utils.formatBalance(
+                            props.row.balance_msat / 1000,
+                            g.denomination
+                          )
+                        "
                       ></strong>
                     </h6>
                   </div>