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",