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

<div>
  <q-form @submit="checkAndSend" 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 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"
              @update:outputs="handleOutputsChange"
            ></send-to>
          </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="Show Custom Fee"
                  color="secodary"
                  class="float-left"
                  v-model="showCustomFee"
                ></q-toggle>
              </div>

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

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

              <div class="col-8">
                <div class="float-right">
                  <span>Balance:</span>
                  <span class="text-subtitle2 q-ml-md">
                    {{satBtc(balance)}}
                  </span>
                  <span class="q-ml-lg">Selected:</span>
                  <span class="text-subtitle2 q-ml-md">
                    {{satBtc(selectedAmount)}}
                  </span>
                </div>
              </div>
            </div>

            <div
              v-show="showCoinSelect"
              class="row items-center no-wrap q-mt-md"
            >
              <div class="col-12">
                <q-separator class="q-mb-md"></q-separator>
                <utxo-list
                  ref="utxoList"
                  :utxos="utxos"
                  :selectable="true"
                  :payed-amount="totalPayedAmount"
                  :mempool_endpoint="mempool_endpoint"
                  :sats-denominated="sats_denominated"
                ></utxo-list>
              </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="Show Change"
                  color="secodary"
                  class="float-left"
                  v-model="showChange"
                ></q-toggle>
              </div>

              <div class="col-4">
                <q-badge
                  v-if="changeAmount > 0 && changeAmount < DUST_LIMIT"
                  class="text-subtitle2 float-right"
                  color="yellow"
                  text-color="black"
                >
                  Below dust limit. Will be used as fee.
                </q-badge>
              </div>
              <div class="col-4">
                <div class="float-right">
                  <span>Change:</span>
                  <span v-if="changeAmount < 0" class="text-subtitle2 q-ml-md">
                    {{satBtc(0)}}
                  </span>
                  <span v-if="changeAmount >= 0" class="text-subtitle2 q-ml-md">
                    {{satBtc(changeAmount)}}
                  </span>
                </div>
              </div>
            </div>

            <div v-show="showChange" class="row items-center no-wrap q-mt-md">
              <div class="col-12">
                <q-separator class="q-mb-md"></q-separator>
                <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>
              </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
              :disabled="changeAmount < 0"
              label="Check & Send"
              color="green"
              type="submit"
              class="btn-full"
            >
              <q-spinner v-if="showChecking" color="primary"></q-spinner
            ></q-btn>
          </div>
          <div class="col-9">
            <q-badge
              v-if="changeAmount < 0"
              class="text-subtitle2 float-right"
              color="yellow"
              text-color="black"
            >
              The payed amount is higher than the selected amount!
            </q-badge>
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="coinControl">
        <q-card class="q-mb-lg">
          <q-card-section> </q-card-section>
        </q-card>
      </q-tab-panel>
    </q-tab-panels>
  </q-form>
</div>