tags and extras metadata in payment details dialog.

lnbits/static/js/components.js

@@ -1,4 +1,4 @@
-/* global Vue, moment, LNbits, EventHub, decryptLnurlPayAES */
+/* global _, Vue, moment, LNbits, EventHub, decryptLnurlPayAES */
 
 Vue.component('lnbits-fsat', {
   props: {
@@ -179,6 +179,11 @@ Vue.component('lnbits-payment-details', {
   props: ['payment'],
   template: `
     <div class="q-py-md" style="text-align: left">
+      <div class="row justify-center q-mb-md">
+        <q-badge v-if="hasTag" color="yellow" text-color="black">
+          #{{ payment.tag }}
+        </q-badge>
+      </div>
       <div class="row">
         <div class="col-3"><b>Date</b>:</div>
         <div class="col-9">{{ payment.date }} ({{ payment.dateFrom }})</div>
@@ -203,6 +208,15 @@ Vue.component('lnbits-payment-details', {
         <div class="col-3"><b>Payment proof</b>:</div>
         <div class="col-9 text-wrap mono">{{ payment.preimage }}</div>
       </div>
+      <div class="row" v-for="entry in extras">
+        <div class="col-3">
+          <q-badge v-if="hasTag" color="purple" text-color="white">
+            extra
+          </q-badge>
+          <b>{{ entry.key }}</b>:
+        </div>
+        <div class="col-9 text-wrap mono">{{ entry.value }}</div>
+      </div>
       <div class="row" v-if="hasSuccessAction">
         <div class="col-3"><b>Success action</b>:</div>
         <div class="col-9">
@@ -228,6 +242,14 @@ Vue.component('lnbits-payment-details', {
         this.payment.extra &&
         this.payment.extra.success_action
       )
+    },
+    hasTag() {
+      return this.payment.extra && !!this.payment.extra.tag
+    },
+    extras() {
+      if (!this.payment.extra) return []
+      let extras = _.omit(this.payment.extra, ['tag', 'success_action'])
+      return Object.keys(extras).map(key => ({key, value: extras[key]}))
     }
   }
 })