feat: update to lnbits 1.0.0 (#66)

---------

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>
Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>

templates/lnurlp/_api_docs.html

@@ -19,7 +19,7 @@
         <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
         <code
           >curl -X GET {{ request.base_url }}lnurlp/api/v1/links -H "X-Api-Key:
-          {{ user.wallets[0].inkey }}"
+          <span v-text="g.user.wallets[0].inkey"></span> "
         </code>
       </q-card-section>
     </q-card>
@@ -41,7 +41,7 @@
         <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
         <code
           >curl -X GET {{ request.base_url }}lnurlp/api/v1/links/&lt;pay_id&gt;
-          -H "X-Api-Key: {{ user.wallets[0].inkey }}"
+          -H "X-Api-Key: <span v-text="g.user.wallets[0].inkey"></span>"
         </code>
       </q-card-section>
     </q-card>
@@ -74,7 +74,7 @@
           '{"description": &lt;string&gt;, "amount": &lt;integer&gt;, "max":
           &lt;integer&gt;, "min": &lt;integer&gt;, "comment_chars":
           &lt;integer&gt;}' -H "Content-type: application/json" -H "X-Api-Key:
-          {{ user.wallets[0].adminkey }}"
+          <span v-text="g.user.wallets[0].adminkey"></span>"
         </code>
       </q-card-section>
     </q-card>
@@ -103,8 +103,8 @@
         <code
           >curl -X PUT {{ request.base_url }}lnurlp/api/v1/links/&lt;pay_id&gt;
           -d '{"description": &lt;string&gt;, "amount": &lt;integer&gt;}' -H
-          "Content-type: application/json" -H "X-Api-Key: {{
-          user.wallets[0].adminkey }}"
+          "Content-type: application/json" -H "X-Api-Key:
+          <span v-text="g.user.wallets[0].adminkey"></span>"
         </code>
       </q-card-section>
     </q-card>
@@ -129,8 +129,8 @@
         <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
         <code
           >curl -X DELETE {{ request.base_url
-          }}lnurlp/api/v1/links/&lt;pay_id&gt; -H "X-Api-Key: {{
-          user.wallets[0].adminkey }}"
+          }}lnurlp/api/v1/links/&lt;pay_id&gt; -H "X-Api-Key:
+          <span v-text="g.user.wallets[0].adminkey"></span>"
         </code>
       </q-card-section>
     </q-card>

templates/lnurlp/display.html

@@ -5,13 +5,7 @@
       <q-card-section class="q-pa-none">
         <div class="text-center">
           <a class="text-secondary" href="lightning:{{ lnurl }}">
-            <q-responsive :ratio="1" class="q-mx-md">
-              <qrcode
-                value="lightning:{{ lnurl }}"
-                :options="{width: 800}"
-                class="rounded-borders"
-              ></qrcode>
-            </q-responsive>
+            <lnbits-qrcode value="lightning:{{ lnurl }}"></lnbits-qrcode>
           </a>
         </div>
         <div class="row q-mt-lg q-gutter-sm">
@@ -44,11 +38,9 @@
 </div>
 {% endblock %} {% block scripts %}
 <script>
