working, also fixed the button

lnbits/core/templates/core/wallet.html

@@ -36,7 +36,7 @@
             <div class="row">
               <div class="col-1" style="max-width: 30px">
                 <q-btn
-                  v-if="g.wallet.currency"
+                  v-if="update.currency"
                   @click="swapBalancePriority"
                   style="height: 50px"
                   class="q-mt-lg"
@@ -48,10 +48,14 @@
               <div class="col-11">
                 <div
                   class="column"
+                  :class="{
+                    'q-pt-sm': update.currency,
+                    'q-pt-lg': !update.currency
+                  }"
                   v-if="!isPrioritySwapped"
-                  style="height: 100px"
+                  style="height: 90px"
                 >
-                  <div class="col-7" :class="{'q-pt-lg': !g.wallet.currency && !fiatTracking}">
+                  <div class="col-7" >
                     <div class="row">
                       <div class="col-auto">
                         <div class="text-h3 q-my-none text-no-wrap">
@@ -70,7 +74,7 @@
                     </div>
                   </div>
                   <div class="col-2">
-                    <div v-if="g.wallet.currency && fiatTracking">
+                    <div v-if="update.currency">
                       <span
                         class="text-h5 text-italic"
                         v-text="formattedFiatAmount"
@@ -82,14 +86,18 @@
 
                 <div
                   class="column"
-                  v-if="isPrioritySwapped && fiatTracking"
+                  v-if="isPrioritySwapped"
+                  :class="{
+                    'q-pt-sm': update.currency,
+                    'q-pt-lg': !update.currency
+                  }"
                   style="height: 100px"
                 >
                   <div class="col-7">
                     <div class="row">
                       <div class="col-auto">
                         <div
-                          v-if="g.wallet.currency"
+                          v-if="update.currency"
                           class="text-h3 q-my-none text-no-wrap"
                         >
                           <strong
@@ -117,7 +125,7 @@
                   </div>
                 </div>
 
-                <div class="absolute-right q-pa-md" v-if="$q.screen.gt.md && g.wallet.currency && fiatTracking">
+                <div class="absolute-right q-pa-md" v-if="$q.screen.gt.md && update.currency">
                   <div class="text-bold text-italic">
                     BTC Price
                   </div>
@@ -143,6 +151,7 @@
           </q-card-section>
           <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
 
+              <div class="col">
               <q-btn
                 unelevated
                 color="primary"
@@ -172,7 +181,7 @@
               :callback="updateBalanceCallback"
               :small_btn="false"
             ></lnbits-update-balance>
-</div>
+          </div></div>
         </q-card>
        
         <q-card

lnbits/static/js/components.js

