{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <wallet-config
      :total="utxos.total"
      :config-data.sync="config"
      :adminkey="g.user.wallets[0].adminkey"
    >
      <template v-slot:serial>
        <serial-signer
          ref="serialSigner"
          :network="config.network"
          :sats-denominated="config.sats_denominated"
          @signed:psbt="updateSignedPsbt"
          class="q-pr-lg float-right"
        ></serial-signer>
      </template>
    </wallet-config>

    <wallet-list
      v-if="config.isLoaded"
      :adminkey="g.user.wallets[0].adminkey"
      :inkey="g.user.wallets[0].inkey"
      :sats-denominated="config.sats_denominated"
      :network="config.network"
      :addresses="addresses"
      :serial-signer-ref="$refs.serialSigner"
      @accounts-update="updateAccounts"
      @new-receive-address="showAddressDetailsWithConfirmation"
    >
    </wallet-list>

    {% raw %}
    <q-card>
      <div class="row q-pt-sm q-pb-sm items-center no-wrap q-mb-md">
        <div class="col-md-3 col-sm-5 q-pl-md">
          <q-btn
            unelevated
            class="btn-full"
            color="secondary"
            @click="scanAllAddresses"
            :disabled="scan.scanning == true || showPayment"
            >Scan Blockchain</q-btn
          >
        </div>
        <div class="col-md-6 col-sm-2 q-pl-md">
          <q-spinner
            v-if="scan.scanning == true"
            color="primary"
            size="2.55em"
          ></q-spinner>
        </div>
        <div class="col-md-3 col-sm-5 q-pr-md">
          <q-btn
            v-if="!showPayment"
            unelevated
            color="secondary"
            class="btn-full"
            @click="goToPaymentView"
            >New Payment</q-btn
          >
          <q-btn
            v-if="showPayment"
            outline
            color="gray"
            class="btn-full"
            @click="showPayment = false"
            >Back</q-btn
          >
        </div>
      </div>

      <div v-if="scan.scanning == true">
        <q-linear-progress
          :value="scan.scanIndex / scan.scanCount"
          size="10px"
          color="primary"
          class="q-mt-sm"
        ></q-linear-progress>
      </div>
    </q-card>

    <q-card v-if="config.isLoaded">
      <q-card-section v-show="!showPayment">
        <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
          <q-tab name="addresses" label="Addresses"></q-tab>
          <q-tab name="history" label="History"></q-tab>
          <q-tab name="utxos" label="UTXOs"></q-tab>
        </q-tabs>
        <q-tab-panels v-model="tab">
          <q-tab-panel name="addresses">
            <address-list
              ref="addressList"
              :addresses="addresses"
              :accounts="walletAccounts"
              :mempool-endpoint="mempoolHostname"
              :sats-denominated="config.sats_denominated"
              @scan:address="scanAddress"
              @show-address-details="showAddressDetails"
              @update:addresses="initUtxos"
              @search:tab="searchInTab"
              @update:note="updateNoteForAddress"
              :inkey="g.user.wallets[0].inkey"
            >
            </address-list>
          </q-tab-panel>
          <q-tab-panel name="history">
            <history
              :history="history"
              :mempool-endpoint="mempoolHostname"
              :sats-denominated="config.sats_denominated"
              :filter="historyFilter"
            ></history>
          </q-tab-panel>
          <q-tab-panel name="utxos">
            <utxo-list
              :utxos="utxos.data"
              :mempool-endpoint="mempoolHostname"
              :accounts="walletAccounts"
              :sats-denominated="config.sats_denominated"
              :filter="utxosFilter"
            ></utxo-list>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
    <div v-if="config.isLoaded" class="q-pt-sm">
      <payment
        ref="paymentRef"
        v-show="showPayment"
        :accounts="walletAccounts"
        :addresses="addresses"
        :utxos="utxos.data"
        :mempool-endpoint="mempoolHostname"
        :adminkey="g.user.wallets[0].adminkey"
        :serial-signer-ref="$refs.serialSigner"
        :sats-denominated="config.sats_denominated"
        @broadcast-done="handleBroadcastSuccess"
      ></payment>
      <!-- todo: no more utxos.data -->
    </div>
  </div>

  {% endraw %}

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">
          {{SITE_TITLE}} Onchain Wallet (watch-only) Extension
          <small>(v0.2)</small>
        </h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "watchonly/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
  {% raw %}
  <q-dialog v-model="showAddress" position="top">
    <q-card class="q-pa-lg lnbits__dialog-card">
      <h5 class="text-subtitle1 q-my-none">Address Details</h5>
      <q-separator></q-separator><br />

      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
        <qrcode
          v-if="currentAddress"
          :value="currentAddress.address"
          :options="{width: 800}"
          class="rounded-borders"
        ></qrcode>
      </q-responsive>
      <p v-if="currentAddress">
        <q-btn
          flat
          dense
          size="ms"
          icon="content_copy"
          @click="copyText(currentAddress.address)"
          class="q-ml-sm"
        ></q-btn>

        {{ currentAddress.address }}

        <q-btn
          flat
          dense
          size="ms"
          icon="launch"
          type="a"
          :href="'https://' + mempoolHostname + '/address/' + currentAddress.address"
          target="_blank"
        ></q-btn>
      </p>
      <p v-if="currentAddress">
        <q-input
          filled
          dense
          v-model.trim="addressNote"
          type="text"
          label="Note"
        ></q-input>
      </p>
      <div v-if="currentAddress && currentAddress.gapLimitExceeded">
        <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 class="row q-mt-lg q-gutter-sm">
        <q-btn
          v-if="currentAddress"
          outline
          v-close-popup
          color="grey"
          @click="updateNoteForAddress({addressId: currentAddress.id, note: addressNote})"
          class="q-ml-sm"
          >Save Note</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
      <div class="row q-mt-lg q-gutter-sm"></div>
    </q-card>
  </q-dialog>

  {% endraw %}
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<style>
  .btn-full {
    width: 100%;
  }
</style>
<script type="text/javascript" src="https://mempool.space/mempool.js"></script>

<script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/bip39-word-list.js') }}"></script>

<script src="{{ url_for('watchonly_static', path='components/my-checkbox/my-checkbox.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/wallet-config/wallet-config.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/wallet-list/wallet-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/address-list/address-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/history/history.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/utxo-list/utxo-list.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/fee-rate/fee-rate.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/seed-input/seed-input.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/send-to/send-to.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/payment/payment.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/serial-signer/serial-signer.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='components/serial-port-config/serial-port-config.js') }}"></script>

<script src="{{ url_for('watchonly_static', path='js/crypto/noble-secp256k1.js') }}"></script>
<script src="{{ url_for('watchonly_static', path='js/crypto/aes.js') }}"></script>

<script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
{% endblock %}
