From 61c3476ba76b7dfa4cacfb99cee57f662bbbf0c6 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Thu, 8 Dec 2022 11:46:44 +0000
Subject: [PATCH] fix display columns for hide api and or ad space

---
 lnbits/core/templates/core/wallet.html | 1464 ++++++++++++------------
 1 file changed, 754 insertions(+), 710 deletions(-)

diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index fef63c47..e2edfdca 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -10,747 +10,791 @@
 <!---->
 {% block page %}
 <div class="row q-col-gutter-md">
-  <div class="col-12 col-md-7 q-gutter-y-md">
-    <q-card>
-      <q-card-section>
-        <h3 class="q-my-none">
-          <strong>{% raw %}{{ formattedBalance }} {% endraw %}</strong>
-          {{LNBITS_DENOMINATION}}
-          <q-btn
-            v-if="'{{user.admin}}' == 'True'"
-            flat
-            round
-            color="primary"
-            icon="add"
-            size="md"
-          >
-            <q-popup-edit
-              class="bg-accent text-white"
-              v-slot="scope"
-              v-model="credit"
-            >
-              <q-input
-                v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
-                label="Amount to credit account"
-                v-model="scope.value"
-                dense
-                autofocus
-                mask="#.##"
-                fill-mask="0"
-                reverse-fill-mask
-                @keyup.enter="updateBalance(scope.value)"
+  {% if HIDE_API and AD_SPACE %}
+  <div class="col-12 col-md-8 q-gutter-y-md">
+    {% elif HIDE_API %}
+    <div class="col-12 q-gutter-y-md">
+      {% else %}
+      <div class="col-12 col-md-7 q-gutter-y-md">
+        {% endif %}
+        <q-card>
+          <q-card-section>
+            <h3 class="q-my-none">
+              <strong>{% raw %}{{ formattedBalance }} {% endraw %}</strong>
+              {{LNBITS_DENOMINATION}}
+              <q-btn
+                v-if="'{{user.admin}}' == 'True'"
+                flat
+                round
+                color="primary"
+                icon="add"
+                size="md"
               >
-                <template v-slot:append>
-                  <q-icon name="edit" />
-                </template>
-              </q-input>
-              <q-input
-                v-else
-                type="number"
-                label="Amount to credit account"
-                v-model="scope.value"
-                dense
-                autofocus
-                @keyup.enter="updateBalance(scope.value)"
+                <q-popup-edit
+                  class="bg-accent text-white"
+                  v-slot="scope"
+                  v-model="credit"
+                >
+                  <q-input
+                    v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
+                    label="Amount to credit account"
+                    v-model="scope.value"
+                    dense
+                    autofocus
+                    mask="#.##"
+                    fill-mask="0"
+                    reverse-fill-mask
+                    @keyup.enter="updateBalance(scope.value)"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="edit" />
+                    </template>
+                  </q-input>
+                  <q-input
+                    v-else
+                    type="number"
+                    label="Amount to credit account"
+                    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-btn>
+            </h3>
+          </q-card-section>
+          <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
+            <div class="col">
+              <q-btn
+                unelevated
+                color="primary"
+                class="full-width"
+                @click="showParseDialog"
+                >Paste Request</q-btn
               >
-                <template v-slot:append>
-                  <q-icon name="edit" />
-                </template>
-              </q-input>
-            </q-popup-edit>
-          </q-btn>
-        </h3>
-      </q-card-section>
-      <div class="row q-pb-md q-px-md q-col-gutter-md gt-sm">
-        <div class="col">
-          <q-btn
-            unelevated
-            color="primary"
-            class="full-width"
-            @click="showParseDialog"
-            >Paste Request</q-btn
-          >
-        </div>
-        <div class="col">
-          <q-btn
-            unelevated
-            color="primary"
-            class="full-width"
-            @click="showReceiveDialog"
-            >Create Invoice</q-btn
-          >
-        </div>
-        <div class="col">
-          <q-btn
-            unelevated
-            color="secondary"
-            icon="photo_camera"
-            @click="showCamera"
-            >scan
-            <q-tooltip>Use camera to scan an invoice/QR</q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-    </q-card>
-
-    <q-card>
-      <q-card-section>
-        <div class="row items-center no-wrap q-mb-sm">
-          <div class="col">
-            <h5 class="text-subtitle1 q-my-none">Transactions</h5>
+            </div>
+            <div class="col">
+              <q-btn
+                unelevated
+                color="primary"
+                class="full-width"
+                @click="showReceiveDialog"
+                >Create Invoice</q-btn
+              >
+            </div>
+            <div class="col">
+              <q-btn
+                unelevated
+                color="secondary"
+                icon="photo_camera"
+                @click="showCamera"
+                >scan
+                <q-tooltip>Use camera to scan an invoice/QR</q-tooltip>
+              </q-btn>
+            </div>
           </div>
-          <div class="col-auto">
-            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
-            <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
+        </q-card>
+
+        <q-card>
+          <q-card-section>
+            <div class="row items-center no-wrap q-mb-sm">
+              <div class="col">
+                <h5 class="text-subtitle1 q-my-none">Transactions</h5>
+              </div>
+              <div class="col-auto">
+                <q-btn flat color="grey" @click="exportCSV"
+                  >Export to CSV</q-btn
+                >
+                <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
                 <q-tooltip>Check pending</q-tooltip>
               </q-btn>-->
