make wallets name prettier! (#1918)

* make wallets name prettier!

* Update lnbits/core/templates/admin/index.html

Co-authored-by: dni ⚡ <office@dnilabs.com>

* Update lnbits/core/templates/admin/index.html

Co-authored-by: dni ⚡ <office@dnilabs.com>

---------

Co-authored-by: Arc <33088785+arcbtc@users.noreply.github.com>
Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/core/templates/admin/_tab_funding.html

@@ -31,13 +31,8 @@
           <div class="row">
             <div class="col-12">
               <p>Active Funding<small> (Requires server restart)</small></p>
-              <q-select
+              <q-select :disable="!isSuperUser" filled v-model="formData.lnbits_backend_wallet_class"
-                :disable="!isSuperUser"
+                hint="Select the active funding wallet" :options="settings.lnbits_allowed_funding_sources"></q-select>
-                filled
-                v-model="formData.lnbits_backend_wallet_class"
-                hint="Select the active funding wallet"
-                :options="settings.lnbits_allowed_funding_sources"
-              ></q-select>
             </div>
           </div>
         </div>
@@ -45,36 +40,20 @@
           <div class="row q-col-gutter-md">
             <div class="col-12 col-md-4">
               <p>Invoice Expiry</p>
-              <q-input
+              <q-input filled v-model.number="formData.lightning_invoice_expiry" type="number"
-                filled
+                label="Invoice expiry (seconds)" mask="#######">
-                v-model.number="formData.lightning_invoice_expiry"
-                type="number"
-                label="Invoice expiry (seconds)"
-                mask="#######"
-              >
               </q-input>
             </div>
             <div class="col-12 col-md-8">
               <p>Fee reserve</p>
               <div class="row q-col-gutter-md">
                 <div class="col-6">
-                  <q-input
+                  <q-input type="number" filled v-model="formData.lnbits_reserve_fee_min" label="Reserve fee in msats">
-                    type="number"
-                    filled
-                    v-model="formData.lnbits_reserve_fee_min"
-                    label="Reserve fee in msats"
-                  >
                   </q-input>
                 </div>
                 <div class="col-6">
-                  <q-input
+                  <q-input type="number" filled name="lnbits_reserve_fee_percent"
-                    type="number"
+                    v-model="formData.lnbits_reserve_fee_percent" label="Reserve fee in percent" step="0.1"></q-input>
-                    filled
-                    name="lnbits_reserve_fee_percent"
-                    v-model="formData.lnbits_reserve_fee_percent"
-                    label="Reserve fee in percent"
-                    step="0.1"
-                  ></q-input>
                 </div>
               </div>
             </div>
@@ -85,30 +64,13 @@
         <p class="q-my-md">
           Funding Sources<small> (Requires server restart)</small>
         </p>
-        <q-list
+        <q-list v-for="(fund, idx) in settings.lnbits_allowed_funding_sources" :key="idx">
-          v-for="(fund, idx) in settings.lnbits_allowed_funding_sources"
+          <q-expansion-item expand-separator icon="payments" :label="prettyFunding.get(fund) || fund"
-          :key="idx"
+            v-if="funding_sources.get(fund)">
-        >
-          <q-expansion-item
-            expand-separator
-            icon="payments"
-            :label="fund"
-            v-if="funding_sources.get(fund)"
-          >
             <q-card>
-              <q-card-section
+              <q-card-section v-for="([key, prop], i) in Object.entries(funding_sources.get(fund))" :key="i">
-                v-for="([key, prop], i) in Object.entries(funding_sources.get(fund))"
+                <q-input dense filled type="text" v-model="formData[key]" :label="prop.label" class="q-pr-md"
-                :key="i"
+                  :hint="prop.hint"></q-input>
-              >
-                <q-input
-                  dense
-                  filled
-                  type="text"
-                  v-model="formData[key]"
-                  :label="prop.label"
-                  class="q-pr-md"
-                  :hint="prop.hint"
-                ></q-input>
               </q-card-section>
             </q-card>
           </q-expansion-item>
@@ -116,4 +78,4 @@
       </div>
     </div>
   </q-card-section>
-</q-tab-panel>
+</q-tab-panel>

lnbits/core/templates/admin/index.html

@@ -2,63 +2,26 @@
 %} {% block page %}
 <div class="row q-col-gutter-md justify-center">
   <div class="col q-my-md">
