feat: move disclaimer from wallet.html into vue component (#3536)

lnbits/core/templates/core/wallet.html

@@ -38,7 +38,7 @@
                         'q-pt-sm': g.fiatTracking,
                         'q-pt-lg': !g.fiatTracking
                       }"
-                  v-if="!isFiatPriority || !g.fiatTracking"
+                  v-if="!g.isFiatPriority || !g.fiatTracking"
                   style="height: 100px"
                 >
                   <div class="col-7">
@@ -75,7 +75,7 @@
 
                 <div
                   class="column"
-                  v-if="isFiatPriority  && g.fiatTracking"
+                  v-if="g.isFiatPriority  && g.fiatTracking"
                   :class="{
                         'q-pt-sm': g.fiatTracking,
                         'q-pt-lg': !g.fiatTracking
@@ -810,7 +810,7 @@
         <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
           <div v-if="parse.invoice">
             <div class="column content-center text-center q-mb-md">
-              <div v-if="!isFiatPriority">
+              <div v-if="!g.isFiatPriority">
                 <h4 class="q-my-none text-bold">
                   <span v-text="formatBalance(parse.invoice.sat)"></span>
                 </h4>
@@ -832,7 +832,7 @@
                 ></q-btn>
               </div>
               <div v-if="g.fiatTracking">
-                <div v-if="isFiatPriority">
+                <div v-if="g.isFiatPriority">
                   <h5 class="q-my-none text-bold">
                     <span v-text="formatBalance(parse.invoice.sat)"></span>
                   </h5>
@@ -1257,31 +1257,6 @@
         >
         </q-btn>
       </div>
-      <q-dialog v-model="disclaimerDialog.show" position="top">
-        <q-card class="q-pa-lg">
-          <h6
-            class="q-my-md text-primary"
-            v-text="$t('disclaimer_dialog_title')"
-          ></h6>
-          <p class="whitespace-pre-line" v-text="$t('disclaimer_dialog')"></p>
-          <div class="row q-mt-lg">
-            <q-btn
-              outline
-              color="grey"
-              type="a"
-              href="/account"
-              :label="$t('my_account')"
-            ></q-btn>
-            <q-btn
-              v-close-popup
-              flat
-              color="grey"
-              class="q-ml-auto"
-              :label="$t('i_understand')"
-            ></q-btn>
-          </div>
-        </q-card>
-      </q-dialog>
       {% endblock %}
     </div>
   </div>

lnbits/static/js/components/lnbits-disclaimer.js

@@ -0,0 +1,9 @@
+window.app.component('lnbits-disclaimer', {
+  template: '#lnbits-disclaimer',
+  mixins: [window.windowMixin],
+  computed: {
+    showDisclaimer() {
+      return !g.disclaimerShown && g.isUserAuthorized
+    }
+  }
+})

lnbits/static/js/components/lnbits-theme.js

