show more data in txinfo modal and fee on main table.

- also center-align icons in main table.
- and use "x time ago" instead of raw dates by default in main table
  (raw date is accessible on a tooltip, on the modal and on the CSV export).

lnbits/static/js/components.js

@@ -1,4 +1,4 @@
-/* global Vue, LNbits, EventHub */
+/* global Vue, moment, LNbits, EventHub */
 
 Vue.component('lnbits-fsat', {
   props: {
@@ -174,3 +174,31 @@ Vue.component('lnbits-extension-list', {
     }
   }
 })
+
+Vue.component('lnbits-payment-details', {
+  props: ['payment'],
+  template: `
+    <div class="q-py-md" style="text-align: left">
+      <div class="row">
+        <div class="col-3"><b>Date</b>:</div>
+        <div class="col-9">{{ payment.date }} ({{ payment.dateFrom }})</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Description</b>:</div>
+        <div class="col-9">{{ payment.memo }}</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Amount</b>:</div>
+        <div class="col-9">{{ (payment.amount / 1000).toFixed(3) }} sat</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Fee</b>:</div>
+        <div class="col-9">{{ (payment.fee / 1000).toFixed(3) }} sat</div>
+      </div>
+      <div class="row">
+        <div class="col-3"><b>Payment hash</b>:</div>
+        <div class="col-9 text-wrap mono">{{ payment.payment_hash }}</div>
+      </div>
+    </div>
+  `
+})