chore(paywall): minor updates

lnbits/extensions/paywall/migrations.py

@@ -5,7 +5,8 @@ def m001_initial(db):
     """
     Initial paywalls table.
     """
-    db.execute("""
+    db.execute(
+        """
         CREATE TABLE IF NOT EXISTS paywalls (
             id TEXT PRIMARY KEY,
             wallet TEXT NOT NULL,
@@ -15,7 +16,8 @@ def m001_initial(db):
             amount INTEGER NOT NULL,
             time TIMESTAMP NOT NULL DEFAULT (strftime('%s', 'now'))
         );
-    """)
+    """
+    )
 
 
 def migrate():

lnbits/extensions/paywall/templates/paywall/display.html

@@ -6,9 +6,19 @@
     <div class="col-12 col-sm-6 col-md-5 col-lg-4">
       <q-card class="q-pa-lg">
         <q-card-section class="q-pa-none">
-          <q-responsive v-if="pr" :ratio="1" class="q-mx-xl q-mb-md">
+          <h5 class="text-subtitle1 q-my-none">{{ paywall.memo }}</h5>
-            <qrcode v-if="pr" :value="pr" :options="{width: 800}" class="rounded-borders"></qrcode>
+          <strong class="text-purple">Price: <lnbits-fsat :amount="{{ paywall.amount }}"></lnbits-fsat> sat</strong>
+          <q-separator class="q-my-lg"></q-separator>
+          <div v-if="paymentReq">
+            <a :href="'lightning:' + paymentReq">
+              <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
+                <qrcode :value="paymentReq" :options="{width: 800}" class="rounded-borders"></qrcode>
               </q-responsive>
+            </a>
+            <div class="row q-mt-lg">
+              <q-btn outline color="grey" @click="copyText(paymentReq)">Copy invoice</q-btn>
+            </div>
+          </div>
           <div v-if="redirectUrl">
             <p>You can access the URL behind this paywall:<br>
             <strong>{% raw %}{{ redirectUrl }}{% endraw %}</strong></p>
@@ -40,7 +50,7 @@
       mixins: [windowMixin],
       data: function () {
         return {
-          pr: null,
+          paymentReq: null,
           fingerprint: {
             hash: null,
             isValid: false
@@ -55,7 +65,7 @@
           axios.get(
             '/paywall/api/v1/paywalls/{{ paywall.id }}/invoice'
           ).then(function (response) {
-            self.pr = response.data.payment_request;
+            self.paymentReq = response.data.payment_request;
 
             dismissMsg = self.$q.notify({
               timeout: 0,
@@ -79,8 +89,12 @@
                     icon: null
                   });
                 }
+              }).catch(function (error) {
+                LNbits.utils.notifyApiError(error);
               });
             }, 2000);
+          }).catch(function (error) {
+            LNbits.utils.notifyApiError(error);
           });
         }
       },

lnbits/extensions/paywall/views_api.py

@@ -58,7 +58,7 @@ def api_paywall_get_invoice(paywall_id):
 
     try:
         checking_id, payment_request = create_invoice(
-            wallet_id=paywall.wallet, amount=paywall.amount, memo=paywall.memo
+            wallet_id=paywall.wallet, amount=paywall.amount, memo=f"#paywall {paywall.memo}"
         )
     except Exception as e:
         return jsonify({"message": str(e)}), Status.INTERNAL_SERVER_ERROR

lnbits/extensions/withdraw/templates/withdraw/display.html

@@ -6,7 +6,7 @@
     <div class="col-12 col-sm-6 col-md-5 col-lg-4">
       <q-card class="q-pa-lg">
         <q-card-section class="q-pa-none">
-          <div class="text-center q-mb-md">
+          <div class="text-center">
             {% if link.is_spent %}
               <q-badge color="red" class="q-mb-md">Withdraw is spent.</q-badge>
             {% endif %}

lnbits/static/js/components.js

@@ -1,3 +1,18 @@
+Vue.component('lnbits-fsat', {
+  props: {
+    amount: {
+      type: Number,
+      default: 0
+    }
+  },
+  template: '<span>{{ fsat }}</span>',
+  computed: {
+    fsat: function () {
+      return LNbits.utils.formatSat(this.amount);
+    }
+  }
+});
+
 Vue.component('lnbits-wallet-list', {
   data: function () {
     return {