From b936d122a3f5479f219fa1eded01fadf2bbeb374 Mon Sep 17 00:00:00 2001
From: callebtc <93376500+callebtc@users.noreply.github.com>
Date: Mon, 7 Nov 2022 15:36:52 +0100
Subject: [PATCH] scrolling works

---
 .env.example                                  |   3 +-
 .../cashu/templates/cashu/wallet.html         | 560 +++++++++---------
 2 files changed, 283 insertions(+), 280 deletions(-)

diff --git a/.env.example b/.env.example
index b6a532058..28e526988 100644
--- a/.env.example
+++ b/.env.example
@@ -110,5 +110,6 @@ LNTIPS_API_KEY=LNTIPS_ADMIN_KEY
 LNTIPS_API_ENDPOINT=https://ln.tips
 
 # Cashu Mint
-# Use a long-enough random (!) private key
+# Use a long-enough random (!) private key. 
+# Once set, you cannot change this key as for now.
 CASHU_PRIVATE_KEY="SuperSecretPrivateKey"
diff --git a/lnbits/extensions/cashu/templates/cashu/wallet.html b/lnbits/extensions/cashu/templates/cashu/wallet.html
index 9b49a0631..a0861ae70 100644
--- a/lnbits/extensions/cashu/templates/cashu/wallet.html
+++ b/lnbits/extensions/cashu/templates/cashu/wallet.html
@@ -5,305 +5,307 @@ page_container %}
   <q-page>
     <div class="row q-col-gutter-md justify-center q-pt-lg">
       <div class="col-12 col-sm-8 col-md-9 col-lg-7 text-center q-gutter-y-md">
-        <q-scroll-area :style="'height: ' + height + 'px; max-width: 1024px'">
-          <q-card class="q-mb-sm">
-            <q-card-section>
-              <div class="gt-sm">
-                <div class="row">
-                  <div class="col-3 q-pt-sm">
-                    <q-btn
-                      class="full-width"
-                      size="14px"
-                      icon="bolt"
-                      rectangle
-                      color="primary"
-                      @click="showInvoicesDialog"
-                      ><strong>Get invoice</strong>
-                    </q-btn>
-                  </div>
-                  <div class="col-6">
-                    <h3 class="q-my-none q-py-none">
-                      <center>
-                        <strong>{% raw %} {{getBalance()}} </strong>
-                        {{tickershort}}{% endraw %}
-                      </center>
-                    </h3>
-                  </div>
-                  <div class="col-3 q-pt-sm">
-                    <q-btn
-                      class="full-width"
-                      @click="showParseDialog"
-                      size="14px"
-                      icon="bolt"
-                      rectangle
-                      color="primary"
-                      class="full-width"
-                      ><strong>Pay invoice</strong>
-                    </q-btn>
-                  </div>
-                </div>
-              </div>
-              <div class="lt-md">
-                <div class="row">
-                  <div class="col-12">
-                    <h3 class="q-my-none q-py-none">
-                      <center>
-                        <strong>{% raw %} {{getBalance()}} </strong>
-                        {{tickershort}}{% endraw %}
-                      </center>
-                    </h3>
-                  </div>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
-
-          <q-card>
-            <q-card-section>
-              <div class="row items-center no-wrap q-mb-sm">
-                <div class="col-6 col-sm-5 col-md-4 q-px-xs">
+        <q-card class="q-mb-sm">
+          <q-card-section>
+            <div class="gt-sm">
+              <div class="row">
+                <div class="col-3 q-pt-sm">
                   <q-btn
-                    size="12px"
-                    rectangle
-                    unelevated
-                    color="primary"
-                    icon="file_download"
                     class="full-width"
-                    @click="showReceiveTokensDialog"
-                    >Get Ecash</q-btn
-                  >
+                    size="14px"
+                    icon="bolt"
+                    rectangle
+                    color="primary"
+                    @click="showInvoicesDialog"
+                    ><strong>Get invoice</strong>
+                  </q-btn>
                 </div>
-                <div class="col-0 col-sm-2 col-md-4"></div>
-                <div class="col-6 col-sm-5 col-md-4 q-px-xs">
+                <div class="col-6">
+                  <h3 class="q-my-none q-py-none">
+                    <center>
+                      <strong>{% raw %} {{getBalance()}} </strong>
+                      {{tickershort}}{% endraw %}
+                    </center>
+                  </h3>
+                </div>
+                <div class="col-3 q-pt-sm">
                   <q-btn
-                    size="12px"
-                    rectangle
-                    unelevated
-                    color="primary"
-                    icon="file_upload"
                     class="full-width"
-                    @click="showSendTokensDialog"
-                  >
-                    Pay Ecash</q-btn
-                  >
+                    @click="showParseDialog"
+                    size="14px"
+                    icon="bolt"
+                    rectangle
+                    color="primary"
+                    class="full-width"
+                    ><strong>Pay invoice</strong>
+                  </q-btn>
                 </div>
               </div>