@@ -484,7 +484,7 @@ window.app.component('lnbits-dynamic-chips', {
 window.app.component('lnbits-update-balance', {
   template: '#lnbits-update-balance',
   mixins: [window.windowMixin],
-  props: ['wallet_id', 'credit-value'],
+  props: ['wallet_id', 'credit-value', 'small_btn'],
   computed: {
     denomination() {
       return LNBITS_DENOMINATION

lnbits/static/js/wallet.js

@@ -62,7 +62,9 @@ window.app = Vue.createApp({
       isPrioritySwapped: false,
       fiatTracking: false,
       formattedFiatAmount: 0,
-      exchangeRate: 0
+      exchangeRate: 0,
+      formattedExchange: null,
+      ignoreWatcher: true
     }
   },
   computed: {
@@ -73,14 +75,6 @@ window.app = Vue.createApp({
         return LNbits.utils.formatSat(this.balance || this.g.wallet.sat)
       }
     },
-    formattedExchange() {
-      if (this.fiatTracking) {
-        return LNbits.utils.formatCurrency(
-          this.exchangeRate,
-          this.g.wallet.currency
-        )
-      }
-    },
     canPay() {
       if (!this.parse.invoice) return false
       return this.parse.invoice.sat <= this.balance
@@ -101,10 +95,15 @@ window.app = Vue.createApp({
   },
   methods: {
     formatFiatAmount(amount, currency) {
+      this.update.currency = currency
       this.formattedFiatAmount = LNbits.utils.formatCurrency(
         amount.toFixed(2),
         currency
       )
+      this.formattedExchange = LNbits.utils.formatCurrency(
+          this.exchangeRate,
+          currency
+        )
     },
     msatoshiFormat(value) {
       return LNbits.utils.formatSat(value / 1000)
@@ -548,16 +547,19 @@ window.app = Vue.createApp({
         })
     },
     updateFiatBalance(currency) {
+      // set rate from local storage to avoid clunky api calls
       this.exchangeRate = this.$q.localStorage.getItem('lnbits.exchangeRate')
       this.fiatBalance =
-        (this.exchangeRate / 100000000) * (this.g.wallet.sat)
+        (this.exchangeRate / 100000000) * (this.balance || this.g.wallet.sat)
+      this.formatFiatAmount(this.fiatBalance, currency)
+      // make api call
       LNbits.api
       .request('GET', `/api/v1/rate/` + currency, null)
         .then(response => {
           this.fiatBalance =
-          (response.data.rate / 100000000) *
+          (response.data.price / 100000000) *
-          (this.g.wallet.sat)
+          (this.balance || this.g.wallet.sat)
-        this.exchangeRate = response.data.rate.toFixed(2)
+        this.exchangeRate = response.data.price.toFixed(2)
         this.fiatTracking = true
         this.formatFiatAmount(this.fiatBalance, currency)
         this.$q.localStorage.set('lnbits.exchangeRate', this.exchangeRate)
@@ -675,7 +677,7 @@ window.app = Vue.createApp({
     },
     handleFiatTracking() {
       if (this.fiatTracking === false) {
-        this.updateWallet({ currency: ''})
+        this.update.currency = ''
         this.$q.localStorage.setItem(
           'lnbits.isPrioritySwapped',
           false
@@ -695,7 +697,11 @@ window.app = Vue.createApp({
     if (this.$q.screen.lt.md) {
       this.mobileSimple = true
     }
+    setTimeout(() => {
+      this.ignoreWatcher = false
+    }, 3000)
     if(this.g.wallet.currency){
+      this.fiatTracking = true
       this.updateFiatBalance(this.g.wallet.currency)
     }
     this.update.name = this.g.wallet.name
@@ -711,6 +717,7 @@ window.app = Vue.createApp({
       this.fetchBalance()
     },
     'update.currency'(newValue) {
+      if (this.ignoreWatcher) return
       this.updateWallet({ currency: newValue })
       this.updateFiatBalance(newValue)
     }

lnbits/templates/components.vue

@@ -506,7 +506,31 @@
 </template>
 
 <template id="lnbits-update-balance">
-  <q-btn v-if="admin" :label="$t('credit_debit')" color="secondary" size="sm">
+  <q-btn v-if="admin && small_btn" flat round color="primary" size="sm" icon="add">
+    <q-popup-edit class="bg-accent text-white" v-slot="scope" v-model="credit">
+      <q-input
+        filled
+        :label="$t('credit_label', {denomination: denomination})"
+        v-model="scope.value"
+        dense
+        autofocus
+        @keyup.enter="scope.set"
+      >
+        <template v-slot:append>
+          <q-icon name="edit" />
+        </template>
+      </q-input>
+    </q-popup-edit>
+    <q-tooltip v-text="$t('credit_hint')"></q-tooltip>
+  </q-btn>
+  
+    <q-btn 
+    v-if="admin && !small_btn"
+    color="primary"
+    :label="$t('credit_debit')"
+    class="float-right q-mt-sm"
+    size="sm"
+    >
     <q-popup-edit class="bg-accent text-white" v-slot="scope" v-model="credit">
       <q-input
         filled