{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block scripts %} {{ window_vars(user, wallet) }}
<script src="/core/static/js/wallet.js"></script>
{% endblock %} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h3 class="q-my-none">
          <strong>{% raw %}{{ formattedBalance }}{% endraw %}</strong> sat
        </h3>
      </q-card-section>
      <div class="row q-pb-md q-px-md q-col-gutter-md">
        <div class="col">
          <q-btn
            unelevated
            color="deep-purple"
            class="full-width"
            @click="showSendDialog"
            >Paste Request</q-btn
          >
        </div>
        <div class="col">
          <q-btn
            unelevated
            color="deep-purple"
            class="full-width"
            @click="showReceiveDialog"
            >Create Invoice</q-btn
          >
        </div>
        <div class="col">
          <q-btn
            unelevated
            color="purple"
            icon="photo_camera"
            @click="showCamera"
            >scan
            <q-tooltip>Use camera to scan an invoice/QR</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-card>

    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-sm">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Transactions</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
            <!--<q-btn v-if="pendingPaymentsExist" dense flat round icon="update" color="grey" @click="checkPendingPayments">
                <q-tooltip>Check pending</q-tooltip>
              </q-btn>-->
            <q-btn
              dense
              flat
              round
              icon="show_chart"
              color="grey"
              @click="showChart"
            >
              <q-tooltip>Show chart</q-tooltip>
            </q-btn>
          </div>
        </div>
        <q-input
          v-if="payments.length > 10"
          filled
          dense
          clearable
          v-model="paymentsTable.filter"
          debounce="300"
          placeholder="Search by tag, memo, amount"
          class="q-mb-md"
        >
        </q-input>
        <q-table
          dense
          flat
          :data="filteredPayments"
          row-key="payment_hash"
          :columns="paymentsTable.columns"
          :pagination.sync="paymentsTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props"
                >{{ col.label }}</q-th
              >
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width class="lnbits__q-table__icon-td">
                <q-icon
                  v-if="props.row.isPaid"
                  size="14px"
                  :name="props.row.isOut ? 'call_made' : 'call_received'"
                  :color="props.row.isOut ? 'pink' : 'green'"
                  @click="props.expand = !props.expand"
                ></q-icon>
                <q-icon
                  v-else
                  name="settings_ethernet"
                  color="grey"
                  @click="props.expand = !props.expand"
                >
                  <q-tooltip>Pending</q-tooltip>
                </q-icon>
              </q-td>
              <q-td key="memo" :props="props">
                <q-badge v-if="props.row.tag" color="yellow" text-color="black">
                  <a
                    class="inherit"
                    :href="['/', props.row.tag, '?usr=', user.id].join('')"
                  >
                    #{{ props.row.tag }}
                  </a>
                </q-badge>
                {{ props.row.memo }}
              </q-td>
              <q-td auto-width key="date" :props="props">
                <q-tooltip>{{ props.row.date }}</q-tooltip>
                {{ props.row.dateFrom }}
              </q-td>
              <q-td auto-width key="sat" :props="props">
                {{ props.row.fsat }}
              </q-td>
              <q-td auto-width key="sat" :props="props">
                {{ props.row.fee }}
              </q-td>
            </q-tr>

            <q-dialog v-model="props.expand" :props="props">
              <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
                <div class="text-center q-mb-lg">
                  <div v-if="props.row.isIn && props.row.pending">
                    <q-icon name="settings_ethernet" color="grey"></q-icon>
                    Invoice waiting to be paid
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                    <div v-if="props.row.bolt11" class="text-center q-mb-lg">
                      <a :href="'lightning:' + props.row.bolt11">
                        <q-responsive :ratio="1" class="q-mx-xl">
                          <qrcode
                            :value="props.row.bolt11"
                            :options="{width: 340}"
                            class="rounded-borders"
                          ></qrcode>
                        </q-responsive>
                      </a>
                    </div>
                    <div class="row q-mt-lg">
                      <q-btn
                        outline
                        color="grey"
                        @click="copyText(props.row.bolt11)"
                        >Copy invoice</q-btn
                      >
                      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
                        >Close</q-btn
                      >
                    </div>
                  </div>
                  <div v-else-if="props.row.isPaid && props.row.isIn">
                    <q-icon
                      size="18px"
                      :name="'call_received'"
                      :color="'green'"
                    ></q-icon>
                    Payment Received
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                  <div v-else-if="props.row.isPaid && props.row.isOut">
                    <q-icon
                      size="18px"
                      :name="'call_made'"
                      :color="'pink'"
                    ></q-icon>
                    Payment Sent
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                  <div v-else-if="props.row.isOut && props.row.pending">
                    <q-icon name="settings_ethernet" color="grey"></q-icon>
                    Outgoing payment pending
                    <lnbits-payment-details
                      :payment="props.row"
                    ></lnbits-payment-details>
                  </div>
                </div>
              </q-card>
            </q-dialog>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </div>
