refactor: rename and fix lnbits-wallet-new (#3528)

lnbits/static/js/components/lnbits-manage-wallet-list.js

@@ -0,0 +1,9 @@
+window.app.component('lnbits-manage-wallet-list', {
+  template: '#lnbits-manage-wallet-list',
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      walletName: ''
+    }
+  }
+})

lnbits/static/js/components/lnbits-wallet-list.js

@@ -1,21 +0,0 @@
-window.app.component('lnbits-wallet-list', {
-  template: '#lnbits-wallet-list',
-  mixins: [window.windowMixin],
-  props: ['balance'],
-  data() {
-    return {
-      activeWallet: null,
-      balance: 0,
-      walletName: '',
-      LNBITS_DENOMINATION: LNBITS_DENOMINATION
-    }
-  },
-  methods: {
-    createWallet() {
-      this.$emit('wallet-action', {action: 'create-wallet'})
-    }
-  },
-  created() {
-    document.addEventListener('updateWalletBalance', this.updateWalletBalance)
-  }
-})

lnbits/static/js/components/lnbits-wallet-new.js

@@ -1,11 +1,18 @@
-window.app.component('lnbits-new-user-wallet', {
-  props: ['form-data'],
-  template: '#lnbits-new-user-wallet',
+window.app.component('lnbits-wallet-new', {
+  template: '#lnbits-wallet-new',
   mixins: [window.windowMixin],
   data() {
     return {
       walletTypes: [{label: 'Lightning Wallet', value: 'lightning'}],
-      newWallet: {walletType: 'lightning', name: '', sharedWalletId: ''}
+      newWallet: {name: '', sharedWalletId: ''}
+    }
+  },
+  computed: {
+    inviteWalletOptions() {
+      return (this.g.user?.extra?.wallet_invite_requests || []).map(i => ({
+        label: `${i.to_wallet_name} (from ${i.from_user_name})`,
+        value: i.to_wallet_id
+      }))
     }
   },
   methods: {
@@ -40,9 +47,8 @@ window.app.component('lnbits-new-user-wallet', {
       }
     },
     async submitAddWallet() {
-      console.log('### submitAddWallet', this.newWallet)
       const data = this.newWallet
-      if (data.walletType === 'lightning' && !data.name) {
+      if (this.g.newWalletType === 'lightning' && !data.name) {
         this.$q.notify({
           message: 'Please enter a name for the wallet',
           color: 'warning'
@@ -50,7 +56,7 @@ window.app.component('lnbits-new-user-wallet', {
         return
       }
 
-      if (data.walletType === 'lightning-shared' && !data.sharedWalletId) {
+      if (this.g.newWalletType === 'lightning-shared' && !data.sharedWalletId) {
         this.$q.notify({
           message: 'Missing a shared wallet ID',
           color: 'warning'
@@ -61,7 +67,7 @@ window.app.component('lnbits-new-user-wallet', {
         await LNbits.api.createWallet(
           this.g.user.wallets[0],
           data.name,
-          data.walletType,
+          this.g.newWalletType,
           {
             shared_wallet_id: data.sharedWalletId
           }

lnbits/static/js/globals.js

@@ -18,6 +18,8 @@ window.g = Vue.reactive({
   wallets: [],
   payments: [],
   walletEventListeners: [],
+  showNewWalletDialog: false,
+  newWalletType: 'lightning',
   updatePayments: false,
   updatePaymentsHash: '',
   mobileSimple: localStore('lnbits.mobileSimple', true),

lnbits/static/js/pages/wallets.js

@@ -73,11 +73,6 @@ window.PageWallets = {
         this.walletsTable.loading = false
       }
     },
-    showNewWalletDialog() {
-      this.addWalletDialog = {show: true, walletType: 'lightning'}
-      this.showAddNewWalletDialog() // from base.js
-    },
-
     goToWallet(walletId) {
       window.location = `/wallet?wal=${walletId}`
     },

lnbits/static/js/windowMixin.js

@@ -6,7 +6,6 @@ window.windowMixin = {
       utils: window._lnbitsUtils,
       g: window.g,
       toggleSubs: true,
-      addWalletDialog: {show: false, walletType: 'lightning'},
       isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
       allowedThemes: WINDOW_SETTINGS['LNBITS_THEME_OPTIONS'],
       walletEventListeners: [],
@@ -15,6 +14,10 @@ window.windowMixin = {
   },
 
   methods: {
+    openNewWalletDialog(walletType = 'lightning') {
+      this.g.newWalletType = walletType
+      this.g.showNewWalletDialog = true
+    },
     flipWallets(smallScreen) {
       this.g.walletFlip = !this.g.walletFlip
       if (this.g.walletFlip && smallScreen) {
@@ -27,14 +30,6 @@ window.windowMixin = {
         path: '/wallets'
       })
     },
-    handleWalletAction(payload) {
-      if (payload.action === 'create-wallet') {
-        this.showAddNewWalletDialog()
-      }
-    },
-    showAddNewWalletDialog() {
-      this.addWalletDialog = {show: true, walletType: 'lightning'}
-    },
     paymentEvents() {
       this.g.walletEventListeners = this.g.walletEventListeners || []
       this.g.user.wallets.forEach(wallet => {

lnbits/static/vendor.json

@@ -67,11 +67,10 @@
     "js/components/admin/lnbits-admin-site-customisation.js",
     "js/components/admin/lnbits-admin-assets-config.js",
     "js/components/admin/lnbits-admin-audit.js",
-    "js/components/lnbits-wallet-list.js",
     "js/components/lnbits-wallet-api-docs.js",
+    "js/components/lnbits-wallet-new.js",
     "js/components/lnbits-wallet-share.js",
     "js/components/lnbits-home-logos.js",
-    "js/components/lnbits-new-user-wallet.js",
     "js/components/lnbits-qrcode.js",
     "js/components/lnbits-qrcode-lnurl.js",
     "js/components/lnbits-footer.js",
@@ -80,6 +79,7 @@
     "js/components/lnbits-drawer.js",
     "js/components/lnbits-theme.js",
     "js/components/lnbits-manage-extension-list.js",
+    "js/components/lnbits-manage-wallet-list.js",
     "js/components/lnbits-language-dropdown.js",
     "js/components/lnbits-payment-list.js",
     "js/components/extension-settings.js",

lnbits/templates/base.html

@@ -40,6 +40,7 @@
         {% endblock %} {% block page_container %}
         <q-page-container>
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+            <lnbits-wallet-new></lnbits-wallet-new>
             <lnbits-header-wallets></lnbits-header-wallets>
             <router-view v-if="isVueRoute"></router-view>
             <!-- FastAPI Content -->

lnbits/templates/components.vue

@@ -10,17 +10,17 @@ include('components/admin/extensions.vue') %} {%
 include('components/admin/assets-config.vue') %} {%
 include('components/admin/notifications.vue') %} {%
 include('components/admin/server.vue') %} {%
-include('components/new_user_wallet.vue') %} {%
 include('components/lnbits-footer.vue') %} {%
 include('components/lnbits-header.vue') %} {%
 include('components/lnbits-header-wallets.vue') %} {%
 include('components/lnbits-drawer.vue') %} {%
 include('components/lnbits-home-logos.vue') %} {%
 include('components/lnbits-manage-extension-list.vue') %} {%
+include('components/lnbits-manage-wallet-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
 include('components/lnbits-payment-list.vue') %} {%
+include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%
-include('components/lnbits-wallet-list.vue') %} {%
 include('components/lnbits-wallet-share.vue') %}
 
 <template id="lnbits-manage">

lnbits/templates/components/lnbits-drawer.vue

@@ -32,11 +32,7 @@
           </q-btn>
         </q-item-section>
       </q-item>
-      <lnbits-wallet-list
-        v-if="!g.walletFlip"
-        :balance="balance"
-        @wallet-action="handleWalletAction"
-      ></lnbits-wallet-list>
+      <lnbits-manage-wallet-list></lnbits-manage-wallet-list>
       <lnbits-manage></lnbits-manage>
       <lnbits-manage-extension-list
         class="q-pb-xl"

lnbits/templates/components/lnbits-header-wallets.vue

@@ -14,19 +14,22 @@
     "
   >
     <div class="row no-wrap q-pr-md">
-      <q-card
-        @click="showAddNewWalletDialog()"
-        class="wallet-list-card cursor-pointer"
-      >
+      <q-card class="wallet-list-card cursor-pointer">
         <q-card-section class="flex flex-center column full-height text-center">
           <div>
-            <q-btn round color="primary" icon="add">
+            <q-btn
+              @click="openNewWalletDialog()"
+              round
+              color="primary"
+              icon="add"
+            >
               <q-tooltip><span v-text="$t('add_new_wallet')"></span></q-tooltip>
             </q-btn>
           </div>
           <div>
             <q-badge
-              @click="addWalletDialog.walletType = 'lightning-shared  '"
+              v-if="g.user.walletInvitesCount"
+              @click="openNewWalletDialog('lightning-shared')"
               dense
               outline
               class="q-mt-sm"
@@ -47,36 +50,28 @@
         clickable
         @click="selectWallet(wallet)"
         class="wallet-list-card"
-        style="text-decoration: none"
+        :class="{
+          'active-wallet-card': g.wallet && g.wallet.id === wallet.id
+        }"
+        style="width: 250px; cursor: pointer"
         :style="
           g.wallet && g.wallet.id === wallet.id
-            ? `width: 250px; text-decoration: none; cursor: pointer; background-color: ${
+            ? `background-color: ${
                 $q.dark.isActive
                   ? 'rgba(255, 255, 255, 0.08)'
                   : 'rgba(0, 0, 0, 0.08)'
               } !important;`
-            : 'width: 250px; text-decoration: none; border: 0px; cursor: pointer;'
+            : ''
         "
-        :class="{
-          'active-wallet-card': g.wallet && g.wallet.id === wallet.id
-        }"
       >
         <q-card-section>
           <div class="row items-center">
             <q-avatar
               size="lg"
               :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
-              :class="g.wallet && g.wallet.id === wallet.id ? '' : 'disabled'"
-              :color="
-                g.wallet && g.wallet.id === wallet.id
-                  ? wallet.extra.color
-                  : wallet.extra.color
-              "
-              :icon="
-                g.wallet && g.wallet.id === wallet.id
-                  ? wallet.extra.icon
-                  : wallet.extra.icon
-              "
+              :class="g.wallet && g.wallet.id === wallet.id ? 'disabled' : ''"
+              :color="wallet.extra.color"
+              :icon="wallet.extra.icon"
             >
             </q-avatar>
             <div
@@ -115,11 +110,4 @@
       </q-card>
     </div>
   </q-scroll-area>
-  <q-dialog
-    v-model="addWalletDialog.show"
-    position="top"
-    @hide="addWalletDialog = {show: false}"
-  >
-    <lnbits-new-user-wallet :form-data="formData"></lnbits-new-user-wallet>
-  </q-dialog>
 </template>

lnbits/templates/components/lnbits-manage-wallet-list.vue

@@ -1,6 +1,6 @@
-<template id="lnbits-wallet-list">
+<template id="lnbits-manage-wallet-list">
   <q-list
-    v-if="g.user && g.user.wallets.length"
+    v-if="g.user && g.user.wallets.length && !g.walletFlip"
     dense
     class="lnbits-drawer__q-list"
   >
@@ -67,7 +67,14 @@
         ></q-item-label>
       </q-item-section>
     </q-item>
-    <q-item clickable @click="createWallet()">
+    <q-item
+      clickable
+      @click="
+        g.user.walletInvitesCount
+          ? openNewWalletDialog('lightning-shared')
+          : openNewWalletDialog('lightning')
+      "
+    >
       <q-item-section side>
         <q-icon name="add" color="grey-5" size="md"></q-icon>
       </q-item-section>

lnbits/templates/components/lnbits-wallet-new.vue

@@ -0,0 +1,95 @@
+<template id="lnbits-wallet-new">
+  <q-dialog v-model="g.showNewWalletDialog" position="top">
+    <q-card class="q-pa-lg q-pt-md lnbits__dialog-card">
+      <q-card-section>
+        <div class="text-h6">
+          <span v-text="$t('add_new_wallet')"></span>
+        </div>
+      </q-card-section>
+      <q-card-section v-if="g.user.walletInvitesCount">
+        <q-badge
+          @click="g.newWalletType = 'lightning-shared'"
+          class="cursor-pointer"
+        >
+          <span
+            v-text="
+              'You have ' +
+              g.user.walletInvitesCount +
+              ' wallet invitation' +
+              (g.user.walletInvitesCount > 1 ? 's' : '')
+            "
+          ></span>
+        </q-badge>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-select
+          v-if="walletTypes.length > 1"
+          :options="walletTypes"
+          emit-value
+          map-options
+          :label="$t('wallet_type')"
+          v-model="g.newWalletType"
+          dense
+        ></q-select>
+        <q-input
+          v-if="g.newWalletType == 'lightning'"
+          dense
+          v-model="newWallet.name"
+          :label="$t('wallet_name')"
+          autofocus
+          @keyup.enter="submitAddWallet()"
+          class="q-mt-md"
+        ></q-input>
+
+        <q-select
+          v-if="g.newWalletType == 'lightning-shared'"
+          v-model="newWallet.sharedWalletId"
+          :label="$t('shared_wallet_id')"
+          emit-value
+          map-options
+          dense
+          :options="inviteWalletOptions"
+          class="q-mt-md"
+        ></q-select>
+        <div v-if="g.newWalletType == 'lightning-shared'" class="q-mt-md">
+          <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions class="text-primary">
+        <div class="row full-width">
+          <div class="col-md-4">
+            <q-btn
+              flat
+              :label="$t('cancel')"
+              class="float-left"
+              v-close-popup
+            ></q-btn>
+          </div>
+          <div class="col-md-4">
+            <q-btn
+              v-if="g.newWalletType == 'lightning-shared'"
+              :disabled="!newWallet.sharedWalletId"
+              flat
+              :label="$t('reject_wallet')"
+              v-close-popup
+              color="negative"
+              @click="submitRejectWalletInvitation()"
+            ></q-btn>
+            <span v-else></span>
+          </div>
+          <div class="col-md-4">
+            <q-btn
+              flat
+              :label="$t('add_wallet')"
+              v-close-popup
+              @click="submitAddWallet()"
+              class="float-right"
+            ></q-btn>
+          </div>
+        </div>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

lnbits/templates/components/new_user_wallet.vue

@@ -1,98 +0,0 @@
-<template id="lnbits-new-user-wallet">
-  <q-card class="q-pa-lg q-pt-md lnbits__dialog-card">
-    <q-card-section>
-      <div class="text-h6">
-        <span v-text="$t('add_new_wallet')"></span>
-      </div>
-    </q-card-section>
-    <q-card-section v-if="g.user.walletInvitesCount">
-      <q-badge
-        @click="newWallet.walletType = 'lightning-shared'"
-        class="cursor-pointer"
-      >
-        <span
-          v-text="
-            'You have ' +
-            g.user.walletInvitesCount +
-            ' wallet invitation' +
-            (g.user.walletInvitesCount > 1 ? 's' : '')
-          "
-        ></span>
-      </q-badge>
-    </q-card-section>
-
-    <q-card-section class="q-pt-none">
-      <q-select
-        v-if="walletTypes.length > 1"
-        :options="walletTypes"
-        emit-value
-        map-options
-        :label="$t('wallet_type')"
-        v-model="newWallet.walletType"
-        dense
-      ></q-select>
-      <q-input
-        v-if="newWallet.walletType == 'lightning'"
-        dense
-        v-model="newWallet.name"
-        :label="$t('wallet_name')"
-        autofocus
-        @keyup.enter="submitAddWallet()"
-        class="q-mt-md"
-      ></q-input>
-
-      <q-select
-        v-if="newWallet.walletType == 'lightning-shared'"
-        v-model="newWallet.sharedWalletId"
-        :label="$t('shared_wallet_id')"
-        emit-value
-        map-options
-        dense
-        :options="
-          g.user.extra.wallet_invite_requests.map(i => ({
-            label: i.to_wallet_name + ' (' + i.from_user_name + ')',
-            value: i.to_wallet_id
-          }))
-        "
-        class="q-mt-md"
-      ></q-select>
-      <div v-if="newWallet.walletType == 'lightning-shared'" class="q-mt-md">
-        <span v-text="$t('shared_wallet_desc')" class="q-mt-lg"></span>
-      </div>
-    </q-card-section>
-
-    <q-card-actions class="text-primary">
-      <div class="row full-width">
-        <div class="col-md-4">
-          <q-btn
-            flat
-            :label="$t('cancel')"
-            class="float-left"
-            v-close-popup
-          ></q-btn>
-        </div>
-        <div class="col-md-4">
-          <q-btn
-            v-if="newWallet.walletType == 'lightning-shared'"
-            :disabled="!newWallet.sharedWalletId"
-            flat
-            :label="$t('reject_wallet')"
-            v-close-popup
-            color="negative"
-            @click="submitRejectWalletInvitation()"
-          ></q-btn>
-          <span v-else></span>
-        </div>
-        <div class="col-md-4">
-          <q-btn
-            flat
-            :label="$t('add_wallet')"
-            v-close-popup
-            @click="submitAddWallet()"
-            class="float-right"
-          ></q-btn>
-        </div>
-      </div>
-    </q-card-actions>
-  </q-card>
-</template>

lnbits/templates/pages/wallets.vue

@@ -6,7 +6,7 @@
           <div class="row items-center justify-between q-gutter-xs">
             <div class="col">
               <q-btn
-                @click="showNewWalletDialog()"
+                @click="openNewWalletDialog()"
                 :label="$t('add_wallet')"
                 color="primary"
               >
@@ -123,12 +123,4 @@
       </div>
     </div>
   </div>
-
-  <q-dialog
-    v-model="addWalletDialog.show"
-    persistent
-    @hide="addWalletDialog = {show: false}"
-  >
-    <lnbits-new-user-wallet></lnbits-new-user-wallet>
-  </q-dialog>
 </template>

package.json

@@ -119,11 +119,10 @@
       "js/components/admin/lnbits-admin-site-customisation.js",
       "js/components/admin/lnbits-admin-assets-config.js",
       "js/components/admin/lnbits-admin-audit.js",
-      "js/components/lnbits-wallet-list.js",
       "js/components/lnbits-wallet-api-docs.js",
+      "js/components/lnbits-wallet-new.js",
       "js/components/lnbits-wallet-share.js",
       "js/components/lnbits-home-logos.js",
-      "js/components/lnbits-new-user-wallet.js",
       "js/components/lnbits-qrcode.js",
       "js/components/lnbits-qrcode-lnurl.js",
       "js/components/lnbits-footer.js",
@@ -132,6 +131,7 @@
       "js/components/lnbits-drawer.js",
       "js/components/lnbits-theme.js",
       "js/components/lnbits-manage-extension-list.js",
+      "js/components/lnbits-manage-wallet-list.js",
       "js/components/lnbits-language-dropdown.js",
       "js/components/lnbits-payment-list.js",
       "js/components/extension-settings.js",