show unpaid invoices, balance calculated on server-side so isn't affected.

lnbits/core/static/js/wallet.js

@@ -14,9 +14,11 @@ function generateChart(canvas, payments) {
   }
 
   _.each(
-    payments.slice(0).sort(function (a, b) {
-      return a.time - b.time
-    }),
+    payments
+      .filter(p => !p.pending)
+      .sort(function (a, b) {
+        return a.time - b.time
+      }),
     function (tx) {
       txs.push({
         hour: Quasar.utils.date.formatDate(tx.date, 'YYYY-MM-DDTHH:00'),
@@ -184,14 +186,7 @@ new Vue({
       return LNbits.utils.search(this.payments, q)
     },
     balance: function () {
-      if (this.payments.length) {
-        return (
-          _.pluck(this.payments, 'amount').reduce(function (a, b) {
-            return a + b
-          }, 0) / 1000
-        )
-      }
-      return this.g.wallet.sat
+      return this.apiBalance || this.g.wallet.sat
     },
     fbalance: function () {
       return LNbits.utils.formatSat(this.balance)
@@ -404,7 +399,15 @@ new Vue({
   },
   watch: {
     payments: function () {
-      EventHub.$emit('update-wallet-balance', [this.g.wallet.id, this.balance])
+      var self = this
+
+      LNbits.api.getWallet(self.g.wallet).then(function (response) {
+        self.apiBalance = Math.round(response.data.balance / 1000)
+        EventHub.$emit('update-wallet-balance', [
+          self.g.wallet.id,
+          self.balance
+        ])
+      })
     }
   },
   created: function () {

lnbits/core/templates/core/_api_docs.html

@@ -4,6 +4,32 @@
   label="API info"
   :content-inset-level="0.5"
 >
+  <q-expansion-item
+    group="api"
+    dense
+    expand-separator
+    label="Get wallet details"
+  >
+    <q-card>
+      <q-card-section>
+        <code><span class="text-light-green">GET</span> /api/v1/wallet</code>
+        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
+        <code>{"X-Api-Key": "<i>{{ wallet.adminkey }}</i>"}</code><br />
+        <h5 class="text-caption q-mt-sm q-mb-none">
+          Returns 200 OK (application/json)
+        </h5>
+        <code
+          >{"id": &lt;string&gt;, "name": &lt;string&gt;, "balance":
+          &lt;int&gt;}</code
+        >
+        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+        <code
+          >curl {{ request.url_root }}api/v1/wallet -H "X-Api-Key:
+          <i>{{ wallet.inkey }}</i>"</code
+        >
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
   <q-expansion-item
     group="api"
     dense

lnbits/core/templates/core/wallet.html

@@ -127,10 +127,10 @@
                 class="q-pa-lg q-pt-xl lnbits__dialog-card"
               >
                 <div class="text-center q-mb-lg">
-                  <a :href="'lightning:' + receive.paymentReq">
+                  <a :href="'lightning:' + props.row.bolt11">
                     <q-responsive :ratio="1" class="q-mx-xl">
                       <qrcode
-                        :value="receive.paymentReq"
+                        :value="props.row.bolt11"
                         :options="{width: 340}"
                         class="rounded-borders"
                       ></qrcode>
@@ -141,7 +141,7 @@
                   <q-btn
                     outline
                     color="grey"
-                    @click="copyText(receive.paymentReq)"
+                    @click="copyText(props.row.bolt11)"
                     >Copy invoice</q-btn
                   >
                   <q-btn v-close-popup flat color="grey" class="q-ml-auto"
@@ -172,7 +172,7 @@
                     Outgoing payment pending
                   </div>
                   <q-tooltip>Payment Hash</q-tooltip>
-                  <div class="text-wrap mono q-pa-md">
+                  <div class="text-wrap mono q-pt-sm text-body1">
                     {{ props.row.payment_hash }}
                   </div>
                 </div>

lnbits/core/views/api.py

@@ -10,6 +10,21 @@ from lnbits.decorators import api_check_wallet_key, api_validate_post_request
 from lnbits.settings import WALLET
 
 
+@core_app.route("/api/v1/wallet", methods=["GET"])
+@api_check_wallet_key("invoice")
+async def api_wallet():
+    return (
+        jsonify(
+            {
+                "id": g.wallet.id,
+                "name": g.wallet.name,
+                "balance": g.wallet.balance_msat,
+            }
+        ),
+        HTTPStatus.OK,
+    )
+
+
 @core_app.route("/api/v1/payments", methods=["GET"])
 @api_check_wallet_key("invoice")
 async def api_payments():
@@ -22,7 +37,7 @@ async def api_payments():
             else:
                 payment.set_pending(WALLET.get_invoice_status(payment.checking_id).pending)
 
-    return jsonify(g.wallet.get_payments()), HTTPStatus.OK
+    return jsonify(g.wallet.get_payments(pending=True)), HTTPStatus.OK
 
 
 @api_check_wallet_key("invoice")

lnbits/static/js/base.js

@@ -29,6 +29,9 @@ var LNbits = {
         bolt11: bolt11
       })
     },
+    getWallet: function (wallet) {
+      return this.request('get', '/api/v1/wallet', wallet.inkey)
+    },
     getPayments: function (wallet, checkPending) {
       var query_param = checkPending ? '?check_pending' : ''
       return this.request(

lnbits/static/scss/base.scss

@@ -101,3 +101,8 @@ video {
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
 }
+
+// text-wrap
+.text-wrap {
+  word-break: break-word;
+}