</div>

<div class="col-12 col-md-5 q-gutter-y-md">
  <q-card>
    <q-card-section>
      <q-btn flat color="grey" @click="exportCSV" class="float-right"
        >Renew keys</q-btn
      >
      <h6 class="text-subtitle1 q-mt-none q-mb-sm">LNbits wallet</h6>
      <strong>Wallet name: </strong><em>{{ wallet.name }}</em><br />
      <strong>Wallet ID: </strong><em>{{ wallet.id }}</em><br />
      <strong>Admin key: </strong><em>{{ wallet.adminkey }}</em><br />
      <strong>Invoice/read key: </strong><em>{{ wallet.inkey }}</em>
    </q-card-section>
    <q-card-section class="q-pa-none">
      <q-separator></q-separator>
      <q-list>
        {% include "core/_api_docs.html" %}
        <q-separator></q-separator>
        <q-expansion-item
          group="extras"
          icon="remove_circle"
          label="Delete wallet"
        >
          <q-card>
            <q-card-section>
              <p>
                This whole wallet will be deleted, the funds will be
                <strong>UNRECOVERABLE</strong>.
              </p>
              <q-btn
                unelevated
                color="red-10"
                @click="deleteWallet('{{ wallet.id }}', '{{ user.id }}')"
                >Delete wallet</q-btn
              >
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-card-section>
  </q-card>
</div>

<q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
  <q-card
    v-if="!receive.paymentReq"
    class="q-pa-lg q-pt-xl lnbits__dialog-card"
  >
    <q-form @submit="createInvoice" class="q-gutter-md">
      <q-input
        filled
        dense
        v-model.number="receive.data.amount"
        type="number"
        label="Amount (sat) *"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="receive.data.memo"
        label="Memo"
        placeholder="LNbits invoice"
      ></q-input>
      <div v-if="receive.status == 'pending'" class="row q-mt-lg">
        <q-btn
          unelevated
          color="deep-purple"
          :disable="receive.data.amount == null || receive.data.amount <= 0"
          type="submit"
          >Create invoice</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
      <q-spinner
        v-if="receive.status == 'loading'"
        color="deep-purple"
        size="2.55em"
      ></q-spinner>
    </q-form>
  </q-card>
  <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
    <div class="text-center q-mb-lg">
      <a :href="'lightning:' + receive.paymentReq">
        <q-responsive :ratio="1" class="q-mx-xl">
          <qrcode
            :value="receive.paymentReq"
            :options="{width: 340}"
            class="rounded-borders"
          ></qrcode>
        </q-responsive>
      </a>
    </div>
    <div class="row q-mt-lg">
      <q-btn outline color="grey" @click="copyText(receive.paymentReq)"
        >Copy invoice</q-btn
      >
      <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
    </div>
  </q-card>
</q-dialog>

