add fiat balance to wallet (#2157)

also fixed payments table fiat denomination for consistency

lnbits/core/templates/core/wallet.html

@@ -55,6 +55,13 @@
                 </q-popup-edit>
               </q-btn>
             </h3>
+            <div v-if="g.wallet.currency">
+              <span
+                class="text-h5 text-italic"
+                v-text="formattedFiatBalance"
+                style="opacity: 0.75"
+              ></span>
+            </div>
           </q-card-section>
           <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
             <div class="col">
@@ -214,13 +221,13 @@
                   <q-td auto-width key="amount" v-else :props="props">
                     {{ props.row.fsat }}<br />
                     <i v-if="props.row.extra.wallet_fiat_currency">
-                      {{ props.row.extra.wallet_fiat_currency }} {{
-                      props.row.extra.wallet_fiat_amount }}
+                      {{ formatFiat(props.row.extra.wallet_fiat_currency,
+                      props.row.extra.wallet_fiat_amount) }}
                       <br />
                     </i>
                     <i v-if="props.row.extra.fiat_currency">
-                      {{ props.row.extra.fiat_currency }} {{
-                      props.row.extra.fiat_amount }}
+                      {{ formatFiat(props.row.extra.fiat_currency,
+                      props.row.extra.fiat_amount) }}
                     </i>
                   </q-td>
                 </q-tr>

lnbits/static/js/wallet.js

@@ -241,6 +241,7 @@ new Vue({
         location: window.location
       },
       balance: 0,
+      fiatBalance: 0,
       credit: 0,
       update: {
         name: null,
@@ -256,6 +257,14 @@ new Vue({
         return LNbits.utils.formatSat(this.balance || this.g.wallet.sat)
       }
     },
+    formattedFiatBalance() {
+      if (this.fiatBalance) {
+        return LNbits.utils.formatCurrency(
+          this.fiatBalance.toFixed(2),
+          this.g.wallet.currency
+        )
+      }
+    },
     filteredPayments: function () {
       var q = this.paymentsTable.filter
       if (!q || q === '') return this.payments
@@ -797,6 +806,24 @@ new Vue({
           this.balance
         ])
       })
+      if (this.g.wallet.currency) {
+        this.updateFiatBalance()
+      }
+    },
+    updateFiatBalance() {
+      if (!this.g.wallet.currency) return 0
+      LNbits.api
+        .request('POST', `/api/v1/conversion`, null, {
+          amount: this.balance || this.g.wallet.sat,
+          to: this.g.wallet.currency
+        })
+        .then(response => {
+          this.fiatBalance = response.data[this.g.wallet.currency]
+        })
+        .catch(e => console.error(e))
+    },
+    formatFiat(currency, amount) {
+      return LNbits.utils.formatCurrency(amount, currency)
     },
     exportCSV: function () {
       // status is important for export but it is not in paymentsTable