aiolabs/lnbits
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Change UI for Pay Invoice Dialog (#2979)

Browse source
This commit is contained in:
Tiago Vasconcelos 2025-02-18 16:42:46 +00:00 • committed by GitHub
parent 0cd94e654e
commit 4afe6dbd6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 173 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

179
lnbits/core/templates/core/wallet.html
View file

@ -29,19 +29,20 @@
} : ''"
>
<q-card-section style="height: 130px">
<div class="row">
<div class="row q-gutter-md">
<div class="col-1" style="max-width: 30px">
<q-btn
v-if="g.fiatTracking"
@click="swapBalancePriority"
style="height: 50px"
class="q-mt-lg"
color="primary"
flat
dense
icon="swap_vert"
></q-btn>
</div>
<div class="col-11">
<div class="col">
<div
class="column"
:class="{
@ -693,27 +694,159 @@
<q-dialog v-model="parse.show" @hide="closeParseDialog" position="top">
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
<div v-if="parse.invoice">
<h6
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
class="q-my-none"
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100 + '{{LNBITS_DENOMINATION}}'"
></h6>
<h6
v-else
class="q-my-none"
v-text="parse.invoice.fsat + '{{LNBITS_DENOMINATION}}'"
></h6>
<q-separator class="q-my-sm"></q-separator>
<p class="text-wrap">
<strong v-text="$t('memo') + ': '"></strong>
<span v-text="parse.invoice.description"></span>
<br />
<strong v-text="$t('expire_date')"></strong>
<span v-text="parse.invoice.expireDate"></span>
<br />
<strong v-text="$t('hash')"></strong>
<span v-text="parse.invoice.hash"></span>
</p>
<div class="column content-center text-center q-mb-md">
<div v-if="!isFiatPriority">
<h4
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
class="q-my-none text-bold"
>
<span
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
></span>
<span
class="text-h5"
v-text="'{{LNBITS_DENOMINATION}}'"
></span>
</h4>
<h4 v-else class="q-my-none text-bold">
<span v-text="parse.invoice.fsat"></span>
<span
class="text-h5"
v-text="'{{LNBITS_DENOMINATION}}'"
></span>
</h4>
</div>
<div v-else>
<h4
class="q-my-none text-bold"
v-text="parse.invoice.fiatAmount"
></h4>
</div>
<div class="q-my-md absolute">
<q-btn
v-if="g.fiatTracking"
@click="swapBalancePriority"
flat
dense
icon="swap_vert"
color="primary"
></q-btn>
</div>
<div v-if="!isFiatPriority">
<div class="text-h5 text-italic">
<span
v-text="parse.invoice.fiatAmount"
style="opacity: 0.75"
></span>
</div>
</div>
<div v-else style="opacity: 0.75">
<h5
v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
class="q-my-none text-bold"
>
<span
v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
></span>
<span
class="text-h6"
v-text="'{{LNBITS_DENOMINATION}}'"
></span>
</h5>
<h5 v-else class="q-my-none text-bold">
<span v-text="parse.invoice.fsat"></span>
<span
class="text-h6"
v-text="'{{LNBITS_DENOMINATION}}'"
></span>
</h5>
</div>
</div>
<q-separator></q-separator>
<h6 class="text-center" v-text="parse.invoice.description"></h6>
<q-list separator bordered dense class="q-mb-md">
<q-expansion-item expand-separator icon="info" label="Details">
<q-list separator>
<q-item>
<q-item-section>
<q-item-label v-text="$t('created')"></q-item-label>
<q-item-label
caption
v-text="parse.invoice.createdDate"
></q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label
caption
v-text="parse.invoice.createdDateFrom"
></q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label v-text="$t('expire_date')"></q-item-label>
<q-item-label
caption
v-text="parse.invoice.expireDate"
></q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label
caption
v-text="parse.invoice.expireDateFrom"
></q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label v-text="$t('payment_hash')"></q-item-label>
<q-item-label
caption
v-text="`${parse.invoice.hash.slice(0, 12)}...${parse.invoice.hash.slice(-12)}`"
></q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label>
<q-icon
name="content_copy"
@click="copyText(parse.invoice.hash)"
size="1em"
color="grey"
class="cursor-pointer"
/>
</q-item-label>
<q-tooltip>
<span v-text="parse.invoice.hash"></span>
</q-tooltip>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label v-text="$t('Invoice')"></q-item-label>
<q-item-label
caption
v-text="`${parse.invoice.bolt11.slice(0, 12)}...${parse.invoice.bolt11.slice(-12)}`"
></q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label>
<q-icon
name="content_copy"
@click="copyText(parse.invoice.bolt11)"
size="1em"
color="grey"
class="cursor-pointer"
/>
</q-item-label>
<q-tooltip>
<span v-text="parse.invoice.bolt11"></span>
</q-tooltip>
</q-item-section>
</q-item>
</q-list>
</q-expansion-item>
</q-list>
<div v-if="canPay" class="row q-mt-lg">
<q-btn
unelevated

18
lnbits/static/js/wallet.js
View file

@ -420,7 +420,8 @@ window.WalletPageLogic = {
let cleanInvoice = {
msat: invoice.human_readable_part.amount,
sat: invoice.human_readable_part.amount / 1000,
fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000)
fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000),
bolt11: this.parse.data.request
}
_.each(invoice.data.tags, tag => {
@ -433,15 +434,30 @@ window.WalletPageLogic = {
const expireDate = new Date(
(invoice.data.time_stamp + tag.value) * 1000
)
const createdDate = new Date(invoice.data.time_stamp * 1000)
cleanInvoice.expireDate = Quasar.date.formatDate(
expireDate,
'YYYY-MM-DDTHH:mm:ss.SSSZ'
)
cleanInvoice.createdDate = Quasar.date.formatDate(
createdDate,
'YYYY-MM-DDTHH:mm:ss.SSSZ'
)
cleanInvoice.expireDateFrom = moment(expireDate).fromNow()
cleanInvoice.createdDateFrom = moment(createdDate).fromNow()
cleanInvoice.expired = false // TODO
}
}
})
if (this.g.wallet.currency) {
cleanInvoice.fiatAmount = LNbits.utils.formatCurrency(
((cleanInvoice.sat / 1e8) * this.g.exchangeRate).toFixed(2),
this.g.wallet.currency
)
}
this.parse.invoice = Object.freeze(cleanInvoice)
},
payInvoice() {