<q-dialog v-model="send.show" position="top" @hide="closeSendDialog">
  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
    <div v-if="!send.invoice">
      <q-form
        v-if="!theCamera.show"
        @submit="decodeInvoice"
        class="q-gutter-md"
      >
        <q-input
          filled
          dense
          v-model.trim="send.data.request"
          type="textarea"
          label="Paste an invoice, payment request or lnurl code *"
        >
        </q-input>
        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="deep-purple"
            :disable="send.data.request == ''"
            type="submit"
            >Read</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
      <div v-else>
        <q-responsive :ratio="1">
          <qrcode-stream
            @decode="decodeQR"
            class="rounded-borders"
          ></qrcode-stream>
        </q-responsive>
        <div class="row q-mt-lg">
          <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </div>
    </div>
    <div v-else-if="send.lnurl.withdraw">
      {% raw %}
      <h6 class="q-my-none">{{ send.invoice.fsat }} sat</h6>
      <q-separator class="q-my-sm"></q-separator>
      <p style="word-break: break-all">
        <strong>Description:</strong> {{ send.invoice.description }}<br />
        <strong>Payment hash:</strong> {{ send.invoice.hash }}<br />
        <strong>Expire date:</strong> {{ send.invoice.expireDate }}
      </p>
      {% endraw %}
      <div v-if="canPay" class="row q-mt-lg">
        <q-btn unelevated color="deep-purple" @click="payInvoice"
          >Send satoshis</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
      <div v-else class="row q-mt-lg">
        <q-btn unelevated disabled color="yellow" text-color="black"
          >Not enough funds!</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
    </div>
    <div v-else>
      {% raw %}
      <h6 class="q-my-none">{{ send.invoice.fsat }} sat</h6>
      <q-separator class="q-my-sm"></q-separator>
      <p style="word-break: break-all">
        <strong>Description:</strong> {{ send.invoice.description }}<br />
        <strong>Expire date:</strong> {{ send.invoice.expireDate }}<br />
        <strong>Hash:</strong> {{ send.invoice.hash }}
      </p>
      {% endraw %}
      <div v-if="canPay" class="row q-mt-lg">
        <q-btn unelevated color="deep-purple" @click="payInvoice"
          >Send satoshis</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
      <div v-else class="row q-mt-lg">
        <q-btn unelevated disabled color="yellow" text-color="black"
          >Not enough funds!</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
      </div>
    </div>
  </q-card>
</q-dialog>

<q-dialog v-model="theCamera.show" position="top">
  <q-card class="q-pa-lg q-pt-xl">
    <div class="text-center q-mb-lg">
      <qrcode-stream @decode="decodeQR" class="rounded-borders"></qrcode-stream>
    </div>
    <div class="row q-mt-lg">
      <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto"
        >Cancel</q-btn
      >
    </div>
  </q-card>
</q-dialog>

<q-dialog v-model="paymentsChart.show" position="top">
  <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
    <q-card-section>
      <canvas ref="canvas" width="600" height="400"></canvas>
    </q-card-section>
  </q-card>
</q-dialog>

{% if service_fee > 0 %}
<div ref="disclaimer"></div>
<q-dialog v-model="disclaimerDialog.show">
  <q-card class="q-pa-lg">
    <h6 class="q-my-md text-deep-purple">Warning</h6>
    <p>
      Login functionality to be released in v0.2, for now,
      <strong
        >make sure you bookmark this page for future access to your
        wallet</strong
      >!
    </p>
    <p>
      This service is in BETA, and we hold no responsibility for people losing
      access to funds. To encourage you to run your own LNbits installation, any
      balance on {% raw %}{{ disclaimerDialog.location.host }}{% endraw %} will
      incur a charge of <strong>{{ service_fee }}% service fee</strong> per
      week.
    </p>
    <div class="row q-mt-lg">
      <q-btn
        outline
        color="grey"
        @click="copyText(disclaimerDialog.location.href)"
        >Copy wallet URL</q-btn
      >
      <q-btn v-close-popup flat color="grey" class="q-ml-auto"
        >I understand</q-btn
      >
    </div>
  </q-card>
</q-dialog>
{% endif %} {% endblock %}