+            </div>
+            <div class="lt-md">
+              <div class="row">
+                <div class="col-12">
+                  <h3 class="q-my-none q-py-none">
+                    <center>
+                      <strong>{% raw %} {{getBalance()}} </strong>
+                      {{tickershort}}{% endraw %}
+                    </center>
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
 
-              <!-- ///////////////////////////////////////////
+        <q-card>
+          <q-card-section>
+            <div class="row items-center no-wrap q-mb-sm">
+              <div class="col-6 col-sm-5 col-md-4 q-px-xs">
+                <q-btn
+                  size="12px"
+                  rectangle
+                  unelevated
+                  color="primary"
+                  icon="file_download"
+                  class="full-width"
+                  @click="showReceiveTokensDialog"
+                  >Get Ecash</q-btn
+                >
+              </div>
+              <div class="col-0 col-sm-2 col-md-4"></div>
+              <div class="col-6 col-sm-5 col-md-4 q-px-xs">
+                <q-btn
+                  size="12px"
+                  rectangle
+                  unelevated
+                  color="primary"
+                  icon="file_upload"
+                  class="full-width"
+                  @click="showSendTokensDialog"
+                >
+                  Pay Ecash</q-btn
+                >
+              </div>
+            </div>
+
+            <!-- ///////////////////////////////////////////
             ////////////////// TABLES /////////////////
             /////////////////////////////////////////// -->
-              <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
-                <q-tab name="tokens" label="Tokens"></q-tab>
-                <q-tab name="invoices" label="Invoices"></q-tab>
-                <q-tab name="history" label="History"></q-tab>
-              </q-tabs>
-              <q-tab-panels v-model="tab">
-                <!-- ////////////////// TOKEN LIST ///////////////// -->
+            <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
+              <q-tab name="tokens" label="Tokens"></q-tab>
+              <q-tab name="invoices" label="Invoices"></q-tab>
+              <q-tab name="history" label="History"></q-tab>
+            </q-tabs>
+            <q-tab-panels v-model="tab">
+              <!-- ////////////////// TOKEN LIST ///////////////// -->
 
-                <q-tab-panel name="tokens">
-                  <q-table
-                    dense
-                    flat
-                    :data="getTokenList()"
-                    :columns="tokensTable.columns"
-                    :pagination.sync="tokensTable.pagination"
-                    no-data-label="No tokens yet"
-                    :filter="tokensTable.filter"
-                  >
-                    {% raw %}
-                    <template v-slot:body="props">
-                      <q-tr :props="props">
-                        <q-td
-                          key="value"
-                          :props="props"
-                          :class="props.row.value > 0 ? 'text-green-13 text-weight-bold' : ''"
-                        >
-                          <div>{{props.row.value}}</div>
-                        </q-td>
-                        <q-td key="count" :props="props">
-                          <div>{{props.row.count}}</div>
-                        </q-td>
-                        <q-td key="sum" :props="props">
-                          <div>{{props.row.sum}}</div>
-                        </q-td>
-                        <q-td key="memo" :props="props">
-                          <div>{{props.row.memo}}</div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                    {% endraw %}
-                  </q-table>
-                </q-tab-panel>
+              <q-tab-panel name="tokens">
+                <q-table
+                  dense
+                  flat
+                  :data="getTokenList()"
+                  :columns="tokensTable.columns"
+                  :pagination.sync="tokensTable.pagination"
+                  no-data-label="No tokens yet"
+                  :filter="tokensTable.filter"
+                >
+                  {% raw %}
+                  <template v-slot:body="props">
+                    <q-tr :props="props">
+                      <q-td
+                        key="value"
+                        :props="props"
+                        :class="props.row.value > 0 ? 'text-green-13 text-weight-bold' : ''"
+                      >
+                        <div>{{props.row.value}}</div>
+                      </q-td>
+                      <q-td key="count" :props="props">
+                        <div>{{props.row.count}}</div>
+                      </q-td>
+                      <q-td key="sum" :props="props">
+                        <div>{{props.row.sum}}</div>
+                      </q-td>
+                      <q-td key="memo" :props="props">
+                        <div>{{props.row.memo}}</div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                  {% endraw %}
+                </q-table>
+              </q-tab-panel>
 
-                <!-- ////////////////// INVOICE LIST ///////////////// -->
+              <!-- ////////////////// INVOICE LIST ///////////////// -->
 