-  Vue.component(VueQrcode.name, VueQrcode)
-
-  new Vue({
+  window.app = Vue.createApp({
     el: '#vue',
-    mixins: [windowMixin]
+    mixins: [window.windowMixin]
   })
 </script>
 {% endblock %}

templates/lnurlp/index.html

@@ -25,11 +25,10 @@
         <q-table
           dense
           flat
-          :data="payLinks"
+          :rows="payLinks"
           row-key="id"
-          :pagination.sync="payLinksTable.pagination"
+          v-model:pagination="payLinksTable.pagination"
         >
-          {% raw %}
           <template v-slot:header="props">
             <q-tr class="text-left" :props="props">
               <q-th auto-width></q-th>
@@ -53,6 +52,7 @@
                   type="a"
                   :href="props.row.pay_url"
                   target="_blank"
+                  class="q-ml-sm"
                   ><q-tooltip>Shareable Page</q-tooltip></q-btn
                 >
                 <q-btn
@@ -61,26 +61,33 @@
                   size="xs"
                   icon="visibility"
                   :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  class="q-ml-sm"
                   @click="openQrCodeDialog(props.row.id)"
                   ><q-tooltip>View Link</q-tooltip></q-btn
                 >
               </q-td>
-              <q-td auto-width>{{ props.row.description }}</q-td>
+              <q-td auto-width v-text="props.row.description"></q-td>
               <q-td auto-width>
-                <span v-if="props.row.min == props.row.max">
-                  {{ props.row.min }}
-                </span>
-                <span v-else>{{ props.row.min }} - {{ props.row.max }}</span>
+                <span
+                  v-if="props.row.min == props.row.max"
+                  v-text="props.row.min"
+                ></span>
+                <span
+                  v-else
+                  v-text="props.row.min + ' - ' + props.row.max"
+                ></span>
               </q-td>
-              <q-td>{{ props.row.currency || 'sat' }}</q-td>
+              <q-td v-text="props.row.currency || 'sat'"></q-td>
               <q-td
                 auto-width
                 :class="(props.row.username) ? 'text-normal' : 'text-grey'"
-                >{{ props.row.username || 'None' }}</q-td
-              >
+                v-text="props.row.username || 'None'"
+              ></q-td>
               <q-td>
                 <q-icon v-if="props.row.webhook_url" size="14px" name="http">
-                  <q-tooltip>Webhook to {{ props.row.webhook_url }}</q-tooltip>
+                  <q-tooltip
+                    >Webhook to <span v-text="props.row.webhook_url"></span
+                  ></q-tooltip>
                 </q-icon>
                 <q-icon
                   v-if="props.row.success_text || props.row.success_url"
@@ -88,9 +95,13 @@
                   name="call_to_action"
                 >
                   <q-tooltip>
-                    On success, show message '{{ props.row.success_text }}'
+                    On success, show message '<span
+                      v-text="props.row.success_text"
+                    ></span
+                    >'
                     <span v-if="props.row.success_url"
-                      >and URL '{{ props.row.success_url }}'</span
+                      >and URL '<span v-text="props.row.success_url"></span
+                      >'</span
                     >
                   </q-tooltip>
                 </q-icon>
@@ -100,7 +111,8 @@
                   name="insert_comment"
                 >
                   <q-tooltip>
-                    {{ props.row.comment_chars }}-char comment allowed
+                    <span v-text="props.row.comment_chars"></span>-char comment
+                    allowed
                   </q-tooltip>
                 </q-icon>
               </q-td>
@@ -127,7 +139,6 @@
               </q-td>
             </q-tr>
           </template>
-          {% endraw %}
         </q-table>
       </q-card-section>
     </q-card>
@@ -184,7 +195,7 @@
           </div>
           <div class="col" style="margin-top: 10px">
             <span class="label">
-              &nbsp; @ {% raw %} {{ domain }} {% endraw %}
+              &nbsp;@&nbsp;<span v-text="domain"></span>
             </span>
           </div>
         </div>
@@ -357,34 +368,37 @@
 
   <q-dialog v-model="qrCodeDialog.show" position="top">
     <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
-      {% raw %}
-      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
-        <qrcode
-          :value="'lightning:' + qrCodeDialog.data.lnurl"
-          :options="{width: 800}"
-          class="rounded-borders"
-        >
-        </qrcode>
-      </q-responsive>
+      <lnbits-qrcode
+        :value="'lightning:' + qrCodeDialog.data.lnurl"
+      ></lnbits-qrcode>
       <p style="word-break: break-all">
-        <strong>ID:</strong> {{ qrCodeDialog.data.id }}<br />
-        <strong>Amount:</strong> {{ qrCodeDialog.data.amount }}<br />
+        <strong>ID:</strong> <span v-text="qrCodeDialog.data.id"></span><br />
+        <strong>Amount:</strong> <span v-text="qrCodeDialog.data.amount"></span
+        ><br />
+
         <span v-if="qrCodeDialog.data.currency"
-          ><strong>{{ qrCodeDialog.data.currency }} price:</strong> {{
-          fiatRates[qrCodeDialog.data.currency] ?
-          fiatRates[qrCodeDialog.data.currency] + ' sat' : 'Loading...' }}<br
+          ><strong
+            ><span v-text="qrCodeDialog.data.currency"></span> price:</strong
+          >
+          <span
+            v-if="fiatRates[qrCodeDialog.data.currency]"
+            v-text="fiatRates[qrCodeDialog.data.currency] + 'sat'"
+          ></span>
+          <span v-else>Loading...</span>
+          <br
         /></span>
-        <strong>Accepts comments:</strong> {{ qrCodeDialog.data.comments }}<br />
-        <strong>Dispatches webhook to:</strong> {{ qrCodeDialog.data.webhook
-        }}<br />
-        <strong>On success:</strong> {{ qrCodeDialog.data.success }}<br />
+        <strong>Accepts comments:</strong>
+        <span v-text="qrCodeDialog.data.comments"></span><br />
+        <strong>Dispatches webhook to:</strong>
+        <span v-text="qrCodeDialog.data.webhook"></span><br />
+        <strong>On success:</strong>
+        <span v-text="qrCodeDialog.data.success"></span><br />
         <span v-if="qrCodeDialog.data.username">
           <strong>Lightning Address: </strong>
-          {{ qrCodeDialog.data.username }}@{{ domain }}
+          <span v-text="qrCodeDialog.data.username+'@'+domain"></span>
           <br />
         </span>
       </p>
-      {% endraw %}
       <div class="row q-mt-lg q-gutter-sm">
         <q-btn
           outline

templates/lnurlp/print_qr.html

@@ -1,7 +1,7 @@
 {% extends "print.html" %} {% block page %}
 <div class="row justify-center">
   <div class="qr">
-    <qrcode value="lightning:{{ lnurl }}" :options="{width}"></qrcode>
+    <lnbits-qrcode value="lightning:{{ lnurl }}"></lnbits-qrcode>
   </div>
 </div>
 {% endblock %} {% block styles %}
@@ -12,14 +12,12 @@
 </style>
 {% endblock %} {% block scripts %}
 <script>
-  Vue.component(VueQrcode.name, VueQrcode)
-
-  new Vue({
+  window.app = Vue.createApp({
     el: '#vue',
-    created: function () {
+    created() {
       window.print()
     },
-    data: function () {
+    data() {
       return {width: window.innerWidth * 0.5}
     }
   })