Michilis/lnbits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wallet polish (#2942)

Browse Source
This commit is contained in:
Vlad Stan
2025-02-11 15:19:41 +02:00
committed by GitHub
parent 4d490506f3
commit 2d41a1bed3
17 changed files with 565 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lnbits/static/bundle-components.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/bundle.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
lnbits/static/i18n/en.js
+3
View File
@@ -46,6 +46,7 @@ window.localisation.en = {
export_to_phone: 'Export to Phone with QR Code',
export_to_phone_desc:
'This QR code contains your wallet URL with full access. You can scan it from your phone to open your wallet from there.',
access_wallet_on_mobile: 'Mobile Access',
wallet: 'Wallet: ',
wallets: 'Wallets',
add_wallet: 'Add a new wallet',
@@ -248,6 +249,8 @@ window.localisation.en = {
enter_ip: 'Enter IP and hit enter',
rate_limiter: 'Rate Limiter',
wallet_limiter: 'Wallet Limiter',
wallet_config: 'Wallet Config',
wallet_charts: 'Wallet Charts',
wallet_limit_max_withdraw_per_day:
'Max daily wallet withdrawal in sats (0 for no limit, -1 to block withdrawal)',
wallet_max_ballance: 'Wallet max balance in sats (0 to disable)',
lnbits/static/js/components/payment-chart.js
-133
View File
@@ -1,133 +0,0 @@
function generateChart(canvas, rawData) {
const data = rawData.reduce(
(previous, current) => {
previous.labels.push(current.date)
previous.income.push(current.income)
previous.spending.push(current.spending)
previous.cumulative.push(current.balance)
return previous
},
{
labels: [],
income: [],
spending: [],
cumulative: []
}
)
return new Chart(canvas.getContext('2d'), {
type: 'bar',
data: {
labels: data.labels,
datasets: [
{
data: data.cumulative,
type: 'line',
label: 'balance',
backgroundColor: '#673ab7', // deep-purple
borderColor: '#673ab7',
borderWidth: 4,
pointRadius: 3,
fill: false
},
{
data: data.income,
type: 'bar',
label: 'in',
barPercentage: 0.75,
backgroundColor: 'rgba(76, 175, 80, 0.5)' // green
},
{
data: data.spending,
type: 'bar',
label: 'out',
barPercentage: 0.75,
backgroundColor: 'rgba(233, 30, 99, 0.5)' // pink
}
]
},
options: {
title: {
text: 'Chart.js Combo Time Scale'
},
tooltips: {
mode: 'index',
intersect: false
},
scales: {
xAxes: [
{
type: 'time',
display: true,
//offset: true,
time: {
minUnit: 'hour',
stepSize: 3
}
}
]
},
// performance tweaks
animation: {
duration: 0
},
elements: {
line: {
tension: 0
}
}
}
})
}
window.app.component('payment-chart', {
template: '#payment-chart',
name: 'payment-chart',
props: ['wallet'],
mixins: [window.windowMixin],
data() {
return {
paymentsChart: {
show: false,
group: {
value: 'hour',
label: 'Hour'
},
groupOptions: [
{value: 'hour', label: 'Hour'},
{value: 'day', label: 'Day'},
{value: 'week', label: 'Week'},
{value: 'month', label: 'Month'},
{value: 'year', label: 'Year'}
],
instance: null
}
}
},
methods: {
showChart() {
this.paymentsChart.show = true
LNbits.api
.request(
'GET',
'/api/v1/payments/history?group=' + this.paymentsChart.group.value,
this.g.wallet.adminkey
)
.then(response => {
this.$nextTick(() => {
if (this.paymentsChart.instance) {
this.paymentsChart.instance.destroy()
}
this.paymentsChart.instance = generateChart(
this.$refs.canvas,
response.data
)
})
})
.catch(err => {
LNbits.utils.notifyApiError(err)
this.paymentsChart.show = false
})
}
}
})
lnbits/static/js/components/payment-list.js
+37 -4
View File
@@ -38,6 +38,7 @@ window.app.component('payment-list', {
},
loading: false
},
searchDate: {from: null, to: null},
exportTagName: '',
exportPaymentTagList: [],
paymentsCSV: {
@@ -136,7 +137,31 @@ window.app.component('payment-list', {
}
},
methods: {
searchByDate() {
if (typeof this.searchDate === 'string') {
this.searchDate = {
from: this.searchDate,
to: this.searchDate
}
}
if (this.searchDate.from) {
this.paymentsTable.filter['time[ge]'] =
this.searchDate.from + 'T00:00:00'
}
if (this.searchDate.to) {
this.paymentsTable.filter['time[le]'] = this.searchDate.to + 'T23:59:59'
}
this.fetchPayments()
},
clearDateSeach() {
this.searchDate = {from: null, to: null}
delete this.paymentsTable.filter['time[ge]']
delete this.paymentsTable.filter['time[le]']
this.fetchPayments()
},
fetchPayments(props) {
this.$emit('filter-changed', {...this.paymentsTable.filter})
const params = LNbits.utils.prepareFilterQuery(this.paymentsTable, props)
return LNbits.api
.getPayments(this.currentWallet, params)
@@ -223,14 +248,22 @@ window.app.component('payment-list', {
watch: {
failedPaymentsToggle(newVal) {
if (newVal === false) {
this.paymentsTable.filter = {
'status[ne]': 'failed'
}
this.paymentsTable.filter['status[ne]'] = 'failed'
} else {
this.paymentsTable.filter = null
delete this.paymentsTable.filter['status[ne]']
}
this.paymentsTable.pagination.page = 1
this.fetchPayments()
},
'paymentsTable.search': {
handler() {
const props = {}
if (this.paymentsTable.search) {
props['search'] = this.paymentsTable.search
}
this.fetchPayments()
}
},
lazy(newVal) {
if (newVal === true) this.fetchPayments()
},
lnbits/static/js/wallet.js
+250 -17
View File
@@ -44,6 +44,7 @@ window.WalletPageLogic = {
show: false,
location: window.location
},
mobileSimple: this.$q.screen.lt.md,
icon: {
show: false,
data: {},
@@ -104,14 +105,23 @@ window.WalletPageLogic = {
name: null,
currency: null
},
walletBalanceChart: null,
inkeyHidden: true,
adminkeyHidden: true,
hasNfc: false,
nfcReaderAbortController: null,
isPrioritySwapped: false,
isFiatPriority: false,
formattedFiatAmount: 0,
formattedExchange: null,
primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor')
primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor'),
secondaryColor: this.$q.localStorage.getItem('lnbits.secondaryColor'),
chartData: [],
chartConfig: {
showBalance: true,
showBalanceInOut: true,
showPaymentCountInOut: true
},
paymentsFilter: {}
}
},
computed: {
@@ -174,7 +184,9 @@ window.WalletPageLogic = {
this.receive.paymentHash = null
this.receive.data.amount = null
this.receive.data.memo = null
this.receive.unit = 'sat'
this.receive.unit = this.isFiatPriority
? this.g.wallet.currency || 'sat'
: 'sat'
this.receive.minMax = [0, 2100000000000000]
this.receive.lnurl = null
this.focusInput('setAmount')
@@ -770,17 +782,14 @@ window.WalletPageLogic = {
})
},
swapBalancePriority() {
this.isPrioritySwapped = !this.isPrioritySwapped
this.$q.localStorage.setItem(
'lnbits.isPrioritySwapped',
this.isPrioritySwapped
)
this.isFiatPriority = !this.isFiatPriority
this.$q.localStorage.setItem('lnbits.isFiatPriority', this.isFiatPriority)
},
handleFiatTracking() {
this.g.fiatTracking = !this.g.fiatTracking
if (!this.g.fiatTracking) {
this.$q.localStorage.setItem('lnbits.isPrioritySwapped', false)
this.isPrioritySwapped = false
this.$q.localStorage.setItem('lnbits.isFiatPriority', false)
this.isFiatPriority = false
this.update.currency = ''
this.g.wallet.currency = ''
this.updateWallet({currency: ''})
@@ -800,6 +809,220 @@ window.WalletPageLogic = {
this.update.currency = ''
this.g.fiatTracking = false
}
},
handleFilterChange(value = {}) {
if (
this.paymentsFilter['time[ge]'] !== value['time[ge]'] ||
this.paymentsFilter['time[le]'] !== value['time[le]']
) {
this.refreshCharts()
}
this.paymentsFilter = value
},
async fetchChartData() {
if (this.mobileSimple) {
this.chartConfig = {}
return
}
if (
!this.chartConfig.showBalance &&
!this.chartConfig.showBalanceInOut &&
!this.chartConfig.showPaymentCountInOut
) {
return
}
try {
const {data} = await LNbits.api.request(
'GET',
`/api/v1/payments/stats/daily?wallet_id=${this.g.wallet.id}`
)
this.chartData = data
this.refreshCharts()
} catch (error) {
console.warn(error)
LNbits.utils.notifyApiError(error)
}
},
filterChartData(data) {
const timeFrom = this.paymentsFilter['time[ge]'] + 'T00:00:00'
const timeTo = this.paymentsFilter['time[le]'] + 'T23:59:59'
data = data.filter(p => {
if (
this.paymentsFilter['time[ge]'] &&
this.paymentsFilter['time[le]']
) {
return p.date >= timeFrom && p.date <= timeTo
}
if (this.paymentsFilter['time[ge]']) {
return p.date >= timeFrom
}
if (this.paymentsFilter['time[le]']) {
return p.date <= timeTo
}
return true
})
const labels = data.map(s =>
new Date(s.date).toLocaleString('default', {
month: 'short',
day: 'numeric'
})
)
return {data, labels}
},
refreshCharts() {
const originalChartConfig = this.chartConfig || {}
this.chartConfig = {}
setTimeout(() => {
const chartConfig =
this.$q.localStorage.getItem('lnbits.wallets.chartConfig') ||
originalChartConfig
this.chartConfig = {...originalChartConfig, ...chartConfig}
}, 10)
setTimeout(() => {
this.drawCharts(this.chartData)
}, 100)
},
drawCharts(allData) {
try {
const {data, labels} = this.filterChartData(allData)
if (this.chartConfig.showBalance) {
if (this.walletBalanceChart) {
this.walletBalanceChart.destroy()
}
this.walletBalanceChart = new Chart(
this.$refs.walletBalanceChart.getContext('2d'),
{
type: 'line',
options: {
responsive: true,
maintainAspectRatio: false
},
data: {
labels,
datasets: [
{
label: 'Balance',
data: data.map(s => s.balance),
pointStyle: false,
backgroundColor: LNbits.utils.hexAlpha(
this.primaryColor,
0.3
),
borderColor: this.primaryColor,
borderWidth: 2,
fill: true,
tension: 0.7,
fill: 1
},
{
label: 'Fees',
data: data.map(s => s.fee),
pointStyle: false,
backgroundColor: LNbits.utils.hexAlpha(
this.secondaryColor,
0.3
),
borderColor: this.secondaryColor,
borderWidth: 1,
fill: true,
tension: 0.7,
fill: 1
}
]
}
}
)
}
if (this.chartConfig.showBalanceInOut) {
if (this.walletBalanceInOut) {
this.walletBalanceInOut.destroy()
}
this.walletBalanceInOut = new Chart(
this.$refs.walletBalanceInOut.getContext('2d'),
{
type: 'bar',
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
},
data: {
labels,
datasets: [
{
label: 'Balance In',
borderRadius: 5,
data: data.map(s => s.balance_in)
},
{
label: 'Balance Out',
borderRadius: 5,
data: data.map(s => s.balance_out)
}
]
}
}
)
}
if (this.chartConfig.showPaymentCountInOut) {
if (this.walletPaymentsInOut) {
this.walletPaymentsInOut.destroy()
}
this.walletPaymentsInOut = new Chart(
this.$refs.walletPaymentsInOut.getContext('2d'),
{
type: 'bar',
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
},
data: {
labels,
datasets: [
{
label: 'Payments In',
data: data.map(s => s.count_in)
},
{
label: 'Payments Out',
data: data.map(s => -s.count_out)
}
]
}
}
)
}
} catch (error) {
console.warn(error)
}
},
saveChartsPreferences() {
this.$q.localStorage.set('lnbits.wallets.chartConfig', this.chartConfig)
this.refreshCharts()
}
},
created() {
@@ -811,8 +1034,20 @@ window.WalletPageLogic = {
this.parse.show = true
}
this.createdTasks()
try {
this.fetchChartData()
} catch (error) {
console.warn(`Chart creation failed: ${error}`)
}
},
watch: {
'g.wallet.id'(newVal, oldVal) {
try {
this.fetchChartData()
} catch (error) {
console.warn(`Chart creation failed: ${error}`)
}
},
'g.updatePayments'(newVal, oldVal) {
console.log('updatePayments changed:', {newVal, oldVal})
this.parse.show = false
@@ -846,19 +1081,17 @@ window.WalletPageLogic = {
deep: true
}
},
mounted() {
async mounted() {
if (!Quasar.LocalStorage.getItem('lnbits.disclaimerShown')) {
this.disclaimerDialog.show = true
Quasar.LocalStorage.setItem('lnbits.disclaimerShown', true)
Quasar.LocalStorage.setItem('lnbits.reactions', 'confettiTop')
}
if (Quasar.LocalStorage.getItem('lnbits.isPrioritySwapped')) {
this.isPrioritySwapped = Quasar.LocalStorage.getItem(
'lnbits.isPrioritySwapped'
)
if (Quasar.LocalStorage.getItem('lnbits.isFiatPriority')) {
this.isFiatPriority = Quasar.LocalStorage.getItem('lnbits.isFiatPriority')
} else {
this.isPrioritySwapped = false
Quasar.LocalStorage.setItem('lnbits.isPrioritySwapped', false)
this.isFiatPriority = false
Quasar.LocalStorage.setItem('lnbits.isFiatPriority', false)
}
}
}
lnbits/static/vendor.json
-1
View File
@@ -41,7 +41,6 @@
"js/components/lnbits-funding-sources.js",
"js/components/extension-settings.js",
"js/components/payment-list.js",
"js/components/payment-chart.js",
"js/components.js",
"js/init-app.js"
],