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>