552 lines
18 KiB
HTML
552 lines
18 KiB
HTML
{% 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 title %} {{ wallet.name }} - {{ SITE_TITLE }} {% 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="showParseDialog"
|
|
>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="text-center">
|
|
<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"
|
|
style="white-space: normal; word-break: break-all"
|
|
>
|
|
<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="fee" :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 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 />
|
|
<p></p>
|
|
<strong>Scan this QRcode to open this wallet somewhere else (e.g. your cell phone)</strong><p></p>
|
|
<q-responsive :ratio="1" class="q-mx-xl">
|
|
<qrcode
|
|
:value="'{{request.url_root}}'+'wallet?usr={{user.id}}&wal={{wallet.id}}'"
|
|
:options="{width:240}"
|
|
></qrcode>
|
|
</q-responsive><p></p>
|
|
<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>
|
|
</div>
|
|
|
|
<q-dialog v-model="receive.show" @hide="closeReceiveDialog">
|
|
{% raw %}
|
|
<q-card
|
|
v-if="!receive.paymentReq"
|
|
class="q-pa-lg q-pt-xl lnbits__dialog-card"
|
|
>
|
|
<q-form @submit="createInvoice" class="q-gutter-md">
|
|
<p v-if="receive.lnurl" class="text-h6 text-center q-my-none">
|
|
<b>{{receive.lnurl.domain}}</b> is requesting an invoice:
|
|
</p>
|
|
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.number="receive.data.amount"
|
|
type="number"
|
|
label="Amount (sat) *"
|
|
:min="receive.minMax[0]"
|
|
:max="receive.minMax[1]"
|
|
:readonly="receive.lnurl && receive.lnurl.fixed"
|
|
></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"
|
|
>
|
|
<span v-if="receive.lnurl">
|
|
Withdraw from {{receive.lnurl.domain}}
|
|
</span>
|
|
<span v-else> Create invoice </span>
|
|
</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>
|
|
{% endraw %}
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="parse.show" @hide="closeParseDialog">
|
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
|
<div v-if="parse.invoice">
|
|
{% raw %}
|
|
<h6 class="q-my-none">{{ parse.invoice.fsat }} sat</h6>
|
|
<q-separator class="q-my-sm"></q-separator>
|
|
<p class="text-wrap">
|
|
<strong>Description:</strong> {{ parse.invoice.description }}<br />
|
|
<strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
|
|
<strong>Hash:</strong> {{ parse.invoice.hash }}
|
|
</p>
|
|
{% endraw %}
|
|
<div v-if="canPay" class="row q-mt-lg">
|
|
<q-btn unelevated color="deep-purple" @click="payInvoice">Pay</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-if="parse.lnurlauth">
|
|
{% raw %}
|
|
<q-form @submit="authLnurl" class="q-gutter-md">
|
|
<p class="q-my-none text-h6">
|
|
Authenticate with <b>{{ parse.lnurlauth.domain }}</b>?
|
|
</p>
|
|
<q-separator class="q-my-sm"></q-separator>
|
|
<p>
|
|
For every website and for every LNbits wallet, a new keypair will be
|
|
deterministically generated so your identity can't be tied to your
|
|
LNbits wallet or linked across websites. No other data will be shared
|
|
with {{ parse.lnurlauth.domain }}.
|
|
</p>
|
|
<p>Your public key for <b>{{ parse.lnurlauth.domain }}</b> is:</p>
|
|
<p class="q-mx-xl">
|
|
<code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
|
|
</p>
|
|
<div class="row q-mt-lg">
|
|
<q-btn unelevated color="deep-purple" type="submit">Login</q-btn>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</q-form>
|
|
{% endraw %}
|
|
</div>
|
|
<div v-else-if="parse.lnurlpay">
|
|
{% raw %}
|
|
<q-form @submit="payLnurl" class="q-gutter-md">
|
|
<p v-if="parse.lnurlpay.fixed" class="q-my-none text-h6">
|
|
<b>{{ parse.lnurlpay.domain }}</b> is requesting {{
|
|
parse.lnurlpay.maxSendable | msatoshiFormat }} sat
|
|
<span v-if="parse.lnurlpay.commentAllowed > 0">
|
|
<br />
|
|
and a {{parse.lnurlpay.commentAllowed}}-char comment
|
|
</span>
|
|
</p>
|
|
<p v-else class="q-my-none text-h6 text-center">
|
|
<b>{{ parse.lnurlpay.domain }}</b> is requesting <br />
|
|
between <b>{{ parse.lnurlpay.minSendable | msatoshiFormat }}</b> and
|
|
<b>{{ parse.lnurlpay.maxSendable | msatoshiFormat }}</b> sat
|
|
<span v-if="parse.lnurlpay.commentAllowed > 0">
|
|
<br />
|
|
and a {{parse.lnurlpay.commentAllowed}}-char comment
|
|
</span>
|
|
</p>
|
|
<q-separator class="q-my-sm"></q-separator>
|
|
<div class="row">
|
|
<p class="col text-justify text-italic">
|
|
{{ parse.lnurlpay.description }}
|
|
</p>
|
|
<p class="col-4 q-pl-md" v-if="parse.lnurlpay.image">
|
|
<q-img :src="parse.lnurlpay.image" />
|
|
</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.number="parse.data.amount"
|
|
type="number"
|
|
label="Amount (sat) *"
|
|
:min="parse.lnurlpay.minSendable / 1000"
|
|
:max="parse.lnurlpay.maxSendable / 1000"
|
|
:readonly="parse.lnurlpay.fixed"
|
|
></q-input>
|
|
</div>
|
|
<div class="col-8 q-pl-md" v-if="parse.lnurlpay.commentAllowed > 0">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.number="parse.data.comment"
|
|
:type="parse.lnurlpay.commentAllowed > 64 ? 'textarea' : 'text'"
|
|
label="Comment (optional)"
|
|
:maxlength="parse.lnurlpay.commentAllowed"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
<div class="row q-mt-lg">
|
|
<q-btn unelevated color="deep-purple" type="submit"
|
|
>Send satoshis</q-btn
|
|
>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</q-form>
|
|
{% endraw %}
|
|
</div>
|
|
<div v-else>
|
|
<q-form
|
|
v-if="!parse.camera.show"
|
|
@submit="decodeRequest"
|
|
class="q-gutter-md"
|
|
>
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="parse.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="parse.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>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="parse.camera.show">
|
|
<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">
|
|
<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 %}
|