refactor: move _api_docs.html into vue component (#3520)

lnbits/core/templates/core/_api_docs.html

@@ -1,305 +0,0 @@
-<q-expansion-item
-  group="extras"
-  icon="vpn_key"
-  :label="$t('api_keys_api_docs')"
-  :content-inset-level="0.5"
->
-  <q-card-section>
-    <q-list>
-      <q-item dense class="q-pa-none">
-        <q-item-section>
-          <q-item-label>
-            <strong>Node URL: </strong><em v-text="origin"></em>
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-item dense class="q-pa-none">
-        <q-item-section>
-          <q-item-label>
-            <strong>Wallet ID: </strong><em v-text="wallet.id"></em>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <q-icon
-            name="content_copy"
-            class="cursor-pointer"
-            @click="copyText(wallet.id)"
-          ></q-icon>
-        </q-item-section>
-      </q-item>
-      <q-item dense class="q-pa-none">
-        <q-item-section>
-          <q-item-label>
-            <strong>Admin key: </strong
-            ><em
-              v-text="adminkeyHidden ? '****************' : wallet.adminkey"
-            ></em>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <div>
-            <q-icon
-              :name="adminkeyHidden ? 'visibility_off' : 'visibility'"
-              class="cursor-pointer"
-              @click="adminkeyHidden = !adminkeyHidden"
-            ></q-icon>
-            <q-icon
-              name="content_copy"
-              class="cursor-pointer q-ml-sm"
-              @click="copyText(wallet.adminkey)"
-            ></q-icon>
-            <q-icon name="qr_code" class="cursor-pointer q-ml-sm">
-              <q-popup-proxy>
-                <div class="q-pa-md">
-                  <lnbits-qrcode
-                    :value="wallet.adminkey"
-                    :show-buttons="false"
-                  ></lnbits-qrcode>
-                </div>
-              </q-popup-proxy>
-            </q-icon>
-          </div>
-        </q-item-section>
-      </q-item>
-      <q-item dense class="q-pa-none">
-        <q-item-section>
-          <q-item-label>
-            <strong>Invoice/read key: </strong
-            ><em v-text="inkeyHidden ? '****************' : wallet.inkey"></em>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <div>
-            <q-icon
-              :name="inkeyHidden ? 'visibility_off' : 'visibility'"
-              class="cursor-pointer"
-              @click="inkeyHidden = !inkeyHidden"
-            ></q-icon>
-            <q-icon
-              name="content_copy"
-              class="cursor-pointer q-ml-sm"
-              @click="copyText(wallet.inkey)"
-            ></q-icon>
-            <q-icon name="qr_code" class="cursor-pointer q-ml-sm">
-              <q-popup-proxy>
-                <div class="q-pa-md">
-                  <lnbits-qrcode
-                    :value="wallet.inkey"
-                    :show-buttons="false"
-                  ></lnbits-qrcode>
-                </div>
-              </q-popup-proxy>
-            </q-icon>
-          </div>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  </q-card-section>
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Get wallet details"
-  >
-    <q-card>
-      <q-card-section>
-        <code><span class="text-light-green">GET</span> /api/v1/wallet</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code
-          >{"X-Api-Key": "<i
-            v-text="inkeyHidden ? '****************' : wallet.inkey"
-          ></i
-          >"}</code
-        ><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 200 OK (application/json)
-        </h5>
-        <code
-          >{"id": &lt;string&gt;, "name": &lt;string&gt;, "balance":
-          &lt;int&gt;}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl <span v-text="baseUrl"></span>api/v1/wallet -H "X-Api-Key:
-          <i v-text="inkeyHidden ? '****************' : wallet.inkey"></i
-          >"</code
-        >
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Create an invoice (incoming)"
-  >
-    <q-card>
-      <q-card-section>
-        <code><span class="text-light-green">POST</span> /api/v1/payments</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code
-          >{"X-Api-Key": "<i
-            v-text="inkeyHidden ? '****************' : wallet.inkey"
-          ></i
-          >"}</code
-        ><br />
-        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <code
-          >{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;,
-          "expiry": &lt;int&gt;, "unit": &lt;string&gt;, "webhook":
-          &lt;url:string&gt;, "internal": &lt;bool&gt;}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 201 CREATED (application/json)
-        </h5>
-        <code
-          >{"payment_hash": &lt;string&gt;, "payment_request":
-          &lt;string&gt;}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X POST <span v-text="baseUrl"></span>api/v1/payments -d
-          '{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;}' -H
-          "X-Api-Key:
-          <i v-text="inkeyHidden ? '****************' : wallet.inkey"></i>" -H
-          "Content-type: application/json"</code
-        >
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Pay an invoice (outgoing)"
-  >
-    <q-card>
-      <q-card-section>
-        <code
-          ><span class="text-light-green">POST</span> /api/v1/payments (reveal
-          admin keys
-          <q-icon
-            :name="adminkeyHidden ? 'visibility_off' : 'visibility'"
-            class="cursor-pointer"
-            @click="adminkeyHidden = !adminkeyHidden"
-          ></q-icon
-          >)</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code
-          >{"X-Api-Key": "<i
-            v-text="adminkeyHidden ? '****************' : wallet.adminkey"
-          ></i
-          >"}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <code>{"out": true, "bolt11": &lt;string&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 201 CREATED (application/json)
-        </h5>
-        <code>{"payment_hash": &lt;string&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X POST <span v-text="baseUrl"></span>api/v1/payments -d
-          '{"out": true, "bolt11": &lt;string&gt;}' -H "X-Api-Key:
-          <i v-text="adminkeyHidden ? '****************' : wallet.adminkey"></i
-          >" -H "Content-type: application/json"</code
-        >
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Decode an invoice"
-  >
-    <q-card>
-      <q-card-section>
-        <code
-          ><span class="text-light-green">POST</span>
-          /api/v1/payments/decode</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Body (application/json)</h5>
-        <code>{"data": &lt;string&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 200 (application/json)
-        </h5>
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X POST <span v-text="baseUrl"></span>api/v1/payments/decode -d
-          '{"data": &lt;bolt11/lnurl, string&gt;}' -H "Content-type:
-          application/json"</code
-        >
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-  <q-expansion-item
-    group="api"
-    dense
-    expand-separator
-    label="Check an invoice (incoming or outgoing)"
-    class="q-pb-md"
-  >
-    <q-card>
-      <q-card-section>
-        <code
-          ><span class="text-light-blue">GET</span>
-          /api/v1/payments/&lt;payment_hash&gt;</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
-        <code
-          >{"X-Api-Key": "<i
-            v-text="inkeyHidden ? '****************' : wallet.inkey"
-          ></i
-          >"}</code
-        >
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 200 OK (application/json)
-        </h5>
-        <code>{"paid": &lt;bool&gt;}</code>
-        <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
-        <code
-          >curl -X GET
-          <span v-text="baseUrl"></span>api/v1/payments/&lt;payment_hash&gt; -H
-          "X-Api-Key:
-          <i v-text="inkeyHidden ? '****************' : wallet.inkey"></i>" -H
-          "Content-type: application/json"</code
-        >
-      </q-card-section>
-    </q-card>
-    <q-card>
-      <q-card-section>
-        <code
-          ><span class="text-pink">WS</span>
-          /api/v1/ws/&lt;invoice_key&gt;</code
-        >
-        <h5
-          class="text-caption q-mt-sm q-mb-none"
-          v-text="$t('websocket_example')"
-        ></h5>
-        <code
-          >wscat -c <span v-text="websocketUrl"></span>/<span
-            v-text="inkeyHidden ? '****************' : wallet.inkey"
-          ></span
-        ></code>
-        <h5 class="text-caption q-mt-sm q-mb-none">
-          Returns 200 OK (application/json)/payments
-        </h5>
-        <code>{"balance": &lt;int&gt;, "payment": &lt;object&gt;}</code>
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-  <q-separator></q-separator>
-  <q-card-section>
-    <p v-text="$t('reset_wallet_keys_desc')"></p>
-    <q-btn
-      unelevated
-      color="red-10"
-      @click="resetKeys()"
-      :label="$t('reset_wallet_keys')"
-    ></q-btn>
-  </q-card-section>
-</q-expansion-item>

lnbits/core/templates/core/wallet.html

@@ -532,7 +532,7 @@
                 </q-expansion-item>
 
                 <q-separator></q-separator>
-                {% include "core/_api_docs.html" %}
+                <lnbits-wallet-api-docs></lnbits-wallet-api-docs>
               </q-list>
             </q-card-section>
           </q-card>

lnbits/static/js/components.js

@@ -21,28 +21,6 @@ window.app.component('lnbits-fsat', {
   }
 })
 
-window.app.component('lnbits-wallet-list', {
-  mixins: [window.windowMixin],
-  template: '#lnbits-wallet-list',
-  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)
-  }
-})
-
 window.app.component('lnbits-manage', {
   mixins: [window.windowMixin],
   template: '#lnbits-manage',

lnbits/static/js/components/lnbits-wallet-api-docs.js

@@ -0,0 +1,47 @@
+window.app.component('lnbits-wallet-api-docs', {
+  template: '#lnbits-wallet-api-docs',
+  mixins: [window.windowMixin],
+  methods: {
+    resetKeys() {
+      LNbits.utils
+        .confirmDialog('Are you sure you want to reset your API keys?')
+        .onOk(() => {
+          LNbits.api
+            .resetWalletKeys(this.g.wallet)
+            .then(response => {
+              const {id, adminkey, inkey} = response
+              this.g.wallet = {
+                ...this.g.wallet,
+                inkey,
+                adminkey
+              }
+              const walletIndex = this.g.user.wallets.findIndex(
+                wallet => wallet.id === id
+              )
+              if (walletIndex !== -1) {
+                this.g.user.wallets[walletIndex] = {
+                  ...this.g.user.wallets[walletIndex],
+                  inkey,
+                  adminkey
+                }
+              }
+              Quasar.Notify.create({
+                timeout: 3500,
+                type: 'positive',
+                message: 'API keys reset!'
+              })
+            })
+            .catch(err => {
+              LNbits.utils.notifyApiError(err)
+            })
+        })
+    }
+  },
+  data() {
+    return {
+      inkeyHidden: true,
+      adminkeyHidden: true,
+      walletIdHidden: true
+    }
+  }
+})

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

@@ -0,0 +1,21 @@
+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/wallet.js

@@ -641,40 +641,6 @@ window.WalletPageLogic = {
           }
         })
     },
-    resetKeys() {
-      LNbits.utils
-        .confirmDialog('Are you sure you want to reset your API keys?')
-        .onOk(() => {
-          LNbits.api
-            .resetWalletKeys(this.g.wallet)
-            .then(response => {
-              const {id, adminkey, inkey} = response
-              this.g.wallet = {
-                ...this.g.wallet,
-                inkey,
-                adminkey
-              }
-              const walletIndex = this.g.user.wallets.findIndex(
-                wallet => wallet.id === id
-              )
-              if (walletIndex !== -1) {
-                this.g.user.wallets[walletIndex] = {
-                  ...this.g.user.wallets[walletIndex],
-                  inkey,
-                  adminkey
-                }
-              }
-              Quasar.Notify.create({
-                timeout: 3500,
-                type: 'positive',
-                message: 'API keys reset!'
-              })
-            })
-            .catch(err => {
-              LNbits.utils.notifyApiError(err)
-            })
-        })
-    },
     updateWallet(data) {
       LNbits.api
         .request('PATCH', '/api/v1/wallet', this.g.wallet.adminkey, data)

lnbits/static/vendor.json

@@ -67,6 +67,8 @@
     "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-home-logos.js",
     "js/components/lnbits-new-user-wallet.js",
     "js/components/lnbits-qrcode.js",

lnbits/templates/components.vue

@@ -18,98 +18,9 @@ include('components/lnbits-drawer.vue') %} {%
 include('components/lnbits-home-logos.vue') %} {%
 include('components/lnbits-manage-extension-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
-include('components/lnbits-payment-list.vue') %}
-
-<template id="lnbits-wallet-list">
-  <q-list
-    v-if="g.user && g.user.wallets.length"
-    dense
-    class="lnbits-drawer__q-list"
-  >
-    <q-item
-      v-for="walletRec in g.user.wallets.slice(
-        0,
-        g.user.extra.visible_wallet_count || 10
-      )"
-      :key="walletRec.id"
-      clickable
-      :active="g.wallet && g.wallet.id === walletRec.id"
-      @click="selectWallet(walletRec)"
-    >
-      <q-item-section side>
-        <q-avatar
-          size="lg"
-          :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
-          :class="g.wallet && g.wallet.id === walletRec.id ? '' : 'disabled'"
-          :color="
-            g.wallet && g.wallet.id === walletRec.id
-              ? walletRec.extra.color
-              : walletRec.extra.color
-          "
-          :icon="
-            g.wallet && g.wallet.id === walletRec.id
-              ? walletRec.extra.icon
-              : walletRec.extra.icon
-          "
-        >
-        </q-avatar>
-      </q-item-section>
-      <q-item-section
-        style="max-width: 100px"
-        class="q-my-none ellipsis full-width"
-      >
-        <q-item-label lines="1"
-          ><span v-text="walletRec.name"></span
-        ></q-item-label>
-        <q-item-label class="q-my-none ellipsis full-width" caption>
-          <strong v-text="formatBalance(walletRec.sat)"></strong>
-        </q-item-label>
-      </q-item-section>
-      <q-item-section
-        v-if="walletRec.walletType == 'lightning-shared'"
-        side
-        top
-      >
-        <q-icon name="group" :color="walletRec.extra.color" size="xs"></q-icon>
-      </q-item-section>
-    </q-item>
-    <q-item
-      v-if="g.user.hiddenWalletsCount > 0"
-      clickable
-      @click="goToWallets()"
-    >
-      <q-item-section side>
-        <q-icon name="more_horiz" color="grey-5" size="md"></q-icon>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          lines="1"
-          class="text-caption"
-          v-text="$t('more_count', {count: g.user.hiddenWalletsCount})"
-        ></q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item clickable @click="createWallet()">
-      <q-item-section side>
-        <q-icon name="add" color="grey-5" size="md"></q-icon>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label
-          lines="1"
-          class="text-caption"
-          v-text="$t('add_new_wallet')"
-        ></q-item-label>
-        <q-item-section v-if="g.user.walletInvitesCount" side>
-          <q-badge>
-            <span
-              v-text="'Wallet Invite (' + g.user.walletInvitesCount + ')'"
-            ></span>
-          </q-badge>
-        </q-item-section>
-      </q-item-section>
-    </q-item>
-  </q-list>
-</template>
+include('components/lnbits-payment-list.vue') %} {%
+include('components/lnbits-wallet-api-docs.vue') %} {%
+include('components/lnbits-wallet-list.vue') %}
 
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">

lnbits/templates/components/lnbits-wallet-api-docs.vue

@@ -0,0 +1,319 @@
+<template id="lnbits-wallet-api-docs">
+  <q-expansion-item
+    group="extras"
+    icon="vpn_key"
+    :label="$t('api_keys_api_docs')"
+    :content-inset-level="0.5"
+  >
+    <q-card-section>
+      <q-list>
+        <q-item dense class="q-pa-none">
+          <q-item-section>
+            <q-item-label>
+              <strong>Node URL: </strong><em v-text="origin"></em>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item dense class="q-pa-none">
+          <q-item-section>
+            <q-item-label>
+              <strong>Wallet ID: </strong><em v-text="g.wallet.id"></em>
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon
+              name="content_copy"
+              class="cursor-pointer"
+              @click="copyText(g.wallet.id)"
+            ></q-icon>
+          </q-item-section>
+        </q-item>
+        <q-item dense class="q-pa-none">
+          <q-item-section>
+            <q-item-label>
+              <strong>Admin key: </strong
+              ><em
+                v-text="adminkeyHidden ? '****************' : g.wallet.adminkey"
+              ></em>
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <div>
+              <q-icon
+                :name="adminkeyHidden ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="adminkeyHidden = !adminkeyHidden"
+              ></q-icon>
+              <q-icon
+                name="content_copy"
+                class="cursor-pointer q-ml-sm"
+                @click="copyText(g.wallet.adminkey)"
+              ></q-icon>
+              <q-icon name="qr_code" class="cursor-pointer q-ml-sm">
+                <q-popup-proxy>
+                  <div class="q-pa-md">
+                    <lnbits-qrcode
+                      :value="g.wallet.adminkey"
+                      :show-buttons="false"
+                    ></lnbits-qrcode>
+                  </div>
+                </q-popup-proxy>
+              </q-icon>
+            </div>
+          </q-item-section>
+        </q-item>
+        <q-item dense class="q-pa-none">
+          <q-item-section>
+            <q-item-label>
+              <strong>Invoice/read key: </strong
+              ><em
+                v-text="inkeyHidden ? '****************' : g.wallet.inkey"
+              ></em>
+            </q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <div>
+              <q-icon
+                :name="inkeyHidden ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="inkeyHidden = !inkeyHidden"
+              ></q-icon>
+              <q-icon
+                name="content_copy"
+                class="cursor-pointer q-ml-sm"
+                @click="copyText(g.wallet.inkey)"
+              ></q-icon>
+              <q-icon name="qr_code" class="cursor-pointer q-ml-sm">
+                <q-popup-proxy>
+                  <div class="q-pa-md">
+                    <lnbits-qrcode
+                      :value="g.wallet.inkey"
+                      :show-buttons="false"
+                    ></lnbits-qrcode>
+                  </div>
+                </q-popup-proxy>
+              </q-icon>
+            </div>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+    <q-expansion-item
+      group="api"
+      dense
+      expand-separator
+      label="Get wallet details"
+    >
+      <q-card>
+        <q-card-section>
+          <code><span class="text-light-green">GET</span> /api/v1/wallet</code>
+          <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
+          <code
+            >{"X-Api-Key": "<i
+              v-text="inkeyHidden ? '****************' : g.wallet.inkey"
+            ></i
+            >"}</code
+          ><br />
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 200 OK (application/json)
+          </h5>
+          <code
+            >{"id": &lt;string&gt;, "name": &lt;string&gt;, "balance":
+            &lt;int&gt;}</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+          <code
+            >curl <span v-text="baseUrl"></span>api/v1/wallet -H "X-Api-Key:
+            <i v-text="inkeyHidden ? '****************' : g.wallet.inkey"></i
+            >"</code
+          >
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+
+    <q-expansion-item
+      group="api"
+      dense
+      expand-separator
+      label="Create an invoice (incoming)"
+    >
+      <q-card>
+        <q-card-section>
+          <code
+            ><span class="text-light-green">POST</span> /api/v1/payments</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
+          <code
+            >{"X-Api-Key": "<i
+              v-text="inkeyHidden ? '****************' : g.wallet.inkey"
+            ></i
+            >"}</code
+          ><br />
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Body (application/json)
+          </h5>
+          <code
+            >{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;,
+            "expiry": &lt;int&gt;, "unit": &lt;string&gt;, "webhook":
+            &lt;url:string&gt;, "internal": &lt;bool&gt;}</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 201 CREATED (application/json)
+          </h5>
+          <code
+            >{"payment_hash": &lt;string&gt;, "payment_request":
+            &lt;string&gt;}</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+          <code
+            >curl -X POST <span v-text="baseUrl"></span>api/v1/payments -d
+            '{"out": false, "amount": &lt;int&gt;, "memo": &lt;string&gt;}' -H
+            "X-Api-Key:
+            <i v-text="inkeyHidden ? '****************' : g.wallet.inkey"></i>"
+            -H "Content-type: application/json"</code
+          >
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+    <q-expansion-item
+      group="api"
+      dense
+      expand-separator
+      label="Pay an invoice (outgoing)"
+    >
+      <q-card>
+        <q-card-section>
+          <code
+            ><span class="text-light-green">POST</span> /api/v1/payments (reveal
+            admin keys
+            <q-icon
+              :name="adminkeyHidden ? 'visibility_off' : 'visibility'"
+              class="cursor-pointer"
+              @click="adminkeyHidden = !adminkeyHidden"
+            ></q-icon
+            >)</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
+          <code
+            >{"X-Api-Key": "<i
+              v-text="adminkeyHidden ? '****************' : g.wallet.adminkey"
+            ></i
+            >"}</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Body (application/json)
+          </h5>
+          <code>{"out": true, "bolt11": &lt;string&gt;}</code>
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 201 CREATED (application/json)
+          </h5>
+          <code>{"payment_hash": &lt;string&gt;}</code>
+          <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+          <code
+            >curl -X POST <span v-text="baseUrl"></span>api/v1/payments -d
+            '{"out": true, "bolt11": &lt;string&gt;}' -H "X-Api-Key:
+            <i
+              v-text="adminkeyHidden ? '****************' : g.wallet.adminkey"
+            ></i
+            >" -H "Content-type: application/json"</code
+          >
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+
+    <q-expansion-item
+      group="api"
+      dense
+      expand-separator
+      label="Decode an invoice"
+    >
+      <q-card>
+        <q-card-section>
+          <code
+            ><span class="text-light-green">POST</span>
+            /api/v1/payments/decode</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Body (application/json)
+          </h5>
+          <code>{"data": &lt;string&gt;}</code>
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 200 (application/json)
+          </h5>
+          <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+          <code
+            >curl -X POST <span v-text="baseUrl"></span>api/v1/payments/decode
+            -d '{"data": &lt;bolt11/lnurl, string&gt;}' -H "Content-type:
+            application/json"</code
+          >
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+    <q-expansion-item
+      group="api"
+      dense
+      expand-separator
+      label="Check an invoice (incoming or outgoing)"
+      class="q-pb-md"
+    >
+      <q-card>
+        <q-card-section>
+          <code
+            ><span class="text-light-blue">GET</span>
+            /api/v1/payments/&lt;payment_hash&gt;</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">Headers</h5>
+          <code
+            >{"X-Api-Key": "<i
+              v-text="inkeyHidden ? '****************' : g.wallet.inkey"
+            ></i
+            >"}</code
+          >
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 200 OK (application/json)
+          </h5>
+          <code>{"paid": &lt;bool&gt;}</code>
+          <h5 class="text-caption q-mt-sm q-mb-none">Curl example</h5>
+          <code
+            >curl -X GET
+            <span v-text="baseUrl"></span>api/v1/payments/&lt;payment_hash&gt;
+            -H "X-Api-Key:
+            <i v-text="inkeyHidden ? '****************' : g.wallet.inkey"></i>"
+            -H "Content-type: application/json"</code
+          >
+        </q-card-section>
+      </q-card>
+      <q-card>
+        <q-card-section>
+          <code
+            ><span class="text-pink">WS</span>
+            /api/v1/ws/&lt;invoice_key&gt;</code
+          >
+          <h5
+            class="text-caption q-mt-sm q-mb-none"
+            v-text="$t('websocket_example')"
+          ></h5>
+          <code
+            >wscat -c <span v-text="websocketUrl"></span>/<span
+              v-text="inkeyHidden ? '****************' : g.wallet.inkey"
+            ></span
+          ></code>
+          <h5 class="text-caption q-mt-sm q-mb-none">
+            Returns 200 OK (application/json)/payments
+          </h5>
+          <code>{"balance": &lt;int&gt;, "payment": &lt;object&gt;}</code>
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+    <q-separator></q-separator>
+    <q-card-section>
+      <p v-text="$t('reset_wallet_keys_desc')"></p>
+      <q-btn
+        unelevated
+        color="red-10"
+        @click="resetKeys()"
+        :label="$t('reset_wallet_keys')"
+      ></q-btn>
+    </q-card-section>
+  </q-expansion-item>
+</template>

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

@@ -0,0 +1,90 @@
+<template id="lnbits-wallet-list">
+  <q-list
+    v-if="g.user && g.user.wallets.length"
+    dense
+    class="lnbits-drawer__q-list"
+  >
+    <q-item
+      v-for="walletRec in g.user.wallets.slice(
+        0,
+        g.user.extra.visible_wallet_count || 10
+      )"
+      :key="walletRec.id"
+      clickable
+      :active="g.wallet && g.wallet.id === walletRec.id"
+      @click="selectWallet(walletRec)"
+    >
+      <q-item-section side>
+        <q-avatar
+          size="lg"
+          :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
+          :class="g.wallet && g.wallet.id === walletRec.id ? '' : 'disabled'"
+          :color="
+            g.wallet && g.wallet.id === walletRec.id
+              ? walletRec.extra.color
+              : walletRec.extra.color
+          "
+          :icon="
+            g.wallet && g.wallet.id === walletRec.id
+              ? walletRec.extra.icon
+              : walletRec.extra.icon
+          "
+        >
+        </q-avatar>
+      </q-item-section>
+      <q-item-section
+        style="max-width: 100px"
+        class="q-my-none ellipsis full-width"
+      >
+        <q-item-label lines="1"
+          ><span v-text="walletRec.name"></span
+        ></q-item-label>
+        <q-item-label class="q-my-none ellipsis full-width" caption>
+          <strong v-text="formatBalance(walletRec.sat)"></strong>
+        </q-item-label>
+      </q-item-section>
+      <q-item-section
+        v-if="walletRec.walletType == 'lightning-shared'"
+        side
+        top
+      >
+        <q-icon name="group" :color="walletRec.extra.color" size="xs"></q-icon>
+      </q-item-section>
+    </q-item>
+    <q-item
+      v-if="g.user.hiddenWalletsCount > 0"
+      clickable
+      @click="goToWallets()"
+    >
+      <q-item-section side>
+        <q-icon name="more_horiz" color="grey-5" size="md"></q-icon>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          lines="1"
+          class="text-caption"
+          v-text="$t('more_count', {count: g.user.hiddenWalletsCount})"
+        ></q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item clickable @click="createWallet()">
+      <q-item-section side>
+        <q-icon name="add" color="grey-5" size="md"></q-icon>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label
+          lines="1"
+          class="text-caption"
+          v-text="$t('add_new_wallet')"
+        ></q-item-label>
+        <q-item-section v-if="g.user.walletInvitesCount" side>
+          <q-badge>
+            <span
+              v-text="'Wallet Invite (' + g.user.walletInvitesCount + ')'"
+            ></span>
+          </q-badge>
+        </q-item-section>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

package.json

@@ -119,6 +119,8 @@
       "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-home-logos.js",
       "js/components/lnbits-new-user-wallet.js",
       "js/components/lnbits-qrcode.js",