-    <q-btn
+    <q-btn :label="$t('save')" color="primary" @click="updateSettings" :disabled="!checkChanges">
-      :label="$t('save')"
+      <q-tooltip v-if="checkChanges">{%raw%}{{ $t('save_tooltip') }}{%endraw%}</q-tooltip>
-      color="primary"
-      @click="updateSettings"
-      :disabled="!checkChanges"
-    >
-      <q-tooltip v-if="checkChanges"
-        >{%raw%}{{ $t('save_tooltip') }}{%endraw%}</q-tooltip
-      >
 
-      <q-badge
+      <q-badge v-if="checkChanges" color="red" rounded floating style="padding: 6px; border-radius: 6px" />
-        v-if="checkChanges"
-        color="red"
-        rounded
-        floating
-        style="padding: 6px; border-radius: 6px"
-      />
     </q-btn>
 
-    <q-btn
+    <q-btn v-if="isSuperUser" :label="$t('restart')" color="primary" @click="restartServer">
-      v-if="isSuperUser"
+      <q-tooltip v-if="needsRestart">{%raw%}{{ $t('restart_tooltip') }}{%endraw%}</q-tooltip>
-      :label="$t('restart')"
-      color="primary"
-      @click="restartServer"
-    >
-      <q-tooltip v-if="needsRestart"
-        >{%raw%}{{ $t('restart_tooltip') }}{%endraw%}</q-tooltip
-      >
 
-      <q-badge
+      <q-badge v-if="needsRestart" color="red" rounded floating style="padding: 6px; border-radius: 6px" />
-        v-if="needsRestart"
-        color="red"
-        rounded
-        floating
-        style="padding: 6px; border-radius: 6px"
-      />
     </q-btn>
 
-    <q-btn
+    <q-btn v-if="isSuperUser" :label="$t('topup')" color="primary" @click="topUpDialog.show = true">
-      v-if="isSuperUser"
-      :label="$t('topup')"
-      color="primary"
-      @click="topUpDialog.show = true"
-    >
       <q-tooltip>{%raw%}{{ $t('add_funds_tooltip') }}{%endraw%}</q-tooltip>
     </q-btn>
 
     <q-btn :label="$t('download_backup')" flat @click="downloadBackup"></q-btn>
 
-    <q-btn
+    <q-btn flat v-if="isSuperUser" :label="$t('reset_defaults')" color="primary" @click="deleteSettings"
-      flat
+      class="float-right">
-      v-if="isSuperUser"
-      :label="$t('reset_defaults')"
-      color="primary"
-      @click="deleteSettings"
-      class="float-right"
-    >
       <q-tooltip>{%raw%}{{ $t('reset_defaults_tooltip') }}{%endraw%}</q-tooltip>
     </q-btn>
   </div>
@@ -70,35 +33,15 @@
       <div class="q-pa-md">
         <div class="q-gutter-y-md">
           <q-tabs v-model="tab" active-color="primary" align="justify">
-            <q-tab
+            <q-tab name="funding" :label="$t('funding')" @update="val => tab = val.name"></q-tab>
-              name="funding"
-              :label="$t('funding')"
-              @update="val => tab = val.name"
-            ></q-tab>
 
-            <q-tab
+            <q-tab name="users" :label="$t('users')" @update="val => tab = val.name"></q-tab>
-              name="users"
-              :label="$t('users')"
-              @update="val => tab = val.name"
-            ></q-tab>
 
-            <q-tab
+            <q-tab name="server" :label="$t('server')" @update="val => tab = val.name"></q-tab>
-              name="server"
-              :label="$t('server')"
-              @update="val => tab = val.name"
-            ></q-tab>
 
-            <q-tab
+            <q-tab name="security" :label="$t('security')" @update="val => tab = val.name"></q-tab>
-              name="security"
-              :label="$t('security')"
-              @update="val => tab = val.name"
-            ></q-tab>
 
