lnbits/lnbits/extensions/watchonly/static/components/address-list/address-list.html

<div>
  <div class="row items-center no-wrap q-mb-md">
    <div class="col q-pr-lg">
      <q-select
        filled
        clearable
        dense
        emit-value
        v-model="selectedWallet"
        :options="accounts"
        label="Wallet Account"
      ></q-select>
    </div>
    <div class="col q-pr-lg">
      <q-select
        filled
        clearable
        dense
        emit-value
        multiple
        :options="filterOptions"
        v-model="filterValues"
        label="Filter"
      ></q-select>
    </div>
    <div class="col-auto">
      <q-input
        borderless
        dense
        debounce="300"
        v-model="addressesTable.filter"
        placeholder="Search"
      >
        <template v-slot:append>
          <q-icon name="search"></q-icon>
        </template>
      </q-input>
    </div>
  </div>
  <q-table
    style="height: 400px"
    flat
    dense
    :data="getFilteredAddresses()"
    row-key="id"
    virtual-scroll
    :columns="addressesTable.columns"
    :pagination.sync="addressesTable.pagination"
    :filter="addressesTable.filter"
  >
    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td auto-width>
          <q-btn
            size="sm"
            color="accent"
            round
            dense
            @click="props.row.expanded= !props.row.expanded"
            :icon="props.row.expanded? 'remove' : 'add'"
          />
        </q-td>

        <q-td key="address" :props="props">
          <div>
            <a
              class="text-secondary"
              style="color: unset"
              :href="'https://'+ mempoolEndpoint + '/address/' + props.row.address"
              target="_blank"
            >
              {{props.row.address}}</a
            >
            <q-badge
              v-if="props.row.branch_index === 1"
              color="orange"
              class="q-mr-md"
              outline
            >
              change
            </q-badge>
            <q-btn
              v-if="props.row.gapLimitExceeded"
              color="yellow"
              icon="warning"
              title="Gap Limit Exceeded"
              @click="props.row.expanded= !props.row.expanded"
              outline
              class="q-ml-md"
              size="xs"
            >
            </q-btn>
          </div>
        </q-td>

        <q-td
          key="amount"
          :props="props"
          :class="props.row.amount > 0 ? 'text-green-13 text-weight-bold' : ''"
        >
          <div>{{satBtc(props.row.amount)}}</div>
        </q-td>

        <q-td key="note" :props="props" :class="">
          <div>{{props.row.note}}</div>
        </q-td>
        <q-td key="wallet" :props="props" :class="">
          <div>{{getWalletName(props.row.wallet)}}</div>
        </q-td>
      </q-tr>
      <q-tr v-show="props.row.expanded" :props="props">
        <q-td colspan="100%">
          <div class="row items-center q-mt-md q-mb-lg">
            <div class="col-2 q-pr-lg"></div>
            <div class="col-2 q-pr-lg">
              <q-btn
                unelevated
                dense
                size="md"
                icon="qr_code"
                :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                @click="showAddressDetails(props.row)"
              >
                QR Code</q-btn
              >
            </div>
            <div class="col-2 q-pr-lg">
              <q-btn
                outline
                color="grey"
                icon="content_copy"
                @click="copyText(props.row.address)"
                class="q-ml-sm"
                >Copy</q-btn
              >
            </div>
            <div class="col-2 q-pr-lg">
              <q-btn
                outline
                dense
                size="md"
                icon="refresh"
                color="grey"
                @click="scanAddress(props.row)"
              >
                Rescan</q-btn
              >
            </div>
            <div class="col-2 q-pr-lg">
              <q-btn
                outline
                dense
                size="md"
                icon="history"
                color="grey"
                @click="searchInTab('history', props.row.address)"
                >History</q-btn
              >
            </div>
            <div class="col-2 q-pr-lg">
              <q-btn
                outline
                dense
                size="md"
                color="grey"
                @click="searchInTab('utxos', props.row.address)"
                >View Coins</q-btn
              >
            </div>
          </div>

          <div class="row items-center no-wrap q-mb-md">
            <div class="col-2 q-pr-lg">Note:</div>
            <div class="col-8 q-pr-lg">
              <q-input
                filled
                dense
                v-model.trim="props.row.note"
                type="text"
                label="Note"
              ></q-input>
            </div>
            <div class="col-2 q-pr-lg">
              <q-btn
                outline
                color="grey"
                @click="updateNoteForAddress(props.row, props.row.note)"
                >Update
              </q-btn>
            </div>
          </div>

          <div v-if="props.row.error" class="row items-center no-wrap q-mb-md">
            <div class="col-2 q-pr-lg"></div>
            <div class="col-10 q-pr-lg">
              <q-badge color="red">{{props.row.error}}</q-badge>
            </div>
          </div>
          <div
            v-if="props.row.gapLimitExceeded"
            class="row items-center no-wrap q-mb-md"
          >
            <div class="col-2 q-pr-lg"></div>
            <div class="col-10 q-pr-lg">
              <q-badge color="yellow" text-color="black"
                >Gap limit of 20 addresses exceeded. Other wallets might not
                detect funds at this address.</q-badge
              >
            </div>
          </div>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</div>