lnbits-legend/lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html

<div>
  <q-card>
    <div class="row items-center no-wrap q-mb-md">
      <div class="col-11">
        <div class="row justify-center q-gutter-x-md items-center">
          <div class="text-h3 q-pa-sm">{{satBtc(total)}}</div>
        </div>
      </div>
      <div class="col-1">
        <q-btn
          unelevated
          @click="config.show = true"
          color="primary"
          icon="settings"
        >
        </q-btn>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="config.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="updateConfig" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="config.data.mempool_endpoint"
          type="text"
          label="Mempool Endpoint"
        >
        </q-input>

        <q-input
          filled
          dense
          v-model.number="config.data.receive_gap_limit"
          type="number"
          min="0"
          label="Receive Gap Limit"
        ></q-input>

        <q-input
          filled
          dense
          v-model.number="config.data.change_gap_limit"
          type="number"
          min="0"
          label="Change Gap Limit"
        ></q-input>

        <q-toggle
          :label="config.data.sats_denominated ? 'sats denominated' : 'BTC denominated'"
          color="secodary"
          v-model="config.data.sats_denominated"
        ></q-toggle>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="
            !config.data.mempool_endpoint "
            type="submit"
            >Update</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>