-            <q-tab
+            <q-tab name="theme" :label="$t('theme')" @update="val => tab = val.name"></q-tab>
-              name="theme"
-              :label="$t('theme')"
-              @update="val => tab = val.name"
-            ></q-tab>
           </q-tabs>
         </div>
       </div>
@@ -122,43 +65,20 @@
 
       <div class="row">
         <div class="col-12">
-          <q-input
+          <q-input dense type="text" filled v-model="wallet.id" label="Wallet ID" :hint="$t('topup_hint')"></q-input>
-            dense
-            type="text"
-            filled
-            v-model="wallet.id"
-            label="Wallet ID"
-            :hint="$t('topup_hint')"
-          ></q-input>
 
           <br />
         </div>
 
         <div class="col-12">
-          <q-input
+          <q-input dense type="number" filled v-model="wallet.amount" :label="$t('amount')"></q-input>
-            dense
-            type="number"
-            filled
-            v-model="wallet.amount"
-            :label="$t('amount')"
-          ></q-input>
         </div>
       </div>
 
       <div class="row q-mt-lg">
-        <q-btn
+        <q-btn :label="$t('topup')" color="primary" @click="topupWallet"></q-btn>
-          :label="$t('topup')"
-          color="primary"
-          @click="topupWallet"
-        ></q-btn>
 
-        <q-btn
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto" :label="$t('cancel')"></q-btn>
-          v-close-popup
-          flat
-          color="grey"
-          class="q-ml-auto"
-          :label="$t('cancel')"
-        ></q-btn>
       </div>
     </q-form>
   </q-card>
@@ -216,6 +136,21 @@
         },
         tab: 'funding',
         needsRestart: false,
+        prettyFunding: new Map([
+          ["VoidWallet", "Void Wallet"],
+          ["FakeWallet", "Fake Wallet"],
+          ["CoreLightningWallet", "Core Lightning"],
+          ["CoreLightningRestWallet", "Core Lightning"],
+          ["LndRestWallet", "Lightning Network Daemon (LND Rest)"],
+          ["LndWallet", "Lightning Network Daemon (LND)"],
+          ["LnTipsWallet", "LN.Tips"],
+          ["LNPayWallet", "LN Pay"],
+          ["EclairWallet", "Eclair (ACINQ)"],
+          ["LNbitsWallet", "LNBits"],
+          ["OpenNodeWallet", "OpenNode"],
+          ["ClicheWallet", "Cliche (NBD)"],
+          ["SparkWallet", "Spark"]
+        ]),
         funding_sources: new Map([
           ['VoidWallet', null],
           [
@@ -471,7 +406,7 @@
             '/api/v1/ws/' +
             digestHex
           this.ws = new WebSocket(localUrl)
-          this.ws.addEventListener('message', async ({data}) => {
+          this.ws.addEventListener('message', async ({ data }) => {
             this.logs.push(data.toString())
             const scrollArea = this.$refs.logScroll
             if (scrollArea) {
@@ -610,7 +545,7 @@
           .then(response => {
             this.isSuperUser = response.data.is_super_user || false
             this.settings = response.data
-            this.formData = {...this.settings}
+            this.formData = { ...this.settings }
             this.updateFundingData()
             this.getNotifications()
           })
@@ -633,17 +568,16 @@
           .then(response => {
             this.needsRestart =
               this.settings.lnbits_backend_wallet_class !==
-                this.formData.lnbits_backend_wallet_class ||
+              this.formData.lnbits_backend_wallet_class ||
               this.settings.lnbits_killswitch !==
-                this.formData.lnbits_killswitch
+              this.formData.lnbits_killswitch
             this.settings = this.formData
             this.formData = _.clone(this.settings)
             this.updateFundingData()
             this.$q.notify({
               type: 'positive',
-              message: `Success! Settings changed! ${
+              message: `Success! Settings changed! ${this.needsRestart ? 'Restart required!' : ''
-                this.needsRestart ? 'Restart required!' : ''
+                }`,
-              }`,
               icon: null
             })
           })
@@ -682,4 +616,4 @@
     }
   })
 </script>
-{% endblock %}
+{% endblock %}