refactor: extract history component

lnbits/extensions/watchonly/static/components/address-list/address-list.js

@@ -5,6 +5,14 @@ async function addressList(path) {
     template,
 
     props: ['accounts', 'mempool_endpoint', 'inkey'],
+    watch: {
+      immediate: true,
+      accounts(newVal, oldVal) {
+        if ((newVal || []).length !== (oldVal || []).length) {
+          this.refreshAddresses() // todo await
+        }
+      }
+    },
     data: function () {
       return {
         addresses: [],
@@ -65,15 +73,7 @@ async function addressList(path) {
         }
       }
     },
-    watch: {
-      immediate: true,
-      accounts(newVal, oldVal) {
-        if ((newVal || []).length !== (oldVal || []).length) {
-          console.log('### refreshAddresses')
-          this.refreshAddresses() // todo await
-        }
-      }
-    },
+
 
     methods: {
       satBtc(val, showUnit = true) {
@@ -95,8 +95,6 @@ async function addressList(path) {
           return r
         }, {})
 
-        console.log('### walletsLimit', walletsLimit)
-        console.log('### this.addresses', this.addresses)
         const fAddresses = this.addresses.filter(
           a =>
             (includeChangeAddrs || !a.isChange) &&
@@ -106,7 +104,6 @@ async function addressList(path) {
             !(excludeNoAmount && a.amount === 0) &&
             (!selectedWalletId || a.wallet === selectedWalletId)
         )
-        console.log('### fAddresses', fAddresses)
         return fAddresses
       },
       getAddressesForWallet: async function (walletId) {
@@ -128,7 +125,6 @@ async function addressList(path) {
         return []
       },
       refreshAddresses: async function () {
-        console.log('### refreshAddresses, this.accounts', this.accounts)
         if (!this.accounts) return
         this.addresses = []
         for (const {id, type} of this.accounts) {
@@ -151,7 +147,6 @@ async function addressList(path) {
           })
           this.addresses.push(...uniqueAddresses)
         }
-        console.log('### refreshAddresses, this.addresse', this.addresses)
         this.$emit('update:addresses', this.addresses)
       },
       scanAddress: async function (addressData) {
@@ -164,6 +159,7 @@ async function addressList(path) {
 
     created: async function () {
       await this.refreshAddresses()
+      // this.$emit('update:addresses', this.addresses)
     }
   })
 }

lnbits/extensions/watchonly/static/components/history/history.html

@@ -0,0 +1,144 @@
+<div>
+  <div class="row items-center no-wrap q-mb-md">
+    <div class="col q-pr-lg"></div>
+    <div class="col q-pr-lg">
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        v-model="historyTable.filter"
+        placeholder="Search"
+        class="float-right"
+      >
+        <template v-slot:append>
+          <q-icon name="search"></q-icon>
+        </template>
+      </q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn outline color="grey" label="...">
+        <q-menu auto-close>
+          <q-list style="min-width: 100px">
+            <q-item clickable>
+              <q-item-section @click="exportHistoryToCSV"
+                >Export to CSV</q-item-section
+              >
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+    </div>
+  </div>
+  <q-table
+    style="height: 400px"
+    flat
+    dense
+    :data="getFilteredAddressesHistory()"
+    row-key="id"
+    virtual-scroll
+    :columns="historyTable.columns"
+    :pagination.sync="historyTable.pagination"
+    :filter="historyTable.filter"
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            size="sm"
+            color="accent"
+            round
+            dense
+            @click="props.row.expanded = !props.row.expanded"
+            :icon="props.row.expanded ? 'remove' : 'add'"
+          />
+        </q-td>
+
+        <q-td key="status" :props="props">
+          <q-badge
+            v-if="props.row.sent"
+            @click="props.row.expanded = !props.row.expanded"
+            color="orange"
+            class="q-mr-md cursor-pointer"
+          >
+            {{props.row.confirmed ? 'Sent' : 'Sending...'}}
+          </q-badge>
+          <q-badge
+            v-if="props.row.received"
+            @click="props.row.expanded = !props.row.expanded"
+            color="green"
+            class="q-mr-md cursor-pointer"
+          >
+            {{props.row.confirmed ? 'Received' : 'Receiving...'}}
+          </q-badge>
+        </q-td>
+        <q-td
+          key="amount"
+          :props="props"
+          :class="props.row.amount && props.row.received > 0 ? 'text-green-13 text-weight-bold' : ''"
+        >
+          <div>{{satBtc(props.row.totalAmount || props.row.amount)}}</div>
+        </q-td>
+        <q-td key="address" :props="props">
+          <a
+            v-if="!props.row.sameTxItems"
+            style="color: unset"
+            :href="mempool_endpoint + '/address/' + props.row.address"
+            target="_blank"
+          >
+            {{props.row.address}}</a
+          >
+          <q-badge
+            v-if="props.row.sameTxItems"
+            @click="props.row.expanded = !props.row.expanded"
+            outline
+            color="blue"
+            class="cursor-pointer"
+          >
+            ...
+          </q-badge>
+        </q-td>
+        <q-td key="date" :props="props"> {{ props.row.date }} </q-td>
+      </q-tr>
+      <q-tr v-show="props.row.expanded" :props="props">
+        <q-td colspan="100%">
+          <div class="row items-center no-wrap q-mb-md">
+            <div class="col-2 q-pr-lg">Transaction Id</div>
+            <div class="col-10 q-pr-lg">
+              <a
+                style="color: unset"
+                :href="mempool_endpoint + '/tx/' + props.row.txId"
+                target="_blank"
+              >
+                {{props.row.txId}}</a
+              >
+            </div>
+          </div>
+          <div
+            v-if="props.row.sameTxItems"
+            class="row items-center no-wrap q-mb-md"
+          >
+            <div class="col-2 q-pr-lg">UTXOs</div>
+            <div class="col-4 q-pr-lg">{{satBtc(props.row.amount)}}</div>
+            <div class="col-6 q-pr-lg">{{props.row.address}}</div>
+          </div>
+          <div
+            v-for="s in props.row.sameTxItems || []"
+            class="row items-center no-wrap q-mb-md"
+          >
+            <div class="col-2 q-pr-lg"></div>
+            <div class="col-4 q-pr-lg">{{satBtc(s.amount)}}</div>
+            <div class="col-6 q-pr-lg">{{s.address}}</div>
+          </div>
+          <div class="row items-center no-wrap q-mb-md">
+            <div class="col-2 q-pr-lg">Fee</div>
+            <div class="col-4 q-pr-lg">{{satBtc(props.row.fee)}}</div>
+          </div>
+          <div class="row items-center no-wrap q-mb-md">
+            <div class="col-2 q-pr-lg">Block Height</div>
+            <div class="col-4 q-pr-lg">{{props.row.height}}</div>
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</div>

lnbits/extensions/watchonly/static/components/history/history.js

@@ -0,0 +1,95 @@
+async function history(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('history', {
+    name: 'history',
+    template,
+
+    props: ['history', 'mempool_endpoint'],
+    data: function () {
+      return {
+        historyTable: {
+          columns: [
+            {
+              name: 'expand',
+              align: 'left',
+              label: ''
+            },
+            {
+              name: 'status',
+              align: 'left',
+              label: 'Status'
+            },
+            {
+              name: 'amount',
+              align: 'left',
+              label: 'Amount',
+              field: 'amount',
+              sortable: true
+            },
+            {
+              name: 'address',
+              align: 'left',
+              label: 'Address',
+              field: 'address',
+              sortable: true
+            },
+            {
+              name: 'date',
+              align: 'left',
+              label: 'Date',
+              field: 'date',
+              sortable: true
+            }
+          ],
+          exportColums: [
+            {
+              label: 'Action',
+              field: 'action'
+            },
+            {
+              label: 'Date&Time',
+              field: 'date'
+            },
+            {
+              label: 'Amount',
+              field: 'amount'
+            },
+            {
+              label: 'Fee',
+              field: 'fee'
+            },
+            {
+              label: 'Transaction Id',
+              field: 'txId'
+            }
+          ],
+          pagination: {
+            rowsPerPage: 0
+          },
+          filter: ''
+        }
+      }
+    },
+
+    methods: {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, this['sats_denominated'])
+      },
+      getFilteredAddressesHistory: function () {
+        return this.history.filter(a => (!a.isChange || a.sent) && !a.isSubItem)
+      },
+      exportHistoryToCSV: function () {
+        const history = this.getFilteredAddressesHistory().map(a => ({
+          ...a,
+          action: a.sent ? 'Sent' : 'Received'
+        }))
+        LNbits.utils.exportCSV(
+          this.historyTable.exportColums,
+          history,
+          'address-history'
+        )
+      }
+    },
+    created: async function () {}
+  })
+}

