refactor: extract utxo-list component

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

@@ -74,7 +74,6 @@ async function addressList(path) {
       }
     },
 
-
     methods: {
       satBtc(val, showUnit = true) {
         return satOrBtc(val, showUnit, this['sats_denominated'])

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

@@ -4,7 +4,7 @@ async function history(path) {
     name: 'history',
     template,
 
-    props: ['history', 'mempool_endpoint'],
+    props: ['history', 'mempool_endpoint', 'sats_denominated'],
     data: function () {
       return {
         historyTable: {

lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html

@@ -0,0 +1,153 @@
+<q-card>
+  <q-card-section>
+    <div class="row items-center no-wrap q-mb-md">
+      <!-- <div v-if="payment.show" class="col-3 q-pr-lg">
+        <q-select
+          filled
+          dense
+          emit-value
+          v-model="payment.utxoSelectionMode"
+          :options="payment.utxoSelectionModes"
+          label="Selection Mode"
+          @input="applyUtxoSelectionMode"
+        ></q-select>
+      </div>
+      <div v-if="payment.show" class="col-1 q-pr-lg">
+        <q-btn
+          outline
+          icon="refresh"
+          color="grey"
+          @click="applyUtxoSelectionMode"
+          class="q-ml-sm"
+        ></q-btn>
+      </div> -->
+      <!-- <div v-if="payment.show" class="col-5 q-pr-lg"></div> -->
+      <div class="col-9 q-pr-lg"></div>
+      <div class="col-3 float-right">
+        <q-input
+          borderless
+          dense
+          debounce="300"
+          v-model="utxosTable.filter"
+          placeholder="Search"
+        >
+          <template v-slot:append>
+            <q-icon name="search"></q-icon>
+          </template>
+        </q-input>
+      </div>
+    </div>
+
+    <q-table
+      flat
+      dense
+      :data="utxos"
+      row-key="id"
+      :columns="utxosTable.columns"
+      :pagination.sync="utxosTable.pagination"
+      :filter="utxosTable.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="selected" :props="props">
+            <div>
+              <q-checkbox v-model="props.row.selected"></q-checkbox>
+            </div>
+          </q-td>
+          <q-td key="status" :props="props">
+            <div>
+              <q-badge
+                v-if="props.row.confirmed"
+                @click="props.row.expanded = !props.row.expanded"
+                color="green"
+                class="q-mr-md cursor-pointer"
+              >
+                Confirmed
+              </q-badge>
+              <q-badge
+                v-if="!props.row.confirmed"
+                @click="props.row.expanded = !props.row.expanded"
+                color="orange"
+                class="q-mr-md cursor-pointer"
+              >
+                Pending
+              </q-badge>
+            </div>
+          </q-td>
+          <q-td key="address" :props="props">
+            <div>
+              <a
+                style="color: unset"
+                :href="mempool_endpoint + '/address/' + props.row.address"
+                target="_blank"
+              >
+                {{props.row.address}}</a
+              >
+              <q-badge v-if="props.row.isChange" color="orange" class="q-mr-md">
+                change
+              </q-badge>
+            </div>
+          </q-td>
+
+          <q-td
+            key="amount"
+            :props="props"
+            class="text-green-13 text-weight-bold"
+          >
+            <div>{{satBtc(props.row.amount)}}</div>
+          </q-td>
+
+          <q-td key="date" :props="props"> {{ props.row.date }} </q-td>
+          <q-td key="wallet" :props="props" :class="">
+            <div>{{getWalletName(props.row.wallet)}}</div>
+          </q-td>
+        </q-tr>
+        <q-tr v-show="props.row.expanded" :props="props">
+          <q-td colspan="100%">
+            <div class="row items-center 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>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:bottom-row>
+        <q-tr>
+          <q-td colspan="100%">
+            <div class="row items-center no-wrap q-mb-md">
+              
+              <div class="col-12">
+                <div >
+                  <span class="text-weight-bold">Selected Amount: </span>
+
+                  <q-badge class="text-subtitle2 q-ml-lg" color="green"
+                    >{{satBtc(getTotalSelectedUtxoAmount())}}
+                  </q-badge>
+                </div>
+              </div>
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </q-card-section></q-card
+>

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

@@ -0,0 +1,84 @@
+async function utxoList(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('utxo-list', {
+    name: 'utxo-list',
+    template,
+
+    props: ['utxos', 'accounts', 'sats_denominated', 'mempool_endpoint'],
+
+    data: function () {
+      return {
+        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: ''
+        }
+      }
+    },
+
+    methods: {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, this['sats_denominated'])
+      },
+      getWalletName: function (walletId) {
+        const wallet = (this.accounts || []).find(wl => wl.id === walletId)
+        return wallet ? wallet.title : 'unknown'
+      },
+      getTotalSelectedUtxoAmount: function () {
+        const total = this.utxos
+          .filter(u => u.selected)
+          .reduce((t, a) => t + (a.amount || 0), 0)
+        return total
+      }
+    },
+
+    created: async function () {}
+  })
+}

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: [
       {

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

@@ -73,6 +73,7 @@
               ref="addressList"
               :accounts="walletAccounts"
               :mempool_endpoint="config.data.mempool_endpoint"
+              :sats-denominated="config.data.sats_denominated"
               @update:addresses="handleAddressesUpdated"
               @scan:address="scanAddress"
               @show-address-details="showAddressDetails"
@@ -81,7 +82,11 @@
             </address-list>
           </q-tab-panel>
           <q-tab-panel name="history">
-            <history :history="history" :mempool_endpoint="config.data.mempool_endpoint"></history>
+            <history
+              :history="history"
+              :mempool_endpoint="config.data.mempool_endpoint"
+              :sats-denominated="config.data.sats_denominated"
+            ></history>
           </q-tab-panel>
           <q-tab-panel name="utxos">
             <div class="row items-center no-wrap q-mb-md">
@@ -204,171 +209,11 @@
                   </div>
                 </q-card-section>
               </q-card>
-              <q-card>
+              <utxo-list
-                <q-card-section>
+                :utxos="utxos.data"
-                  <div class="row items-center no-wrap q-mb-md">
+                :mempool_endpoint="config.data.mempool_endpoint"
-                    <div v-if="payment.show" class="col-3 q-pr-lg">
+                :sats-denominated="config.data.sats_denominated"
-                      <q-select
+              ></utxo-list>
-                        filled
-                        dense
-                        emit-value
-                        v-model="payment.utxoSelectionMode"
-                        :options="payment.utxoSelectionModes"
-                        label="Selection Mode"
-                        @input="applyUtxoSelectionMode"
-                      ></q-select>
-                    </div>
-                    <div v-if="payment.show" class="col-1 q-pr-lg">
-                      <q-btn
-                        outline
-                        icon="refresh"
-                        color="grey"
-                        @click="applyUtxoSelectionMode"
-                        class="q-ml-sm"
-                      ></q-btn>
-                    </div>
-                    <div v-if="payment.show" class="col-5 q-pr-lg"></div>
-                    <div v-if="!payment.show" class="col-9 q-pr-lg"></div>
-                    <div class="col-3 float-right">
-                      <q-input
-                        borderless
-                        dense
-                        debounce="300"
-                        v-model="utxosTable.filter"
-                        placeholder="Search"
-                      >
-                        <template v-slot:append>
-                          <q-icon name="search"></q-icon>
-                        </template>
-                      </q-input>
-                    </div>
-                  </div>
-
-                  <q-table
-                    flat
-                    dense
-                    :data="utxos.data"
-                    row-key="id"
-                    :columns="utxosTable.columns"
-                    :pagination.sync="utxosTable.pagination"
-                    :filter="utxosTable.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="selected" :props="props">
-                          <div>
-                            <q-checkbox
-                              v-model="props.row.selected"
-                            ></q-checkbox>
-                          </div>
-                        </q-td>
-                        <q-td key="status" :props="props">
-                          <div>
-                            <q-badge
-                              v-if="props.row.confirmed"
-                              @click="props.row.expanded = !props.row.expanded"
-                              color="green"
-                              class="q-mr-md cursor-pointer"
-                            >
-                              Confirmed
-                            </q-badge>
-                            <q-badge
-                              v-if="!props.row.confirmed"
-                              @click="props.row.expanded = !props.row.expanded"
-                              color="orange"
-                              class="q-mr-md cursor-pointer"
-                            >
-                              Pending
-                            </q-badge>
-                          </div>
-                        </q-td>
-                        <q-td key="address" :props="props">
-                          <div>
-                            <a
-                              style="color: unset"
-                              :href="config.data.mempool_endpoint + '/address/' + props.row.address"
-                              target="_blank"
-                            >
-                              {{props.row.address}}</a
-                            >
-                            <q-badge
-                              v-if="props.row.isChange"
-                              color="orange"
-                              class="q-mr-md"
-                            >
-                              change
-                            </q-badge>
-                          </div>
-                        </q-td>
-
-                        <q-td
-                          key="amount"
-                          :props="props"
-                          class="text-green-13 text-weight-bold"
-                        >
-                          <div>{{satBtc(props.row.amount)}}</div>
-                        </q-td>
-
-                        <q-td key="date" :props="props">
-                          {{ props.row.date }}
-                        </q-td>
-                        <q-td key="wallet" :props="props" :class="">
-                          <div>{{getWalletName(props.row.wallet)}}</div>
-                        </q-td>
-                      </q-tr>
-                      <q-tr v-show="props.row.expanded" :props="props">
-                        <q-td colspan="100%">
-                          <div class="row items-center 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>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                    <template v-slot:bottom-row>
-                      <q-tr>
-                        <q-td colspan="100%">
-                          <div class="row items-center no-wrap q-mb-md">
-                            <div class="col-9 q-pr-lg"></div>
-                            <div class="col-3">
-                              <div class="float-right">
-                                <span class="text-weight-bold"
-                                  >Slected Amount:
-                                </span>
-
-                                <q-badge
-                                  class="text-subtitle2 q-ml-lg"
-                                  color="green"
-                                  >{{satBtc(getTotalSelectedUtxoAmount())}}
-                                </q-badge>
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </q-table>
-                </q-card-section></q-card
-              >
               <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
                 <div class="col">
                   <q-toggle
@@ -1133,5 +978,6 @@
 <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='components/utxo-list/utxo-list.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}