-            <q-btn
+                <q-btn
+                  dense
+                  flat
+                  round
+                  icon="show_chart"
+                  color="grey"
+                  @click="showChart"
+                >
+                  <q-tooltip>Show chart</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+            <q-input
+              v-if="payments.length > 10"
+              filled
+              dense
+              clearable
+              v-model="paymentsTable.filter"
+              debounce="300"
+              placeholder="Search by tag, memo, amount"
+              class="q-mb-md"
+            >
+            </q-input>
+            <q-table
               dense
               flat
-              round
-              icon="show_chart"
-              color="grey"
-              @click="showChart"
+              :data="filteredPayments"
+              :row-key="paymentTableRowKey"
+              :columns="paymentsTable.columns"
+              :pagination.sync="paymentsTable.pagination"
+              no-data-label="No transactions made yet"
+              :filter="paymentsTable.filter"
             >
-              <q-tooltip>Show chart</q-tooltip>
-            </q-btn>
-          </div>
-        </div>
-        <q-input
-          v-if="payments.length > 10"
-          filled
-          dense
-          clearable
-          v-model="paymentsTable.filter"
-          debounce="300"
-          placeholder="Search by tag, memo, amount"
-          class="q-mb-md"
-        >
-        </q-input>
-        <q-table
-          dense
-          flat
-          :data="filteredPayments"
-          :row-key="paymentTableRowKey"
-          :columns="paymentsTable.columns"
-          :pagination.sync="paymentsTable.pagination"
-          no-data-label="No transactions made yet"
-          :filter="paymentsTable.filter"
-        >
-          {% raw %}
-          <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"
-                >{{ 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
-                  name="settings_ethernet"
-                  color="grey"
-                  @click="props.expand = !props.expand"
-                >
-                  <q-tooltip>Pending</q-tooltip>
-                </q-icon>
-              </q-td>
-              <q-td
-                key="memo"
-                :props="props"
-                style="white-space: normal; word-break: break-all"
-              >
-                <q-badge v-if="props.row.tag" color="yellow" text-color="black">
-                  <a
-                    class="inherit"
-                    :href="['/', props.row.tag, '/?usr=', user.id].join('')"
+              {% raw %}
+              <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"
+                    >{{ col.label }}</q-th
                   >
-                    #{{ props.row.tag }}
-                  </a>
-                </q-badge>
-                {{ props.row.memo }}
-              </q-td>
-              <q-td auto-width key="date" :props="props">
-                <q-tooltip>{{ props.row.date }}</q-tooltip>
-                {{ props.row.dateFrom }}
-              </q-td>
-              {% endraw %}
-              <q-td
-                auto-width
-                key="sat"
-                v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
-                :props="props"
-                >{% raw %} {{ parseFloat(String(props.row.fsat).replaceAll(",",
-                "")) / 100 }}
-              </q-td>
-
-              <q-td auto-width key="sat" v-else :props="props">
-                {{ props.row.fsat }}
-              </q-td>
-              <q-td auto-width key="fee" :props="props">
-                {{ props.row.fee }}
-              </q-td>
-            </q-tr>
-
-            <q-dialog v-model="props.expand" :props="props">
-              <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.pending">
-                    <q-icon name="settings_ethernet" color="grey"></q-icon>
-                    Invoice waiting to be paid
-                    <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">
-                          <qrcode
-                            :value="props.row.bolt11"
-                            :options="{width: 340}"
-                            class="rounded-borders"
-                          ></qrcode>
-                        </q-responsive>
+                </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
+                      name="settings_ethernet"
+                      color="grey"
+                      @click="props.expand = !props.expand"
+                    >
+                      <q-tooltip>Pending</q-tooltip>
+                    </q-icon>
+                  </q-td>
+                  <q-td
+                    key="memo"
+                    :props="props"
+                    style="white-space: normal; word-break: break-all"
+                  >
+                    <q-badge
+                      v-if="props.row.tag"
+                      color="yellow"
+                      text-color="black"
+                    >
+                      <a
+                        class="inherit"
+                        :href="['/', props.row.tag, '/?usr=', user.id].join('')"
+                      >
+                        #{{ props.row.tag }}
                       </a>
+                    </q-badge>
+                    {{ props.row.memo }}
+                  </q-td>
+                  <q-td auto-width key="date" :props="props">
+                    <q-tooltip>{{ props.row.date }}</q-tooltip>
+                    {{ props.row.dateFrom }}
+                  </q-td>
+                  {% endraw %}
+                  <q-td
+                    auto-width
+                    key="sat"
+                    v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
+                    :props="props"
+                    >{% raw %} {{
+                    parseFloat(String(props.row.fsat).replaceAll(",", "")) / 100
+                    }}
+                  </q-td>
+
+                  <q-td auto-width key="sat" v-else :props="props">
+                    {{ props.row.fsat }}
+                  </q-td>
+                  <q-td auto-width key="fee" :props="props">
+                    {{ props.row.fee }}
+                  </q-td>
+                </q-tr>
+
+                <q-dialog v-model="props.expand" :props="props">
+                  <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.pending">
+                        <q-icon name="settings_ethernet" color="grey"></q-icon>
+                        Invoice waiting to be paid
+                        <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">
+                              <qrcode
+                                :value="props.row.bolt11"
+                                :options="{width: 340}"
+                                class="rounded-borders"
+                              ></qrcode>
+                            </q-responsive>
+                          </a>
+                        </div>
+                        <div class="row q-mt-lg">
+                          <q-btn
+                            outline
+                            color="grey"
+                            @click="copyText(props.row.bolt11)"
+                            >Copy invoice</q-btn
+                          >
+                          <q-btn
+                            v-close-popup
+                            flat
+                            color="grey"
+                            class="q-ml-auto"
+                            >Close</q-btn
+                          >
+                        </div>
+                      </div>
+                      <div v-else-if="props.row.isPaid && props.row.isIn">
+                        <q-icon
+                          size="18px"
+                          :name="'call_received'"
+                          :color="'green'"
+                        ></q-icon>
+                        Payment Received
+                        <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>
+                        Payment Sent
+                        <lnbits-payment-details
+                          :payment="props.row"
+                        ></lnbits-payment-details>
+                      </div>
+                      <div v-else-if="props.row.isOut && props.row.pending">
+                        <q-icon name="settings_ethernet" color="grey"></q-icon>
+                        Outgoing payment pending
+                        <lnbits-payment-details
+                          :payment="props.row"
+                        ></lnbits-payment-details>
+                      </div>
                     </div>
-                    <div class="row q-mt-lg">
+                  </q-card>
+                </q-dialog>
+              </template>
+              {% endraw %}
+            </q-table>
+          </q-card-section>
+        </q-card>
+      </div>
+
+      {% if HIDE_API %}
+      <div class="col-12 col-md-4 q-gutter-y-md">
+        {% else %}
+        <div class="col-12 col-md-5 q-gutter-y-md">
+          <q-card>
+            <q-card-section>
+              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
+                {{ SITE_TITLE }} Wallet:
+                <strong><em>{{ wallet.name }}</em></strong>
+              </h6>
+            </q-card-section>
+            <q-card-section class="q-pa-none">
+              <q-separator></q-separator>
+
+              <q-list>
+                {% include "core/_api_docs.html" %}
+                <q-separator></q-separator>
+
+                {% if wallet.lnurlwithdraw_full %}
+                <q-expansion-item
+                  group="extras"
+                  icon="crop_free"
+                  label="Drain Funds"
+                >
+                  <q-card>
+                    <q-card-section class="text-center">
+                      <p>
+                        This is an LNURL-withdraw QR code for slurping
+                        everything from this wallet. Do not share with anyone.
+                      </p>
+                      <a href="lightning:{{wallet.lnurlwithdraw_full}}">
+                        <qrcode
+                          value="{{wallet.lnurlwithdraw_full}}"
+                          :options="{width:240}"
+                        ></qrcode>
+                      </a>
+                      <p>
+                        It is compatible with <code>balanceCheck</code> and
+                        <code>balanceNotify</code> so your wallet may keep
+                        pulling the funds continuously from here after the first
+                        withdraw.
+                      </p>
+                    </q-card-section>
+                  </q-card>
+                </q-expansion-item>
+                <q-separator></q-separator>
+                {% endif %}
+
+                <q-expansion-item
+                  group="extras"
+                  icon="settings_cell"
+                  label="Export to Phone with QR Code"
+                >
+                  <q-card>
+                    <q-card-section class="text-center">
+                      <p>
+                        This QR code contains your wallet URL with full access.
+                        You can scan it from your phone to open your wallet from
+                        there.
+                      </p>
+                      <qrcode
+                        :value="'{{request.base_url}}' +'wallet?usr={{user.id}}&wal={{wallet.id}}'"
+                        :options="{width:240}"
+                      ></qrcode>
+                    </q-card-section>
+                  </q-card>
+                </q-expansion-item>
+                <q-separator></q-separator>
+                <q-expansion-item
+                  group="extras"
+                  icon="edit"
+                  label="Rename wallet"
+                >
+                  <q-card>
+                    <q-card-section>
+                      <div class="" style="max-width: 320px">
+                        <q-input
+                          filled
+                          v-model.trim="newName"
+                          label="Label"
+                          dense="dense"
+                          @update:model-value="(e) => console.log(e)"
+                        />
+                      </div>
                       <q-btn
-                        outline
-                        color="grey"
-                        @click="copyText(props.row.bolt11)"
-                        >Copy invoice</q-btn
+                        :disable="!newName.length"
+                        unelevated
+                        class="q-mt-sm"
+                        color="primary"
+                        @click="updateWalletName()"
+                        >Update name</q-btn
                       >
-                      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-                        >Close</q-btn
+                    </q-card-section>
+                  </q-card>
+                </q-expansion-item>
+                <q-separator></q-separator>
+                <q-expansion-item
+                  group="extras"
+                  icon="remove_circle"
+                  label="Delete wallet"
+                >
+                  <q-card>
+                    <q-card-section>
+                      <p>
+                        This whole wallet will be deleted, the funds will be
+                        <strong>UNRECOVERABLE</strong>.
+                      </p>
+                      <q-btn
+                        unelevated
+                        color="red-10"
+                        @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
+                        >Delete wallet</q-btn
                       >
-                    </div>
-                  </div>
-                  <div v-else-if="props.row.isPaid && props.row.isIn">
-                    <q-icon
-                      size="18px"
-                      :name="'call_received'"
-                      :color="'green'"
-                    ></q-icon>
-                    Payment Received
-                    <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>
-                    Payment Sent
-                    <lnbits-payment-details
-                      :payment="props.row"
-                    ></lnbits-payment-details>
-                  </div>
-                  <div v-else-if="props.row.isOut && props.row.pending">
-                    <q-icon name="settings_ethernet" color="grey"></q-icon>
-                    Outgoing payment pending
-                    <lnbits-payment-details
-                      :payment="props.row"
-                    ></lnbits-payment-details>
-                  </div>
-                </div>
-              </q-card>
-            </q-dialog>
-          </template>
-          {% endraw %}
-        </q-table>
-      </q-card-section>
-    </q-card>
-  </div>
+                    </q-card-section>
+                  </q-card>
+                </q-expansion-item>
+              </q-list>
+            </q-card-section>
+          </q-card>
+          {% endif %} {% if AD_SPACE %} {% for ADS in AD_SPACE %} {% set AD =
+          ADS.split(";") %}
+          <q-card>
+            <q-card-section>
+              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
+                {{ AD_SPACE_TITLE }}
+              </h6>
+            </q-card-section>
+            <q-card-section class="q-pa-none">
+              <a
+                style="display: inline-block"
+                href="{{ AD[0] }}"
+                class="q-ma-md"
+              >
+                <img
+                  style="max-width: 100%; height: auto"
+                  v-if="($q.dark.isActive)"
+                  src="{{ AD[1] }}"
+                />
+                <img
+                  style="max-width: 100%; height: auto"
+                  v-else
+                  src="{{ AD[2] }}"
+                />
+              </a> </q-card-section></q-card
+          >{% endfor %} {% endif %}
+        </div>
+      </div>
 
-  {% if HIDE_API %}
-  <div class="col-12 col-md-4 q-gutter-y-md">
-    {% else %}
-    <div class="col-12 col-md-5 q-gutter-y-md">
-      <q-card>
-        <q-card-section>
-          <h6 class="text-subtitle1 q-mt-none q-mb-sm">
-            {{ SITE_TITLE }} Wallet: <strong><em>{{ wallet.name }}</em></strong>
-          </h6>
-        </q-card-section>
-        <q-card-section class="q-pa-none">
-          <q-separator></q-separator>
-
-          <q-list>
-            {% include "core/_api_docs.html" %}
-            <q-separator></q-separator>
-
-            {% if wallet.lnurlwithdraw_full %}
-            <q-expansion-item
-              group="extras"
-              icon="crop_free"
-              label="Drain Funds"
-            >
-              <q-card>
-                <q-card-section class="text-center">
-                  <p>
-                    This is an LNURL-withdraw QR code for slurping everything
-                    from this wallet. Do not share with anyone.
-                  </p>
-                  <a href="lightning:{{wallet.lnurlwithdraw_full}}">
-                    <qrcode
-                      value="{{wallet.lnurlwithdraw_full}}"
-                      :options="{width:240}"
-                    ></qrcode>
-                  </a>
-                  <p>
-                    It is compatible with <code>balanceCheck</code> and
-                    <code>balanceNotify</code> so your wallet may keep pulling
-                    the funds continuously from here after the first withdraw.
-                  </p>
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-            <q-separator></q-separator>
+      <q-dialog v-model="receive.show" @hide="closeReceiveDialog">
+        {% raw %}
+        <q-card
+          v-if="!receive.paymentReq"
+          class="q-pa-lg q-pt-xl lnbits__dialog-card"
+        >
+          <q-form @submit="createInvoice" class="q-gutter-md">
+            <p v-if="receive.lnurl" class="text-h6 text-center q-my-none">
+              <b>{{receive.lnurl.domain}}</b> is requesting an invoice:
+            </p>
+            {% endraw %} {% if LNBITS_DENOMINATION != 'sats' %}
+            <q-input
+              filled
+              dense
+              v-model.number="receive.data.amount"
+              label="Amount ({{LNBITS_DENOMINATION}}) *"
+              mask="#.##"
+              fill-mask="0"
+              reverse-fill-mask
+              :min="receive.minMax[0]"
+              :max="receive.minMax[1]"
+              :readonly="receive.lnurl && receive.lnurl.fixed"
+            ></q-input>
+            {% else %}
+            <q-select
+              filled
+              dense
+              v-model="receive.unit"
+              type="text"
+              label="Unit"
+              :options="receive.units"
+            ></q-select>
+            <q-input
+              ref="setAmount"
+              filled
+              dense
+              v-model.number="receive.data.amount"
+              :label="'Amount (' + receive.unit + ') *'"
+              :mask="receive.unit != 'sat' ? '#.##' : '#'"
+              fill-mask="0"
+              reverse-fill-mask
+              :step="receive.unit != 'sat' ? '0.01' : '1'"
+              :min="receive.minMax[0]"
+              :max="receive.minMax[1]"
+              :readonly="receive.lnurl && receive.lnurl.fixed"
+            ></q-input>
             {% endif %}
 
-            <q-expansion-item
-              group="extras"
-              icon="settings_cell"
-              label="Export to Phone with QR Code"
-            >
-              <q-card>
-                <q-card-section class="text-center">
-                  <p>
-                    This QR code contains your wallet URL with full access. You
-                    can scan it from your phone to open your wallet from there.
-                  </p>
-                  <qrcode
-                    :value="'{{request.base_url}}' +'wallet?usr={{user.id}}&wal={{wallet.id}}'"
-                    :options="{width:240}"
-                  ></qrcode>
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-            <q-separator></q-separator>
-            <q-expansion-item group="extras" icon="edit" label="Rename wallet">
-              <q-card>
-                <q-card-section>
-                  <div class="" style="max-width: 320px">
-                    <q-input
-                      filled
-                      v-model.trim="newName"
-                      label="Label"
-                      dense="dense"
-                      @update:model-value="(e) => console.log(e)"
-                    />
-                  </div>
-                  <q-btn
-                    :disable="!newName.length"
-                    unelevated
-                    class="q-mt-sm"
-                    color="primary"
-                    @click="updateWalletName()"
-                    >Update name</q-btn
-                  >
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-            <q-separator></q-separator>
-            <q-expansion-item
-              group="extras"
-              icon="remove_circle"
-              label="Delete wallet"
-            >
-              <q-card>
-                <q-card-section>
-                  <p>
-                    This whole wallet will be deleted, the funds will be
-                    <strong>UNRECOVERABLE</strong>.
-                  </p>
-                  <q-btn
-                    unelevated
-                    color="red-10"
-                    @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
-                    >Delete wallet</q-btn
-                  >
-                </q-card-section>
-              </q-card>
-            </q-expansion-item>
-          </q-list>
-        </q-card-section>
-      </q-card>
-      {% endif %} {% if AD_SPACE %} {% for ADS in AD_SPACE %} {% set AD =
-      ADS.split(";") %}
-      <q-card>
-        <q-card-section>
-          <h6 class="text-subtitle1 q-mt-none q-mb-sm">{{ AD_SPACE_TITLE }}</h6>
-        </q-card-section>
-        <q-card-section class="q-pa-none">
-          <a style="display: inline-block" href="{{ AD[0] }}" class="q-ma-md">
-            <img
-              style="max-width: 100%; height: auto"
-              v-if="($q.dark.isActive)"
-              src="{{ AD[1] }}"
-            />
-            <img
-              style="max-width: 100%; height: auto"
-              v-else
-              src="{{ AD[2] }}"
-            />
-          </a> </q-card-section></q-card
-      >{% endfor %} {% endif %}
-    </div>
-  </div>
-
-  <q-dialog v-model="receive.show" @hide="closeReceiveDialog">
-    {% raw %}
-    <q-card
-      v-if="!receive.paymentReq"
-      class="q-pa-lg q-pt-xl lnbits__dialog-card"
-    >
-      <q-form @submit="createInvoice" class="q-gutter-md">
-        <p v-if="receive.lnurl" class="text-h6 text-center q-my-none">
-          <b>{{receive.lnurl.domain}}</b> is requesting an invoice:
-        </p>
-        {% endraw %} {% if LNBITS_DENOMINATION != 'sats' %}
-        <q-input
-          filled
-          dense
-          v-model.number="receive.data.amount"
-          label="Amount ({{LNBITS_DENOMINATION}}) *"
-          mask="#.##"
-          fill-mask="0"
-          reverse-fill-mask
-          :min="receive.minMax[0]"
-          :max="receive.minMax[1]"
-          :readonly="receive.lnurl && receive.lnurl.fixed"
-        ></q-input>
-        {% else %}
-        <q-select
-          filled
-          dense
-          v-model="receive.unit"
-          type="text"
-          label="Unit"
-          :options="receive.units"
-        ></q-select>
-        <q-input
-          ref="setAmount"
-          filled
-          dense
-          v-model.number="receive.data.amount"
-          :label="'Amount (' + receive.unit + ') *'"
-          :mask="receive.unit != 'sat' ? '#.##' : '#'"
-          fill-mask="0"
-          reverse-fill-mask
-          :step="receive.unit != 'sat' ? '0.01' : '1'"
-          :min="receive.minMax[0]"
-          :max="receive.minMax[1]"
-          :readonly="receive.lnurl && receive.lnurl.fixed"
-        ></q-input>
-        {% endif %}
-
-        <q-input
-          filled
-          dense
-          v-model.trim="receive.data.memo"
-          label="Memo"
-        ></q-input>
-        {% raw %}
-        <div v-if="receive.status == 'pending'" class="row q-mt-lg">
-          <q-btn
-            unelevated
-            color="primary"
-            :disable="receive.data.amount == null || receive.data.amount <= 0"
-            type="submit"
-          >
-            <span v-if="receive.lnurl">
-              Withdraw from {{receive.lnurl.domain}}
-            </span>
-            <span v-else> Create invoice </span>
-          </q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
-        </div>
-        <q-spinner
-          v-if="receive.status == 'loading'"
-          color="primary"
-          size="2.55em"
-        ></q-spinner>
-      </q-form>
-    </q-card>
-    <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div class="text-center q-mb-lg">
-        <a :href="'lightning:' + receive.paymentReq">
-          <q-responsive :ratio="1" class="q-mx-xl">
-            <qrcode
-              :value="receive.paymentReq"
-              :options="{width: 340}"
-              class="rounded-borders"
-            ></qrcode>
-          </q-responsive>
-        </a>
-      </div>
-      <div class="row q-mt-lg">
-        <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
-          >Copy invoice</q-btn
-        >
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
-      </div>
-    </q-card>
-    {% endraw %}
-  </q-dialog>
-
-  <q-dialog v-model="parse.show" @hide="closeParseDialog">
-    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-      <div v-if="parse.invoice">
-        <h6 v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" class="q-my-none">
-          {% raw %} {{ parseFloat(String(parse.invoice.fsat).replaceAll(",",
-          "")) / 100 }} {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
-        </h6>
-        <h6 v-else class="q-my-none">
-          {{ parse.invoice.fsat }}{% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
-        </h6>
-        <q-separator class="q-my-sm"></q-separator>
-        <p class="text-wrap">
-          <strong>Description:</strong> {{ parse.invoice.description }}<br />
-          <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
-          <strong>Hash:</strong> {{ parse.invoice.hash }}
-        </p>
-        {% endraw %}
-        <div v-if="canPay" class="row q-mt-lg">
-          <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
-        </div>
-        <div v-else class="row q-mt-lg">
-          <q-btn unelevated disabled color="yellow" text-color="black"
-            >Not enough funds!</q-btn
-          >
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-            >Cancel</q-btn
-          >
-        </div>
-      </div>
-      <div v-else-if="parse.lnurlauth">
-        {% raw %}
-        <q-form @submit="authLnurl" class="q-gutter-md">
-          <p class="q-my-none text-h6">
-            Authenticate with <b>{{ parse.lnurlauth.domain }}</b>?
-          </p>
-          <q-separator class="q-my-sm"></q-separator>
-          <p>
-            For every website and for every LNbits wallet, a new keypair will be
-            deterministically generated so your identity can't be tied to your
-            LNbits wallet or linked across websites. No other data will be
-            shared with {{ parse.lnurlauth.domain }}.
-          </p>
-          <p>Your public key for <b>{{ parse.lnurlauth.domain }}</b> is:</p>
-          <p class="q-mx-xl">
-            <code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
-          </p>
-          <div class="row q-mt-lg">
-            <q-btn unelevated color="primary" type="submit">Login</q-btn>
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Cancel</q-btn
-            >
-          </div>
-        </q-form>
-        {% endraw %}
-      </div>
-      <div v-else-if="parse.lnurlpay">
-        {% raw %}
-        <q-form @submit="payLnurl" class="q-gutter-md">
-          <p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
-            <b>{{ parse.lnurlpay.domain }}</b> is requesting {{
-            parse.lnurlpay.maxSendable | msatoshiFormat }}
-            {{LNBITS_DENOMINATION}}
-            <span v-if="parse.lnurlpay.commentAllowed > 0">
-              <br />
-              and a {{parse.lnurlpay.commentAllowed}}-char comment
-            </span>
-          </p>
-          <p v-else class="q-my-none text-h6 text-center">
-            <b>{{ parse.lnurlpay.targetUser || parse.lnurlpay.domain }}</b> is
-            requesting <br />
-            between <b>{{ parse.lnurlpay.minSendable | msatoshiFormat }}</b> and
-            <b>{{ parse.lnurlpay.maxSendable | msatoshiFormat }}</b>
-            {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
-            <span v-if="parse.lnurlpay.commentAllowed > 0">
-              <br />
-              and a {{parse.lnurlpay.commentAllowed}}-char comment
-            </span>
-          </p>
-          <q-separator class="q-my-sm"></q-separator>
-          <div class="row">
-            <p class="col text-justify text-italic">
-              {{ parse.lnurlpay.description }}
-            </p>
-            <p class="col-4 q-pl-md" v-if="parse.lnurlpay.image">
-              <q-img :src="parse.lnurlpay.image" />
-            </p>
-          </div>
-          <div class="row">
-            <div class="col">
-              {% endraw %}
-              <q-input
-                filled
-                dense
-                v-model.number="parse.data.amount"
-                type="number"
-                label="Amount ({{LNBITS_DENOMINATION}}) *"
-                :min="parse.lnurlpay.minSendable / 1000"
-                :max="parse.lnurlpay.maxSendable / 1000"
-                :readonly="parse.lnurlpay.fixed"
-              ></q-input>
-              {% raw %}
+            <q-input
+              filled
+              dense
+              v-model.trim="receive.data.memo"
+              label="Memo"
+            ></q-input>
+            {% raw %}
+            <div v-if="receive.status == 'pending'" class="row q-mt-lg">
+              <q-btn
+                unelevated
+                color="primary"
+                :disable="receive.data.amount == null || receive.data.amount <= 0"
+                type="submit"
+              >
+                <span v-if="receive.lnurl">
+                  Withdraw from {{receive.lnurl.domain}}
+                </span>
+                <span v-else> Create invoice </span>
+              </q-btn>
+              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                >Cancel</q-btn
+              >
             </div>
-            <div class="col-8 q-pl-md" v-if="parse.lnurlpay.commentAllowed > 0">
-              <q-input
-                filled
-                dense
-                v-model="parse.data.comment"
-                :type="parse.lnurlpay.commentAllowed > 64 ? 'textarea' : 'text'"
-                label="Comment (optional)"
-                :maxlength="parse.lnurlpay.commentAllowed"
-              ></q-input>
-            </div>
-          </div>
-          <div class="row q-mt-lg">
-            <q-btn unelevated color="primary" type="submit"
-              >Send {{LNBITS_DENOMINATION}}</q-btn
-            >
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Cancel</q-btn
-            >
-          </div>
-        </q-form>
-        {% endraw %}
-      </div>
-      <div v-else>
-        <q-form
-          v-if="!parse.camera.show"
-          @submit="decodeRequest"
-          class="q-gutter-md"
-        >
-          <q-input
-            filled
-            dense
-            v-model.trim="parse.data.request"
-            type="textarea"
-            label="Paste an invoice, payment request or lnurl code *"
-          >
-          </q-input>
-          <div class="row q-mt-lg">
-            <q-btn
-              unelevated
+            <q-spinner
+              v-if="receive.status == 'loading'"
               color="primary"
-              :disable="parse.data.request == ''"
-              type="submit"
-              >Read</q-btn
+              size="2.55em"
+            ></q-spinner>
+          </q-form>
+        </q-card>
+        <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <div class="text-center q-mb-lg">
+            <a :href="'lightning:' + receive.paymentReq">
+              <q-responsive :ratio="1" class="q-mx-xl">
+                <qrcode
+                  :value="receive.paymentReq"
+                  :options="{width: 340}"
+                  class="rounded-borders"
+                ></qrcode>
+              </q-responsive>
+            </a>
+          </div>
+          <div class="row q-mt-lg">
+            <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
+              >Copy invoice</q-btn
             >
             <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Cancel</q-btn
+              >Close</q-btn
             >
           </div>
-        </q-form>
-        <div v-else>
-          <q-responsive :ratio="1">
+        </q-card>
+        {% endraw %}
+      </q-dialog>
+
+      <q-dialog v-model="parse.show" @hide="closeParseDialog">
+        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <div v-if="parse.invoice">
+            <h6 v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" class="q-my-none">
+              {% raw %} {{ parseFloat(String(parse.invoice.fsat).replaceAll(",",
+              "")) / 100 }} {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
+            </h6>
+            <h6 v-else class="q-my-none">
+              {{ parse.invoice.fsat }}{% endraw %} {{LNBITS_DENOMINATION}} {%
+              raw %}
+            </h6>
+            <q-separator class="q-my-sm"></q-separator>
+            <p class="text-wrap">
+              <strong>Description:</strong> {{ parse.invoice.description }}<br />
+              <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
+              <strong>Hash:</strong> {{ parse.invoice.hash }}
+            </p>
+            {% endraw %}
+            <div v-if="canPay" class="row q-mt-lg">
+              <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
+              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                >Cancel</q-btn
+              >
+            </div>
+            <div v-else class="row q-mt-lg">
+              <q-btn unelevated disabled color="yellow" text-color="black"
+                >Not enough funds!</q-btn
+              >
+              <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                >Cancel</q-btn
+              >
+            </div>
+          </div>
+          <div v-else-if="parse.lnurlauth">
+            {% raw %}
+            <q-form @submit="authLnurl" class="q-gutter-md">
+              <p class="q-my-none text-h6">
+                Authenticate with <b>{{ parse.lnurlauth.domain }}</b>?
+              </p>
+              <q-separator class="q-my-sm"></q-separator>
+              <p>
+                For every website and for every LNbits wallet, a new keypair
+                will be deterministically generated so your identity can't be
+                tied to your LNbits wallet or linked across websites. No other
+                data will be shared with {{ parse.lnurlauth.domain }}.
+              </p>
+              <p>Your public key for <b>{{ parse.lnurlauth.domain }}</b> is:</p>
+              <p class="q-mx-xl">
+                <code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
+              </p>
+              <div class="row q-mt-lg">
+                <q-btn unelevated color="primary" type="submit">Login</q-btn>
+                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                  >Cancel</q-btn
+                >
+              </div>
+            </q-form>
+            {% endraw %}
+          </div>
+          <div v-else-if="parse.lnurlpay">
+            {% raw %}
+            <q-form @submit="payLnurl" class="q-gutter-md">
+              <p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
+                <b>{{ parse.lnurlpay.domain }}</b> is requesting {{
+                parse.lnurlpay.maxSendable | msatoshiFormat }}
+                {{LNBITS_DENOMINATION}}
+                <span v-if="parse.lnurlpay.commentAllowed > 0">
+                  <br />
+                  and a {{parse.lnurlpay.commentAllowed}}-char comment
+                </span>
+              </p>
+              <p v-else class="q-my-none text-h6 text-center">
+                <b>{{ parse.lnurlpay.targetUser || parse.lnurlpay.domain }}</b>
+                is requesting <br />
+                between
+                <b>{{ parse.lnurlpay.minSendable | msatoshiFormat }}</b> and
+                <b>{{ parse.lnurlpay.maxSendable | msatoshiFormat }}</b>
+                {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
+                <span v-if="parse.lnurlpay.commentAllowed > 0">
+                  <br />
+                  and a {{parse.lnurlpay.commentAllowed}}-char comment
+                </span>
+              </p>
+              <q-separator class="q-my-sm"></q-separator>
+              <div class="row">
+                <p class="col text-justify text-italic">
+                  {{ parse.lnurlpay.description }}
+                </p>
+                <p class="col-4 q-pl-md" v-if="parse.lnurlpay.image">
+                  <q-img :src="parse.lnurlpay.image" />
+                </p>
+              </div>
+              <div class="row">
+                <div class="col">
+                  {% endraw %}
+                  <q-input
+                    filled
+                    dense
+                    v-model.number="parse.data.amount"
+                    type="number"
+                    label="Amount ({{LNBITS_DENOMINATION}}) *"
+                    :min="parse.lnurlpay.minSendable / 1000"
+                    :max="parse.lnurlpay.maxSendable / 1000"
+                    :readonly="parse.lnurlpay.fixed"
+                  ></q-input>
+                  {% raw %}
+                </div>
+                <div
+                  class="col-8 q-pl-md"
+                  v-if="parse.lnurlpay.commentAllowed > 0"
+                >
+                  <q-input
+                    filled
+                    dense
+                    v-model="parse.data.comment"
+                    :type="parse.lnurlpay.commentAllowed > 64 ? 'textarea' : 'text'"
+                    label="Comment (optional)"
+                    :maxlength="parse.lnurlpay.commentAllowed"
+                  ></q-input>
+                </div>
+              </div>
+              <div class="row q-mt-lg">
+                <q-btn unelevated color="primary" type="submit"
+                  >Send {{LNBITS_DENOMINATION}}</q-btn
+                >
+                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                  >Cancel</q-btn
+                >
+              </div>
+            </q-form>
+            {% endraw %}
+          </div>
+          <div v-else>
+            <q-form
+              v-if="!parse.camera.show"
+              @submit="decodeRequest"
+              class="q-gutter-md"
+            >
+              <q-input
+                filled
+                dense
+                v-model.trim="parse.data.request"
+                type="textarea"
+                label="Paste an invoice, payment request or lnurl code *"
+              >
+              </q-input>
+              <div class="row q-mt-lg">
+                <q-btn
+                  unelevated
+                  color="primary"
+                  :disable="parse.data.request == ''"
+                  type="submit"
+                  >Read</q-btn
+                >
+                <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+                  >Cancel</q-btn
+                >
+              </div>
+            </q-form>
+            <div v-else>
+              <q-responsive :ratio="1">
+                <qrcode-stream
+                  @decode="decodeQR"
+                  @init="onInitQR"
+                  class="rounded-borders"
+                ></qrcode-stream>
+              </q-responsive>
+              <div class="row q-mt-lg">
+                <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">
+                  Cancel
+                </q-btn>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </q-dialog>
+
+      <q-dialog v-model="parse.camera.show">
+        <q-card class="q-pa-lg q-pt-xl">
+          <div class="text-center q-mb-lg">
             <qrcode-stream
               @decode="decodeQR"
               @init="onInitQR"
               class="rounded-borders"
             ></qrcode-stream>
-          </q-responsive>
-          <div class="row q-mt-lg">
-            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">
-              Cancel
-            </q-btn>
           </div>
-        </div>
-      </div>
-    </q-card>
-  </q-dialog>
+          <div class="row q-mt-lg">
+            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
+              >Cancel</q-btn
+            >
+          </div>
+        </q-card>
+      </q-dialog>
 
-  <q-dialog v-model="parse.camera.show">
-    <q-card class="q-pa-lg q-pt-xl">
-      <div class="text-center q-mb-lg">
-        <qrcode-stream
-          @decode="decodeQR"
-          @init="onInitQR"
-          class="rounded-borders"
-        ></qrcode-stream>
-      </div>
-      <div class="row q-mt-lg">
-        <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
-          >Cancel</q-btn
+      <q-dialog v-model="paymentsChart.show">
+        <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
+          <q-card-section>
+            <canvas ref="canvas" width="600" height="400"></canvas>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-tabs
+        class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
+        active-class="px-0"
+        indicator-color="transparent"
+      >
+        <q-tab
+          icon="account_balance_wallet"
+          label="Wallets"
+          @click="g.visibleDrawer = !g.visibleDrawer"
         >
-      </div>
-    </q-card>
-  </q-dialog>
+        </q-tab>
+        <q-tab icon="content_paste" label="Paste" @click="showParseDialog">
+        </q-tab>
+        <q-tab icon="file_download" label="Receive" @click="showReceiveDialog">
+        </q-tab>
 
-  <q-dialog v-model="paymentsChart.show">
-    <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
-      <q-card-section>
-        <canvas ref="canvas" width="600" height="400"></canvas>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-  <q-tabs
-    class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top"
-    active-class="px-0"
-    indicator-color="transparent"
-  >
-    <q-tab
-      icon="account_balance_wallet"
-      label="Wallets"
-      @click="g.visibleDrawer = !g.visibleDrawer"
-    >
-    </q-tab>
-    <q-tab icon="content_paste" label="Paste" @click="showParseDialog"> </q-tab>
-    <q-tab icon="file_download" label="Receive" @click="showReceiveDialog">
-    </q-tab>
+        <q-tab icon="photo_camera" label="Scan" @click="showCamera"> </q-tab>
+      </q-tabs>
 
-    <q-tab icon="photo_camera" label="Scan" @click="showCamera"> </q-tab>
-  </q-tabs>
-
-  <q-dialog v-model="disclaimerDialog.show">
-    <q-card class="q-pa-lg">
-      <h6 class="q-my-md text-primary">Warning</h6>
-      <p>
-        Login functionality to be released in a future update, for now,
-        <strong
-          >make sure you bookmark this page for future access to your
-          wallet</strong
-        >!
-      </p>
-      <p>
-        This service is in BETA, and we hold no responsibility for people losing
-        access to funds. {% if service_fee > 0 %} To encourage you to run your
-        own LNbits installation, any balance on {% raw %}{{
-        disclaimerDialog.location.host }}{% endraw %} will incur a charge of
-        <strong>{{ service_fee }}% service fee</strong> per week. {% endif %}
-      </p>
-      <div class="row q-mt-lg">
-        <q-btn
-          outline
-          color="grey"
-          @click="copyText(disclaimerDialog.location.href)"
-          >Copy wallet URL</q-btn
-        >
-        <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-          >I understand</q-btn
-        >
-      </div>
-    </q-card>
-  </q-dialog>
-  {% endblock %}
+      <q-dialog v-model="disclaimerDialog.show">
+        <q-card class="q-pa-lg">
+          <h6 class="q-my-md text-primary">Warning</h6>
+          <p>
+            Login functionality to be released in a future update, for now,
+            <strong
+              >make sure you bookmark this page for future access to your
+              wallet</strong
+            >!
+          </p>
+          <p>
+            This service is in BETA, and we hold no responsibility for people
+            losing access to funds. {% if service_fee > 0 %} To encourage you to
+            run your own LNbits installation, any balance on {% raw %}{{
+            disclaimerDialog.location.host }}{% endraw %} will incur a charge of
+            <strong>{{ service_fee }}% service fee</strong> per week. {% endif
+            %}
+          </p>
+          <div class="row q-mt-lg">
+            <q-btn
+              outline
+              color="grey"
+              @click="copyText(disclaimerDialog.location.href)"
+              >Copy wallet URL</q-btn
+            >
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+              >I understand</q-btn
+            >
+          </div>
+        </q-card>
+      </q-dialog>
+      {% endblock %}
+    </div>
+  </div>
 </div>