lnbits/extensions/watchonly/static/js/index.js

@@ -4,6 +4,7 @@ const watchOnly = async () => {
   await walletConfig('static/components/wallet-config/wallet-config.html')
   await walletList('static/components/wallet-list/wallet-list.html')
   await addressList('static/components/address-list/address-list.html')
+  await history('static/components/history/history.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -158,20 +159,7 @@ const watchOnly = async () => {
         })
         return addressHistory
       },
-      getFilteredAddressesHistory: function () {
-        return this.history.filter(a => (!a.isChange || a.sent) && !a.isSubItem)
-      },
-      exportHistoryToCSV: function () {
-        const history = this.getFilteredAddressesHistory().map(a => ({
-          ...a,
-          action: a.sent ? 'Sent' : 'Received'
-        }))
-        LNbits.utils.exportCSV(
-          this.historyTable.exportColums,
-          history,
-          'address-history'
-        )
-      },
+
       markSameTxAddressHistory: function () {
         this.history
           .filter(s => s.sent)
@@ -807,11 +795,12 @@ const watchOnly = async () => {
         this.utxos.data = []
         this.utxos.total = 0
         this.history = []
+        console.log('### scanAddressWithAmount1',  this.addresses)
         const addresses = this.addresses.filter(a => a.hasActivity)
+        console.log('### scanAddressWithAmount2', addresses)
         await this.updateUtxosForAddresses(addresses)
       },
       scanAddress: async function (addressData) {
-        console.log('### scanAddress', addressData)
         this.updateUtxosForAddresses([addressData])
         this.$q.notify({
           type: 'positive',
@@ -830,7 +819,8 @@ const watchOnly = async () => {
               h => h.address !== addrData.address
             )
 
-            // add new entrie
+            console.log('### addressHistory', addressHistory)
+            // add new entries
             this.history.push(...addressHistory)
             this.history.sort((a, b) => (!a.height ? -1 : b.height - a.height))
             this.markSameTxAddressHistory()
@@ -975,7 +965,6 @@ const watchOnly = async () => {
       //################### OTHER ###################
 
       openQrCodeDialog: function (addressData) {
-        console.log('### addressData', addressData)
         this.currentAddress = addressData
         this.addressNote = addressData.note || ''
         this.showAddress = true
@@ -1005,16 +994,16 @@ const watchOnly = async () => {
         }
       },
       showAddressDetails: function (addressData) {
-        console.log('### showAddressDetails addressData', addressData)
         this.openQrCodeDialog(addressData)
       },
-      handleAddressesUpdated: function (addresses) {
+      handleAddressesUpdated: async function (addresses) {
         this.addresses = addresses
+        await this.scanAddressWithAmount()
       }
     },
     created: async function () {
       if (this.g.user.wallets.length) {
-        // await this.refreshAddressesxxx() todo: done when <address-list is created
+        // await this.$refs.addressList.refreshAddresses()
         await this.scanAddressWithAmount()
       }
     }

lnbits/extensions/watchonly/static/js/tables.js

@@ -86,68 +86,6 @@ const tables = {
         label: 'Change'
       }
     ]
-  },
-
-  historyTable: {
-    columns: [
-      {
-        name: 'expand',
-        align: 'left',
-        label: ''
-      },
-      {
-        name: 'status',
-        align: 'left',
-        label: 'Status'
-      },
-      {
-        name: 'amount',
-        align: 'left',
-        label: 'Amount',
-        field: 'amount',
-        sortable: true
-      },
-      {
-        name: 'address',
-        align: 'left',
-        label: 'Address',
-        field: 'address',
-        sortable: true
-      },
-      {
-        name: 'date',
-        align: 'left',
-        label: 'Date',
-        field: 'date',
-        sortable: true
-      }
-    ],
-    exportColums: [
-      {
-        label: 'Action',
-        field: 'action'
-      },
-      {
-        label: 'Date&Time',
-        field: 'date'
-      },
-      {
-        label: 'Amount',
-        field: 'amount'
-      },
-      {
-        label: 'Fee',
-        field: 'fee'
-      },
-      {
-        label: 'Transaction Id',
-        field: 'txId'
-      }
-    ],
-    pagination: {
-      rowsPerPage: 0
-    },
-    filter: ''
   }
 }
 

lnbits/extensions/watchonly/templates/watchonly/index.html

@@ -81,152 +81,7 @@
             </address-list>
           </q-tab-panel>
           <q-tab-panel name="history">
-            <div class="row items-center no-wrap q-mb-md">
-              <div class="col q-pr-lg"></div>
-              <div class="col q-pr-lg">
-                <q-input
-                  borderless
-                  dense
-                  debounce="300"
-                  v-model="historyTable.filter"
-                  placeholder="Search"
-                  class="float-right"
-                >
-                  <template v-slot:append>
-                    <q-icon name="search"></q-icon>
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-auto">
-                <q-btn outline color="grey" label="...">
-                  <q-menu auto-close>
-                    <q-list style="min-width: 100px">
-                      <q-item clickable>
-                        <q-item-section @click="exportHistoryToCSV"
-                          >Export to CSV</q-item-section
-                        >
-                      </q-item>
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </div>
-            </div>
-            <q-table
-              style="height: 400px"
-              flat
-              dense
-              :data="getFilteredAddressesHistory()"
-              row-key="id"
-              virtual-scroll
-              :columns="historyTable.columns"
-              :pagination.sync="historyTable.pagination"
-              :filter="historyTable.filter"
-            >
-              <template v-slot:body="props">
-                <q-tr :props="props">
-                  <q-td auto-width>
-                    <q-btn
-                      size="sm"
-                      color="accent"
-                      round
-                      dense
-                      @click="props.row.expanded = !props.row.expanded"
-                      :icon="props.row.expanded ? 'remove' : 'add'"
-                    />
-                  </q-td>
-
-                  <q-td key="status" :props="props">
-                    <q-badge
-                      v-if="props.row.sent"
-                      @click="props.row.expanded = !props.row.expanded"
-                      color="orange"
-                      class="q-mr-md cursor-pointer"
-                    >
-                      {{props.row.confirmed ? 'Sent' : 'Sending...'}}
-                    </q-badge>
-                    <q-badge
-                      v-if="props.row.received"
-                      @click="props.row.expanded = !props.row.expanded"
-                      color="green"
-                      class="q-mr-md cursor-pointer"
-                    >
-                      {{props.row.confirmed ? 'Received' : 'Receiving...'}}
-                    </q-badge>
-                  </q-td>
-                  <q-td
-                    key="amount"
-                    :props="props"
-                    :class="props.row.amount && props.row.received > 0 ? 'text-green-13 text-weight-bold' : ''"
-                  >
-                    <div>
-                      {{satBtc(props.row.totalAmount || props.row.amount)}}
-                    </div>
-                  </q-td>
-                  <q-td key="address" :props="props">
-                    <a
-                      v-if="!props.row.sameTxItems"
-                      style="color: unset"
-                      :href="config.data.mempool_endpoint + '/address/' + props.row.address"
-                      target="_blank"
-                    >
-                      {{props.row.address}}</a
-                    >
-                    <q-badge
-                      v-if="props.row.sameTxItems"
-                      @click="props.row.expanded = !props.row.expanded"
-                      outline
-                      color="blue"
-                      class="cursor-pointer"
-                    >
-                      ...
-                    </q-badge>
-                  </q-td>
-                  <q-td key="date" :props="props"> {{ props.row.date }} </q-td>
-                </q-tr>
-                <q-tr v-show="props.row.expanded" :props="props">
-                  <q-td colspan="100%">
-                    <div class="row items-center no-wrap q-mb-md">
-                      <div class="col-2 q-pr-lg">Transaction Id</div>
-                      <div class="col-10 q-pr-lg">
-                        <a
-                          style="color: unset"
-                          :href="config.data.mempool_endpoint + '/tx/' + props.row.txId"
-                          target="_blank"
-                        >
-                          {{props.row.txId}}</a
-                        >
-                      </div>
-                    </div>
-                    <div
-                      v-if="props.row.sameTxItems"
-                      class="row items-center no-wrap q-mb-md"
-                    >
-                      <div class="col-2 q-pr-lg">UTXOs</div>
-                      <div class="col-4 q-pr-lg">
-                        {{satBtc(props.row.amount)}}
-                      </div>
-                      <div class="col-6 q-pr-lg">{{props.row.address}}</div>
-                    </div>
-                    <div
-                      v-for="s in props.row.sameTxItems || []"
-                      class="row items-center no-wrap q-mb-md"
-                    >
-                      <div class="col-2 q-pr-lg"></div>
-                      <div class="col-4 q-pr-lg">{{satBtc(s.amount)}}</div>
-                      <div class="col-6 q-pr-lg">{{s.address}}</div>
-                    </div>
-                    <div class="row items-center no-wrap q-mb-md">
-                      <div class="col-2 q-pr-lg">Fee</div>
-                      <div class="col-4 q-pr-lg">{{satBtc(props.row.fee)}}</div>
-                    </div>
-                    <div class="row items-center no-wrap q-mb-md">
-                      <div class="col-2 q-pr-lg">Block Height</div>
-                      <div class="col-4 q-pr-lg">{{props.row.height}}</div>
-                    </div>
-                  </q-td>
-                </q-tr>
-              </template>
-            </q-table>
+            <history :history="history" :mempool_endpoint="config.data.mempool_endpoint"></history>
           </q-tab-panel>
           <q-tab-panel name="utxos">
             <div class="row items-center no-wrap q-mb-md">
@@ -1277,5 +1132,6 @@
 <script src="{{ url_for('watchonly_static', path='components/wallet-config/wallet-config.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='components/wallet-list/wallet-list.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='components/address-list/address-list.js') }}"></script>
+<script src="{{ url_for('watchonly_static', path='components/history/history.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}