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

<div>
  <q-form @submit="createPsbt" class="q-gutter-md">
    <!-- {{addresses}} -->
    <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 Select"></q-tab>
    </q-tabs>
    <q-tab-panels v-model="paymentTab">
      <q-tab-panel name="destination">
        <q-card>
          <q-card-section>
            <send-to
              :data.sync="sendToList"
              :fee-rate="feeRate"
              :tx-size="txSizeNoChange"
              :selected-amount="selectedAmount"
              :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>

        <q-card class="q-mt-lg">
          <q-card-section>
            <div class="row items-center no-wrap">
              <div class="col-4">
                <q-toggle
                  label="Custom Fee"
                  color="secodary"
                  class="float-left"
                  v-model="showCustomFee"
                ></q-toggle>
              </div>

              <div class="col-8">
                <div class="float-right">
                  <span>Fee:</span>
                  <span class="text-subtitle2 q-ml-md">
                    {{satBtc(feeValue)}}
                  </span>
                  <span class="q-ml-lg">Fee Rate:</span>
                  <span class="text-subtitle2 q-ml-md">
                    {{feeRate}} sats/vbyte</span
                  >
                </div>
              </div>
            </div>

            <div
              v-show="showCustomFee"
              class="row items-center no-wrap q-mt-md"
            >
              <div class="col-12">
                <q-separator class="q-mb-md"></q-separator>
                <fee-rate :fee-value="feeValue" :rate.sync="feeRate"></fee-rate>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <div class="row items-center no-wrap q-mb-md q-pt-lg">
          <div class="col-3">
            <q-btn unelevated color="green" type="submit" class="btn-full"
              >Check & Send</q-btn
            >
          </div>
          <div class="col-9"></div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="coinControl">
        <q-card class="q-mb-lg">
          <q-card-section>
            <div class="row items-center no-wrap">
              <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-card-section>
        </q-card>
        <utxo-list
          :utxos="utxos"
          :selectable="true"
          :payed-amount="getTotalPaymentAmount()"
          :mempool_endpoint="mempool_endpoint"
          :sats-denominated="sats_denominated"
        ></utxo-list>
      </q-tab-panel>
    </q-tab-panels>
  </q-form>
</div>