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

<div>
  <q-form @submit="checkAndSend" class="q-gutter-md">
    <q-card class="q-mt-lg">
      <q-card-section>
        <send-to
          :data.sync="sendToList"
          :fee-rate="feeRate"
          :tx-size="txSizeNoChange"
          :selected-amount="selectedAmount"
          :sats-denominated="satsDenominated"
          @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="satsDenominated"
            ></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-dropdown
          split
          unelevated
          :disabled="changeAmount < 0 || showChecking"
          label="Check & Send"
          color="green"
          type="submit"
          class="btn-full"
        >
          <q-list>
            <q-item :disabled="changeAmount < 0" clickable v-close-popup>
              <q-item-section>
                <q-item-label>Serial Port</q-item-label>
                <q-item-label caption>
                  Sign using a Serial Port device</q-item-label
                >
              </q-item-section>
            </q-item>
            <q-item clickable disabled v-close-popup>
              <q-item-section>
                <q-item-label>Share PSBT</q-item-label>
                <q-item-label caption
                  >Share the PSBT as text or Animated QR Code</q-item-label
                >
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </div>

      <div class="col-9">
        <q-spinner
          v-if="showChecking"
          size="2.55em"
          color="primary"
        ></q-spinner>
        <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-form>
</div>