lnbits-legend/lnbits/extensions/watchonly/static/components/payment/payment.html

<div>
    <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="coinControl" label="Coin Control"></q-tab>
      </q-tabs>
      <q-tab-panels v-model="paymentTab">
        <q-tab-panel name="destination">
          <q-card>
            <q-card-section>
              {{sendToList}}
              <send-to
                :data.sync="sendToList"
                :tx:size="txSizeNoChange"
                :sats-denominated="sats_denominated"
              ></send-to>
              <!-- <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(feeValue)}}
                          </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"
              >
                <div class="col-12">
                  <q-badge
                    class="text-subtitle2 float-left"
                    color="yellow"
                    text-color="black"
                  >
                    The payed amount is higher than the selected amount!
                  </q-badge>
                </div>
              </div>
  -->
            </q-card-section>
          </q-card>
          <div class="row items-center no-wrap q-mb-md q-pt-lg">
            <div class="col-12">
              <q-toggle
                label="Custom Fee"
                color="secodary"
                v-model="showCustomFee"
              ></q-toggle>
            </div>
          </div>
          <q-card v-show="showCustomFee">
            <q-card-section>
              <div class="row items-center no-wrap q-mb-md q-pt-md">
                <div class="col-12">
                  {{feeRate}}
                  <fee-rate :totalfee="feeValue" :rate.sync="feeRate"></fee-rate>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </q-tab-panel>
  
        <q-tab-panel name="coinControl">
          <utxo-list
            :utxos="utxos.data"
            :selectable="true"
            :payed-amount="getTotalPaymentAmount()"
            :mempool_endpoint="mempool_endpoint"
            :sats-denominated="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="changeWallet"
                :options="accounts"
                @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="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>
  </div>