refactor: extract utxo-list component

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

@@ -5,6 +5,7 @@ const watchOnly = async () => {
   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')
+  await utxoList('static/components/utxo-list/utxo-list.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -795,7 +796,7 @@ const watchOnly = async () => {
         this.utxos.data = []
         this.utxos.total = 0
         this.history = []
-        console.log('### scanAddressWithAmount1',  this.addresses)
+        console.log('### scanAddressWithAmount1', this.addresses)
         const addresses = this.addresses.filter(a => a.hasActivity)
         console.log('### scanAddressWithAmount2', addresses)
         await this.updateUtxosForAddresses(addresses)
@@ -872,6 +873,7 @@ const watchOnly = async () => {
         )
         this.updateAmountForAddress(addressData, addressTotal)
       },
+      // todo: move/dedup
       getTotalSelectedUtxoAmount: function () {
         const total = this.utxos.data
           .filter(u => u.selected)

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

@@ -1,56 +1,4 @@
 const tables = {
-  utxosTable: {
-    columns: [
-      {
-        name: 'expand',
-        align: 'left',
-        label: ''
-      },
-      {
-        name: 'selected',
-        align: 'left',
-        label: ''
-      },
-      {
-        name: 'status',
-        align: 'center',
-        label: 'Status',
-        sortable: true
-      },
-      {
-        name: 'address',
-        align: 'left',
-        label: 'Address',
-        field: 'address',
-        sortable: true
-      },
-      {
-        name: 'amount',
-        align: 'left',
-        label: 'Amount',
-        field: 'amount',
-        sortable: true
-      },
-      {
-        name: 'date',
-        align: 'left',
-        label: 'Date',
-        field: 'date',
-        sortable: true
-      },
-      {
-        name: 'wallet',
-        align: 'left',
-        label: 'Account',
-        field: 'wallet',
-        sortable: true
-      }
-    ],
-    pagination: {
-      rowsPerPage: 10
-    },
-    filter: ''
-  },
   paymentTable: {
     columns: [
       {