From 898f2649510e84e24188b3f0b053eb3b4bb385cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Fri, 27 Sep 2024 12:09:47 +0200
Subject: [PATCH] refactor: use <template> for components (#2715)

* refactor: use <template> for components
* fix paymentchart
---
 lnbits/static/bundle-components.min.js        |   2 +-
 lnbits/static/js/components.js                | 377 +-------
 .../static/js/components/extension-rating.js  |  16 -
 .../js/components/extension-settings.js       |  25 +-
 .../js/components/lnbits-funding-sources.js   |  43 +-
 lnbits/static/js/components/payment-chart.js  |  32 +-
 lnbits/static/js/components/payment-list.js   | 278 +-----
 lnbits/static/vendor.json                     |   1 -
 lnbits/templates/base.html                    |   6 +-
 lnbits/templates/components.vue               | 902 ++++++++++++++++++
 package.json                                  |   1 -
 11 files changed, 936 insertions(+), 747 deletions(-)
 delete mode 100644 lnbits/static/js/components/extension-rating.js
 create mode 100644 lnbits/templates/components.vue

diff --git a/lnbits/static/bundle-components.min.js b/lnbits/static/bundle-components.min.js
index 8aa9936b4..e629a132e 100644
--- a/lnbits/static/bundle-components.min.js
+++ b/lnbits/static/bundle-components.min.js
@@ -1 +1 @@
-function generateChart(e,n){const t=n.reduce(((e,n)=>(e.labels.push(n.date),e.income.push(n.income),e.spending.push(n.spending),e.cumulative.push(n.balance),e)),{labels:[],income:[],spending:[],cumulative:[]});return new Chart(e.getContext("2d"),{type:"bar",data:{labels:t.labels,datasets:[{data:t.cumulative,type:"line",label:"balance",backgroundColor:"#673ab7",borderColor:"#673ab7",borderWidth:4,pointRadius:3,fill:!1},{data:t.income,type:"bar",label:"in",barPercentage:.75,backgroundColor:window.Color("rgb(76,175,80)").alpha(.5).rgbString()},{data:t.spending,type:"bar",label:"out",barPercentage:.75,backgroundColor:window.Color("rgb(233,30,99)").alpha(.5).rgbString()}]},options:{title:{text:"Chart.js Combo Time Scale"},tooltips:{mode:"index",intersect:!1},scales:{xAxes:[{type:"time",display:!0,time:{minUnit:"hour",stepSize:3}}]},animation:{duration:0},elements:{line:{tension:0}}}})}window.app.component("lnbits-funding-sources",{mixins:[window.windowMixin],props:["form-data","allowed-funding-sources"],methods:{getFundingSourceLabel(e){const n=this.rawFundingSources.find((n=>n[0]===e));return n?n[1]:e}},computed:{fundingSources(){let e=[];for(const[n,t,i]of this.rawFundingSources){const t={};if(null!==i)for(let[e,n]of Object.entries(i))t[e]={label:n,value:null};e.push([n,t])}return new Map(e)},sortedAllowedFundingSources(){return this.allowedFundingSources.sort()}},data:()=>({rawFundingSources:[["VoidWallet","Void Wallet",null],["FakeWallet","Fake Wallet",{fake_wallet_secret:"Secret"}],["CoreLightningWallet","Core Lightning",{corelightning_rpc:"Endpoint",corelightning_pay_command:"Custom Pay Command"}],["CoreLightningRestWallet","Core Lightning Rest",{corelightning_rest_url:"Endpoint",corelightning_rest_cert:"Certificate",corelightning_rest_macaroon:"Macaroon"}],["LndRestWallet","Lightning Network Daemon (LND Rest)",{lnd_rest_endpoint:"Endpoint",lnd_rest_cert:"Certificate",lnd_rest_macaroon:"Macaroon",lnd_rest_macaroon_encrypted:"Encrypted Macaroon",lnd_rest_route_hints:"Enable Route Hints"}],["LndWallet","Lightning Network Daemon (LND)",{lnd_grpc_endpoint:"Endpoint",lnd_grpc_cert:"Certificate",lnd_grpc_port:"Port",lnd_grpc_admin_macaroon:"Admin Macaroon",lnd_grpc_macaroon_encrypted:"Encrypted Macaroon"}],["LnTipsWallet","LN.Tips",{lntips_api_endpoint:"Endpoint",lntips_api_key:"API Key"}],["LNPayWallet","LN Pay",{lnpay_api_endpoint:"Endpoint",lnpay_api_key:"API Key",lnpay_wallet_key:"Wallet Key"}],["EclairWallet","Eclair (ACINQ)",{eclair_url:"URL",eclair_pass:"Password"}],["LNbitsWallet","LNbits",{lnbits_endpoint:"Endpoint",lnbits_key:"Admin Key"}],["BlinkWallet","Blink",{blink_api_endpoint:"Endpoint",blink_ws_endpoint:"WebSocket",blink_token:"Key"}],["AlbyWallet","Alby",{alby_api_endpoint:"Endpoint",alby_access_token:"Key"}],["BoltzWallet","Boltz",{boltz_client_endpoint:"Endpoint",boltz_client_macaroon:"Admin Macaroon path or hex",boltz_client_cert:"Certificate path or hex",boltz_client_wallet:"Wallet Name"}],["ZBDWallet","ZBD",{zbd_api_endpoint:"Endpoint",zbd_api_key:"Key"}],["PhoenixdWallet","Phoenixd",{phoenixd_api_endpoint:"Endpoint",phoenixd_api_password:"Key"}],["OpenNodeWallet","OpenNode",{opennode_api_endpoint:"Endpoint",opennode_key:"Key"}],["ClicheWallet","Cliche (NBD)",{cliche_endpoint:"Endpoint"}],["SparkWallet","Spark",{spark_url:"Endpoint",spark_token:"Token"}],["NWCWallet","Nostr Wallet Connect",{nwc_pairing_url:"Pairing URL"}],["BreezSdkWallet","Breez SDK",{breez_api_key:"Breez API Key",breez_greenlight_seed:"Greenlight Seed",breez_greenlight_device_key:"Greenlight Device Key",breez_greenlight_device_cert:"Greenlight Device Cert",breez_greenlight_invite_code:"Greenlight Invite Code"}]]}),template:'\n    <div class="funding-sources">\n        <h6 class="q-mt-xl q-mb-md">Funding Sources</h6>\n        <div class="row">\n          <div class="col-12">\n            <p>Active Funding<small> (Requires server restart)</small></p>\n            <q-select\n              filled\n              v-model="formData.lnbits_backend_wallet_class"\n              hint="Select the active funding wallet"\n              :options="sortedAllowedFundingSources"\n              :option-label="(item) => getFundingSourceLabel(item)"\n            ></q-select>\n          </div>\n        </div>\n        <q-list\n          class="q-mt-md"\n          v-for="(fund, idx) in allowedFundingSources"\n          :key="idx"\n        >\n          <div v-if="fundingSources.get(fund) && fund === formData.lnbits_backend_wallet_class">\n            <div class="row"\n              v-for="([key, prop], i) in Object.entries(fundingSources.get(fund))"\n              :key="i"\n            >\n              <div class="col-12">\n                <q-input\n                  filled\n                  type="text"\n                  class="q-mt-sm"\n                  v-model="formData[key]"\n                  :label="prop.label"\n                  :hint="prop.hint"\n                ></q-input>\n              </div>\n            </div>\n          </div>\n        </q-list>\n    </div>\n  '}),window.app.component("lnbits-extension-settings-form",{name:"lnbits-extension-settings-form",props:["options","adminkey","endpoint"],methods:{async updateSettings(){if(!this.settings)return Quasar.Notify.create({message:"No settings to update",type:"negative"});try{const{data:e}=await LNbits.api.request("PUT",this.endpoint,this.adminkey,this.settings);this.settings=e}catch(e){LNbits.utils.notifyApiError(e)}},getSettings:async function(){try{const{data:e}=await LNbits.api.request("GET",this.endpoint,this.adminkey);this.settings=e}catch(e){LNbits.utils.notifyApiError(e)}},resetSettings:async function(){LNbits.utils.confirmDialog("Are you sure you want to reset the settings?").onOk((async()=>{try{await LNbits.api.request("DELETE",this.endpoint,this.adminkey),await this.getSettings()}catch(e){LNbits.utils.notifyApiError(e)}}))}},created:async function(){await this.getSettings()},template:'\n    <q-form v-if="settings" @submit="updateSettings" class="q-gutter-md">\n      <lnbits-dynamic-fields :options="options" v-model="settings"></lnbits-dynamic-fields>\n      <div class="row q-mt-lg">\n        <q-btn v-close-popup unelevated color="primary" type="submit">Update</q-btn>\n        <q-btn v-close-popup unelevated color="danger" @click="resetSettings" >Reset</q-btn>\n        <slot name="actions"></slot>\n      </div>\n    </q-form>\n  ',data:function(){return{settings:void 0}}}),window.app.component("lnbits-extension-settings-btn-dialog",{name:"lnbits-extension-settings-btn-dialog",props:["options","adminkey","endpoint"],template:'\n    <q-btn v-if="options" unelevated @click="show = true" color="primary" icon="settings" class="float-right">\n        <q-dialog v-model="show" position="top">\n          <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">\n            <lnbits-extension-settings-form :options="options" :adminkey="adminkey" :endpoint="endpoint">\n                <template v-slot:actions>\n                    <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>\n                </template>\n            </lnbits-extension-settings-form>\n          </q-card>\n        </q-dialog>\n    </q-btn>\n  ',data:function(){return{show:!1}}}),window.app.component("lnbits-extension-rating",{name:"lnbits-extension-rating",props:["rating"],template:'\n    <div style="margin-bottom: 3px">\n        <q-rating\n          v-model="rating"\n          size="1.5em"\n          :max="5"\n          color="primary"\n          ><q-tooltip>\n            <span v-text="$t(\'extension_rating_soon\')"></span> </q-tooltip\n        ></q-rating>\n    </div>\n  '}),window.app.component("payment-list",{name:"payment-list",props:["update","wallet","mobileSimple","lazy"],mixins:[window.windowMixin],data:function(){return{denomination:LNBITS_DENOMINATION,payments:[],paymentsTable:{columns:[{name:"time",align:"left",label:this.$t("memo")+"/"+this.$t("date"),field:"date",sortable:!0},{name:"amount",align:"right",label:this.$t("amount")+" ("+LNBITS_DENOMINATION+")",field:"sat",sortable:!0}],pagination:{rowsPerPage:10,page:1,sortBy:"time",descending:!0,rowsNumber:10},search:null,loading:!1},exportTagName:"",exportPaymentTagList:[],paymentsCSV:{columns:[{name:"pending",align:"left",label:"Pending",field:"pending"},{name:"memo",align:"left",label:this.$t("memo"),field:"memo"},{name:"time",align:"left",label:this.$t("date"),field:"date",sortable:!0},{name:"amount",align:"right",label:this.$t("amount")+" ("+LNBITS_DENOMINATION+")",field:"sat",sortable:!0},{name:"fee",align:"right",label:this.$t("fee")+" (m"+LNBITS_DENOMINATION+")",field:"fee"},{name:"tag",align:"right",label:this.$t("tag"),field:"tag"},{name:"payment_hash",align:"right",label:this.$t("payment_hash"),field:"payment_hash"},{name:"payment_proof",align:"right",label:this.$t("payment_proof"),field:"payment_proof"},{name:"webhook",align:"right",label:this.$t("webhook"),field:"webhook"},{name:"fiat_currency",align:"right",label:"Fiat Currency",field:e=>e.extra.wallet_fiat_currency},{name:"fiat_amount",align:"right",label:"Fiat Amount",field:e=>e.extra.wallet_fiat_amount}],filter:null,loading:!1}}},computed:{filteredPayments:function(){var e=this.paymentsTable.search;return e&&""!==e?LNbits.utils.search(this.payments,e):this.payments},paymentsOmitter(){return this.$q.screen.lt.md&&this.mobileSimple?this.payments.length>0?[this.payments[0]]:[]:this.payments},pendingPaymentsExist:function(){return-1!==this.payments.findIndex((e=>e.pending))}},methods:{fetchPayments:function(e){const n=LNbits.utils.prepareFilterQuery(this.paymentsTable,e);return LNbits.api.getPayments(this.wallet,n).then((e=>{this.paymentsTable.loading=!1,this.paymentsTable.pagination.rowsNumber=e.data.total,this.payments=e.data.data.map((e=>LNbits.map.payment(e)))})).catch((e=>{this.paymentsTable.loading=!1,LNbits.utils.notifyApiError(e)}))},paymentTableRowKey:function(e){return e.payment_hash+e.amount},exportCSV(e=!1){const n=this.paymentsTable.pagination,t={sortby:n.sortBy??"time",direction:n.descending?"desc":"asc"},i=new URLSearchParams(t);LNbits.api.getPayments(this.wallet,i).then((n=>{let t=n.data.data.map(LNbits.map.payment),i=this.paymentsCSV.columns;if(e){this.exportPaymentTagList.length&&(t=t.filter((e=>this.exportPaymentTagList.includes(e.tag))));const e=Object.keys(t.reduce(((e,n)=>({...e,...n.details})),{})).map((e=>({name:e,align:"right",label:e.charAt(0).toUpperCase()+e.slice(1).replace(/([A-Z])/g," $1"),field:n=>n.details[e],format:e=>"object"==typeof e?JSON.stringify(e):e})));i=this.paymentsCSV.columns.concat(e)}LNbits.utils.exportCSV(i,t,this.wallet.name+"-payments")}))},addFilterTag:function(){if(!this.exportTagName)return;const e=this.exportTagName.trim();this.exportPaymentTagList=this.exportPaymentTagList.filter((n=>n!==e)),this.exportPaymentTagList.push(e),this.exportTagName=""},removeExportTag:function(e){this.exportPaymentTagList=this.exportPaymentTagList.filter((n=>n!==e))},formatCurrency:function(e,n){try{return LNbits.utils.formatCurrency(e,n)}catch(n){return console.error(n),`${e} ???`}}},watch:{lazy:function(e){!0===e&&this.fetchPayments()},update:function(){this.fetchPayments()}},created:function(){void 0===this.lazy&&this.fetchPayments()},template:'\n    <q-card\n      :style="$q.screen.lt.md ? {\n        background: $q.screen.lt.md ? \'none !important\': \'\'\n        , boxShadow: $q.screen.lt.md ? \'none !important\': \'\'\n        , marginTop: $q.screen.lt.md ? \'0px !important\': \'\'\n      } : \'\'"\n    >\n      <q-card-section>\n        <div class="row items-center no-wrap q-mb-sm">\n          <div class="col">\n            <h5\n              class="text-subtitle1 q-my-none"\n              :v-text="$t(\'transactions\')"\n            ></h5>\n          </div>\n          <div class="gt-sm col-auto">\n            <q-btn-dropdown\n              outline\n              persistent\n              class="q-mr-sm"\n              color="grey"\n              :label="$t(\'export_csv\')"\n              split\n              @click="exportCSV(false)"\n            >\n              <q-list>\n                <q-item>\n                  <q-item-section>\n                    <q-input\n                    @keydown.enter="addFilterTag"\n                      filled\n                      dense\n                      v-model="exportTagName"\n                      type="text"\n                      label="Payment Tags"\n                      class="q-pa-sm"\n                    >\n                      <q-btn\n                        @click="addFilterTag"\n                        dense\n                        flat\n                        icon="add"\n                      ></q-btn>\n                    </q-input>\n                  </q-item-section>\n                </q-item>\n                <q-item v-if="exportPaymentTagList.length">\n                  <q-item-section>\n                    <div>\n                      <q-chip\n                        v-for="tag in exportPaymentTagList"\n                        :key="tag"\n                        removable\n                        @remove="removeExportTag(tag)"\n                        color="primary"\n                        text-color="white"\n                        :label="tag"\n                      ></q-chip>\n                    </div>\n                  </q-item-section>\n                </q-item>\n\n                <q-item>\n                  <q-item-section>\n                    <q-btn v-close-popup outline color="grey" @click="exportCSV(true)" label="Export to CSV with details" ></q-btn>\n                  </q-item-section>\n                </q-item>\n              </q-list>\n            </q-btn-dropdown>\n            <payment-chart :wallet="wallet" />\n          </div>\n        </div>\n        <q-input\n          :style="$q.screen.lt.md ? {\n          display: mobileSimple ? \'none !important\': \'\'\n        } : \'\'"\n          filled\n          dense\n          clearable\n          v-model="paymentsTable.search"\n          debounce="300"\n          :placeholder="$t(\'search_by_tag_memo_amount\')"\n          class="q-mb-md"\n        >\n        </q-input>\n        <q-table\n          dense\n          flat\n          :rows="paymentsOmitter"\n          :row-key="paymentTableRowKey"\n          :columns="paymentsTable.columns"\n          :pagination.sync="paymentsTable.pagination"\n          :no-data-label="$t(\'no_transactions\')"\n          :filter="paymentsTable.search"\n          :loading="paymentsTable.loading"\n          :hide-header="mobileSimple"\n          :hide-bottom="mobileSimple"\n          @request="fetchPayments"\n        >\n          <template v-slot:header="props">\n            <q-tr :props="props">\n              <q-th auto-width></q-th>\n              <q-th\n                v-for="col in props.cols"\n                :key="col.name"\n                :props="props"\n                v-text="col.label"\n              ></q-th>\n            </q-tr>\n          </template>\n          <template v-slot:body="props">\n            <q-tr :props="props">\n              <q-td auto-width class="text-center">\n                <q-icon\n                  v-if="props.row.isPaid"\n                  size="14px"\n                  :name="props.row.isOut ? \'call_made\' : \'call_received\'"\n                  :color="props.row.isOut ? \'pink\' : \'green\'"\n                  @click="props.expand = !props.expand"\n                ></q-icon>\n                <q-icon\n                  v-else-if="props.row.isFailed"\n                  name="warning"\n                  color="yellow"\n                  @click="props.expand = !props.expand"\n                >\n                  <q-tooltip\n                    ><span>failed</span\n                  ></q-tooltip>\n                </q-icon>\n                <q-icon\n                  v-else\n                  name="settings_ethernet"\n                  color="grey"\n                  @click="props.expand = !props.expand"\n                >\n                  <q-tooltip\n                    ><span v-text="$t(\'pending\')"></span\n                  ></q-tooltip>\n                </q-icon>\n              </q-td>\n              <q-td\n                key="time"\n                :props="props"\n                style="white-space: normal; word-break: break-all"\n              >\n                <q-badge\n                  v-if="props.row.tag"\n                  color="yellow"\n                  text-color="black"\n                >\n                  <a\n                    v-text="\'#\'+props.row.tag"\n                    class="inherit"\n                    :href="[\'/\', props.row.tag].join(\'\')"\n                  ></a>\n                </q-badge>\n                <span v-text="props.row.memo"></span>\n                <br />\n\n                <i>\n                  <span v-text="props.row.dateFrom"></span>\n                  <q-tooltip\n                    ><span v-text="props.row.date"></span\n                  ></q-tooltip>\n                </i>\n              </q-td>\n              <q-td\n                auto-width\n                key="amount"\n                v-if="denomination != \'sats\'"\n                :props="props"\n                class="col1"\n                v-text="parseFloat(String(props.row.fsat).replaceAll(\',\', \'\')) / 100"\n              >\n              </q-td>\n              <q-td class="col2" auto-width key="amount" v-else :props="props">\n                <span v-text="props.row.fsat"></span>\n                <br />\n                <i v-if="props.row.extra.wallet_fiat_currency">\n                  <span\n                    v-text="formatCurrency(props.row.extra.wallet_fiat_amount, props.row.extra.wallet_fiat_currency)"\n                  ></span>\n                  <br />\n                </i>\n                <i v-if="props.row.extra.fiat_currency">\n                  <span\n                    v-text="formatCurrency(props.row.extra.fiat_amount, props.row.extra.fiat_currency)"\n                  ></span>\n                </i>\n              </q-td>\n\n                <q-dialog v-model="props.expand" :props="props" position="top">\n                  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">\n                    <div class="text-center q-mb-lg">\n                      <div v-if="props.row.isIn && props.row.isPending">\n                        <q-icon name="settings_ethernet" color="grey"></q-icon>\n                        <span v-text="$t(\'invoice_waiting\')"></span>\n                        <lnbits-payment-details\n                          :payment="props.row"\n                        ></lnbits-payment-details>\n                        <div\n                          v-if="props.row.bolt11"\n                          class="text-center q-mb-lg"\n                        >\n                          <a :href="\'lightning:\' + props.row.bolt11">\n                            <q-responsive :ratio="1" class="q-mx-xl">\n                              <lnbits-qrcode\n                                :value="\'lightning:\' + props.row.bolt11.toUpperCase()"\n                              ></lnbits-qrcode>\n                            </q-responsive>\n                          </a>\n                        </div>\n                        <div class="row q-mt-lg">\n                          <q-btn\n                            outline\n                            color="grey"\n                            @click="copyText(props.row.bolt11)"\n                            :label="$t(\'copy_invoice\')"\n                          ></q-btn>\n                          <q-btn\n                            v-close-popup\n                            flat\n                            color="grey"\n                            class="q-ml-auto"\n                            :label="$t(\'close\')"\n                          ></q-btn>\n                        </div>\n                      </div>\n                      <div v-else-if="props.row.isOut && props.row.isPending">\n                        <q-icon name="settings_ethernet" color="grey"></q-icon>\n                        <span v-text="$t(\'outgoing_payment_pending\')"></span>\n                        <lnbits-payment-details\n                          :payment="props.row"\n                        ></lnbits-payment-details>\n                      </div>\n                      <div v-else-if="props.row.isPaid && props.row.isIn">\n                        <q-icon\n                          size="18px"\n                          :name="\'call_received\'"\n                          :color="\'green\'"\n                        ></q-icon>\n                        <span v-text="$t(\'payment_received\')"></span>\n                        <lnbits-payment-details\n                          :payment="props.row"\n                        ></lnbits-payment-details>\n                      </div>\n                      <div v-else-if="props.row.isPaid && props.row.isOut">\n                        <q-icon\n                          size="18px"\n                          :name="\'call_made\'"\n                          :color="\'pink\'"\n                        ></q-icon>\n                        <span v-text="$t(\'payment_sent\')"></span>\n                        <lnbits-payment-details\n                          :payment="props.row"\n                        ></lnbits-payment-details>\n                      </div>\n                      <div v-else-if="props.row.isFailed">\n                        <q-icon name="warning" color="yellow"></q-icon>\n                        <span>Payment failed</span>\n                        <lnbits-payment-details\n                          :payment="props.row"\n                        ></lnbits-payment-details>\n                      </div>\n                    </div>\n                  </q-card>\n                </q-dialog>\n            </q-tr>\n          </template>\n        </q-table>\n      </q-card-section>\n    </q-card>\n    '}),window.app.component("payment-chart",{name:"payment-chart",props:["wallet"],mixins:[window.windowMixin],data:function(){return{paymentsChart:{show:!1,group:{value:"hour",label:"Hour"},groupOptions:[{value:"hour",label:"Hour"},{value:"day",label:"Day"},{value:"week",label:"Week"},{value:"month",label:"Month"},{value:"year",label:"Year"}],instance:null}}},methods:{showChart:function(){this.paymentsChart.show=!0,LNbits.api.request("GET","/api/v1/payments/history?group="+this.paymentsChart.group.value,this.wallet.adminkey).then((e=>{this.$nextTick((()=>{this.paymentsChart.instance&&this.paymentsChart.instance.destroy(),this.paymentsChart.instance=generateChart(this.$refs.canvas,e.data)}))})).catch((e=>{LNbits.utils.notifyApiError(e),this.paymentsChart.show=!1}))}},template:'\n    <span id="payment-chart">\n        <q-btn dense flat round icon="show_chart" color="grey" @click="showChart" >\n            <q-tooltip>\n                <span v-text="$t(\'chart_tooltip\')"></span>\n            </q-tooltip>\n        </q-btn>\n\n        <q-dialog v-model="paymentsChart.show" position="top">\n            <q-card class="q-pa-sm" style="width: 800px; max-width: unset">\n                <q-card-section>\n                    <div class="row q-gutter-sm justify-between">\n                        <div class="text-h6">Payments Chart</div>\n                        <q-select label="Group" filled dense v-model="paymentsChart.group"\n                        style="min-width: 120px"\n                        :options="paymentsChart.groupOptions"\n                        >\n                        </q-select>\n                    </div>\n                    <canvas ref="canvas" width="600" height="400"></canvas>\n                </q-card-section>\n            </q-card>\n        </q-dialog>\n    </span>\n    '}),window.app.component(QrcodeVue),window.app.component("lnbits-fsat",{props:{amount:{type:Number,default:0}},template:"<span>{{ fsat }}</span>",computed:{fsat:function(){return LNbits.utils.formatSat(this.amount)}}}),window.app.component("lnbits-wallet-list",{props:["balance"],data:function(){return{user:null,activeWallet:null,balance:0,showForm:!1,walletName:"",LNBITS_DENOMINATION:LNBITS_DENOMINATION}},template:'\n    <q-list v-if="user && user.wallets.length" dense class="lnbits-drawer__q-list">\n      <q-item-label header v-text="$t(\'wallets\')"></q-item-label>\n      <q-item v-for="wallet in wallets" :key="wallet.id"\n        clickable\n        :active="activeWallet && activeWallet.id === wallet.id"\n        tag="a" :href="wallet.url">\n        <q-item-section side>\n          <q-avatar size="md"\n            :color="(activeWallet && activeWallet.id === wallet.id)\n              ? (($q.dark.isActive) ? \'primary\' : \'primary\')\n              : \'grey-5\'">\n            <q-icon name="flash_on" :size="($q.dark.isActive) ? \'21px\' : \'20px\'"\n              :color="($q.dark.isActive) ? \'blue-grey-10\' : \'grey-3\'"></q-icon>\n          </q-avatar>\n        </q-item-section>\n        <q-item-section>\n          <q-item-label lines="1">{{ wallet.name }}</q-item-label>\n          <q-item-label v-if="LNBITS_DENOMINATION != \'sats\'" caption>{{ parseFloat(String(wallet.live_fsat).replaceAll(",", "")) / 100  }} {{ LNBITS_DENOMINATION }}</q-item-label>\n          <q-item-label v-else caption>{{ wallet.live_fsat }} {{ LNBITS_DENOMINATION }}</q-item-label>\n        </q-item-section>\n        <q-item-section side v-show="activeWallet && activeWallet.id === wallet.id">\n          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>\n        </q-item-section>\n      </q-item>\n      <q-item clickable @click="showForm = !showForm">\n        <q-item-section side>\n          <q-icon :name="(showForm) ? \'remove\' : \'add\'" color="grey-5" size="md"></q-icon>\n        </q-item-section>\n        <q-item-section>\n          <q-item-label lines="1" class="text-caption" v-text="$t(\'add_wallet\')"></q-item-label>\n        </q-item-section>\n      </q-item>\n      <q-item v-if="showForm">\n        <q-item-section>\n          <q-form @submit="createWallet">\n            <q-input filled dense v-model="walletName" label="Name wallet *">\n              <template v-slot:append>\n                <q-btn round dense flat icon="send" size="sm" @click="createWallet" :disable="walletName === \'\'"></q-btn>\n              </template>\n            </q-input>\n          </q-form>\n        </q-item-section>\n      </q-item>\n    </q-list>\n  ',computed:{wallets:function(){var e=this.balance;return this.user.wallets.map((function(n){return n.live_fsat=e.length&&e[0]===n.id?LNbits.utils.formatSat(e[1]):n.fsat,n}))}},methods:{createWallet:function(){LNbits.api.createWallet(this.user.wallets[0],this.walletName)}},created:function(){window.user&&(this.user=LNbits.map.user(window.user)),window.wallet&&(this.activeWallet=LNbits.map.wallet(window.wallet)),document.addEventListener("updateWalletBalance",this.updateWalletBalance)}}),window.app.component("lnbits-extension-list",{data:function(){return{extensions:[],user:null}},template:'\n    <q-list v-if="user && userExtensions.length > 0" dense class="lnbits-drawer__q-list">\n      <q-item-label header v-text="$t(\'extensions\')"></q-item-label>\n      <q-item v-for="extension in userExtensions" :key="extension.code"\n        clickable\n        :active="extension.isActive"\n        tag="a" :href="extension.url">\n        <q-item-section side>\n          <q-avatar size="md">\n            <q-img\n              :src="extension.tile"\n              style="max-width:20px"\n            ></q-img>\n          </q-avatar>\n        </q-item-section>\n        <q-item-section>\n          <q-item-label lines="1">{{ extension.name }} </q-item-label>\n        </q-item-section>\n        <q-item-section side v-show="extension.isActive">\n          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>\n        </q-item-section>\n      </q-item>\n      <div class="lt-md q-mt-xl q-mb-xl"></div>\n    </q-list>\n  ',computed:{userExtensions:function(){if(!this.user)return[];var e=window.location.pathname,n=this.user.extensions;return this.extensions.filter((function(e){return-1!==n.indexOf(e.code)})).map((function(n){return n.isActive=e.startsWith(n.url),n}))}},created:function(){window.extensions&&(this.extensions=window.extensions.map((function(e){return LNbits.map.extension(e)})).sort((function(e,n){return e.name.localeCompare(n.name)}))),window.user&&(this.user=LNbits.map.user(window.user))}}),window.app.component("lnbits-manage",{props:["showAdmin","showNode","showExtensions","showUsers"],methods:{isActive:function(e){return window.location.pathname===e}},data:function(){return{extensions:[],user:null}},template:'\n    <q-list v-if="user" dense class="lnbits-drawer__q-list">\n      <q-item-label header v-text="$t(\'manage\')"></q-item-label>\n      <div v-if="user.admin">\n        <q-item v-if=\'showAdmin\' clickable tag="a" href="/admin" :active="isActive(\'/admin\')">\n          <q-item-section side>\n            <q-icon name="admin_panel_settings" :color="isActive(\'/admin\') ? \'primary\' : \'grey-5\'" size="md"></q-icon>\n          </q-item-section>\n          <q-item-section>\n            <q-item-label lines="1" v-text="$t(\'server\')"></q-item-label>\n          </q-item-section>\n        </q-item>\n        <q-item v-if=\'showNode\' clickable tag="a" href="/node" :active="isActive(\'/node\')">\n          <q-item-section side>\n            <q-icon name="developer_board" :color="isActive(\'/node\') ? \'primary\' : \'grey-5\'" size="md"></q-icon>\n          </q-item-section>\n          <q-item-section>\n            <q-item-label lines="1" v-text="$t(\'node\')"></q-item-label>\n          </q-item-section>\n        </q-item>\n        <q-item v-if="showUsers" clickable tag="a" href="/users" :active="isActive(\'/users\')">\n          <q-item-section side>\n            <q-icon name="groups" :color="isActive(\'/users\') ? \'primary\' : \'grey-5\'" size="md"></q-icon>\n          </q-item-section>\n          <q-item-section>\n            <q-item-label lines="1" v-text="$t(\'users\')"></q-item-label>\n          </q-item-section>\n        </q-item>\n      </div>\n      <q-item v-if="showExtensions" clickable tag="a" href="/extensions" :active="isActive(\'/extensions\')">\n        <q-item-section side>\n          <q-icon name="extension" :color="isActive(\'/extensions\') ? \'primary\' : \'grey-5\'" size="md"></q-icon>\n        </q-item-section>\n        <q-item-section>\n          <q-item-label lines="1" v-text="$t(\'extensions\')"></q-item-label>\n        </q-item-section>\n      </q-item>\n    </q-list>\n  ',created:function(){window.user&&(this.user=LNbits.map.user(window.user))}}),window.app.component("lnbits-payment-details",{props:["payment"],mixins:[window.windowMixin],data:function(){return{LNBITS_DENOMINATION:LNBITS_DENOMINATION}},template:'\n  <div class="q-py-md" style="text-align: left">\n\n  <div v-if="payment.tag" class="row justify-center q-mb-md">\n    <q-badge v-if="hasTag" color="yellow" text-color="black">\n      #{{ payment.tag }}\n    </q-badge>\n  </div>\n\n  <div class="row">\n    <b v-text="$t(\'created\')"></b>:\n    {{ payment.date }} ({{ payment.dateFrom }})\n  </div>\n\n  <div class="row" v-if="hasExpiry">\n   <b v-text="$t(\'expiry\')"></b>:\n   {{ payment.expirydate }} ({{ payment.expirydateFrom }})\n  </div>\n\n  <div class="row">\n   <b v-text="$t(\'amount\')"></b>:\n    {{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}\n  </div>\n\n  <div class="row">\n    <b v-text="$t(\'fee\')"></b>:\n    {{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}\n  </div>\n\n  <div class="text-wrap">\n    <b style="white-space: nowrap;" v-text="$t(\'payment_hash\')"></b>:&nbsp;{{ payment.payment_hash }}\n        <q-icon name="content_copy" @click="copyText(payment.payment_hash)" size="1em" color="grey" class="q-mb-xs cursor-pointer" />\n  </div>\n\n  <div class="text-wrap">\n    <b style="white-space: nowrap;" v-text="$t(\'memo\')"></b>:&nbsp;{{ payment.memo }}\n  </div>\n\n  <div class="text-wrap" v-if="payment.webhook">\n    <b style="white-space: nowrap;" v-text="$t(\'webhook\')"></b>:&nbsp;{{ payment.webhook }}:&nbsp;<q-badge :color="webhookStatusColor" text-color="white">\n      {{ webhookStatusText }}\n    </q-badge>\n  </div>\n\n  <div class="text-wrap" v-if="hasPreimage">\n    <b style="white-space: nowrap;" v-text="$t(\'payment_proof\')"></b>:&nbsp;{{ payment.preimage }}\n  </div>\n\n  <div class="row" v-for="entry in extras">\n    <q-badge v-if="hasTag" color="secondary" text-color="white">\n      extra\n    </q-badge>\n    <b>{{ entry.key }}</b>:\n    {{ entry.value }}\n  </div>\n\n  <div class="row" v-if="hasSuccessAction">\n    <b>Success action</b>:\n      <lnbits-lnurlpay-success-action\n        :payment="payment"\n        :success_action="payment.extra.success_action"\n      ></lnbits-lnurlpay-success-action>\n  </div>\n\n</div>\n  ',computed:{hasPreimage(){return this.payment.preimage&&"0000000000000000000000000000000000000000000000000000000000000000"!==this.payment.preimage},hasExpiry(){return!!this.payment.expiry},hasSuccessAction(){return this.hasPreimage&&this.payment.extra&&this.payment.extra.success_action},webhookStatusColor(){return this.payment.webhook_status>=300||this.payment.webhook_status<0?"red-10":this.payment.webhook_status?"green-10":"cyan-7"},webhookStatusText(){return this.payment.webhook_status?this.payment.webhook_status:"not sent yet"},hasTag(){return this.payment.extra&&!!this.payment.extra.tag},extras(){if(!this.payment.extra)return[];let e=_.omit(this.payment.extra,["tag","success_action"]);return Object.keys(e).map((n=>({key:n,value:e[n]})))}}}),window.app.component("lnbits-lnurlpay-success-action",{props:["payment","success_action"],data(){return{decryptedValue:this.success_action.ciphertext}},template:'\n    <div>\n      <p class="q-mb-sm">{{ success_action.message || success_action.description }}</p>\n      <code v-if="decryptedValue" class="text-h6 q-mt-sm q-mb-none">\n        {{ decryptedValue }}\n      </code>\n      <p v-else-if="success_action.url" class="text-h6 q-mt-sm q-mb-none">\n        <a target="_blank" style="color: inherit;" :href="success_action.url">{{ success_action.url }}</a>\n      </p>\n    </div>\n  ',mounted:function(){if("aes"!==this.success_action.tag)return null;decryptLnurlPayAES(this.success_action,this.payment.preimage).then((e=>{this.decryptedValue=e}))}}),window.app.component("lnbits-qrcode",{mixins:[window.windowMixin],components:{QrcodeVue:QrcodeVue},props:["value"],data:()=>({logo:LNBITS_QR_LOGO}),template:'\n  <div class="qrcode__wrapper">\n    <qrcode-vue :value="value" size="350" class="rounded-borders"></qrcode-vue>\n    <img class="qrcode__image" :src="logo" alt="..." />\n  </div>\n  '}),window.app.component("lnbits-notifications-btn",{mixins:[window.windowMixin],props:["pubkey"],data:()=>({isSupported:!1,isSubscribed:!1,isPermissionGranted:!1,isPermissionDenied:!1}),template:'\n    <q-btn\n      v-if="g.user.wallets"\n      :disabled="!this.isSupported"\n      dense\n      flat\n      round\n      @click="toggleNotifications()"\n      :icon="this.isSubscribed ? \'notifications_active\' : \'notifications_off\'"\n      size="sm"\n      type="a"\n    >\n      <q-tooltip v-if="this.isSupported && !this.isSubscribed">Subscribe to notifications</q-tooltip>\n      <q-tooltip v-if="this.isSupported && this.isSubscribed">Unsubscribe from notifications</q-tooltip>\n      <q-tooltip v-if="this.isSupported && this.isPermissionDenied">\n          Notifications are disabled,<br/>please enable or reset permissions\n      </q-tooltip>\n      <q-tooltip v-if="!this.isSupported">Notifications are not supported</q-tooltip>\n    </q-btn>\n  ',methods:{urlB64ToUint8Array(e){const n=(e+"=".repeat((4-e.length%4)%4)).replace(/\-/g,"+").replace(/_/g,"/"),t=atob(n),i=new Uint8Array(t.length);for(let e=0;e<t.length;++e)i[e]=t.charCodeAt(e);return i},toggleNotifications(){this.isSubscribed?this.unsubscribe():this.subscribe()},saveUserSubscribed(e){let n=JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[];n.includes(e)||n.push(e),this.$q.localStorage.set("lnbits.webpush.subscribedUsers",JSON.stringify(n))},removeUserSubscribed(e){let n=JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[];n=n.filter((n=>n!==e)),this.$q.localStorage.set("lnbits.webpush.subscribedUsers",JSON.stringify(n))},isUserSubscribed(e){return(JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[]).includes(e)},subscribe(){var e=this;this.isSupported&&!this.isPermissionDenied&&(Notification.requestPermission().then((e=>{this.isPermissionGranted="granted"===e,this.isPermissionDenied="denied"===e})).catch((function(e){console.log(e)})),navigator.serviceWorker.ready.then((n=>{navigator.serviceWorker.getRegistration().then((n=>{n.pushManager.getSubscription().then((function(t){if(null===t||!e.isUserSubscribed(e.g.user.id)){const t={applicationServerKey:e.urlB64ToUint8Array(e.pubkey),userVisibleOnly:!0};n.pushManager.subscribe(t).then((function(n){LNbits.api.request("POST","/api/v1/webpush",e.g.user.wallets[0].adminkey,{subscription:JSON.stringify(n)}).then((function(n){e.saveUserSubscribed(n.data.user),e.isSubscribed=!0})).catch((function(e){LNbits.utils.notifyApiError(e)}))}))}})).catch((function(e){console.log(e)}))}))})))},unsubscribe(){var e=this;navigator.serviceWorker.ready.then((n=>{n.pushManager.getSubscription().then((n=>{n&&LNbits.api.request("DELETE","/api/v1/webpush?endpoint="+btoa(n.endpoint),e.g.user.wallets[0].adminkey).then((function(){e.removeUserSubscribed(e.g.user.id),e.isSubscribed=!1})).catch((function(e){LNbits.utils.notifyApiError(e)}))}))})).catch((function(e){console.log(e)}))},checkSupported:function(){let e="https:"===window.location.protocol,n="serviceWorker"in navigator,t="Notification"in window,i="PushManager"in window;return this.isSupported=e&&n&&t&&i,this.isSupported||console.log("Notifications disabled because requirements are not met:",{HTTPS:e,"Service Worker API":n,"Notification API":t,"Push API":i}),this.isSupported},updateSubscriptionStatus:async function(){var e=this;await navigator.serviceWorker.ready.then((n=>{n.pushManager.getSubscription().then((n=>{e.isSubscribed=!!n&&e.isUserSubscribed(e.g.user.id)}))})).catch((function(e){console.log(e)}))}},created:function(){this.isPermissionDenied="denied"===Notification.permission,this.checkSupported()&&this.updateSubscriptionStatus()}}),window.app.component("lnbits-dynamic-fields",{mixins:[window.windowMixin],props:["options","value"],data:()=>({formData:null,rules:[e=>!!e||"Field is required"]}),template:'\n    <div v-if="formData">\n      <div class="row q-mb-lg" v-for="o in options">\n        <div class="col auto-width">\n          <p v-if=o.options?.length class="q-ml-xl">\n            <span v-text="o.label || o.name"></span> <small v-if="o.description"> (<span v-text="o.description"></span>)</small>\n          </p>\n          <lnbits-dynamic-fields v-if="o.options?.length" :options="o.options" v-model="formData[o.name]"\n            @input="handleValueChanged" class="q-ml-xl">\n          </lnbits-dynamic-fields>\n          <div v-else>\n            <q-input\n              v-if="o.type === \'number\'"\n              type="number"\n              v-model="formData[o.name]"\n              @input="handleValueChanged"\n              :label="o.label || o.name"\n              :hint="o.description"\n              :rules="applyRules(o.required)"\n              filled\n              dense\n            ></q-input>\n            <q-input\n              v-else-if="o.type === \'text\'"\n              type="textarea"\n              rows="5"\n              v-model="formData[o.name]"\n              @input="handleValueChanged"\n              :label="o.label || o.name"\n              :hint="o.description"\n              :rules="applyRules(o.required)"\n              filled\n              dense\n            ></q-input>\n            <q-input\n              v-else-if="o.type === \'password\'"\n              v-model="formData[o.name]"\n              @input="handleValueChanged"\n              type="password"\n              :label="o.label || o.name"\n              :hint="o.description"\n              :rules="applyRules(o.required)"\n              filled\n              dense\n            ></q-input>\n            <q-select\n              v-else-if="o.type === \'select\'"\n              v-model="formData[o.name]"\n              @input="handleValueChanged"\n              :label="o.label || o.name"\n              :hint="o.description"\n              :options="o.values"\n              :rules="applyRules(o.required)"\n            ></q-select>\n            <q-select\n              v-else-if="o.isList"\n              v-model.trim="formData[o.name]"\n              @input="handleValueChanged"\n              input-debounce="0"\n              new-value-mode="add-unique"\n              :label="o.label || o.name"\n              :hint="o.description"\n              :rules="applyRules(o.required)"\n              filled\n              multiple\n              dense\n              use-input\n              use-chips\n              multiple\n              hide-dropdown-icon\n            ></q-select>\n            <div v-else-if="o.type === \'bool\'">\n              <q-item tag="label" v-ripple>\n                <q-item-section avatar top>\n                  <q-checkbox v-model="formData[o.name]" @input="handleValueChanged" />\n                </q-item-section>\n                <q-item-section>\n                  <q-item-label><span v-text="o.label || o.name"></span></q-item-label>\n                  <q-item-label caption> <span v-text="o.description"></span> </q-item-label>\n                </q-item-section>\n              </q-item>\n            </div>\n            <q-input\n              v-else-if="o.type === \'hidden\'"\n              v-model="formData[o.name]"\n              type="text"\n              style="display: none"\n              :rules="applyRules(o.required)"\n            ></q-input>\n            <q-input\n              v-else\n              v-model="formData[o.name]"\n              @input="handleValueChanged"\n              :hint="o.description"\n              :label="o.label || o.name"\n              :rules="applyRules(o.required)"\n              filled\n              dense\n            ></q-input>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',methods:{applyRules(e){return e?this.rules:[]},buildData(e,n={}){return e.reduce(((e,t)=>(t.options?.length?e[t.name]=this.buildData(t.options,n[t.name]):e[t.name]=n[t.name]??t.default,e)),{})},handleValueChanged(){this.$emit("input",this.formData)}},created:function(){this.formData=this.buildData(this.options,this.value)}}),window.app.component("lnbits-update-balance",{mixins:[window.windowMixin],props:["wallet_id","callback"],computed:{denomination:()=>LNBITS_DENOMINATION,admin(){return this.g.user.admin}},data:function(){return{credit:0}},methods:{updateBalance:function(e){LNbits.api.updateBalance(e,this.wallet_id).then((n=>{if("Success"!==n.data.status)throw new Error(n.data);this.callback({success:!0,credit:parseInt(e),wallet_id:this.wallet_id})})).then((n=>(e=parseInt(e),Quasar.Notify.create({type:"positive",message:this.$t("wallet_topup_ok",{amount:e}),icon:null}),e))).catch((function(e){LNbits.utils.notifyApiError(e)}))}},template:'\n      <q-btn\n        v-if="admin"\n        round\n        color="primary"\n        icon="add"\n        size="sm"\n      >\n        <q-popup-edit\n          class="bg-accent text-white"\n          v-slot="scope"\n          v-model="credit"\n        >\n          <q-input\n            filled\n            :label=\'$t("credit_label", { denomination: denomination })\'\n            :hint="$t(\'credit_hint\')"\n            v-model="scope.value"\n            dense\n            autofocus\n            @keyup.enter="updateBalance(scope.value)"\n          >\n            <template v-slot:append>\n              <q-icon name="edit" />\n            </template>\n          </q-input>\n        </q-popup-edit>\n        <q-tooltip>Topup Wallet</q-tooltip>\n      </q-btn>\n    '}),window.app.use(VueQrcodeReader),window.app.use(Quasar),window.app.use(window.i18n),window.app.mount("#vue");
+function generateChart(t,e){const n=e.reduce(((t,e)=>(t.labels.push(e.date),t.income.push(e.income),t.spending.push(e.spending),t.cumulative.push(e.balance),t)),{labels:[],income:[],spending:[],cumulative:[]});return new Chart(t.getContext("2d"),{type:"bar",data:{labels:n.labels,datasets:[{data:n.cumulative,type:"line",label:"balance",backgroundColor:"#673ab7",borderColor:"#673ab7",borderWidth:4,pointRadius:3,fill:!1},{data:n.income,type:"bar",label:"in",barPercentage:.75,backgroundColor:"rgba(76, 175, 80, 0.5)"},{data:n.spending,type:"bar",label:"out",barPercentage:.75,backgroundColor:"rgba(233, 30, 99, 0.5)"}]},options:{title:{text:"Chart.js Combo Time Scale"},tooltips:{mode:"index",intersect:!1},scales:{xAxes:[{type:"time",display:!0,time:{minUnit:"hour",stepSize:3}}]},animation:{duration:0},elements:{line:{tension:0}}}})}window.app.component("lnbits-funding-sources",{template:"#lnbits-funding-sources",mixins:[window.windowMixin],props:["form-data","allowed-funding-sources"],methods:{getFundingSourceLabel(t){const e=this.rawFundingSources.find((e=>e[0]===t));return e?e[1]:t}},computed:{fundingSources(){let t=[];for(const[e,n,i]of this.rawFundingSources){const n={};if(null!==i)for(let[t,e]of Object.entries(i))n[t]={label:e,value:null};t.push([e,n])}return new Map(t)},sortedAllowedFundingSources(){return this.allowedFundingSources.sort()}},data:()=>({rawFundingSources:[["VoidWallet","Void Wallet",null],["FakeWallet","Fake Wallet",{fake_wallet_secret:"Secret"}],["CoreLightningWallet","Core Lightning",{corelightning_rpc:"Endpoint",corelightning_pay_command:"Custom Pay Command"}],["CoreLightningRestWallet","Core Lightning Rest",{corelightning_rest_url:"Endpoint",corelightning_rest_cert:"Certificate",corelightning_rest_macaroon:"Macaroon"}],["LndRestWallet","Lightning Network Daemon (LND Rest)",{lnd_rest_endpoint:"Endpoint",lnd_rest_cert:"Certificate",lnd_rest_macaroon:"Macaroon",lnd_rest_macaroon_encrypted:"Encrypted Macaroon",lnd_rest_route_hints:"Enable Route Hints"}],["LndWallet","Lightning Network Daemon (LND)",{lnd_grpc_endpoint:"Endpoint",lnd_grpc_cert:"Certificate",lnd_grpc_port:"Port",lnd_grpc_admin_macaroon:"Admin Macaroon",lnd_grpc_macaroon_encrypted:"Encrypted Macaroon"}],["LnTipsWallet","LN.Tips",{lntips_api_endpoint:"Endpoint",lntips_api_key:"API Key"}],["LNPayWallet","LN Pay",{lnpay_api_endpoint:"Endpoint",lnpay_api_key:"API Key",lnpay_wallet_key:"Wallet Key"}],["EclairWallet","Eclair (ACINQ)",{eclair_url:"URL",eclair_pass:"Password"}],["LNbitsWallet","LNbits",{lnbits_endpoint:"Endpoint",lnbits_key:"Admin Key"}],["BlinkWallet","Blink",{blink_api_endpoint:"Endpoint",blink_ws_endpoint:"WebSocket",blink_token:"Key"}],["AlbyWallet","Alby",{alby_api_endpoint:"Endpoint",alby_access_token:"Key"}],["BoltzWallet","Boltz",{boltz_client_endpoint:"Endpoint",boltz_client_macaroon:"Admin Macaroon path or hex",boltz_client_cert:"Certificate path or hex",boltz_client_wallet:"Wallet Name"}],["ZBDWallet","ZBD",{zbd_api_endpoint:"Endpoint",zbd_api_key:"Key"}],["PhoenixdWallet","Phoenixd",{phoenixd_api_endpoint:"Endpoint",phoenixd_api_password:"Key"}],["OpenNodeWallet","OpenNode",{opennode_api_endpoint:"Endpoint",opennode_key:"Key"}],["ClicheWallet","Cliche (NBD)",{cliche_endpoint:"Endpoint"}],["SparkWallet","Spark",{spark_url:"Endpoint",spark_token:"Token"}],["NWCWallet","Nostr Wallet Connect",{nwc_pairing_url:"Pairing URL"}],["BreezSdkWallet","Breez SDK",{breez_api_key:"Breez API Key",breez_greenlight_seed:"Greenlight Seed",breez_greenlight_device_key:"Greenlight Device Key",breez_greenlight_device_cert:"Greenlight Device Cert",breez_greenlight_invite_code:"Greenlight Invite Code"}]]})}),window.app.component("lnbits-extension-settings-form",{name:"lnbits-extension-settings-form",template:"#lnbits-extension-settings-form",props:["options","adminkey","endpoint"],methods:{async updateSettings(){if(!this.settings)return Quasar.Notify.create({message:"No settings to update",type:"negative"});try{const{data:t}=await LNbits.api.request("PUT",this.endpoint,this.adminkey,this.settings);this.settings=t}catch(t){LNbits.utils.notifyApiError(t)}},getSettings:async function(){try{const{data:t}=await LNbits.api.request("GET",this.endpoint,this.adminkey);this.settings=t}catch(t){LNbits.utils.notifyApiError(t)}},resetSettings:async function(){LNbits.utils.confirmDialog("Are you sure you want to reset the settings?").onOk((async()=>{try{await LNbits.api.request("DELETE",this.endpoint,this.adminkey),await this.getSettings()}catch(t){LNbits.utils.notifyApiError(t)}}))}},created:async function(){await this.getSettings()},data:function(){return{settings:void 0}}}),window.app.component("lnbits-extension-settings-btn-dialog",{template:"#lnbits-extension-settings-btn-dialog",name:"lnbits-extension-settings-btn-dialog",props:["options","adminkey","endpoint"],data:function(){return{show:!1}}}),window.app.component("payment-list",{name:"payment-list",template:"#payment-list",props:["update","wallet","mobileSimple","lazy"],mixins:[window.windowMixin],data:function(){return{denomination:LNBITS_DENOMINATION,payments:[],paymentsTable:{columns:[{name:"time",align:"left",label:this.$t("memo")+"/"+this.$t("date"),field:"date",sortable:!0},{name:"amount",align:"right",label:this.$t("amount")+" ("+LNBITS_DENOMINATION+")",field:"sat",sortable:!0}],pagination:{rowsPerPage:10,page:1,sortBy:"time",descending:!0,rowsNumber:10},search:null,loading:!1},exportTagName:"",exportPaymentTagList:[],paymentsCSV:{columns:[{name:"pending",align:"left",label:"Pending",field:"pending"},{name:"memo",align:"left",label:this.$t("memo"),field:"memo"},{name:"time",align:"left",label:this.$t("date"),field:"date",sortable:!0},{name:"amount",align:"right",label:this.$t("amount")+" ("+LNBITS_DENOMINATION+")",field:"sat",sortable:!0},{name:"fee",align:"right",label:this.$t("fee")+" (m"+LNBITS_DENOMINATION+")",field:"fee"},{name:"tag",align:"right",label:this.$t("tag"),field:"tag"},{name:"payment_hash",align:"right",label:this.$t("payment_hash"),field:"payment_hash"},{name:"payment_proof",align:"right",label:this.$t("payment_proof"),field:"payment_proof"},{name:"webhook",align:"right",label:this.$t("webhook"),field:"webhook"},{name:"fiat_currency",align:"right",label:"Fiat Currency",field:t=>t.extra.wallet_fiat_currency},{name:"fiat_amount",align:"right",label:"Fiat Amount",field:t=>t.extra.wallet_fiat_amount}],filter:null,loading:!1}}},computed:{filteredPayments:function(){var t=this.paymentsTable.search;return t&&""!==t?LNbits.utils.search(this.payments,t):this.payments},paymentsOmitter(){return this.$q.screen.lt.md&&this.mobileSimple?this.payments.length>0?[this.payments[0]]:[]:this.payments},pendingPaymentsExist:function(){return-1!==this.payments.findIndex((t=>t.pending))}},methods:{fetchPayments:function(t){const e=LNbits.utils.prepareFilterQuery(this.paymentsTable,t);return LNbits.api.getPayments(this.wallet,e).then((t=>{this.paymentsTable.loading=!1,this.paymentsTable.pagination.rowsNumber=t.data.total,this.payments=t.data.data.map((t=>LNbits.map.payment(t)))})).catch((t=>{this.paymentsTable.loading=!1,LNbits.utils.notifyApiError(t)}))},paymentTableRowKey:function(t){return t.payment_hash+t.amount},exportCSV(t=!1){const e=this.paymentsTable.pagination,n={sortby:e.sortBy??"time",direction:e.descending?"desc":"asc"},i=new URLSearchParams(n);LNbits.api.getPayments(this.wallet,i).then((e=>{let n=e.data.data.map(LNbits.map.payment),i=this.paymentsCSV.columns;if(t){this.exportPaymentTagList.length&&(n=n.filter((t=>this.exportPaymentTagList.includes(t.tag))));const t=Object.keys(n.reduce(((t,e)=>({...t,...e.details})),{})).map((t=>({name:t,align:"right",label:t.charAt(0).toUpperCase()+t.slice(1).replace(/([A-Z])/g," $1"),field:e=>e.details[t],format:t=>"object"==typeof t?JSON.stringify(t):t})));i=this.paymentsCSV.columns.concat(t)}LNbits.utils.exportCSV(i,n,this.wallet.name+"-payments")}))},addFilterTag:function(){if(!this.exportTagName)return;const t=this.exportTagName.trim();this.exportPaymentTagList=this.exportPaymentTagList.filter((e=>e!==t)),this.exportPaymentTagList.push(t),this.exportTagName=""},removeExportTag:function(t){this.exportPaymentTagList=this.exportPaymentTagList.filter((e=>e!==t))},formatCurrency:function(t,e){try{return LNbits.utils.formatCurrency(t,e)}catch(e){return console.error(e),`${t} ???`}}},watch:{lazy:function(t){!0===t&&this.fetchPayments()},update:function(){this.fetchPayments()}},created:function(){void 0===this.lazy&&this.fetchPayments()}}),window.app.component("payment-chart",{template:"#payment-chart",name:"payment-chart",props:["wallet"],mixins:[window.windowMixin],data:function(){return{paymentsChart:{show:!1,group:{value:"hour",label:"Hour"},groupOptions:[{value:"hour",label:"Hour"},{value:"day",label:"Day"},{value:"week",label:"Week"},{value:"month",label:"Month"},{value:"year",label:"Year"}],instance:null}}},methods:{showChart:function(){this.paymentsChart.show=!0,LNbits.api.request("GET","/api/v1/payments/history?group="+this.paymentsChart.group.value,this.wallet.adminkey).then((t=>{this.$nextTick((()=>{this.paymentsChart.instance&&this.paymentsChart.instance.destroy(),this.paymentsChart.instance=generateChart(this.$refs.canvas,t.data)}))})).catch((t=>{LNbits.utils.notifyApiError(t),this.paymentsChart.show=!1}))}}}),window.app.component(QrcodeVue),window.app.component("lnbits-extension-rating",{template:"#lnbits-extension-rating",name:"lnbits-extension-rating",props:["rating"]}),window.app.component("lnbits-fsat",{template:"<span>{{ fsat }}</span>",props:{amount:{type:Number,default:0}},computed:{fsat:function(){return LNbits.utils.formatSat(this.amount)}}}),window.app.component("lnbits-wallet-list",{template:"#lnbits-wallet-list",props:["balance"],data:function(){return{user:null,activeWallet:null,balance:0,showForm:!1,walletName:"",LNBITS_DENOMINATION:LNBITS_DENOMINATION}},computed:{wallets:function(){var t=this.balance;return this.user.wallets.map((function(e){return e.live_fsat=t.length&&t[0]===e.id?LNbits.utils.formatSat(t[1]):e.fsat,e}))}},methods:{createWallet:function(){LNbits.api.createWallet(this.user.wallets[0],this.walletName)}},created:function(){window.user&&(this.user=LNbits.map.user(window.user)),window.wallet&&(this.activeWallet=LNbits.map.wallet(window.wallet)),document.addEventListener("updateWalletBalance",this.updateWalletBalance)}}),window.app.component("lnbits-extension-list",{template:"#lnbits-extension-list",data:function(){return{extensions:[],user:null}},computed:{userExtensions:function(){if(!this.user)return[];var t=window.location.pathname,e=this.user.extensions;return this.extensions.filter((function(t){return-1!==e.indexOf(t.code)})).map((function(e){return e.isActive=t.startsWith(e.url),e}))}},created:function(){window.extensions&&(this.extensions=window.extensions.map((function(t){return LNbits.map.extension(t)})).sort((function(t,e){return t.name.localeCompare(e.name)}))),window.user&&(this.user=LNbits.map.user(window.user))}}),window.app.component("lnbits-manage",{template:"#lnbits-manage",props:["showAdmin","showNode","showExtensions","showUsers"],methods:{isActive:function(t){return window.location.pathname===t}},data:()=>({extensions:[],user:null}),created(){window.user&&(this.user=LNbits.map.user(window.user))}}),window.app.component("lnbits-payment-details",{template:"#lnbits-payment-details",props:["payment"],mixins:[window.windowMixin],data:function(){return{LNBITS_DENOMINATION:LNBITS_DENOMINATION}},computed:{hasPreimage(){return this.payment.preimage&&"0000000000000000000000000000000000000000000000000000000000000000"!==this.payment.preimage},hasExpiry(){return!!this.payment.expiry},hasSuccessAction(){return this.hasPreimage&&this.payment.extra&&this.payment.extra.success_action},webhookStatusColor(){return this.payment.webhook_status>=300||this.payment.webhook_status<0?"red-10":this.payment.webhook_status?"green-10":"cyan-7"},webhookStatusText(){return this.payment.webhook_status?this.payment.webhook_status:"not sent yet"},hasTag(){return this.payment.extra&&!!this.payment.extra.tag},extras(){if(!this.payment.extra)return[];let t=_.omit(this.payment.extra,["tag","success_action"]);return Object.keys(t).map((e=>({key:e,value:t[e]})))}}}),window.app.component("lnbits-lnurlpay-success-action",{template:"#lnbits-lnurlpay-success-action",props:["payment","success_action"],data(){return{decryptedValue:this.success_action.ciphertext}},mounted:function(){if("aes"!==this.success_action.tag)return null;decryptLnurlPayAES(this.success_action,this.payment.preimage).then((t=>{this.decryptedValue=t}))}}),window.app.component("lnbits-qrcode",{template:"#lnbits-qrcode",mixins:[window.windowMixin],components:{QrcodeVue:QrcodeVue},props:["value"],data:()=>({logo:LNBITS_QR_LOGO})}),window.app.component("lnbits-notifications-btn",{template:"#lnbits-notifications-btn",mixins:[window.windowMixin],props:["pubkey"],data:()=>({isSupported:!1,isSubscribed:!1,isPermissionGranted:!1,isPermissionDenied:!1}),methods:{urlB64ToUint8Array(t){const e=(t+"=".repeat((4-t.length%4)%4)).replace(/\-/g,"+").replace(/_/g,"/"),n=atob(e),i=new Uint8Array(n.length);for(let t=0;t<n.length;++t)i[t]=n.charCodeAt(t);return i},toggleNotifications(){this.isSubscribed?this.unsubscribe():this.subscribe()},saveUserSubscribed(t){let e=JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[];e.includes(t)||e.push(t),this.$q.localStorage.set("lnbits.webpush.subscribedUsers",JSON.stringify(e))},removeUserSubscribed(t){let e=JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[];e=e.filter((e=>e!==t)),this.$q.localStorage.set("lnbits.webpush.subscribedUsers",JSON.stringify(e))},isUserSubscribed(t){return(JSON.parse(this.$q.localStorage.getItem("lnbits.webpush.subscribedUsers"))||[]).includes(t)},subscribe(){var t=this;this.isSupported&&!this.isPermissionDenied&&(Notification.requestPermission().then((t=>{this.isPermissionGranted="granted"===t,this.isPermissionDenied="denied"===t})).catch((function(t){console.log(t)})),navigator.serviceWorker.ready.then((e=>{navigator.serviceWorker.getRegistration().then((e=>{e.pushManager.getSubscription().then((function(n){if(null===n||!t.isUserSubscribed(t.g.user.id)){const n={applicationServerKey:t.urlB64ToUint8Array(t.pubkey),userVisibleOnly:!0};e.pushManager.subscribe(n).then((function(e){LNbits.api.request("POST","/api/v1/webpush",t.g.user.wallets[0].adminkey,{subscription:JSON.stringify(e)}).then((function(e){t.saveUserSubscribed(e.data.user),t.isSubscribed=!0})).catch((function(t){LNbits.utils.notifyApiError(t)}))}))}})).catch((function(t){console.log(t)}))}))})))},unsubscribe(){var t=this;navigator.serviceWorker.ready.then((e=>{e.pushManager.getSubscription().then((e=>{e&&LNbits.api.request("DELETE","/api/v1/webpush?endpoint="+btoa(e.endpoint),t.g.user.wallets[0].adminkey).then((function(){t.removeUserSubscribed(t.g.user.id),t.isSubscribed=!1})).catch((function(t){LNbits.utils.notifyApiError(t)}))}))})).catch((function(t){console.log(t)}))},checkSupported:function(){let t="https:"===window.location.protocol,e="serviceWorker"in navigator,n="Notification"in window,i="PushManager"in window;return this.isSupported=t&&e&&n&&i,this.isSupported||console.log("Notifications disabled because requirements are not met:",{HTTPS:t,"Service Worker API":e,"Notification API":n,"Push API":i}),this.isSupported},updateSubscriptionStatus:async function(){var t=this;await navigator.serviceWorker.ready.then((e=>{e.pushManager.getSubscription().then((e=>{t.isSubscribed=!!e&&t.isUserSubscribed(t.g.user.id)}))})).catch((function(t){console.log(t)}))}},created:function(){this.isPermissionDenied="denied"===Notification.permission,this.checkSupported()&&this.updateSubscriptionStatus()}}),window.app.component("lnbits-dynamic-fields",{template:"#lnbits-dynamic-fields",mixins:[window.windowMixin],props:["options","value"],data:()=>({formData:null,rules:[t=>!!t||"Field is required"]}),methods:{applyRules(t){return t?this.rules:[]},buildData(t,e={}){return t.reduce(((t,n)=>(n.options?.length?t[n.name]=this.buildData(n.options,e[n.name]):t[n.name]=e[n.name]??n.default,t)),{})},handleValueChanged(){this.$emit("input",this.formData)}},created(){this.formData=this.buildData(this.options,this.value)}}),window.app.component("lnbits-update-balance",{template:"#lnbits-update-balance",mixins:[window.windowMixin],props:["wallet_id","callback"],computed:{denomination:()=>LNBITS_DENOMINATION,admin(){return this.g.user.admin}},data:function(){return{credit:0}},methods:{updateBalance:function(t){LNbits.api.updateBalance(t,this.wallet_id).then((e=>{if("Success"!==e.data.status)throw new Error(e.data);this.callback({success:!0,credit:parseInt(t),wallet_id:this.wallet_id})})).then((e=>(t=parseInt(t),Quasar.Notify.create({type:"positive",message:this.$t("wallet_topup_ok",{amount:t}),icon:null}),t))).catch((function(t){LNbits.utils.notifyApiError(t)}))}}}),window.app.use(VueQrcodeReader),window.app.use(Quasar),window.app.use(window.i18n),window.app.mount("#vue");
diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index 720394aa6..fc723d870 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -1,13 +1,19 @@
 window.app.component(QrcodeVue)
 
+window.app.component('lnbits-extension-rating', {
+  template: '#lnbits-extension-rating',
+  name: 'lnbits-extension-rating',
+  props: ['rating']
+})
+
 window.app.component('lnbits-fsat', {
+  template: '<span>{{ fsat }}</span>',
   props: {
     amount: {
       type: Number,
       default: 0
     }
   },
-  template: '<span>{{ fsat }}</span>',
   computed: {
     fsat: function () {
       return LNbits.utils.formatSat(this.amount)
@@ -16,6 +22,7 @@ window.app.component('lnbits-fsat', {
 })
 
 window.app.component('lnbits-wallet-list', {
+  template: '#lnbits-wallet-list',
   props: ['balance'],
   data: function () {
     return {
@@ -27,52 +34,6 @@ window.app.component('lnbits-wallet-list', {
       LNBITS_DENOMINATION: LNBITS_DENOMINATION
     }
   },
-  template: `
-    <q-list v-if="user && user.wallets.length" dense class="lnbits-drawer__q-list">
-      <q-item-label header v-text="$t('wallets')"></q-item-label>
-      <q-item v-for="wallet in wallets" :key="wallet.id"
-        clickable
-        :active="activeWallet && activeWallet.id === wallet.id"
-        tag="a" :href="wallet.url">
-        <q-item-section side>
-          <q-avatar size="md"
-            :color="(activeWallet && activeWallet.id === wallet.id)
-              ? (($q.dark.isActive) ? 'primary' : 'primary')
-              : 'grey-5'">
-            <q-icon name="flash_on" :size="($q.dark.isActive) ? '21px' : '20px'"
-              :color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
-          </q-avatar>
-        </q-item-section>
-        <q-item-section>
-          <q-item-label lines="1">{{ wallet.name }}</q-item-label>
-          <q-item-label v-if="LNBITS_DENOMINATION != 'sats'" caption>{{ parseFloat(String(wallet.live_fsat).replaceAll(",", "")) / 100  }} {{ LNBITS_DENOMINATION }}</q-item-label>
-          <q-item-label v-else caption>{{ wallet.live_fsat }} {{ LNBITS_DENOMINATION }}</q-item-label>
-        </q-item-section>
-        <q-item-section side v-show="activeWallet && activeWallet.id === wallet.id">
-          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
-        </q-item-section>
-      </q-item>
-      <q-item clickable @click="showForm = !showForm">
-        <q-item-section side>
-          <q-icon :name="(showForm) ? 'remove' : '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_wallet')"></q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-item v-if="showForm">
-        <q-item-section>
-          <q-form @submit="createWallet">
-            <q-input filled dense v-model="walletName" label="Name wallet *">
-              <template v-slot:append>
-                <q-btn round dense flat icon="send" size="sm" @click="createWallet" :disable="walletName === ''"></q-btn>
-              </template>
-            </q-input>
-          </q-form>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  `,
   computed: {
     wallets: function () {
       var bal = this.balance
@@ -102,37 +63,13 @@ window.app.component('lnbits-wallet-list', {
 })
 
 window.app.component('lnbits-extension-list', {
+  template: '#lnbits-extension-list',
   data: function () {
     return {
       extensions: [],
       user: null
     }
   },
-  template: `
-    <q-list v-if="user && userExtensions.length > 0" dense class="lnbits-drawer__q-list">
-      <q-item-label header v-text="$t('extensions')"></q-item-label>
-      <q-item v-for="extension in userExtensions" :key="extension.code"
-        clickable
-        :active="extension.isActive"
-        tag="a" :href="extension.url">
-        <q-item-section side>
-          <q-avatar size="md">
-            <q-img
-              :src="extension.tile"
-              style="max-width:20px"
-            ></q-img>
-          </q-avatar>
-        </q-item-section>
-        <q-item-section>
-          <q-item-label lines="1">{{ extension.name }} </q-item-label>
-        </q-item-section>
-        <q-item-section side v-show="extension.isActive">
-          <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
-        </q-item-section>
-      </q-item>
-      <div class="lt-md q-mt-xl q-mb-xl"></div>
-    </q-list>
-  `,
   computed: {
     userExtensions: function () {
       if (!this.user) return []
@@ -168,59 +105,20 @@ window.app.component('lnbits-extension-list', {
 })
 
 window.app.component('lnbits-manage', {
+  template: '#lnbits-manage',
   props: ['showAdmin', 'showNode', 'showExtensions', 'showUsers'],
   methods: {
     isActive: function (path) {
       return window.location.pathname === path
     }
   },
-  data: function () {
+  data() {
     return {
       extensions: [],
       user: null
     }
   },
-  template: `
-    <q-list v-if="user" dense class="lnbits-drawer__q-list">
-      <q-item-label header v-text="$t('manage')"></q-item-label>
-      <div v-if="user.admin">
-        <q-item v-if='showAdmin' clickable tag="a" href="/admin" :active="isActive('/admin')">
-          <q-item-section side>
-            <q-icon name="admin_panel_settings" :color="isActive('/admin') ? 'primary' : 'grey-5'" size="md"></q-icon>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1" v-text="$t('server')"></q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item v-if='showNode' clickable tag="a" href="/node" :active="isActive('/node')">
-          <q-item-section side>
-            <q-icon name="developer_board" :color="isActive('/node') ? 'primary' : 'grey-5'" size="md"></q-icon>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1" v-text="$t('node')"></q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item v-if="showUsers" clickable tag="a" href="/users" :active="isActive('/users')">
-          <q-item-section side>
-            <q-icon name="groups" :color="isActive('/users') ? 'primary' : 'grey-5'" size="md"></q-icon>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1" v-text="$t('users')"></q-item-label>
-          </q-item-section>
-        </q-item>
-      </div>
-      <q-item v-if="showExtensions" clickable tag="a" href="/extensions" :active="isActive('/extensions')">
-        <q-item-section side>
-          <q-icon name="extension" :color="isActive('/extensions') ? 'primary' : 'grey-5'" size="md"></q-icon>
-        </q-item-section>
-        <q-item-section>
-          <q-item-label lines="1" v-text="$t('extensions')"></q-item-label>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  `,
-
-  created: function () {
+  created() {
     if (window.user) {
       this.user = LNbits.map.user(window.user)
     }
@@ -228,6 +126,7 @@ window.app.component('lnbits-manage', {
 })
 
 window.app.component('lnbits-payment-details', {
+  template: '#lnbits-payment-details',
   props: ['payment'],
   mixins: [window.windowMixin],
   data: function () {
@@ -235,72 +134,6 @@ window.app.component('lnbits-payment-details', {
       LNBITS_DENOMINATION: LNBITS_DENOMINATION
     }
   },
-  template: `
-  <div class="q-py-md" style="text-align: left">
-
-  <div v-if="payment.tag" class="row justify-center q-mb-md">
-    <q-badge v-if="hasTag" color="yellow" text-color="black">
-      #{{ payment.tag }}
-    </q-badge>
-  </div>
-
-  <div class="row">
-    <b v-text="$t('created')"></b>:
-    {{ payment.date }} ({{ payment.dateFrom }})
-  </div>
-
-  <div class="row" v-if="hasExpiry">
-   <b v-text="$t('expiry')"></b>:
-   {{ payment.expirydate }} ({{ payment.expirydateFrom }})
-  </div>
-
-  <div class="row">
-   <b v-text="$t('amount')"></b>:
-    {{ (payment.amount / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
-  </div>
-
-  <div class="row">
-    <b v-text="$t('fee')"></b>:
-    {{ (payment.fee / 1000).toFixed(3) }} {{LNBITS_DENOMINATION}}
-  </div>
-
-  <div class="text-wrap">
-    <b style="white-space: nowrap;" v-text="$t('payment_hash')"></b>:&nbsp;{{ payment.payment_hash }}
-        <q-icon name="content_copy" @click="copyText(payment.payment_hash)" size="1em" color="grey" class="q-mb-xs cursor-pointer" />
-  </div>
-
-  <div class="text-wrap">
-    <b style="white-space: nowrap;" v-text="$t('memo')"></b>:&nbsp;{{ payment.memo }}
-  </div>
-
-  <div class="text-wrap" v-if="payment.webhook">
-    <b style="white-space: nowrap;" v-text="$t('webhook')"></b>:&nbsp;{{ payment.webhook }}:&nbsp;<q-badge :color="webhookStatusColor" text-color="white">
-      {{ webhookStatusText }}
-    </q-badge>
-  </div>
-
-  <div class="text-wrap" v-if="hasPreimage">
-    <b style="white-space: nowrap;" v-text="$t('payment_proof')"></b>:&nbsp;{{ payment.preimage }}
-  </div>
-
-  <div class="row" v-for="entry in extras">
-    <q-badge v-if="hasTag" color="secondary" text-color="white">
-      extra
-    </q-badge>
-    <b>{{ entry.key }}</b>:
-    {{ entry.value }}
-  </div>
-
-  <div class="row" v-if="hasSuccessAction">
-    <b>Success action</b>:
-      <lnbits-lnurlpay-success-action
-        :payment="payment"
-        :success_action="payment.extra.success_action"
-      ></lnbits-lnurlpay-success-action>
-  </div>
-
-</div>
-  `,
   computed: {
     hasPreimage() {
       return (
@@ -344,26 +177,15 @@ window.app.component('lnbits-payment-details', {
 })
 
 window.app.component('lnbits-lnurlpay-success-action', {
+  template: '#lnbits-lnurlpay-success-action',
   props: ['payment', 'success_action'],
   data() {
     return {
       decryptedValue: this.success_action.ciphertext
     }
   },
-  template: `
-    <div>
-      <p class="q-mb-sm">{{ success_action.message || success_action.description }}</p>
-      <code v-if="decryptedValue" class="text-h6 q-mt-sm q-mb-none">
-        {{ decryptedValue }}
-      </code>
-      <p v-else-if="success_action.url" class="text-h6 q-mt-sm q-mb-none">
-        <a target="_blank" style="color: inherit;" :href="success_action.url">{{ success_action.url }}</a>
-      </p>
-    </div>
-  `,
   mounted: function () {
     if (this.success_action.tag !== 'aes') return null
-
     decryptLnurlPayAES(this.success_action, this.payment.preimage).then(
       value => {
         this.decryptedValue = value
@@ -373,6 +195,7 @@ window.app.component('lnbits-lnurlpay-success-action', {
 })
 
 window.app.component('lnbits-qrcode', {
+  template: '#lnbits-qrcode',
   mixins: [window.windowMixin],
   components: {
     QrcodeVue
@@ -382,16 +205,11 @@ window.app.component('lnbits-qrcode', {
     return {
       logo: LNBITS_QR_LOGO
     }
-  },
-  template: `
-  <div class="qrcode__wrapper">
-    <qrcode-vue :value="value" size="350" class="rounded-borders"></qrcode-vue>
-    <img class="qrcode__image" :src="logo" alt="..." />
-  </div>
-  `
+  }
 })
 
 window.app.component('lnbits-notifications-btn', {
+  template: '#lnbits-notifications-btn',
   mixins: [window.windowMixin],
   props: ['pubkey'],
   data() {
@@ -402,26 +220,6 @@ window.app.component('lnbits-notifications-btn', {
       isPermissionDenied: false
     }
   },
-  template: `
-    <q-btn
-      v-if="g.user.wallets"
-      :disabled="!this.isSupported"
-      dense
-      flat
-      round
-      @click="toggleNotifications()"
-      :icon="this.isSubscribed ? 'notifications_active' : 'notifications_off'"
-      size="sm"
-      type="a"
-    >
-      <q-tooltip v-if="this.isSupported && !this.isSubscribed">Subscribe to notifications</q-tooltip>
-      <q-tooltip v-if="this.isSupported && this.isSubscribed">Unsubscribe from notifications</q-tooltip>
-      <q-tooltip v-if="this.isSupported && this.isPermissionDenied">
-          Notifications are disabled,<br/>please enable or reset permissions
-      </q-tooltip>
-      <q-tooltip v-if="!this.isSupported">Notifications are not supported</q-tooltip>
-    </q-btn>
-  `,
   methods: {
     // converts base64 to Array buffer
     urlB64ToUint8Array(base64String) {
@@ -605,6 +403,7 @@ window.app.component('lnbits-notifications-btn', {
 })
 
 window.app.component('lnbits-dynamic-fields', {
+  template: '#lnbits-dynamic-fields',
   mixins: [window.windowMixin],
   props: ['options', 'value'],
   data() {
@@ -613,111 +412,6 @@ window.app.component('lnbits-dynamic-fields', {
       rules: [val => !!val || 'Field is required']
     }
   },
-
-  template: `
-    <div v-if="formData">
-      <div class="row q-mb-lg" v-for="o in options">
-        <div class="col auto-width">
-          <p v-if=o.options?.length class="q-ml-xl">
-            <span v-text="o.label || o.name"></span> <small v-if="o.description"> (<span v-text="o.description"></span>)</small>
-          </p>
-          <lnbits-dynamic-fields v-if="o.options?.length" :options="o.options" v-model="formData[o.name]"
-            @input="handleValueChanged" class="q-ml-xl">
-          </lnbits-dynamic-fields>
-          <div v-else>
-            <q-input
-              v-if="o.type === 'number'"
-              type="number"
-              v-model="formData[o.name]"
-              @input="handleValueChanged"
-              :label="o.label || o.name"
-              :hint="o.description"
-              :rules="applyRules(o.required)"
-              filled
-              dense
-            ></q-input>
-            <q-input
-              v-else-if="o.type === 'text'"
-              type="textarea"
-              rows="5"
-              v-model="formData[o.name]"
-              @input="handleValueChanged"
-              :label="o.label || o.name"
-              :hint="o.description"
-              :rules="applyRules(o.required)"
-              filled
-              dense
-            ></q-input>
-            <q-input
-              v-else-if="o.type === 'password'"
-              v-model="formData[o.name]"
-              @input="handleValueChanged"
-              type="password"
-              :label="o.label || o.name"
-              :hint="o.description"
-              :rules="applyRules(o.required)"
-              filled
-              dense
-            ></q-input>
-            <q-select
-              v-else-if="o.type === 'select'"
-              v-model="formData[o.name]"
-              @input="handleValueChanged"
-              :label="o.label || o.name"
-              :hint="o.description"
-              :options="o.values"
-              :rules="applyRules(o.required)"
-            ></q-select>
-            <q-select
-              v-else-if="o.isList"
-              v-model.trim="formData[o.name]"
-              @input="handleValueChanged"
-              input-debounce="0"
-              new-value-mode="add-unique"
-              :label="o.label || o.name"
-              :hint="o.description"
-              :rules="applyRules(o.required)"
-              filled
-              multiple
-              dense
-              use-input
-              use-chips
-              multiple
-              hide-dropdown-icon
-            ></q-select>
-            <div v-else-if="o.type === 'bool'">
-              <q-item tag="label" v-ripple>
-                <q-item-section avatar top>
-                  <q-checkbox v-model="formData[o.name]" @input="handleValueChanged" />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label><span v-text="o.label || o.name"></span></q-item-label>
-                  <q-item-label caption> <span v-text="o.description"></span> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </div>
-            <q-input
-              v-else-if="o.type === 'hidden'"
-              v-model="formData[o.name]"
-              type="text"
-              style="display: none"
-              :rules="applyRules(o.required)"
-            ></q-input>
-            <q-input
-              v-else
-              v-model="formData[o.name]"
-              @input="handleValueChanged"
-              :hint="o.description"
-              :label="o.label || o.name"
-              :rules="applyRules(o.required)"
-              filled
-              dense
-            ></q-input>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
   methods: {
     applyRules(required) {
       return required ? this.rules : []
@@ -736,12 +430,13 @@ window.app.component('lnbits-dynamic-fields', {
       this.$emit('input', this.formData)
     }
   },
-  created: function () {
+  created() {
     this.formData = this.buildData(this.options, this.value)
   }
 })
 
 window.app.component('lnbits-update-balance', {
+  template: '#lnbits-update-balance',
   mixins: [window.windowMixin],
   props: ['wallet_id', 'callback'],
   computed: {
@@ -786,35 +481,5 @@ window.app.component('lnbits-update-balance', {
           LNbits.utils.notifyApiError(error)
         })
     }
-  },
-  template: `
-      <q-btn
-        v-if="admin"
-        round
-        color="primary"
-        icon="add"
-        size="sm"
-      >
-        <q-popup-edit
-          class="bg-accent text-white"
-          v-slot="scope"
-          v-model="credit"
-        >
-          <q-input
-            filled
-            :label='$t("credit_label", { denomination: denomination })'
-            :hint="$t('credit_hint')"
-            v-model="scope.value"
-            dense
-            autofocus
-            @keyup.enter="updateBalance(scope.value)"
-          >
-            <template v-slot:append>
-              <q-icon name="edit" />
-            </template>
-          </q-input>
-        </q-popup-edit>
-        <q-tooltip>Topup Wallet</q-tooltip>
-      </q-btn>
-    `
+  }
 })
diff --git a/lnbits/static/js/components/extension-rating.js b/lnbits/static/js/components/extension-rating.js
deleted file mode 100644
index 8626d2d97..000000000
--- a/lnbits/static/js/components/extension-rating.js
+++ /dev/null
@@ -1,16 +0,0 @@
-window.app.component('lnbits-extension-rating', {
-  name: 'lnbits-extension-rating',
-  props: ['rating'],
-  template: `
-    <div style="margin-bottom: 3px">
-        <q-rating
-          v-model="rating"
-          size="1.5em"
-          :max="5"
-          color="primary"
-          ><q-tooltip>
-            <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
-        ></q-rating>
-    </div>
-  `
-})
diff --git a/lnbits/static/js/components/extension-settings.js b/lnbits/static/js/components/extension-settings.js
index 3e7b408a3..0aad57eaa 100644
--- a/lnbits/static/js/components/extension-settings.js
+++ b/lnbits/static/js/components/extension-settings.js
@@ -1,5 +1,6 @@
 window.app.component('lnbits-extension-settings-form', {
   name: 'lnbits-extension-settings-form',
+  template: '#lnbits-extension-settings-form',
   props: ['options', 'adminkey', 'endpoint'],
   methods: {
     async updateSettings() {
@@ -49,16 +50,6 @@ window.app.component('lnbits-extension-settings-form', {
   created: async function () {
     await this.getSettings()
   },
-  template: `
-    <q-form v-if="settings" @submit="updateSettings" class="q-gutter-md">
-      <lnbits-dynamic-fields :options="options" v-model="settings"></lnbits-dynamic-fields>
-      <div class="row q-mt-lg">
-        <q-btn v-close-popup unelevated color="primary" type="submit">Update</q-btn>
-        <q-btn v-close-popup unelevated color="danger" @click="resetSettings" >Reset</q-btn>
-        <slot name="actions"></slot>
-      </div>
-    </q-form>
-  `,
   data: function () {
     return {
       settings: undefined
@@ -67,21 +58,9 @@ window.app.component('lnbits-extension-settings-form', {
 })
 
 window.app.component('lnbits-extension-settings-btn-dialog', {
+  template: '#lnbits-extension-settings-btn-dialog',
   name: 'lnbits-extension-settings-btn-dialog',
   props: ['options', 'adminkey', 'endpoint'],
-  template: `
-    <q-btn v-if="options" unelevated @click="show = true" color="primary" icon="settings" class="float-right">
-        <q-dialog v-model="show" position="top">
-          <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-            <lnbits-extension-settings-form :options="options" :adminkey="adminkey" :endpoint="endpoint">
-                <template v-slot:actions>
-                    <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
-                </template>
-            </lnbits-extension-settings-form>
-          </q-card>
-        </q-dialog>
-    </q-btn>
-  `,
   data: function () {
     return {
       show: false
diff --git a/lnbits/static/js/components/lnbits-funding-sources.js b/lnbits/static/js/components/lnbits-funding-sources.js
index 9af85bdfe..e0f6fb4f0 100644
--- a/lnbits/static/js/components/lnbits-funding-sources.js
+++ b/lnbits/static/js/components/lnbits-funding-sources.js
@@ -1,4 +1,5 @@
 window.app.component('lnbits-funding-sources', {
+  template: '#lnbits-funding-sources',
   mixins: [window.windowMixin],
   props: ['form-data', 'allowed-funding-sources'],
   methods: {
@@ -196,45 +197,5 @@ window.app.component('lnbits-funding-sources', {
         ]
       ]
     }
-  },
-  template: `
-    <div class="funding-sources">
-        <h6 class="q-mt-xl q-mb-md">Funding Sources</h6>
-        <div class="row">
-          <div class="col-12">
-            <p>Active Funding<small> (Requires server restart)</small></p>
-            <q-select
-              filled
-              v-model="formData.lnbits_backend_wallet_class"
-              hint="Select the active funding wallet"
-              :options="sortedAllowedFundingSources"
-              :option-label="(item) => getFundingSourceLabel(item)"
-            ></q-select>
-          </div>
-        </div>
-        <q-list
-          class="q-mt-md"
-          v-for="(fund, idx) in allowedFundingSources"
-          :key="idx"
-        >
-          <div v-if="fundingSources.get(fund) && fund === formData.lnbits_backend_wallet_class">
-            <div class="row"
-              v-for="([key, prop], i) in Object.entries(fundingSources.get(fund))"
-              :key="i"
-            >
-              <div class="col-12">
-                <q-input
-                  filled
-                  type="text"
-                  class="q-mt-sm"
-                  v-model="formData[key]"
-                  :label="prop.label"
-                  :hint="prop.hint"
-                ></q-input>
-              </div>
-            </div>
-          </div>
-        </q-list>
-    </div>
-  `
+  }
 })
diff --git a/lnbits/static/js/components/payment-chart.js b/lnbits/static/js/components/payment-chart.js
index 08652ac04..3d9385fa0 100644
--- a/lnbits/static/js/components/payment-chart.js
+++ b/lnbits/static/js/components/payment-chart.js
@@ -35,14 +35,14 @@ function generateChart(canvas, rawData) {
           type: 'bar',
           label: 'in',
           barPercentage: 0.75,
-          backgroundColor: window.Color('rgb(76,175,80)').alpha(0.5).rgbString() // green
+          backgroundColor: 'rgba(76, 175, 80, 0.5)' // green
         },
         {
           data: data.spending,
           type: 'bar',
           label: 'out',
           barPercentage: 0.75,
-          backgroundColor: window.Color('rgb(233,30,99)').alpha(0.5).rgbString() // pink
+          backgroundColor: 'rgba(233, 30, 99, 0.5)' // pink
         }
       ]
     },
@@ -81,6 +81,7 @@ function generateChart(canvas, rawData) {
 }
 
 window.app.component('payment-chart', {
+  template: '#payment-chart',
   name: 'payment-chart',
   props: ['wallet'],
   mixins: [window.windowMixin],
@@ -128,30 +129,5 @@ window.app.component('payment-chart', {
           this.paymentsChart.show = false
         })
     }
-  },
-  template: `
-    <span id="payment-chart">
-        <q-btn dense flat round icon="show_chart" color="grey" @click="showChart" >
-            <q-tooltip>
-                <span v-text="$t('chart_tooltip')"></span>
-            </q-tooltip>
-        </q-btn>
-
-        <q-dialog v-model="paymentsChart.show" position="top">
-            <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
-                <q-card-section>
-                    <div class="row q-gutter-sm justify-between">
-                        <div class="text-h6">Payments Chart</div>
-                        <q-select label="Group" filled dense v-model="paymentsChart.group"
-                        style="min-width: 120px"
-                        :options="paymentsChart.groupOptions"
-                        >
-                        </q-select>
-                    </div>
-                    <canvas ref="canvas" width="600" height="400"></canvas>
-                </q-card-section>
-            </q-card>
-        </q-dialog>
-    </span>
-    `
+  }
 })
diff --git a/lnbits/static/js/components/payment-list.js b/lnbits/static/js/components/payment-list.js
index f028ddf69..b4cfd873a 100644
--- a/lnbits/static/js/components/payment-list.js
+++ b/lnbits/static/js/components/payment-list.js
@@ -1,5 +1,6 @@
 window.app.component('payment-list', {
   name: 'payment-list',
+  template: '#payment-list',
   props: ['update', 'wallet', 'mobileSimple', 'lazy'],
   mixins: [window.windowMixin],
   data: function () {
@@ -223,280 +224,5 @@ window.app.component('payment-list', {
   },
   created: function () {
     if (this.lazy === undefined) this.fetchPayments()
-  },
-  template: `
-    <q-card
-      :style="$q.screen.lt.md ? {
-        background: $q.screen.lt.md ? 'none !important': ''
-        , boxShadow: $q.screen.lt.md ? 'none !important': ''
-        , marginTop: $q.screen.lt.md ? '0px !important': ''
-      } : ''"
-    >
-      <q-card-section>
-        <div class="row items-center no-wrap q-mb-sm">
-          <div class="col">
-            <h5
-              class="text-subtitle1 q-my-none"
-              :v-text="$t('transactions')"
-            ></h5>
-          </div>
-          <div class="gt-sm col-auto">
-            <q-btn-dropdown
-              outline
-              persistent
-              class="q-mr-sm"
-              color="grey"
-              :label="$t('export_csv')"
-              split
-              @click="exportCSV(false)"
-            >
-              <q-list>
-                <q-item>
-                  <q-item-section>
-                    <q-input
-                    @keydown.enter="addFilterTag"
-                      filled
-                      dense
-                      v-model="exportTagName"
-                      type="text"
-                      label="Payment Tags"
-                      class="q-pa-sm"
-                    >
-                      <q-btn
-                        @click="addFilterTag"
-                        dense
-                        flat
-                        icon="add"
-                      ></q-btn>
-                    </q-input>
-                  </q-item-section>
-                </q-item>
-                <q-item v-if="exportPaymentTagList.length">
-                  <q-item-section>
-                    <div>
-                      <q-chip
-                        v-for="tag in exportPaymentTagList"
-                        :key="tag"
-                        removable
-                        @remove="removeExportTag(tag)"
-                        color="primary"
-                        text-color="white"
-                        :label="tag"
-                      ></q-chip>
-                    </div>
-                  </q-item-section>
-                </q-item>
-
-                <q-item>
-                  <q-item-section>
-                    <q-btn v-close-popup outline color="grey" @click="exportCSV(true)" label="Export to CSV with details" ></q-btn>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-            <payment-chart :wallet="wallet" />
-          </div>
-        </div>
-        <q-input
-          :style="$q.screen.lt.md ? {
-          display: mobileSimple ? 'none !important': ''
-        } : ''"
-          filled
-          dense
-          clearable
-          v-model="paymentsTable.search"
-          debounce="300"
-          :placeholder="$t('search_by_tag_memo_amount')"
-          class="q-mb-md"
-        >
-        </q-input>
-        <q-table
-          dense
-          flat
-          :rows="paymentsOmitter"
-          :row-key="paymentTableRowKey"
-          :columns="paymentsTable.columns"
-          :pagination.sync="paymentsTable.pagination"
-          :no-data-label="$t('no_transactions')"
-          :filter="paymentsTable.search"
-          :loading="paymentsTable.loading"
-          :hide-header="mobileSimple"
-          :hide-bottom="mobileSimple"
-          @request="fetchPayments"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th auto-width></q-th>
-              <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-                v-text="col.label"
-              ></q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td auto-width class="text-center">
-                <q-icon
-                  v-if="props.row.isPaid"
-                  size="14px"
-                  :name="props.row.isOut ? 'call_made' : 'call_received'"
-                  :color="props.row.isOut ? 'pink' : 'green'"
-                  @click="props.expand = !props.expand"
-                ></q-icon>
-                <q-icon
-                  v-else-if="props.row.isFailed"
-                  name="warning"
-                  color="yellow"
-                  @click="props.expand = !props.expand"
-                >
-                  <q-tooltip
-                    ><span>failed</span
-                  ></q-tooltip>
-                </q-icon>
-                <q-icon
-                  v-else
-                  name="settings_ethernet"
-                  color="grey"
-                  @click="props.expand = !props.expand"
-                >
-                  <q-tooltip
-                    ><span v-text="$t('pending')"></span
-                  ></q-tooltip>
-                </q-icon>
-              </q-td>
-              <q-td
-                key="time"
-                :props="props"
-                style="white-space: normal; word-break: break-all"
-              >
-                <q-badge
-                  v-if="props.row.tag"
-                  color="yellow"
-                  text-color="black"
-                >
-                  <a
-                    v-text="'#'+props.row.tag"
-                    class="inherit"
-                    :href="['/', props.row.tag].join('')"
-                  ></a>
-                </q-badge>
-                <span v-text="props.row.memo"></span>
-                <br />
-
-                <i>
-                  <span v-text="props.row.dateFrom"></span>
-                  <q-tooltip
-                    ><span v-text="props.row.date"></span
-                  ></q-tooltip>
-                </i>
-              </q-td>
-              <q-td
-                auto-width
-                key="amount"
-                v-if="denomination != 'sats'"
-                :props="props"
-                class="col1"
-                v-text="parseFloat(String(props.row.fsat).replaceAll(',', '')) / 100"
-              >
-              </q-td>
-              <q-td class="col2" auto-width key="amount" v-else :props="props">
-                <span v-text="props.row.fsat"></span>
-                <br />
-                <i v-if="props.row.extra.wallet_fiat_currency">
-                  <span
-                    v-text="formatCurrency(props.row.extra.wallet_fiat_amount, props.row.extra.wallet_fiat_currency)"
-                  ></span>
-                  <br />
-                </i>
-                <i v-if="props.row.extra.fiat_currency">
-                  <span
-                    v-text="formatCurrency(props.row.extra.fiat_amount, props.row.extra.fiat_currency)"
-                  ></span>
-                </i>
-              </q-td>
-
-                <q-dialog v-model="props.expand" :props="props" position="top">
-                  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                    <div class="text-center q-mb-lg">
-                      <div v-if="props.row.isIn && props.row.isPending">
-                        <q-icon name="settings_ethernet" color="grey"></q-icon>
-                        <span v-text="$t('invoice_waiting')"></span>
-                        <lnbits-payment-details
-                          :payment="props.row"
-                        ></lnbits-payment-details>
-                        <div
-                          v-if="props.row.bolt11"
-                          class="text-center q-mb-lg"
-                        >
-                          <a :href="'lightning:' + props.row.bolt11">
-                            <q-responsive :ratio="1" class="q-mx-xl">
-                              <lnbits-qrcode
-                                :value="'lightning:' + props.row.bolt11.toUpperCase()"
-                              ></lnbits-qrcode>
-                            </q-responsive>
-                          </a>
-                        </div>
-                        <div class="row q-mt-lg">
-                          <q-btn
-                            outline
-                            color="grey"
-                            @click="copyText(props.row.bolt11)"
-                            :label="$t('copy_invoice')"
-                          ></q-btn>
-                          <q-btn
-                            v-close-popup
-                            flat
-                            color="grey"
-                            class="q-ml-auto"
-                            :label="$t('close')"
-                          ></q-btn>
-                        </div>
-                      </div>
-                      <div v-else-if="props.row.isOut && props.row.isPending">
-                        <q-icon name="settings_ethernet" color="grey"></q-icon>
-                        <span v-text="$t('outgoing_payment_pending')"></span>
-                        <lnbits-payment-details
-                          :payment="props.row"
-                        ></lnbits-payment-details>
-                      </div>
-                      <div v-else-if="props.row.isPaid && props.row.isIn">
-                        <q-icon
-                          size="18px"
-                          :name="'call_received'"
-                          :color="'green'"
-                        ></q-icon>
-                        <span v-text="$t('payment_received')"></span>
-                        <lnbits-payment-details
-                          :payment="props.row"
-                        ></lnbits-payment-details>
-                      </div>
-                      <div v-else-if="props.row.isPaid && props.row.isOut">
-                        <q-icon
-                          size="18px"
-                          :name="'call_made'"
-                          :color="'pink'"
-                        ></q-icon>
-                        <span v-text="$t('payment_sent')"></span>
-                        <lnbits-payment-details
-                          :payment="props.row"
-                        ></lnbits-payment-details>
-                      </div>
-                      <div v-else-if="props.row.isFailed">
-                        <q-icon name="warning" color="yellow"></q-icon>
-                        <span>Payment failed</span>
-                        <lnbits-payment-details
-                          :payment="props.row"
-                        ></lnbits-payment-details>
-                      </div>
-                    </div>
-                  </q-card>
-                </q-dialog>
-            </q-tr>
-          </template>
-        </q-table>
-      </q-card-section>
-    </q-card>
-    `
+  }
 })
diff --git a/lnbits/static/vendor.json b/lnbits/static/vendor.json
index 3761cbb49..fb2657694 100644
--- a/lnbits/static/vendor.json
+++ b/lnbits/static/vendor.json
@@ -39,7 +39,6 @@
   "components": [
     "js/components/lnbits-funding-sources.js",
     "js/components/extension-settings.js",
-    "js/components/extension-rating.js",
     "js/components/payment-list.js",
     "js/components/payment-chart.js",
     "js/components.js",
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index fc63412e6..0ea065241 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -223,12 +223,10 @@
       </q-layout>
     </div>
 
-    {% block vue_templates %}{% endblock %}
-    <!---->
-    {% for url in INCLUDED_JS %}
+    {% include('components.vue') %} {% block vue_templates %}{% endblock %} {%
+    for url in INCLUDED_JS %}
     <script src="{{ static_url_for('static', url) }}"></script>
     {% endfor %}
-    <!---->
     <script type="text/javascript">
       const SITE_DESCRIPTION = {{ SITE_DESCRIPTION | tojson}}
       const themes = {{ LNBITS_THEME_OPTIONS | tojson }}
diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue
new file mode 100644
index 000000000..279174cfb
--- /dev/null
+++ b/lnbits/templates/components.vue
@@ -0,0 +1,902 @@
+<template id="lnbits-wallet-list">
+  <q-list
+    v-if="user && user.wallets.length"
+    dense
+    class="lnbits-drawer__q-list"
+  >
+    <q-item-label header v-text="$t('wallets')"></q-item-label>
+    <q-item
+      v-for="wallet in wallets"
+      :key="wallet.id"
+      clickable
+      :active="activeWallet && activeWallet.id === wallet.id"
+      tag="a"
+      :href="wallet.url"
+    >
+      <q-item-section side>
+        <q-avatar
+          size="md"
+          :color="
+            activeWallet && activeWallet.id === wallet.id
+              ? $q.dark.isActive
+                ? 'primary'
+                : 'primary'
+              : 'grey-5'
+          "
+        >
+          <q-icon
+            name="flash_on"
+            :size="$q.dark.isActive ? '21px' : '20px'"
+            :color="$q.dark.isActive ? 'blue-grey-10' : 'grey-3'"
+          ></q-icon>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label lines="1"
+          ><span v-text="wallet.name"></span
+        ></q-item-label>
+        <q-item-label v-if="LNBITS_DENOMINATION != 'sats'" caption>
+          <span
+            v-text="
+              parseFloat(String(wallet.live_fsat).replaceAll(',', '')) / 100
+            "
+          ></span
+          >&nbsp;
+          <span v-text="LNBITS_DENOMINATION"></span>
+        </q-item-label>
+        <q-item-label v-else caption>
+          <span v-text="wallet.live_fsat"></span>&nbsp;
+          <span v-text="LNBITS_DENOMINATION"></span>
+        </q-item-label>
+      </q-item-section>
+      <q-item-section
+        side
+        v-show="activeWallet && activeWallet.id === wallet.id"
+      >
+        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
+      </q-item-section>
+    </q-item>
+    <q-item clickable @click="showForm = !showForm">
+      <q-item-section side>
+        <q-icon
+          :name="showForm ? 'remove' : '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_wallet')"
+        ></q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-if="showForm">
+      <q-item-section>
+        <q-form @submit="createWallet">
+          <q-input filled dense v-model="walletName" label="Name wallet *">
+            <template v-slot:append>
+              <q-btn
+                round
+                dense
+                flat
+                icon="send"
+                size="sm"
+                @click="createWallet"
+                :disable="walletName === ''"
+              ></q-btn>
+            </template>
+          </q-input>
+        </q-form>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<template id="lnbits-extension-list">
+  <q-list
+    v-if="user && userExtensions.length > 0"
+    dense
+    class="lnbits-drawer__q-list"
+  >
+    <q-item-label header v-text="$t('extensions')"></q-item-label>
+    <q-item
+      v-for="extension in userExtensions"
+      :key="extension.code"
+      clickable
+      :active="extension.isActive"
+      tag="a"
+      :href="extension.url"
+    >
+      <q-item-section side>
+        <q-avatar size="md">
+          <q-img :src="extension.tile" style="max-width: 20px"></q-img>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label lines="1"
+          ><span v-text="extension.name"></span>
+        </q-item-label>
+      </q-item-section>
+      <q-item-section side v-show="extension.isActive">
+        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
+      </q-item-section>
+    </q-item>
+    <div class="lt-md q-mt-xl q-mb-xl"></div>
+  </q-list>
+</template>
+
+<template id="lnbits-manage">
+  <q-list v-if="user" dense class="lnbits-drawer__q-list">
+    <q-item-label header v-text="$t('manage')"></q-item-label>
+    <div v-if="user.admin">
+      <q-item
+        v-if="showAdmin"
+        clickable
+        tag="a"
+        href="/admin"
+        :active="isActive('/admin')"
+      >
+        <q-item-section side>
+          <q-icon
+            name="admin_panel_settings"
+            :color="isActive('/admin') ? 'primary' : 'grey-5'"
+            size="md"
+          ></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1" v-text="$t('server')"></q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item
+        v-if="showNode"
+        clickable
+        tag="a"
+        href="/node"
+        :active="isActive('/node')"
+      >
+        <q-item-section side>
+          <q-icon
+            name="developer_board"
+            :color="isActive('/node') ? 'primary' : 'grey-5'"
+            size="md"
+          ></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1" v-text="$t('node')"></q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item
+        v-if="showUsers"
+        clickable
+        tag="a"
+        href="/users"
+        :active="isActive('/users')"
+      >
+        <q-item-section side>
+          <q-icon
+            name="groups"
+            :color="isActive('/users') ? 'primary' : 'grey-5'"
+            size="md"
+          ></q-icon>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label lines="1" v-text="$t('users')"></q-item-label>
+        </q-item-section>
+      </q-item>
+    </div>
+    <q-item
+      v-if="showExtensions"
+      clickable
+      tag="a"
+      href="/extensions"
+      :active="isActive('/extensions')"
+    >
+      <q-item-section side>
+        <q-icon
+          name="extension"
+          :color="isActive('/extensions') ? 'primary' : 'grey-5'"
+          size="md"
+        ></q-icon>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label lines="1" v-text="$t('extensions')"></q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<template id="lnbits-payment-details">
+  <div class="q-py-md" style="text-align: left">
+    <div v-if="payment.tag" class="row justify-center q-mb-md">
+      <q-badge v-if="hasTag" color="yellow" text-color="black">
+        #<span v-text="payment.tag"></span>
+      </q-badge>
+    </div>
+
+    <div class="row">
+      <b v-text="$t('created')"></b>:
+      <span v-text="payment.date"></span>
+      (<span v-text="payment.dateFrom"></span>)
+    </div>
+
+    <div class="row" v-if="hasExpiry">
+      <b v-text="$t('expiry')"></b>:
+      <span v-text="payment.expirydate"></span>
+      (<span v-text="payment.expirydateFrom"></span>)
+    </div>
+
+    <div class="row">
+      <b v-text="$t('amount')"></b>:
+      <span v-text="(payment.amount / 1000).toFixed(3)"></span>
+      <span v-text="LNBITS_DENOMINATION"></span>
+    </div>
+
+    <div class="row">
+      <b v-text="$t('fee')"></b>:
+      <span v-text="(payment.fee / 1000).toFixed(3)"></span>
+      <span v-text="LNBITS_DENOMINATION"></span>
+    </div>
+
+    <div class="text-wrap">
+      <b style="white-space: nowrap" v-text="$t('payment_hash')"></b>:&nbsp;
+      <span v-text="payment.payment_hash"></span>
+      <q-icon
+        name="content_copy"
+        @click="copyText(payment.payment_hash)"
+        size="1em"
+        color="grey"
+        class="q-mb-xs cursor-pointer"
+      />
+    </div>
+
+    <div class="text-wrap">
+      <b style="white-space: nowrap" v-text="$t('memo')"></b>:&nbsp;
+      <span v-text="payment.memo"></span>
+    </div>
+
+    <div class="text-wrap" v-if="payment.webhook">
+      <b style="white-space: nowrap" v-text="$t('webhook')"></b>:&nbsp;
+      <span v-text="payment.webhook"></span>:&nbsp;<q-badge
+        :color="webhookStatusColor"
+        text-color="white"
+      >
+        <span v-text="webhookStatusText"></span>
+      </q-badge>
+    </div>
+
+    <div class="text-wrap" v-if="hasPreimage">
+      <b style="white-space: nowrap" v-text="$t('payment_proof')"></b>:&nbsp;
+      <span v-text="payment.preimage"></span>
+    </div>
+
+    <div class="row" v-for="entry in extras">
+      <q-badge v-if="hasTag" color="secondary" text-color="white">
+        extra
+      </q-badge>
+      <b v-text="entry.key"></b>: <span v-text="entry.value"></span>
+    </div>
+    <div class="row" v-if="hasSuccessAction">
+      <b>Success action</b>:
+      <lnbits-lnurlpay-success-action
+        :payment="payment"
+        :success_action="payment.extra.success_action"
+      ></lnbits-lnurlpay-success-action>
+    </div>
+  </div>
+</template>
+
+<template id="lnbits-dynamic-fields">
+  <div v-if="formData">
+    <div class="row q-mb-lg" v-for="o in options">
+      <div class="col auto-width">
+        <p v-if="o.options?.length" class="q-ml-xl">
+          <span v-text="o.label || o.name"></span>
+          <small v-if="o.description">
+            (<span v-text="o.description"></span>)</small
+          >
+        </p>
+        <lnbits-dynamic-fields
+          v-if="o.options?.length"
+          :options="o.options"
+          v-model="formData[o.name]"
+          @input="handleValueChanged"
+          class="q-ml-xl"
+        >
+        </lnbits-dynamic-fields>
+        <div v-else>
+          <q-input
+            v-if="o.type === 'number'"
+            type="number"
+            v-model="formData[o.name]"
+            @input="handleValueChanged"
+            :label="o.label || o.name"
+            :hint="o.description"
+            :rules="applyRules(o.required)"
+            filled
+            dense
+          ></q-input>
+          <q-input
+            v-else-if="o.type === 'text'"
+            type="textarea"
+            rows="5"
+            v-model="formData[o.name]"
+            @input="handleValueChanged"
+            :label="o.label || o.name"
+            :hint="o.description"
+            :rules="applyRules(o.required)"
+            filled
+            dense
+          ></q-input>
+          <q-input
+            v-else-if="o.type === 'password'"
+            v-model="formData[o.name]"
+            @input="handleValueChanged"
+            type="password"
+            :label="o.label || o.name"
+            :hint="o.description"
+            :rules="applyRules(o.required)"
+            filled
+            dense
+          ></q-input>
+          <q-select
+            v-else-if="o.type === 'select'"
+            v-model="formData[o.name]"
+            @input="handleValueChanged"
+            :label="o.label || o.name"
+            :hint="o.description"
+            :options="o.values"
+            :rules="applyRules(o.required)"
+          ></q-select>
+          <q-select
+            v-else-if="o.isList"
+            v-model.trim="formData[o.name]"
+            @input="handleValueChanged"
+            input-debounce="0"
+            new-value-mode="add-unique"
+            :label="o.label || o.name"
+            :hint="o.description"
+            :rules="applyRules(o.required)"
+            filled
+            multiple
+            dense
+            use-input
+            use-chips
+            multiple
+            hide-dropdown-icon
+          ></q-select>
+          <div v-else-if="o.type === 'bool'">
+            <q-item tag="label" v-ripple>
+              <q-item-section avatar top>
+                <q-checkbox
+                  v-model="formData[o.name]"
+                  @input="handleValueChanged"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label
+                  ><span v-text="o.label || o.name"></span
+                ></q-item-label>
+                <q-item-label caption>
+                  <span v-text="o.description"></span>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+          <q-input
+            v-else-if="o.type === 'hidden'"
+            v-model="formData[o.name]"
+            type="text"
+            style="display: none"
+            :rules="applyRules(o.required)"
+          ></q-input>
+          <q-input
+            v-else
+            v-model="formData[o.name]"
+            @input="handleValueChanged"
+            :hint="o.description"
+            :label="o.label || o.name"
+            :rules="applyRules(o.required)"
+            filled
+            dense
+          ></q-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="lnbits-notifications-btn">
+  <q-btn
+    v-if="g.user.wallets"
+    :disabled="!this.isSupported"
+    dense
+    flat
+    round
+    @click="toggleNotifications()"
+    :icon="this.isSubscribed ? 'notifications_active' : 'notifications_off'"
+    size="sm"
+    type="a"
+  >
+    <q-tooltip v-if="this.isSupported && !this.isSubscribed"
+      >Subscribe to notifications</q-tooltip
+    >
+    <q-tooltip v-if="this.isSupported && this.isSubscribed"
+      >Unsubscribe from notifications</q-tooltip
+    >
+    <q-tooltip v-if="this.isSupported && this.isPermissionDenied">
+      Notifications are disabled,<br />please enable or reset permissions
+    </q-tooltip>
+    <q-tooltip v-if="!this.isSupported"
+      >Notifications are not supported</q-tooltip
+    >
+  </q-btn>
+</template>
+
+<template id="lnbits-update-balance">
+  <q-btn v-if="admin" round color="primary" icon="add" size="sm">
+    <q-popup-edit class="bg-accent text-white" v-slot="scope" v-model="credit">
+      <q-input
+        filled
+        :label="$t('credit_label', {denomination: denomination})"
+        :hint="$t('credit_hint')"
+        v-model="scope.value"
+        dense
+        autofocus
+        @keyup.enter="updateBalance(scope.value)"
+      >
+        <template v-slot:append>
+          <q-icon name="edit" />
+        </template>
+      </q-input>
+    </q-popup-edit>
+    <q-tooltip>Topup Wallet</q-tooltip>
+  </q-btn>
+</template>
+
+<template id="lnbits-qrcode">
+  <div class="qrcode__wrapper">
+    <qrcode-vue :value="value" size="350" class="rounded-borders"></qrcode-vue>
+    <img class="qrcode__image" :src="logo" alt="..." />
+  </div>
+</template>
+
+<template id="lnbits-lnurlpay-success-action">
+  <div>
+    <p
+      class="q-mb-sm"
+      v-text="success_action.message || success_action.description"
+    ></p>
+    <code
+      v-if="decryptedValue"
+      class="text-h6 q-mt-sm q-mb-none"
+      v-text="decryptedValue"
+    ></code>
+    <p v-else-if="success_action.url" class="text-h6 q-mt-sm q-mb-none">
+      <a
+        target="_blank"
+        style="color: inherit"
+        :href="success_action.url"
+        v-text="success_action.url"
+      ></a>
+    </p>
+  </div>
+</template>
+
+<template id="payment-list">
+  <q-card
+    :style="
+      $q.screen.lt.md
+        ? {
+            background: $q.screen.lt.md ? 'none !important' : '',
+            boxShadow: $q.screen.lt.md ? 'none !important' : '',
+            marginTop: $q.screen.lt.md ? '0px !important' : ''
+          }
+        : ''
+    "
+  >
+    <q-card-section>
+      <div class="row items-center no-wrap q-mb-sm">
+        <div class="col">
+          <h5
+            class="text-subtitle1 q-my-none"
+            :v-text="$t('transactions')"
+          ></h5>
+        </div>
+        <div class="gt-sm col-auto">
+          <q-btn-dropdown
+            outline
+            persistent
+            class="q-mr-sm"
+            color="grey"
+            :label="$t('export_csv')"
+            split
+            @click="exportCSV(false)"
+          >
+            <q-list>
+              <q-item>
+                <q-item-section>
+                  <q-input
+                    @keydown.enter="addFilterTag"
+                    filled
+                    dense
+                    v-model="exportTagName"
+                    type="text"
+                    label="Payment Tags"
+                    class="q-pa-sm"
+                  >
+                    <q-btn @click="addFilterTag" dense flat icon="add"></q-btn>
+                  </q-input>
+                </q-item-section>
+              </q-item>
+              <q-item v-if="exportPaymentTagList.length">
+                <q-item-section>
+                  <div>
+                    <q-chip
+                      v-for="tag in exportPaymentTagList"
+                      :key="tag"
+                      removable
+                      @remove="removeExportTag(tag)"
+                      color="primary"
+                      text-color="white"
+                      :label="tag"
+                    ></q-chip>
+                  </div>
+                </q-item-section>
+              </q-item>
+
+              <q-item>
+                <q-item-section>
+                  <q-btn
+                    v-close-popup
+                    outline
+                    color="grey"
+                    @click="exportCSV(true)"
+                    label="Export to CSV with details"
+                  ></q-btn>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+          <payment-chart :wallet="wallet" />
+        </div>
+      </div>
+      <q-input
+        :style="
+          $q.screen.lt.md
+            ? {
+                display: mobileSimple ? 'none !important' : ''
+              }
+            : ''
+        "
+        filled
+        dense
+        clearable
+        v-model="paymentsTable.search"
+        debounce="300"
+        :placeholder="$t('search_by_tag_memo_amount')"
+        class="q-mb-md"
+      >
+      </q-input>
+      <q-table
+        dense
+        flat
+        :rows="paymentsOmitter"
+        :row-key="paymentTableRowKey"
+        :columns="paymentsTable.columns"
+        :pagination.sync="paymentsTable.pagination"
+        :no-data-label="$t('no_transactions')"
+        :filter="paymentsTable.search"
+        :loading="paymentsTable.loading"
+        :hide-header="mobileSimple"
+        :hide-bottom="mobileSimple"
+        @request="fetchPayments"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              v-text="col.label"
+            ></q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width class="text-center">
+              <q-icon
+                v-if="props.row.isPaid"
+                size="14px"
+                :name="props.row.isOut ? 'call_made' : 'call_received'"
+                :color="props.row.isOut ? 'pink' : 'green'"
+                @click="props.expand = !props.expand"
+              ></q-icon>
+              <q-icon
+                v-else-if="props.row.isFailed"
+                name="warning"
+                color="yellow"
+                @click="props.expand = !props.expand"
+              >
+                <q-tooltip><span>failed</span></q-tooltip>
+              </q-icon>
+              <q-icon
+                v-else
+                name="settings_ethernet"
+                color="grey"
+                @click="props.expand = !props.expand"
+              >
+                <q-tooltip><span v-text="$t('pending')"></span></q-tooltip>
+              </q-icon>
+            </q-td>
+            <q-td
+              key="time"
+              :props="props"
+              style="white-space: normal; word-break: break-all"
+            >
+              <q-badge v-if="props.row.tag" color="yellow" text-color="black">
+                <a
+                  v-text="'#' + props.row.tag"
+                  class="inherit"
+                  :href="['/', props.row.tag].join('')"
+                ></a>
+              </q-badge>
+              <span v-text="props.row.memo"></span>
+              <br />
+
+              <i>
+                <span v-text="props.row.dateFrom"></span>
+                <q-tooltip><span v-text="props.row.date"></span></q-tooltip>
+              </i>
+            </q-td>
+            <q-td
+              auto-width
+              key="amount"
+              v-if="denomination != 'sats'"
+              :props="props"
+              class="col1"
+              v-text="
+                parseFloat(String(props.row.fsat).replaceAll(',', '')) / 100
+              "
+            >
+            </q-td>
+            <q-td class="col2" auto-width key="amount" v-else :props="props">
+              <span v-text="props.row.fsat"></span>
+              <br />
+              <i v-if="props.row.extra.wallet_fiat_currency">
+                <span
+                  v-text="
+                    formatCurrency(
+                      props.row.extra.wallet_fiat_amount,
+                      props.row.extra.wallet_fiat_currency
+                    )
+                  "
+                ></span>
+                <br />
+              </i>
+              <i v-if="props.row.extra.fiat_currency">
+                <span
+                  v-text="
+                    formatCurrency(
+                      props.row.extra.fiat_amount,
+                      props.row.extra.fiat_currency
+                    )
+                  "
+                ></span>
+              </i>
+            </q-td>
+
+            <q-dialog v-model="props.expand" :props="props" position="top">
+              <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+                <div class="text-center q-mb-lg">
+                  <div v-if="props.row.isIn && props.row.isPending">
+                    <q-icon name="settings_ethernet" color="grey"></q-icon>
+                    <span v-text="$t('invoice_waiting')"></span>
+                    <lnbits-payment-details
+                      :payment="props.row"
+                    ></lnbits-payment-details>
+                    <div v-if="props.row.bolt11" class="text-center q-mb-lg">
+                      <a :href="'lightning:' + props.row.bolt11">
+                        <q-responsive :ratio="1" class="q-mx-xl">
+                          <lnbits-qrcode
+                            :value="
+                              'lightning:' + props.row.bolt11.toUpperCase()
+                            "
+                          ></lnbits-qrcode>
+                        </q-responsive>
+                      </a>
+                    </div>
+                    <div class="row q-mt-lg">
+                      <q-btn
+                        outline
+                        color="grey"
+                        @click="copyText(props.row.bolt11)"
+                        :label="$t('copy_invoice')"
+                      ></q-btn>
+                      <q-btn
+                        v-close-popup
+                        flat
+                        color="grey"
+                        class="q-ml-auto"
+                        :label="$t('close')"
+                      ></q-btn>
+                    </div>
+                  </div>
+                  <div v-else-if="props.row.isOut && props.row.isPending">
+                    <q-icon name="settings_ethernet" color="grey"></q-icon>
+                    <span v-text="$t('outgoing_payment_pending')"></span>
+                    <lnbits-payment-details
+                      :payment="props.row"
+                    ></lnbits-payment-details>
+                  </div>
+                  <div v-else-if="props.row.isPaid && props.row.isIn">
+                    <q-icon
+                      size="18px"
+                      :name="'call_received'"
+                      :color="'green'"
+                    ></q-icon>
+                    <span v-text="$t('payment_received')"></span>
+                    <lnbits-payment-details
+                      :payment="props.row"
+                    ></lnbits-payment-details>
+                  </div>
+                  <div v-else-if="props.row.isPaid && props.row.isOut">
+                    <q-icon
+                      size="18px"
+                      :name="'call_made'"
+                      :color="'pink'"
+                    ></q-icon>
+                    <span v-text="$t('payment_sent')"></span>
+                    <lnbits-payment-details
+                      :payment="props.row"
+                    ></lnbits-payment-details>
+                  </div>
+                  <div v-else-if="props.row.isFailed">
+                    <q-icon name="warning" color="yellow"></q-icon>
+                    <span>Payment failed</span>
+                    <lnbits-payment-details
+                      :payment="props.row"
+                    ></lnbits-payment-details>
+                  </div>
+                </div>
+              </q-card>
+            </q-dialog>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+</template>
+
+<template id="lnbits-extension-rating">
+  <div style="margin-bottom: 3px">
+    <q-rating v-model="rating" size="1.5em" :max="5" color="primary"
+      ><q-tooltip>
+        <span v-text="$t('extension_rating_soon')"></span> </q-tooltip
+    ></q-rating>
+  </div>
+</template>
+
+<template id="lnbits-extension-settings-form">
+  <q-form v-if="settings" @submit="updateSettings" class="q-gutter-md">
+    <lnbits-dynamic-fields
+      :options="options"
+      v-model="settings"
+    ></lnbits-dynamic-fields>
+    <div class="row q-mt-lg">
+      <q-btn v-close-popup unelevated color="primary" type="submit"
+        >Update</q-btn
+      >
+      <q-btn v-close-popup unelevated color="danger" @click="resetSettings"
+        >Reset</q-btn
+      >
+      <slot name="actions"></slot>
+    </div>
+  </q-form>
+</template>
+
+<template id="lnbits-extension-btn-dialog">
+  <q-btn
+    v-if="options"
+    unelevated
+    @click="show = true"
+    color="primary"
+    icon="settings"
+    class="float-right"
+  >
+    <q-dialog v-model="show" position="top">
+      <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+        <lnbits-extension-settings-form
+          :options="options"
+          :adminkey="adminkey"
+          :endpoint="endpoint"
+        >
+          <template v-slot:actions>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+              >Close</q-btn
+            >
+          </template>
+        </lnbits-extension-settings-form>
+      </q-card>
+    </q-dialog>
+  </q-btn>
+</template>
+
+<template id="lnbits-extension-settings-form">
+  <div class="funding-sources">
+    <h6 class="q-mt-xl q-mb-md">Funding Sources</h6>
+    <div class="row">
+      <div class="col-12">
+        <p>Active Funding<small> (Requires server restart)</small></p>
+        <q-select
+          filled
+          v-model="formData.lnbits_backend_wallet_class"
+          hint="Select the active funding wallet"
+          :options="sortedAllowedFundingSources"
+          :option-label="item => getFundingSourceLabel(item)"
+        ></q-select>
+      </div>
+    </div>
+    <q-list
+      class="q-mt-md"
+      v-for="(fund, idx) in allowedFundingSources"
+      :key="idx"
+    >
+      <div
+        v-if="
+          fundingSources.get(fund) &&
+          fund === formData.lnbits_backend_wallet_class
+        "
+      >
+        <div
+          class="row"
+          v-for="([key, prop], i) in Object.entries(fundingSources.get(fund))"
+          :key="i"
+        >
+          <div class="col-12">
+            <q-input
+              filled
+              type="text"
+              class="q-mt-sm"
+              v-model="formData[key]"
+              :label="prop.label"
+              :hint="prop.hint"
+            ></q-input>
+          </div>
+        </div>
+      </div>
+    </q-list>
+  </div>
+</template>
+
+<template id="payment-chart">
+  <span id="payment-chart">
+    <q-btn dense flat round icon="show_chart" color="grey" @click="showChart">
+      <q-tooltip>
+        <span v-text="$t('chart_tooltip')"></span>
+      </q-tooltip>
+    </q-btn>
+
+    <q-dialog v-model="paymentsChart.show" position="top">
+      <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
+        <q-card-section>
+          <div class="row q-gutter-sm justify-between">
+            <div class="text-h6">Payments Chart</div>
+            <q-select
+              label="Group"
+              filled
+              dense
+              v-model="paymentsChart.group"
+              style="min-width: 120px"
+              :options="paymentsChart.groupOptions"
+            >
+            </q-select>
+          </div>
+          <canvas ref="canvas" width="600" height="400"></canvas>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </span>
+</template>
diff --git a/package.json b/package.json
index 4b47c91ca..5aa5cb17f 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
     "components": [
       "js/components/lnbits-funding-sources.js",
       "js/components/extension-settings.js",
-      "js/components/extension-rating.js",
       "js/components/payment-list.js",
       "js/components/payment-chart.js",
       "js/components.js",