add onboard to wallet

lnbits/core/templates/admin/_tab_funding.html

@@ -85,7 +85,7 @@
           </div>
         </div>
       </div>
-      <div v-if="isSuperUser">
+      <div v-if="isSuperUser" id="funding-sources">
         <lnbits-funding-sources
           :form-data="formData"
           :allowed-funding-sources="settings.lnbits_allowed_funding_sources"

lnbits/core/templates/core/wallet.html

@@ -4,6 +4,12 @@
 <!---->
 {% block scripts %} {{ window_vars(user, wallet) }}
 <script src="{{ static_url_for('static', 'js/wallet.js') }}"></script>
+<style>
+  .introjs-tooltip-custom .introjs-tooltiptext,
+  .introjs-tooltip-header {
+    color: #111;
+  }
+</style>
 {% endblock %}
 <!---->
 {% block title %} {{ wallet.name }} - {{ SITE_TITLE }} {% endblock %}
@@ -34,7 +40,7 @@
         } : ''"
         >
           <q-card-section>
-            <h3 class="q-my-none text-no-wrap">
+            <h3 class="q-my-none text-no-wrap" id="wallet-balance">
               <strong v-text="formattedBalance"></strong>
               <small>{{LNBITS_DENOMINATION}}</small>
               <lnbits-update-balance
@@ -68,7 +74,10 @@
               </div>
             </div>
           </q-card-section>
-          <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
+          <div
+            class="row q-pb-md q-px-md q-col-gutter-md gt-sm"
+            id="wallet-buttons"
+          >
             <div class="col">
               <q-btn
                 unelevated
@@ -165,6 +174,7 @@
               :hide-header="mobileSimple"
               :hide-bottom="mobileSimple"
               @request="fetchPayments"
+              id="wallet-table"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -895,6 +905,7 @@
       </q-dialog>
 
       <q-tabs
+        id="mobile-wallet-buttons"
         class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
         active-class="px-0"
         indicator-color="transparent"

lnbits/static/js/admin.js

@@ -56,7 +56,6 @@ new Vue({
     this.getSettings()
     this.getAudit()
     this.balance = +'{{ balance|safe }}'
-    // this.runOnboarding()
   },
   mounted() {
     const url = window.location.href
@@ -79,12 +78,10 @@ new Vue({
 
       document.body.appendChild(scriptTag)
       document.head.appendChild(linkTag)
-      console.log('onboarding')
       scriptTag.onload = () => {
         this.runOnboarding()
       }
     }
-    //this.runOnboarding()
   },
   computed: {
     lnbitsVersion() {
@@ -99,8 +96,14 @@ new Vue({
   },
   methods: {
     runOnboarding() {
-      console.log(this.$refs)
       introJs()
+        .onbeforeexit(() => {
+          return window.history.replaceState(
+            null,
+            null,
+            window.location.pathname
+          )
+        })
         .setOptions({
           disableInteraction: true,
           tooltipClass: 'introjs-tooltip-custom',
@@ -112,7 +115,7 @@ new Vue({
             },
             {
               title: 'Add a funding source',
-              element: this.$refs['funding-sources'],
+              element: document.getElementById('funding-sources'),
               intro:
                 'Select a Lightning Network funding source to add funds to your LNbits.'
             },

lnbits/static/js/index.js

@@ -50,7 +50,7 @@ new Vue({
           this.password,
           this.passwordRepeat
         )
-        window.location.href = '/wallet'
+        window.location.href = '/wallet?first_use'
       } catch (e) {
         LNbits.utils.notifyApiError(e)
       }

lnbits/static/js/wallet.js

@@ -818,6 +818,105 @@ new Vue({
       navigator.clipboard.readText().then(text => {
         this.$refs.textArea.value = text
       })
+    },
+    checkFirstUse() {
+      const url = window.location.href
+      const queryString = url.split('?')[1]
+      const queryObject = {}
+
+      if (queryString) {
+        for (const param of queryString.split('&')) {
+          const [key, value] = param.split('=')
+          queryObject[key] = value
+        }
+      }
+
+      if (queryObject.hasOwnProperty('first_use')) {
+        const scriptTag = document.createElement('script')
+        scriptTag.src = 'https://unpkg.com/intro.js/intro.js'
+        const linkTag = document.createElement('link')
+        linkTag.rel = 'stylesheet'
+        linkTag.href = 'https://unpkg.com/intro.js/introjs.css'
+
+        document.body.appendChild(scriptTag)
+        document.head.appendChild(linkTag)
+        scriptTag.onload = () => {
+          if (!this.g.visibleDrawer) {
+            this.g.visibleDrawer = true
+          }
+          this.runOnboarding()
+        }
+      }
+    },
+    runOnboarding() {
+      introJs()
+        .onbeforechange(step => {
+          if (!step.id || !this.mobileSimple) return
+          if (step.id === 'wallet-list' || step.id === 'admin-manage') {
+            this.g.visibleDrawer = true
+          } else {
+            this.g.visibleDrawer = false
+          }
+        })
+        // .onbeforeexit(() => {
+        //   return window.history.replaceState(
+        //     null,
+        //     null,
+        //     window.location.pathname
+        //   )
+        // })
+        .setOptions({
+          disableInteraction: true,
+          tooltipClass: 'introjs-tooltip-custom',
+          dontShowAgain: true,
+          steps: [
+            {
+              title: 'Welcome to LNbits',
+              intro: 'Start your tour!'
+            },
+            {
+              title: 'Access your wallet',
+              element: document.getElementById('wallet-list'),
+              position: 'right',
+              intro:
+                'Wallets are the core of LNbits. They are the place where you can store your funds.'
+            },
+            {
+              title: 'Access extensions',
+              element: document.getElementById('admin-manage'),
+              position: 'right',
+              intro:
+                'Extensions are the way to add functionality to your LNbits. You view and access them here.'
+            },
+            {
+              title: 'Wallet balance',
+              element: document.getElementById('wallet-balance'),
+              position: 'right',
+              intro: 'Your wallet balance is displayed here.'
+            },
+            {
+              title: 'Send and receive payments',
+              element: document.getElementById(
+                this.mobileSimple ? 'mobile-wallet-buttons' : 'wallet-buttons'
+              ),
+              position: 'bottom',
+              intro:
+                'Use these buttons to send and receive payments or scan a QR code.'
+            },
+            {
+              title: 'Transaction details',
+              element: document.getElementById('wallet-table'),
+              position: 'bottom',
+              intro:
+                'Here you can see all the transactions made in your wallet. You can also export them as a CSV file.'
+            },
+            {
+              title: 'Farewell!',
+              intro: '<img src="static/images/logos/lnbits.svg" width=100%/>'
+            }
+          ]
+        })
+        .start()
     }
   },
   watch: {
@@ -865,6 +964,7 @@ new Vue({
       this.onPaymentReceived(payment.payment_hash)
     )
     eventReactionWebocket(wallet.id)
+    this.checkFirstUse()
   }
 })