{% 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="config"
      :adminkey="g.user.wallets[0].adminkey"
    ></wallet-config>

    <wallet-list
      :adminkey="g.user.wallets[0].adminkey"
      :inkey="g.user.wallets[0].inkey"
      :sats-denominated="config.data.sats_denominated"
      :addresses="addresses"
      @accounts-update="updateAccounts"
      @new-receive-address="showAddressDetails"
    >
    </wallet-list>

    {% raw %}
    <q-card>
      <div class="row q-pt-sm q-pb-sm items-center no-wrap q-mb-md">
        <div class="col-3 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-6">
          <q-spinner
            v-if="scan.scanning == true"
            color="primary"
            size="2.55em"
          ></q-spinner>
        </div>
        <div class="col-3 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>
      <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"
              :data.sync="addresses"
              :accounts="walletAccounts"
              :mempool_endpoint="config.data.mempool_endpoint"
              :sats-denominated="config.data.sats_denominated"
              @scan:address="scanAddress"
              @show-address-details="showAddressDetails"
              @update:addresses="initUtxos"
              :inkey="g.user.wallets[0].inkey"
            >
            </address-list>
          </q-tab-panel>
          <q-tab-panel name="history">
            <history
              :history="history"
              :mempool_endpoint="config.data.mempool_endpoint"
              :sats-denominated="config.data.sats_denominated"
            ></history>
          </q-tab-panel>
          <q-tab-panel name="utxos">
            <utxo-list
              :utxos="utxos.data"
              :mempool_endpoint="config.data.mempool_endpoint"
              :sats-denominated="config.data.sats_denominated"
            ></utxo-list>
            <!-- <div v-if="payment.show" class="row items-center no-wrap q-mb-md">
              <div class="col">
                <q-toggle
                  label="Show Advanced"
                  color="secodary"
                  v-model="payment.showAdvanced"
                ></q-toggle>
              </div>
            </div> -->

            <q-card v-if="payment.show"
              ><q-card-section>
                <div class="row items-center no-wrap q-mb-md">
                  <div class="col-3 q-pr-lg">
                    <q-btn
                      unelevated
                      color="secondary"
                      type="submit"
                      class="btn-full"
                      >Check Tx</q-btn
                    >
                  </div>
                  <div class="col-9">
                    <q-input v-model="payment.psbtBase64" filled />
                  </div>
                </div>
                <q-separator
                  v-if="payment.psbtBase64"
                  class="q-mb-md"
                ></q-separator>
                <div
                  v-if="payment.psbtBase64"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg">
                    <q-btn-dropdown
                      class="btn-full"
                      color="secondary"
                      label="Sign With"
                    >
                      <q-list>
                        <q-item
                          clickable
                          v-close-popup
                          @click="payment.signMode = 'serial-port'"
                        >
                          <q-item-section>
                            <q-item-label>Serial Port Device</q-item-label>
                            <q-item-label caption
                              >Connect via Serial Port and sign.</q-item-label
                            >
                          </q-item-section>
                        </q-item>

                        <q-item clickable disabled v-close-popup>
                          <q-item-section>
                            <q-item-label>Animated QR Code</q-item-label>
                            <q-item-label caption
                              >Share and Scan using animated QR
                              codes.</q-item-label
                            >
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-btn-dropdown>
                  </div>
                  <div class="col-9">
                    <q-option-group
                      v-model="payment.signMode"
                      :options="payment.signModes"
                      color="primary"
                      inline
                    ></q-option-group>
                  </div>
                </div>
                <q-separator
                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                  class="q-mb-md"
                ></q-separator>
                <div
                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                  class="row items-center no-wrap q-mb-md q-mt-lg"
                >
                  <div class="col-3 q-pr-lg">
                    <q-btn
                      v-if="!serial.selectedPort"
                      @click="openSerialPort()"
                      unelevated
                      color="secondary"
                      class="btn-full"
                      >Connect</q-btn
                    >
                    <q-btn
                      v-if="serial.selectedPort"
                      @click="closeSerialPort()"
                      outline
                      color="gray"
                      class="btn-full"
                      >Disconnect</q-btn
                    >
                  </div>
                  <div class="col-3">
                    <q-toggle
                      label="Advanced"
                      disabled
                      color="secodary float-left"
                      v-model="serial.showAdvancedConfig"
                    ></q-toggle>
                  </div>
                  <div class="col-6"></div>
                </div>
                <q-separator
                  v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
                  class="q-mb-md"
                ></q-separator>
                <div
                  v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
                  class="row items-center no-wrap q-mb-md q-mt-lg"
                >
                  <div class="col-3 q-pr-lg">
                    <q-btn-dropdown
                      split
                      class="btn-full"
                      color="secondary"
                      :label="hww.authenticated ? 'Sign Tx' : 'Login'"
                      @click="hwwExecuteDefaultCommand()"
                    >
                    </q-btn-dropdown>
                  </div>
                  <div class="col-3">
                    <q-toggle
                      label="Show Console"
                      color="secodary float-left"
                      v-model="hww.showConsole"
                    ></q-toggle>
                  </div>
                  <div class="col-3">
                    <q-spinner
                      v-if="hww.sendingPsbt == true"
                      color="primary"
                      size="2.55em"
                    ></q-spinner>
                  </div>
                  <div class="col-3"></div>
                </div>
                <div
                  v-if="hww.showConsole"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg"></div>
                  <div class="col-9">
                    <q-input
                      for="watchonly-serial-port-data-input"
                      v-model="serial.receivedData"
                      filled
                      type="textarea"
                    />
                  </div>
                </div>
                <q-separator
                  v-if="hww.authenticated"
                  class="q-mb-md"
                ></q-separator>
                <div
                  v-if="hww.authenticated && hww.psbtSent"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg">
                    <q-btn
                      @click="hwwSignPsbt()"
                      unelevated
                      color="green"
                      class="btn-full"
                      >Confirm
                      <q-spinner
                        v-if="hww.signingPsbt == true"
                        color="primary"
                      ></q-spinner>
                    </q-btn>
                  </div>
                  <div class="col-3">
                    <q-toggle
                      v-if="payment.psbtBase64Signed"
                      label="Show Signed Psbt"
                      color="secodary float-left"
                      v-model="hww.showSignedPsbt"
                    ></q-toggle>
                  </div>
                  <div class="col-6">
                    <q-badge
                      color="yellow"
                      text-color="black"
                      multi-line
                      class="text-subtitle2"
                      >Check transaction data on the Hardware Wallet
                      display</q-badge
                    >
                  </div>
                </div>
                <div
                  v-if="hww.showSignedPsbt"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg"></div>

                  <div class="col-9">
                    <q-input
                      v-model="payment.psbtBase64Signed"
                      filled
                      readonly
                    />
                  </div>
                </div>
                <q-separator
                  v-if="payment.signedTx"
                  class="q-mb-md"
                ></q-separator>
                <div
                  v-if="payment.psbtBase64Signed"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg">
                    <q-btn
                      v-if="payment.signedTx"
                      @click="broadcastTransaction()"
                      unelevated
                      color="secondary"
                      class="btn-full"
                      >Send Payment</q-btn
                    >
                  </div>
                  <div class="col-9">
                    <span class="text-subtitle2">Transaction Details</span>
                    <q-separator></q-separator>
                  </div>
                </div>
                <div
                  v-if="payment.signedTx"
                  class="row items-center no-wrap q-mb-md"
                >
                  <div class="col-3 q-pr-lg"></div>
                  <div class="col-9">
                    <div class="row items-center no-wrap q-mb-sm">
                      <div class="col-3 q-pr-lg">Version</div>
                      <div class="col-9">{{payment.signedTx.version}}</div>
                    </div>
                    <div class="row items-center no-wrap q-mb-sm">
                      <div class="col-3 q-pr-lg">Locktime</div>
                      <div class="col-9">{{payment.signedTx.locktime}}</div>
                    </div>
                    <div class="row items-center no-wrap q-mb-sm">
                      <div class="col-3 q-pr-lg">Fee</div>
                      <div class="col-9">
                        <q-badge color="orange"
                          >{{satBtc(payment.signedTx.fee)}}
                        </q-badge>
                      </div>
                    </div>
                    <q-separator class="q-mb-lg"></q-separator>
                    <span class="text-subtitle2">Outputs</span>
                    <q-separator class="q-mb-lg"></q-separator>
                    <div
                      v-for="out in payment.signedTx.outputs"
                      class="row items-center no-wrap q-mb-sm"
                    >
                      <div class="col-3 q-pr-lg">
                        <q-badge color="orange">{{satBtc(out.amount)}}</q-badge>
                      </div>

                      <div class="col-9">
                        <q-badge outline color="blue">{{out.address}}</q-badge>
                      </div>
                    </div>
                  </div>
                </div>

                <q-separator
                  v-if="payment.sentTxId"
                  class="q-mb-lg"
                ></q-separator>
                <div
                  v-if="payment.sentTxId"
                  class="row items-center no-wrap q-mb-sm"
                >
                  <div class="col-3">Transaction Id</div>
                  <div class="col-9">
                    <a
                      style="color: unset"
                      :href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
                      target="_blank"
                    >
                      {{payment.sentTxId}}</a
                    >
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-card-section v-show="showPayment">
        <payment
          :accounts="walletAccounts"
          :addresses="addresses"
          :utxos="utxos.data"
          :adminkey="g.user.wallets[0].adminkey"
        ></payment>
        <!-- todo: no more utxos.data -->
      </q-card-section>
    </q-card>
  </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
        </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">
        {{ currentAddress.address }}
        <q-btn
          flat
          dense
          size="ms"
          icon="launch"
          type="a"
          :href="config.mempool_endpoint + '/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(currentAddress, 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='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/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='js/index.js') }}"></script>
{% endblock %}