From 799fb996615384a30468bd774f7ee590c69d2060 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Mon, 25 Jul 2022 17:37:06 +0300
Subject: [PATCH] feat: UI/UX improvements

---
 .../components/address-list/address-list.js   |   2 +-
 .../static/components/payment/payment.html    |   0
 .../static/components/payment/payment.js      |  21 +
 .../components/utxo-list/utxo-list.html       |  23 +-
 .../static/components/utxo-list/utxo-list.js  |  59 +-
 .../extensions/watchonly/static/js/index.js   |  41 +-
 .../extensions/watchonly/static/js/tables.js  |   9 +-
 .../watchonly/templates/watchonly/index.html  | 988 +++++++++---------
 8 files changed, 601 insertions(+), 542 deletions(-)
 create mode 100644 lnbits/extensions/watchonly/static/components/payment/payment.html
 create mode 100644 lnbits/extensions/watchonly/static/components/payment/payment.js

diff --git a/lnbits/extensions/watchonly/static/components/address-list/address-list.js b/lnbits/extensions/watchonly/static/components/address-list/address-list.js
index 6a77422c..7d6664c8 100644
--- a/lnbits/extensions/watchonly/static/components/address-list/address-list.js
+++ b/lnbits/extensions/watchonly/static/components/address-list/address-list.js
@@ -4,7 +4,7 @@ async function addressList(path) {
     name: 'address-list',
     template,
 
-    props: ['accounts', 'mempool_endpoint', 'inkey'],
+    props: ['accounts', 'mempool_endpoint', 'inkey', 'sats_denominated'],
     watch: {
       immediate: true,
       accounts(newVal, oldVal) {
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.html b/lnbits/extensions/watchonly/static/components/payment/payment.html
new file mode 100644
index 00000000..e69de29b
diff --git a/lnbits/extensions/watchonly/static/components/payment/payment.js b/lnbits/extensions/watchonly/static/components/payment/payment.js
new file mode 100644
index 00000000..809f57a3
--- /dev/null
+++ b/lnbits/extensions/watchonly/static/components/payment/payment.js
@@ -0,0 +1,21 @@
+async function payment(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('payment', {
+    name: 'payment',
+    template,
+
+    props: ['mempool_endpoint', 'sats_denominated'],
+
+    data: function () {
+      return {}
+    },
+
+    methods: {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, this['sats_denominated'])
+      }
+    },
+
+    created: async function () {}
+  })
+}
diff --git a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html
index 97b889e3..d5a9e353 100644
--- a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html
+++ b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.html
@@ -1,18 +1,18 @@
 <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">
+      <div v-if="selectable" class="col-3 q-pr-lg">
         <q-select
           filled
           dense
           emit-value
-          v-model="payment.utxoSelectionMode"
-          :options="payment.utxoSelectionModes"
+          v-model="utxoSelectionMode"
+          :options="utxoSelectionModes"
           label="Selection Mode"
           @input="applyUtxoSelectionMode"
         ></q-select>
       </div>
-      <div v-if="payment.show" class="col-1 q-pr-lg">
+      <div v-if="selectable" class="col-1 q-pr-lg">
         <q-btn
           outline
           icon="refresh"
@@ -20,9 +20,9 @@
           @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>
+      <div v-if="selectable" class="col-5 q-pr-lg"></div>
+      <div v-if="!selectable" class="col-9 q-pr-lg"></div>
       <div class="col-3 float-right">
         <q-input
           borderless
@@ -43,7 +43,7 @@
       dense
       :data="utxos"
       row-key="id"
-      :columns="utxosTable.columns"
+      :columns="columns"
       :pagination.sync="utxosTable.pagination"
       :filter="utxosTable.filter"
     >
@@ -60,7 +60,7 @@
             />
           </q-td>
 
-          <q-td key="selected" :props="props">
+          <q-td v-if="selectable" key="selected" :props="props">
             <div>
               <q-checkbox v-model="props.row.selected"></q-checkbox>
             </div>
@@ -133,10 +133,9 @@
       <template v-slot:bottom-row>
         <q-tr>
           <q-td colspan="100%">
-            <div class="row items-center no-wrap q-mb-md">
-              
+            <div class="row items-center no-wrap q-mb-md q-pt-lg">
               <div class="col-12">
-                <div >
+                <div>
                   <span class="text-weight-bold">Selected Amount: </span>
 
                   <q-badge class="text-subtitle2 q-ml-lg" color="green"
diff --git a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js
index 40f1016a..108f6414 100644
--- a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js
+++ b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js
@@ -4,7 +4,14 @@ async function utxoList(path) {
     name: 'utxo-list',
     template,
 
-    props: ['utxos', 'accounts', 'sats_denominated', 'mempool_endpoint'],
+    props: [
+      'utxos',
+      'accounts',
+      'selectable',
+      'payed-amount',
+      'sats_denominated',
+      'mempool_endpoint'
+    ],
 
     data: function () {
       return {
@@ -18,7 +25,8 @@ async function utxoList(path) {
             {
               name: 'selected',
               align: 'left',
-              label: ''
+              label: '',
+              selectable: true
             },
             {
               name: 'status',
@@ -59,7 +67,21 @@ async function utxoList(path) {
             rowsPerPage: 10
           },
           filter: ''
-        }
+        },
+        utxoSelectionModes: [
+          'Manual',
+          'Random',
+          'Select All',
+          'Smaller Inputs First',
+          'Larger Inputs First'
+        ],
+        utxoSelectionMode: 'Random'
+      }
+    },
+
+    computed: {
+      columns: function() {
+        return this.utxosTable.columns.filter(c => c.selectable ? this.selectable : true)
       }
     },
 
@@ -76,6 +98,37 @@ async function utxoList(path) {
           .filter(u => u.selected)
           .reduce((t, a) => t + (a.amount || 0), 0)
         return total
+      },
+      applyUtxoSelectionMode: function () {
+        const payedAmount = this['payed-amount']
+        const mode = this.payment.utxoSelectionMode
+        this.utxos.data.forEach(u => (u.selected = false))
+        const isManual = mode === 'Manual'
+        if (isManual || !payedAmount) return
+
+        const isSelectAll = mode === 'Select All'
+        if (isSelectAll || payedAmount >= this.utxos.total) {
+          this.utxos.data.forEach(u => (u.selected = true))
+          return
+        }
+        const isSmallerFirst = mode === 'Smaller Inputs First'
+        const isLargerFirst = mode === 'Larger Inputs First'
+
+        let selectedUtxos = this.utxos.data.slice()
+        if (isSmallerFirst || isLargerFirst) {
+          const sortFn = isSmallerFirst
+            ? (a, b) => a.amount - b.amount
+            : (a, b) => b.amount - a.amount
+          selectedUtxos.sort(sortFn)
+        } else {
+          // default to random order
+          selectedUtxos = _.shuffle(selectedUtxos)
+        }
+        selectedUtxos.reduce((total, utxo) => {
+          utxo.selected = total < payedAmount
+          total += utxo.amount
+          return total
+        }, 0)
       }
     },
 
diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js
index 62442665..41134a58 100644
--- a/lnbits/extensions/watchonly/static/js/index.js
+++ b/lnbits/extensions/watchonly/static/js/index.js
@@ -6,6 +6,7 @@ const watchOnly = async () => {
   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')
+  await payment('static/components/payment/payment.html')
 
   Vue.filter('reverse', function (value) {
     // slice to make a copy of array, then reverse the copy
@@ -29,6 +30,7 @@ const watchOnly = async () => {
         currentAddress: null,
 
         tab: 'addresses',
+        paymentTab: 'destination',
 
         config: {
           data: {
@@ -79,7 +81,8 @@ const watchOnly = async () => {
         history: [],
 
         showAddress: false,
-        addressNote: ''
+        addressNote: '',
+        showPayment: false
       }
     },
 
@@ -279,8 +282,9 @@ const watchOnly = async () => {
           ) || {}
       },
       goToPaymentView: async function () {
-        this.payment.show = true
-        this.tab = 'utxos'
+        // this.payment.show = true
+        this.showPayment = true
+        // this.tab = 'utxos'
         await this.initPaymentData()
       },
       sendMaxToAddress: function (paymentAddress = {}) {
@@ -880,37 +884,6 @@ const watchOnly = async () => {
           .reduce((t, a) => t + (a.amount || 0), 0)
         return total
       },
-      applyUtxoSelectionMode: function () {
-        const payedAmount = this.getTotalPaymentAmount()
-        const mode = this.payment.utxoSelectionMode
-        this.utxos.data.forEach(u => (u.selected = false))
-        const isManual = mode === 'Manual'
-        if (isManual || !payedAmount) return
-
-        const isSelectAll = mode === 'Select All'
-        if (isSelectAll || payedAmount >= this.utxos.total) {
-          this.utxos.data.forEach(u => (u.selected = true))
-          return
-        }
-        const isSmallerFirst = mode === 'Smaller Inputs First'
-        const isLargerFirst = mode === 'Larger Inputs First'
-
-        let selectedUtxos = this.utxos.data.slice()
-        if (isSmallerFirst || isLargerFirst) {
-          const sortFn = isSmallerFirst
-            ? (a, b) => a.amount - b.amount
-            : (a, b) => b.amount - a.amount
-          selectedUtxos.sort(sortFn)
-        } else {
-          // default to random order
-          selectedUtxos = _.shuffle(selectedUtxos)
-        }
-        selectedUtxos.reduce((total, utxo) => {
-          utxo.selected = total < payedAmount
-          total += utxo.amount
-          return total
-        }, 0)
-      },
 
       //################### MEMPOOL API ###################
       getAddressTxsDelayed: async function (addrData) {
diff --git a/lnbits/extensions/watchonly/static/js/tables.js b/lnbits/extensions/watchonly/static/js/tables.js
index 01a98cdb..7b253b07 100644
--- a/lnbits/extensions/watchonly/static/js/tables.js
+++ b/lnbits/extensions/watchonly/static/js/tables.js
@@ -64,14 +64,7 @@ const tableData = {
     signedTx: null,
     signedTxHex: null,
     sentTxId: null,
-    utxoSelectionModes: [
-      'Manual',
-      'Random',
-      'Select All',
-      'Smaller Inputs First',
-      'Larger Inputs First'
-    ],
-    utxoSelectionMode: 'Manual',
+
     signModes: [
       {
         label: 'Serial Port Device',
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index a35aeedc..4f2e8ad9 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -40,13 +40,21 @@
         </div>
         <div class="col-3 q-pr-md">
           <q-btn
+            v-if="!showPayment"
             unelevated
             color="secondary"
             class="btn-full"
             @click="goToPaymentView"
-            :disabled="scan.scanning == true"
             >New Payment</q-btn
           >
+          <q-btn
+            v-if="showPayment"
+            outline
+            color="gray"
+            class="btn-full"
+            @click="showPayment = false"
+            >Discard Payment</q-btn
+          >
         </div>
       </div>
 
@@ -61,7 +69,7 @@
     </q-card>
 
     <q-card>
-      <q-card-section>
+      <q-card-section v-show="!showPayment">
         <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
           <q-tab name="addresses" label="Addresses"></q-tab>
           <q-tab name="history" label="History"></q-tab>
@@ -89,23 +97,418 @@
             ></history>
           </q-tab-panel>
           <q-tab-panel name="utxos">
-            <div class="row items-center no-wrap q-mb-md">
+            <utxo-list
+              :utxos="utxos.data"
+              :mempool_endpoint="config.data.mempool_endpoint"
+              :sats-denominated="config.data.sats_denominated"
+            ></utxo-list>
+            <!-- <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
               <div class="col">
                 <q-toggle
-                  label="New Payment"
+                  label="Show Advanced"
                   color="secodary"
-                  v-model="payment.show"
-                  @input="initPaymentData()"
+                  v-model="payment.showAdvanced"
                 ></q-toggle>
               </div>
-              <div class="col-auto"></div>
-            </div>
+            </div> -->
 
-            <q-form @submit="createPsbt" class="q-gutter-md">
-              <q-card v-if="payment.show">
+            <q-card v-if="payment.show"
+              ><q-card-section>
+                <div class="row items-center no-wrap q-mb-md">
+                  <div class="col-3 q-pr-lg">
+                    <q-btn
+                      unelevated
+                      color="secondary"
+                      type="submit"
+                      class="btn-full"
+                      >Check Tx</q-btn
+                    >
+                  </div>
+                  <div class="col-9">
+                    <q-input v-model="payment.psbtBase64" filled />
+                  </div>
+                </div>
+                <q-separator
+                  v-if="payment.psbtBase64"
+                  class="q-mb-md"
+                ></q-separator>
+                <div
+                  v-if="payment.psbtBase64"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg">
+                    <q-btn-dropdown
+                      class="btn-full"
+                      color="secondary"
+                      label="Sign With"
+                    >
+                      <q-list>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="payment.signMode = 'serial-port'"
+                        >
+                          <q-item-section>
+                            <q-item-label>Serial Port Device</q-item-label>
+                            <q-item-label caption
+                              >Connect via Serial Port and sign.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+
+                        <q-item clickable disabled v-close-popup>
+                          <q-item-section>
+                            <q-item-label>Animated QR Code</q-item-label>
+                            <q-item-label caption
+                              >Share and Scan using animated QR
+                              codes.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                  <div class="col-9">
+                    <q-option-group
+                      v-model="payment.signMode"
+                      :options="payment.signModes"
+                      color="primary"
+                      inline
+                    ></q-option-group>
+                  </div>
+                </div>
+                <q-separator
+                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
+                  class="q-mb-md"
+                ></q-separator>
+                <div
+                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
+                  class="row items-center no-wrap q-mb-md q-mt-lg"
+                >
+                  <div class="col-3 q-pr-lg">
+                    <q-btn
+                      v-if="!serial.selectedPort"
+                      @click="openSerialPort()"
+                      unelevated
+                      color="secondary"
+                      class="btn-full"
+                      >Connect</q-btn
+                    >
+                    <q-btn
+                      v-if="serial.selectedPort"
+                      @click="closeSerialPort()"
+                      outline
+                      color="gray"
+                      class="btn-full"
+                      >Disconnect</q-btn
+                    >
+                  </div>
+                  <div class="col-3">
+                    <q-toggle
+                      label="Advanced"
+                      disabled
+                      color="secodary float-left"
+                      v-model="serial.showAdvancedConfig"
+                    ></q-toggle>
+                  </div>
+                  <div class="col-6"></div>
+                </div>
+                <q-separator
+                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
+                  class="q-mb-md"
+                ></q-separator>
+                <div
+                  v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
+                  class="row items-center no-wrap q-mb-md q-mt-lg"
+                >
+                  <div class="col-3 q-pr-lg">
+                    <q-btn-dropdown
+                      split
+                      class="btn-full"
+                      color="secondary"
+                      :label="hww.authenticated ? 'Sign Tx' : 'Login'"
+                      @click="hwwExecuteDefaultCommand()"
+                    >
+                      <q-list>
+                        <q-item
+                          v-if="!hww.authenticated"
+                          clickable
+                          v-close-popup
+                          @click="hwwShowPasswordDialog()"
+                        >
+                          <q-item-section>
+                            <q-item-label>Login</q-item-label>
+                            <q-item-label caption
+                              >Enter password for Hardware Wallet.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="hww.authenticated"
+                          clickable
+                          v-close-popup
+                          @click="hwwLogout()"
+                        >
+                          <q-item-section>
+                            <q-item-label>Logout</q-item-label>
+                            <q-item-label caption
+                              >Clear password for HWW.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                        <q-item
+                          :disabled="!hww.authenticated"
+                          clickable
+                          v-close-popup
+                          @click="hwwSendPsbt()"
+                        >
+                          <q-item-section>
+                            <q-item-label>Sign</q-item-label>
+                            <q-item-label caption
+                              >Sign transaction on Hardware Wallet</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="hwwShowRestoreDialog()"
+                        >
+                          <q-item-section>
+                            <q-item-label>Restore</q-item-label>
+                            <q-item-label caption
+                              >Restore wallet from existing word
+                              list.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                        <q-item
+                          :disabled="!hww.authenticated"
+                          clickable
+                          v-close-popup
+                          @click="hwwShowSeed()"
+                        >
+                          <q-item-section>
+                            <q-item-label>Show Seed</q-item-label>
+                            <q-item-label caption
+                              >Show seed on the Hardware Wallet
+                              display.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                        <q-item
+                          @click="hwwShowWipeDialog()"
+                          clickable
+                          v-close-popup
+                        >
+                          <q-item-section>
+                            <q-item-label>Wipe</q-item-label>
+                            <q-item-label caption
+                              >Clean-up the wallet. New random
+                              seed.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                        <q-item @click="hwwHelp()" clickable v-close-popup>
+                          <q-item-section>
+                            <q-item-label>Help</q-item-label>
+                            <q-item-label caption
+                              >View available comands.</q-item-label
+                            >
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                  <div class="col-3">
+                    <q-toggle
+                      label="Show Console"
+                      color="secodary float-left"
+                      v-model="hww.showConsole"
+                    ></q-toggle>
+                  </div>
+                  <div class="col-3">
+                    <q-spinner
+                      v-if="hww.sendingPsbt == true"
+                      color="primary"
+                      size="2.55em"
+                    ></q-spinner>
+                  </div>
+                  <div class="col-3"></div>
+                </div>
+                <div
+                  v-if="hww.showConsole"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg"></div>
+                  <div class="col-9">
+                    <q-input
+                      for="watchonly-serial-port-data-input"
+                      v-model="serial.receivedData"
+                      filled
+                      type="textarea"
+                    />
+                  </div>
+                </div>
+                <q-separator
+                  v-if="hww.authenticated"
+                  class="q-mb-md"
+                ></q-separator>
+                <div
+                  v-if="hww.authenticated && hww.psbtSent"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg">
+                    <q-btn
+                      @click="hwwSignPsbt()"
+                      unelevated
+                      color="green"
+                      class="btn-full"
+                      >Confirm
+                      <q-spinner
+                        v-if="hww.signingPsbt == true"
+                        color="primary"
+                      ></q-spinner>
+                    </q-btn>
+                  </div>
+                  <div class="col-3">
+                    <q-toggle
+                      v-if="payment.psbtBase64Signed"
+                      label="Show Signed Psbt"
+                      color="secodary float-left"
+                      v-model="hww.showSignedPsbt"
+                    ></q-toggle>
+                  </div>
+                  <div class="col-6">
+                    <q-badge
+                      color="yellow"
+                      text-color="black"
+                      multi-line
+                      class="text-subtitle2"
+                      >Check transaction data on the Hardware Wallet
+                      display</q-badge
+                    >
+                  </div>
+                </div>
+                <div
+                  v-if="hww.showSignedPsbt"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg"></div>
+
+                  <div class="col-9">
+                    <q-input
+                      v-model="payment.psbtBase64Signed"
+                      filled
+                      readonly
+                    />
+                  </div>
+                </div>
+                <q-separator
+                  v-if="payment.signedTx"
+                  class="q-mb-md"
+                ></q-separator>
+                <div
+                  v-if="payment.psbtBase64Signed"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg">
+                    <q-btn
+                      v-if="payment.signedTx"
+                      @click="broadcastTransaction()"
+                      unelevated
+                      color="secondary"
+                      class="btn-full"
+                      >Send Payment</q-btn
+                    >
+                  </div>
+                  <div class="col-9">
+                    <span class="text-subtitle2">Transaction Details</span>
+                    <q-separator></q-separator>
+                  </div>
+                </div>
+                <div
+                  v-if="payment.signedTx"
+                  class="row items-center no-wrap q-mb-md"
+                >
+                  <div class="col-3 q-pr-lg"></div>
+                  <div class="col-9">
+                    <div class="row items-center no-wrap q-mb-sm">
+                      <div class="col-3 q-pr-lg">Version</div>
+                      <div class="col-9">{{payment.signedTx.version}}</div>
+                    </div>
+                    <div class="row items-center no-wrap q-mb-sm">
+                      <div class="col-3 q-pr-lg">Locktime</div>
+                      <div class="col-9">{{payment.signedTx.locktime}}</div>
+                    </div>
+                    <div class="row items-center no-wrap q-mb-sm">
+                      <div class="col-3 q-pr-lg">Fee</div>
+                      <div class="col-9">
+                        <q-badge color="orange"
+                          >{{satBtc(payment.signedTx.fee)}}
+                        </q-badge>
+                      </div>
+                    </div>
+                    <q-separator class="q-mb-lg"></q-separator>
+                    <span class="text-subtitle2">Outputs</span>
+                    <q-separator class="q-mb-lg"></q-separator>
+                    <div
+                      v-for="out in payment.signedTx.outputs"
+                      class="row items-center no-wrap q-mb-sm"
+                    >
+                      <div class="col-3 q-pr-lg">
+                        <q-badge color="orange">{{satBtc(out.amount)}}</q-badge>
+                      </div>
+
+                      <div class="col-9">
+                        <q-badge outline color="blue">{{out.address}}</q-badge>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <q-separator
+                  v-if="payment.sentTxId"
+                  class="q-mb-lg"
+                ></q-separator>
+                <div
+                  v-if="payment.sentTxId"
+                  class="row items-center no-wrap q-mb-sm"
+                >
+                  <div class="col-3">Transaction Id</div>
+                  <div class="col-9">
+                    <a
+                      style="color: unset"
+                      :href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
+                      target="_blank"
+                    >
+                      {{payment.sentTxId}}</a
+                    >
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card-section>
+      <q-card-section v-show="showPayment">
+        <q-form @submit="createPsbt" class="q-gutter-md">
+          <q-tabs
+            v-model="paymentTab"
+            no-caps
+            class="bg-dark text-white shadow-2"
+          >
+            <q-tab name="destination" label="Send To"></q-tab>
+            <q-tab name="fees" label="Fees"></q-tab>
+            <q-tab name="coinControl" label="Coin Control"></q-tab>
+          </q-tabs>
+          <q-tab-panels v-model="paymentTab">
+            <q-tab-panel name="destination">
+              <q-card>
                 <q-card-section>
                   <div class="row items-center no-wrap q-mb-md">
-                    <div class="col">
+                    <div class="col-12">
                       <q-table
                         flat
                         dense
@@ -193,6 +596,53 @@
                       </q-table>
                     </div>
                   </div>
+                  <!-- <div class="row items-center no-wrap q-mb-md">
+                    <div class="col-12">
+                      <q-table
+                        :columns="summaryTable.columns"
+                        :data="summary.data"
+                        hide-bottom
+                      >
+                        <template v-slot:body="props">
+                          <q-tr :props="props">
+                            <q-td key="totalInputs" :props="props">
+                              <q-badge class="text-subtitle2" color="green">
+                                {{satBtc(getTotalSelectedUtxoAmount())}}
+                              </q-badge>
+                            </q-td>
+                            <q-td key="totalOutputs" :props="props">
+                              <q-badge class="text-subtitle2" color="blue">
+                                {{satBtc(getTotalPaymentAmount())}}
+                              </q-badge>
+                            </q-td>
+                            <q-td key="fees" :props="props">
+                              <q-badge class="text-subtitle2" color="orange">
+                                {{satBtc(computeFee())}}
+                              </q-badge>
+                            </q-td>
+                            <q-td key="change" :props="props">
+                              <q-badge
+                                v-if="payment.changeAmount >= 0"
+                                class="text-subtitle2"
+                                color="green"
+                              >
+                                {{payment.changeAmount ?
+                                satBtc(payment.changeAmount): 'no change'}}
+                              </q-badge>
+                              <q-badge
+                                v-if="payment.changeAmount > 0 && payment.changeAmount < DUST_LIMIT"
+                                color="red"
+                              >
+                                Below dust limit. Will be used as feee.
+                              </q-badge>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </q-table>
+                    </div>
+                  </div> -->
+
+                  <!--               
                   <div
                     v-if="payment.changeAmount < 0"
                     class="row items-center no-wrap q-mb-md"
@@ -207,50 +657,13 @@
                       </q-badge>
                     </div>
                   </div>
+    -->
                 </q-card-section>
               </q-card>
-              <utxo-list
-                :utxos="utxos.data"
-                :mempool_endpoint="config.data.mempool_endpoint"
-                :sats-denominated="config.data.sats_denominated"
-              ></utxo-list>
-              <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
-                <div class="col">
-                  <q-toggle
-                    label="Show Advanced"
-                    color="secodary"
-                    v-model="payment.showAdvanced"
-                  ></q-toggle>
-                </div>
-              </div>
-              <q-card v-show="payment.show && payment.showAdvanced"
+            </q-tab-panel>
+            <q-tab-panel name="fees">
+              <q-card
                 ><q-card-section>
-                  <div class="row items-center no-wrap q-mb-md">
-                    <div class="col-2 q-pr-lg">Change Account:</div>
-                    <div class="col-3 q-pr-lg">
-                      <q-select
-                        filled
-                        dense
-                        emit-value
-                        v-model="payment.changeWallet"
-                        :options="walletAccounts"
-                        @input="selectChangeAddress"
-                        :rules="[val => !!val || 'Field is required']"
-                        label="Wallet Account"
-                      ></q-select>
-                    </div>
-                    <div class="col-7">
-                      <q-input
-                        filled
-                        dense
-                        readonly
-                        v-model.trim="payment.changeAddress.address"
-                        :rules="[val => !!val || 'Field is required']"
-                        type="text"
-                        label="Change Address"
-                      ></q-input>
-                    </div>
-                  </div>
                   <div class="row items-center no-wrap q-mb-md">
                     <div class="col-2 q-pr-lg">Fee Rate:</div>
                     <div class="col-3 q-pr-lg">
@@ -318,438 +731,44 @@
                   </div>
                 </q-card-section></q-card
               >
-              <q-card v-if="payment.show"
-                ><q-card-section>
-                  <div class="row items-center no-wrap q-mb-md">
-                    <div class="col">
-                      <q-table
-                        :columns="summaryTable.columns"
-                        :data="summary.data"
-                        hide-bottom
-                      >
-                        <template v-slot:body="props">
-                          <q-tr :props="props">
-                            <q-td key="totalInputs" :props="props">
-                              <q-badge class="text-subtitle2" color="green">
-                                {{satBtc(getTotalSelectedUtxoAmount())}}
-                              </q-badge>
-                            </q-td>
-                            <q-td key="totalOutputs" :props="props">
-                              <q-badge class="text-subtitle2" color="blue">
-                                {{satBtc(getTotalPaymentAmount())}}
-                              </q-badge>
-                            </q-td>
-                            <q-td key="fees" :props="props">
-                              <q-badge class="text-subtitle2" color="orange">
-                                {{satBtc(computeFee())}}
-                              </q-badge>
-                            </q-td>
-                            <q-td key="change" :props="props">
-                              <q-badge
-                                v-if="payment.changeAmount >= 0"
-                                class="text-subtitle2"
-                                color="green"
-                              >
-                                {{payment.changeAmount ?
-                                satBtc(payment.changeAmount): 'no change'}}
-                              </q-badge>
-                              <q-badge
-                                v-if="payment.changeAmount > 0 && payment.changeAmount < DUST_LIMIT"
-                                color="red"
-                              >
-                                Below dust limit. Will be used as feee.
-                              </q-badge>
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </q-table>
-                    </div>
-                  </div>
-
-                  <div class="row items-center no-wrap q-mb-md">
-                    <div class="col-3 q-pr-lg">
-                      <q-btn
-                        unelevated
-                        color="secondary"
-                        type="submit"
-                        class="btn-full"
-                        >Check Tx</q-btn
-                      >
-                    </div>
-                    <div class="col-9">
-                      <q-input v-model="payment.psbtBase64" filled />
-                    </div>
-                  </div>
-                  <q-separator
-                    v-if="payment.psbtBase64"
-                    class="q-mb-md"
-                  ></q-separator>
-                  <div
-                    v-if="payment.psbtBase64"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn-dropdown
-                        class="btn-full"
-                        color="secondary"
-                        label="Sign With"
-                      >
-                        <q-list>
-                          <q-item
-                            clickable
-                            v-close-popup
-                            @click="payment.signMode = 'serial-port'"
-                          >
-                            <q-item-section>
-                              <q-item-label>Serial Port Device</q-item-label>
-                              <q-item-label caption
-                                >Connect via Serial Port and sign.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-
-                          <q-item clickable disabled v-close-popup>
-                            <q-item-section>
-                              <q-item-label>Animated QR Code</q-item-label>
-                              <q-item-label caption
-                                >Share and Scan using animated QR
-                                codes.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown>
-                    </div>
-                    <div class="col-9">
-                      <q-option-group
-                        v-model="payment.signMode"
-                        :options="payment.signModes"
-                        color="primary"
-                        inline
-                      ></q-option-group>
-                    </div>
-                  </div>
-                  <q-separator
-                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                    class="q-mb-md"
-                  ></q-separator>
-                  <div
-                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                    class="row items-center no-wrap q-mb-md q-mt-lg"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn
-                        v-if="!serial.selectedPort"
-                        @click="openSerialPort()"
-                        unelevated
-                        color="secondary"
-                        class="btn-full"
-                        >Connect</q-btn
-                      >
-                      <q-btn
-                        v-if="serial.selectedPort"
-                        @click="closeSerialPort()"
-                        outline
-                        color="gray"
-                        class="btn-full"
-                        >Disconnect</q-btn
-                      >
-                    </div>
-                    <div class="col-3">
-                      <q-toggle
-                        label="Advanced"
-                        disabled
-                        color="secodary float-left"
-                        v-model="serial.showAdvancedConfig"
-                      ></q-toggle>
-                    </div>
-                    <div class="col-6"></div>
-                  </div>
-                  <q-separator
-                    v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
-                    class="q-mb-md"
-                  ></q-separator>
-                  <div
-                    v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
-                    class="row items-center no-wrap q-mb-md q-mt-lg"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn-dropdown
-                        split
-                        class="btn-full"
-                        color="secondary"
-                        :label="hww.authenticated ? 'Sign Tx' : 'Login'"
-                        @click="hwwExecuteDefaultCommand()"
-                      >
-                        <q-list>
-                          <q-item
-                            v-if="!hww.authenticated"
-                            clickable
-                            v-close-popup
-                            @click="hwwShowPasswordDialog()"
-                          >
-                            <q-item-section>
-                              <q-item-label>Login</q-item-label>
-                              <q-item-label caption
-                                >Enter password for Hardware
-                                Wallet.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-
-                          <q-item
-                            v-if="hww.authenticated"
-                            clickable
-                            v-close-popup
-                            @click="hwwLogout()"
-                          >
-                            <q-item-section>
-                              <q-item-label>Logout</q-item-label>
-                              <q-item-label caption
-                                >Clear password for HWW.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                          <q-item
-                            :disabled="!hww.authenticated"
-                            clickable
-                            v-close-popup
-                            @click="hwwSendPsbt()"
-                          >
-                            <q-item-section>
-                              <q-item-label>Sign</q-item-label>
-                              <q-item-label caption
-                                >Sign transaction on Hardware
-                                Wallet</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                          <q-item
-                            clickable
-                            v-close-popup
-                            @click="hwwShowRestoreDialog()"
-                          >
-                            <q-item-section>
-                              <q-item-label>Restore</q-item-label>
-                              <q-item-label caption
-                                >Restore wallet from existing word
-                                list.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                          <q-item
-                            :disabled="!hww.authenticated"
-                            clickable
-                            v-close-popup
-                            @click="hwwShowSeed()"
-                          >
-                            <q-item-section>
-                              <q-item-label>Show Seed</q-item-label>
-                              <q-item-label caption
-                                >Show seed on the Hardware Wallet
-                                display.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                          <q-item
-                            @click="hwwShowWipeDialog()"
-                            clickable
-                            v-close-popup
-                          >
-                            <q-item-section>
-                              <q-item-label>Wipe</q-item-label>
-                              <q-item-label caption
-                                >Clean-up the wallet. New random
-                                seed.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                          <q-item @click="hwwHelp()" clickable v-close-popup>
-                            <q-item-section>
-                              <q-item-label>Help</q-item-label>
-                              <q-item-label caption
-                                >View available comands.</q-item-label
-                              >
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown>
-                    </div>
-                    <div class="col-3">
-                      <q-toggle
-                        label="Show Console"
-                        color="secodary float-left"
-                        v-model="hww.showConsole"
-                      ></q-toggle>
-                    </div>
-                    <div class="col-3">
-                      <q-spinner
-                        v-if="hww.sendingPsbt == true"
-                        color="primary"
-                        size="2.55em"
-                      ></q-spinner>
-                    </div>
-                    <div class="col-3"></div>
-                  </div>
-                  <div
-                    v-if="hww.showConsole"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg"></div>
-                    <div class="col-9">
-                      <q-input
-                        for="watchonly-serial-port-data-input"
-                        v-model="serial.receivedData"
-                        filled
-                        type="textarea"
-                      />
-                    </div>
-                  </div>
-                  <q-separator
-                    v-if="hww.authenticated"
-                    class="q-mb-md"
-                  ></q-separator>
-                  <div
-                    v-if="hww.authenticated && hww.psbtSent"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn
-                        @click="hwwSignPsbt()"
-                        unelevated
-                        color="green"
-                        class="btn-full"
-                        >Confirm
-                        <q-spinner
-                          v-if="hww.signingPsbt == true"
-                          color="primary"
-                        ></q-spinner>
-                      </q-btn>
-                    </div>
-                    <div class="col-3">
-                      <q-toggle
-                        v-if="payment.psbtBase64Signed"
-                        label="Show Signed Psbt"
-                        color="secodary float-left"
-                        v-model="hww.showSignedPsbt"
-                      ></q-toggle>
-                    </div>
-                    <div class="col-6">
-                      <q-badge
-                        color="yellow"
-                        text-color="black"
-                        multi-line
-                        class="text-subtitle2"
-                        >Check transaction data on the Hardware Wallet
-                        display</q-badge
-                      >
-                    </div>
-                  </div>
-                  <div
-                    v-if="hww.showSignedPsbt"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg"></div>
-
-                    <div class="col-9">
-                      <q-input
-                        v-model="payment.psbtBase64Signed"
-                        filled
-                        readonly
-                      />
-                    </div>
-                  </div>
-                  <q-separator
-                    v-if="payment.signedTx"
-                    class="q-mb-md"
-                  ></q-separator>
-                  <div
-                    v-if="payment.psbtBase64Signed"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg">
-                      <q-btn
-                        v-if="payment.signedTx"
-                        @click="broadcastTransaction()"
-                        unelevated
-                        color="secondary"
-                        class="btn-full"
-                        >Send Payment</q-btn
-                      >
-                    </div>
-                    <div class="col-9">
-                      <span class="text-subtitle2">Transaction Details</span>
-                      <q-separator></q-separator>
-                    </div>
-                  </div>
-                  <div
-                    v-if="payment.signedTx"
-                    class="row items-center no-wrap q-mb-md"
-                  >
-                    <div class="col-3 q-pr-lg"></div>
-                    <div class="col-9">
-                      <div class="row items-center no-wrap q-mb-sm">
-                        <div class="col-3 q-pr-lg">Version</div>
-                        <div class="col-9">{{payment.signedTx.version}}</div>
-                      </div>
-                      <div class="row items-center no-wrap q-mb-sm">
-                        <div class="col-3 q-pr-lg">Locktime</div>
-                        <div class="col-9">{{payment.signedTx.locktime}}</div>
-                      </div>
-                      <div class="row items-center no-wrap q-mb-sm">
-                        <div class="col-3 q-pr-lg">Fee</div>
-                        <div class="col-9">
-                          <q-badge color="orange"
-                            >{{satBtc(payment.signedTx.fee)}}
-                          </q-badge>
-                        </div>
-                      </div>
-                      <q-separator class="q-mb-lg"></q-separator>
-                      <span class="text-subtitle2">Outputs</span>
-                      <q-separator class="q-mb-lg"></q-separator>
-                      <div
-                        v-for="out in payment.signedTx.outputs"
-                        class="row items-center no-wrap q-mb-sm"
-                      >
-                        <div class="col-3 q-pr-lg">
-                          <q-badge color="orange"
-                            >{{satBtc(out.amount)}}</q-badge
-                          >
-                        </div>
-
-                        <div class="col-9">
-                          <q-badge outline color="blue"
-                            >{{out.address}}</q-badge
-                          >
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <q-separator
-                    v-if="payment.sentTxId"
-                    class="q-mb-lg"
-                  ></q-separator>
-                  <div
-                    v-if="payment.sentTxId"
-                    class="row items-center no-wrap q-mb-sm"
-                  >
-                    <div class="col-3">Transaction Id</div>
-                    <div class="col-9">
-                      <a
-                        style="color: unset"
-                        :href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
-                        target="_blank"
-                      >
-                        {{payment.sentTxId}}</a
-                      >
-                    </div>
-                  </div>
-                </q-card-section>
-              </q-card>
-            </q-form>
-          </q-tab-panel>
-        </q-tab-panels>
+            </q-tab-panel>
+            <q-tab-panel name="coinControl">
+              <utxo-list
+                :utxos="utxos.data"
+                :selectable="true"
+                :payed-amount="getTotalPaymentAmount()"
+                :mempool_endpoint="config.data.mempool_endpoint"
+                :sats-denominated="config.data.sats_denominated"
+              ></utxo-list>
+              <div class="row items-center no-wrap q-mb-md q-pt-lg">
+                <div class="col-2 q-pr-lg">Change Account:</div>
+                <div class="col-3 q-pr-lg">
+                  <q-select
+                    filled
+                    dense
+                    emit-value
+                    v-model="payment.changeWallet"
+                    :options="walletAccounts"
+                    @input="selectChangeAddress"
+                    :rules="[val => !!val || 'Field is required']"
+                    label="Wallet Account"
+                  ></q-select>
+                </div>
+                <div class="col-7">
+                  <q-input
+                    filled
+                    dense
+                    readonly
+                    v-model.trim="payment.changeAddress.address"
+                    :rules="[val => !!val || 'Field is required']"
+                    type="text"
+                    label="Change Address"
+                  ></q-input>
+                </div>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-form>
       </q-card-section>
     </q-card>
   </div>
@@ -979,5 +998,6 @@
 <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='components/payment/payment.js') }}"></script>
 <script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
 {% endblock %}