@@ -1,6 +1,12 @@
 window.app.component('lnbits-theme', {
   mixins: [window.windowMixin],
   watch: {
+    'g.disclaimerShown'(val) {
+      this.$q.localStorage.setItem('lnbits.disclaimerShown', val)
+    },
+    'g.isFiatPriority'(val) {
+      this.$q.localStorage.setItem('lnbits.isFiatPriority', val)
+    },
     'g.reactionChoice'(val) {
       this.$q.localStorage.set('lnbits.reactions', val)
     },

lnbits/static/js/globals.js

@@ -25,9 +25,11 @@ window.g = Vue.reactive({
   newWalletType: 'lightning',
   updatePayments: false,
   updatePaymentsHash: '',
+  locale: localStore('lnbits.lang', navigator.languages[1] ?? 'en'),
+  disclaimerShown: localStore('lnbits.disclaimerShown', false),
+  isFiatPriority: localStore('lnbits.isFiatPriority', false),
   mobileSimple: localStore('lnbits.mobileSimple', true),
   walletFlip: localStore('lnbits.walletFlip', false),
-  locale: localStore('lnbits.lang', navigator.languages[1] ?? 'en'),
   darkChoice: localStore('lnbits.darkMode', true),
   themeChoice: localStore('lnbits.theme', WINDOW_SETTINGS.LNBITS_DEFAULT_THEME),
   borderChoice: localStore(
@@ -66,3 +68,9 @@ addEventListener('online', event => {
   console.log('back online', event)
   this.g.offline = false
 })
+
+if (navigator.serviceWorker != null) {
+  navigator.serviceWorker.register('/service-worker.js').then(registration => {
+    console.log('Registered events at scope: ', registration.scope)
+  })
+}

lnbits/static/js/wallet.js

@@ -45,10 +45,6 @@ window.WalletPageLogic = {
           payment_hash: null
         }
       },
-      disclaimerDialog: {
-        show: false,
-        location: window.location
-      },
       icon: {
         show: false,
         data: {},
@@ -111,7 +107,6 @@ window.WalletPageLogic = {
       },
       hasNfc: false,
       nfcReaderAbortController: null,
-      isFiatPriority: false,
       formattedFiatAmount: 0,
       formattedExchange: null,
       paymentFilter: {
@@ -201,7 +196,7 @@ window.WalletPageLogic = {
       this.receive.data.memo = null
       this.receive.data.internalMemo = null
       this.receive.data.payment_hash = null
-      this.receive.unit = this.isFiatPriority
+      this.receive.unit = this.g.isFiatPriority
         ? this.g.wallet.currency || 'sat'
         : 'sat'
       this.receive.minMax = [0, 2100000000000000]
@@ -777,17 +772,15 @@ window.WalletPageLogic = {
         })
     },
     swapBalancePriority() {
-      this.isFiatPriority = !this.isFiatPriority
+      this.g.isFiatPriority = !this.g.isFiatPriority
-      this.receive.unit = this.isFiatPriority
+      this.receive.unit = this.g.isFiatPriority
         ? this.g.wallet.currency || 'sat'
         : 'sat'
-      this.$q.localStorage.setItem('lnbits.isFiatPriority', this.isFiatPriority)
     },
     handleFiatTracking() {
       this.g.fiatTracking = !this.g.fiatTracking
       if (!this.g.fiatTracking) {
-        this.$q.localStorage.setItem('lnbits.isFiatPriority', false)
+        this.g.isFiatPriority = false
-        this.isFiatPriority = false
         this.update.currency = ''
         this.g.wallet.currency = ''
         this.updateWallet({currency: ''})
@@ -892,24 +885,5 @@ window.WalletPageLogic = {
       },
       deep: true
     }
-  },
-  async mounted() {
-    if (!Quasar.LocalStorage.getItem('lnbits.disclaimerShown')) {
-      this.disclaimerDialog.show = true
-      Quasar.LocalStorage.setItem('lnbits.disclaimerShown', true)
-      Quasar.LocalStorage.setItem('lnbits.reactions', 'confettiTop')
-    }
-    if (Quasar.LocalStorage.getItem('lnbits.isFiatPriority')) {
-      this.isFiatPriority = Quasar.LocalStorage.getItem('lnbits.isFiatPriority')
-    } else {
-      this.isFiatPriority = false
-      Quasar.LocalStorage.setItem('lnbits.isFiatPriority', false)
   }
 }
-}
-
-if (navigator.serviceWorker != null) {
-  navigator.serviceWorker.register('/service-worker.js').then(registration => {
-    console.log('Registered events at scope: ', registration.scope)
-  })
-}

lnbits/static/vendor.json

@@ -74,6 +74,7 @@
     "js/components/lnbits-home-logos.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",
+    "js/components/lnbits-disclaimer.js",
     "js/components/lnbits-footer.js",
     "js/components/lnbits-header.js",
     "js/components/lnbits-header-wallets.js",

lnbits/templates/base.html

@@ -33,6 +33,7 @@
   <body data-theme="bitcoin">
     <div id="vue">
       <q-layout view="hHh lpR lfr" v-cloak>
+        <lnbits-disclaimer></lnbits-disclaimer>
         <lnbits-theme></lnbits-theme>
         <lnbits-header></lnbits-header>
         {% block drawer %}

lnbits/templates/components.vue

@@ -10,6 +10,7 @@ include('components/admin/extensions.vue') %} {%
 include('components/admin/assets-config.vue') %} {%
 include('components/admin/notifications.vue') %} {%
 include('components/admin/server.vue') %} {%
+include('components/lnbits-disclaimer.vue') %} {%
 include('components/lnbits-footer.vue') %} {%
 include('components/lnbits-header.vue') %} {%
 include('components/lnbits-header-wallets.vue') %} {%

lnbits/templates/components/lnbits-disclaimer.vue

@@ -0,0 +1,28 @@
+<template id="lnbits-disclaimer">
+  <q-dialog v-model="showDisclaimer" position="top">
+    <q-card class="q-pa-lg">
+      <h6
+        class="q-my-md text-primary"
+        v-text="$t('disclaimer_dialog_title')"
+      ></h6>
+      <p class="whitespace-pre-line" v-text="$t('disclaimer_dialog')"></p>
+      <div class="row q-mt-lg">
+        <q-btn
+          outline
+          color="grey"
+          type="a"
+          href="/account"
+          :label="$t('my_account')"
+        ></q-btn>
+        <q-btn
+          v-close-popup
+          flat
+          color="grey"
+          class="q-ml-auto"
+          :label="$t('i_understand')"
+          @click="g.disclaimerShown = !g.disclaimerShown"
+        ></q-btn>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>

package.json

@@ -126,6 +126,7 @@
       "js/components/lnbits-home-logos.js",
       "js/components/lnbits-qrcode.js",
       "js/components/lnbits-qrcode-lnurl.js",
+      "js/components/lnbits-disclaimer.js",
       "js/components/lnbits-footer.js",
       "js/components/lnbits-header.js",
       "js/components/lnbits-header-wallets.js",