-                <q-tab-panel name="invoices">
-                  <q-table
-                    dense
-                    flat
-                    :data="invoicesCashu"
-                    :columns="invoicesTable.columns"
-                    :pagination.sync="invoicesTable.pagination"
-                    no-data-label="There are no invoices here yet"
-                    :filter="invoicesTable.filter"
-                  >
-                    {% raw %}
-                    <template v-slot:body="props">
-                      <q-tr :props="props">
-                        <q-td key="status" :props="props">
-                          <div v-if="props.row.status == 'pending'">
-                            <q-icon
-                              @click="showInvoiceDialog(props.row)"
-                              name="settings_ethernet"
-                              color="grey"
-                            >
-                              <q-tooltip>Pending</q-tooltip>
-                            </q-icon>
-                            <q-badge
-                              size="lg"
-                              color="secondary"
-                              class="q-mr-md cursor-pointer"
-                              @click="recheckInvoice(props.row.hash)"
-                            >
-                              Check
-                            </q-badge>
-                          </div>
-                          <div v-if="props.row.status === 'paid'">
-                            <q-icon
-                              v-if="props.row.amount>0"
-                              name="call_received"
-                              color="green"
-                              ><q-tooltip>Received</q-tooltip></q-icon
-                            >
-                            <q-icon
-                              v-if="props.row.amount<0"
-                              name="call_made"
-                              color="red"
-                              ><q-tooltip>Paid</q-tooltip></q-icon
-                            >
-                            <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
-                          </div>
-                        </q-td>
-                        <q-td
-                          key="amount"
-                          :props="props"
-                          :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
-                        >
-                          <div>{{props.row.amount}}</div>
-                        </q-td>
+              <q-tab-panel name="invoices">
+                <q-table
+                  dense
+                  flat
+                  :data="invoicesCashu"
+                  :columns="invoicesTable.columns"
+                  :pagination.sync="invoicesTable.pagination"
+                  no-data-label="There are no invoices here yet"
+                  :filter="invoicesTable.filter"
+                >
+                  {% raw %}
+                  <template v-slot:body="props">
+                    <q-tr :props="props">
+                      <q-td key="status" :props="props">
+                        <div v-if="props.row.status == 'pending'">
+                          <q-icon
+                            @click="showInvoiceDialog(props.row)"
+                            name="settings_ethernet"
+                            color="grey"
+                          >
+                            <q-tooltip>Pending</q-tooltip>
+                          </q-icon>
+                          <q-badge
+                            size="lg"
+                            color="secondary"
+                            class="q-mr-md cursor-pointer"
+                            @click="recheckInvoice(props.row.hash)"
+                          >
+                            Check
+                          </q-badge>
+                        </div>
+                        <div v-if="props.row.status === 'paid'">
+                          <q-icon
+                            v-if="props.row.amount>0"
+                            name="call_received"
+                            color="green"
+                            ><q-tooltip>Received</q-tooltip></q-icon
+                          >
+                          <q-icon
+                            v-if="props.row.amount<0"
+                            name="call_made"
+                            color="red"
+                            ><q-tooltip>Paid</q-tooltip></q-icon
+                          >
+                          <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
+                        </div>
+                      </q-td>
+                      <q-td
+                        key="amount"
+                        :props="props"
+                        :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
+                      >
+                        <div>{{props.row.amount}}</div>
+                      </q-td>
 
-                        <!-- <q-td key="memo" :props="props">
+                      <!-- <q-td key="memo" :props="props">
                         <div>{{props.row.memo}}</div>
                       </q-td> -->
-                        <q-td key="date" :props="props">
-                          <div>{{props.row.date}}</div>
-                        </q-td>
-                        <q-td key="bolt11" :props="props">
-                          <div>{{props.row.bolt11}}</div>
-                        </q-td>
-                        <q-td key="hash" :props="props">
-                          <div>{{props.row.hash}}</div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                    {% endraw %}
-                  </q-table>
-                </q-tab-panel>
+                      <q-td key="date" :props="props">
+                        <div>{{props.row.date}}</div>
+                      </q-td>
+                      <q-td key="bolt11" :props="props">
+                        <div>{{props.row.bolt11}}</div>
+                      </q-td>
+                      <q-td key="hash" :props="props">
+                        <div>{{props.row.hash}}</div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                  {% endraw %}
+                </q-table>
+              </q-tab-panel>
 
-                <!-- ////////////////// HISTORY LIST ///////////////// -->
+              <!-- ////////////////// HISTORY LIST ///////////////// -->
 
-                <q-tab-panel name="history">
-                  <q-table
-                    dense
-                    flat
-                    :data="historyTokens"
-                    :columns="historyTable.columns"
-                    :pagination.sync="historyTable.pagination"
-                    no-data-label="There are no tokens here yet"
-                    :filter="historyTable.filter"
-                  >
-                    {% raw %}
-                    <template v-slot:body="props">
-                      <q-tr :props="props">
-                        <q-td key="status" :props="props">
-                          <div v-if="props.row.status == 'pending'">
-                            <q-icon
-                              @click="showTokenDialog(props.row.token)"
-                              name="settings_ethernet"
-                              color="grey"
-                            >
-                              <q-tooltip>Pending</q-tooltip>
-                            </q-icon>
-                            <q-badge
-                              size="lg"
-                              color="secondary"
-                              class="q-mr-md cursor-pointer"
-                              @click="checkTokenSpendable(props.row.token)"
-                            >
-                              Check
-                            </q-badge>
-                          </div>
-                          <div v-if="props.row.status === 'paid'">
-                            <q-icon
-                              v-if="props.row.amount>0"
-                              name="call_received"
-                              color="green"
-                              ><q-tooltip>Received</q-tooltip></q-icon
-                            >
-                            <q-icon
-                              v-if="props.row.amount<0"
-                              name="call_made"
-                              color="red"
-                              ><q-tooltip>Paid</q-tooltip></q-icon
-                            >
-                            <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
-                          </div>
-                        </q-td>
-                        <q-td
-                          key="amount"
-                          :props="props"
-                          :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
-                        >
-                          <div>{{props.row.amount}}</div>
-                        </q-td>
+              <q-tab-panel name="history">
+                <q-table
+                  dense
+                  flat
+                  :data="historyTokens"
+                  :columns="historyTable.columns"
+                  :pagination.sync="historyTable.pagination"
+                  no-data-label="There are no tokens here yet"
+                  :filter="historyTable.filter"
+                >
+                  {% raw %}
+                  <template v-slot:body="props">
+                    <q-tr :props="props">
+                      <q-td key="status" :props="props">
+                        <div v-if="props.row.status == 'pending'">
+                          <q-icon
+                            @click="showTokenDialog(props.row.token)"
+                            name="settings_ethernet"
+                            color="grey"
+                          >
+                            <q-tooltip>Pending</q-tooltip>
+                          </q-icon>
+                          <q-badge
+                            size="lg"
+                            color="secondary"
+                            class="q-mr-md cursor-pointer"
+                            @click="checkTokenSpendable(props.row.token)"
+                          >
+                            Check
+                          </q-badge>
+                        </div>
+                        <div v-if="props.row.status === 'paid'">
+                          <q-icon
+                            v-if="props.row.amount>0"
+                            name="call_received"
+                            color="green"
+                            ><q-tooltip>Received</q-tooltip></q-icon
+                          >
+                          <q-icon
+                            v-if="props.row.amount<0"
+                            name="call_made"
+                            color="red"
+                            ><q-tooltip>Paid</q-tooltip></q-icon
+                          >
+                          <!-- <q-icon name="props.row.amount < 0 ? 'call_made' : 'call_received'" color="green"></q-icon> -->
+                        </div>
+                      </q-td>
+                      <q-td
+                        key="amount"
+                        :props="props"
+                        :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
+                      >
+                        <div>{{props.row.amount}}</div>
+                      </q-td>
 
-                        <q-td key="date" :props="props">
-                          <div>{{props.row.date}}</div>
-                        </q-td>
-                        <q-td key="token" :props="props">
-                          <div>{{props.row.token}}</div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                    {% endraw %}
-                  </q-table>
-                </q-tab-panel>
-              </q-tab-panels>
-            </q-card-section>
-          </q-card>
+                      <q-td key="date" :props="props">
+                        <div>{{props.row.date}}</div>
+                      </q-td>
+                      <q-td key="token" :props="props">
+                        <div>{{props.row.token}}</div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                  {% endraw %}
+                </q-table>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card-section>
+        </q-card>
 
-          <div class="q-pa-sd q-py-md" align="center">
-            <q-btn
-              class="q-mx-sm"
-              size="10px"
-              rectangle
-              color="warning"
-              outline
-              @click="showDisclaimerDialog"
-            >
-              Warning</q-btn
-            >
-            <q-btn
-              class="q-mx-sm"
-              size="10px"
-              outline
-              rectangle
-              color="warning"
-              @click="getLocalstorageToFile"
-              >Backup<q-tooltip>Download wallet backup</q-tooltip></q-btn
-            >
-          </div>
-        </q-scroll-area>
+        <div
+          class="q-pa-sd q-pt-md q-mb-xl"
+          style="margin-bottom: 5rem"
+          align="center"
+        >
+          <q-btn
+            class="q-mx-sm"
+            size="10px"
+            rectangle
+            color="warning"
+            outline
+            @click="showDisclaimerDialog"
+          >
+            Warning</q-btn
+          >
+          <q-btn
+            class="q-mx-sm"
+            size="10px"
+            outline
+            rectangle
+            color="warning"
+            @click="getLocalstorageToFile"
+            >Backup<q-tooltip>Download wallet backup</q-tooltip></q-btn
+          >
+        </div>
       </div>
 
       <q-tabs