From e98e3504ade215ddf334cd13c9ceb79a914816c5 Mon Sep 17 00:00:00 2001 From: Vlad Stan Date: Mon, 25 Jul 2022 19:37:16 +0300 Subject: [PATCH] feat: partial payment redesign --- .../static/components/fees/fees.html | 63 +++++++++++++ .../watchonly/static/components/fees/fees.js | 62 ++++++++++++ .../static/components/utxo-list/utxo-list.js | 6 +- .../extensions/watchonly/static/js/index.js | 35 +++---- .../extensions/watchonly/static/js/tables.js | 8 -- .../watchonly/templates/watchonly/index.html | 94 +++++-------------- 6 files changed, 164 insertions(+), 104 deletions(-) create mode 100644 lnbits/extensions/watchonly/static/components/fees/fees.html create mode 100644 lnbits/extensions/watchonly/static/components/fees/fees.js diff --git a/lnbits/extensions/watchonly/static/components/fees/fees.html b/lnbits/extensions/watchonly/static/components/fees/fees.html new file mode 100644 index 000000000..be15035d4 --- /dev/null +++ b/lnbits/extensions/watchonly/static/components/fees/fees.html @@ -0,0 +1,63 @@ +
+
+
Fee Rate:
+
+ +
+
+ +
+
+
+
+
+ + Warning! The fee is too low. The transaction might take a long time to + confirm. + + + Warning! The fee is too high. You might be overpaying for this + transaction. + +
+
+ +
+
Fee:
+
{{totalfee}} sats
+
+ Refresh Fee Rates +
+
+
diff --git a/lnbits/extensions/watchonly/static/components/fees/fees.js b/lnbits/extensions/watchonly/static/components/fees/fees.js new file mode 100644 index 000000000..430fe14aa --- /dev/null +++ b/lnbits/extensions/watchonly/static/components/fees/fees.js @@ -0,0 +1,62 @@ +async function fees(path) { + const template = await loadTemplateAsync(path) + Vue.component('fees', { + name: 'fees', + template, + + props: ['totalfee', 'sats_denominated'], + watch: { + immediate: true, + 'totalfee': function(newVal, oldVal) { + console.log('### ', newVal, oldVal) + } + }, + + data: function () { + return { + feeRate: 1, + recommededFees: { + fastestFee: 1, + halfHourFee: 1, + hourFee: 1, + economyFee: 1, + minimumFee: 1 + } + } + }, + + methods: { + satBtc(val, showUnit = true) { + return satOrBtc(val, showUnit, this['sats_denominated']) + }, + feeRateChanged: function (newFeeRate) { + console.log('### value', newFeeRate) + this.$emit('update:fee-rate', +newFeeRate) + }, + refreshRecommendedFees: async function () { + const { + bitcoin: {fees: feesAPI} + } = mempoolJS() + + const fn = async () => feesAPI.getFeesRecommended() + this.recommededFees = await retryWithDelay(fn) + }, + getFeeRateLabel: function (feeRate) { + const fees = this.recommededFees + if (feeRate >= fees.fastestFee) + return `High Priority (${feeRate} sat/vB)` + if (feeRate >= fees.halfHourFee) + return `Medium Priority (${feeRate} sat/vB)` + if (feeRate >= fees.hourFee) return `Low Priority (${feeRate} sat/vB)` + return `No Priority (${feeRate} sat/vB)` + } + }, + + created: async function () { + console.log('### created fees ') + await this.refreshRecommendedFees() + this.feeRate = this.recommededFees.halfHourFee + this.feeRateChanged(this.recommededFees.halfHourFee) + } + }) +} diff --git a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js index 108f64148..3fdeb1b8e 100644 --- a/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js +++ b/lnbits/extensions/watchonly/static/components/utxo-list/utxo-list.js @@ -80,8 +80,10 @@ async function utxoList(path) { }, computed: { - columns: function() { - return this.utxosTable.columns.filter(c => c.selectable ? this.selectable : true) + columns: function () { + return this.utxosTable.columns.filter(c => + c.selectable ? this.selectable : true + ) } }, diff --git a/lnbits/extensions/watchonly/static/js/index.js b/lnbits/extensions/watchonly/static/js/index.js index 41134a588..360807fd2 100644 --- a/lnbits/extensions/watchonly/static/js/index.js +++ b/lnbits/extensions/watchonly/static/js/index.js @@ -6,6 +6,7 @@ const watchOnly = async () => { await addressList('static/components/address-list/address-list.html') await history('static/components/history/history.html') await utxoList('static/components/utxo-list/utxo-list.html') + await fees('static/components/fees/fees.html') await payment('static/components/payment/payment.html') Vue.filter('reverse', function (value) { @@ -82,7 +83,9 @@ const watchOnly = async () => { showAddress: false, addressNote: '', - showPayment: false + showPayment: false, + showCustomFee: false, + feeValue: 0 } }, @@ -238,10 +241,10 @@ const watchOnly = async () => { masterpub_fingerprint: walletAcount.fingerprint } }, - computeFee: function () { + computeFee: function (feeRate) { const tx = this.createTx() this.payment.txSize = Math.round(txSize(tx)) - return this.payment.feeRate * this.payment.txSize + return feeRate * this.payment.txSize }, deletePaymentAddress: function (v) { const index = this.payment.data.indexOf(v) @@ -257,18 +260,9 @@ const watchOnly = async () => { this.payment.changeWallet = this.walletAccounts[0] this.selectChangeAddress(this.payment.changeWallet) - await this.refreshRecommendedFees() this.payment.feeRate = this.payment.recommededFees.halfHourFee }, - getFeeRateLabel: function (feeRate) { - const fees = this.payment.recommededFees - if (feeRate >= fees.fastestFee) - return `High Priority (${feeRate} sat/vB)` - if (feeRate >= fees.halfHourFee) - return `Medium Priority (${feeRate} sat/vB)` - if (feeRate >= fees.hourFee) return `Low Priority (${feeRate} sat/vB)` - return `No Priority (${feeRate} sat/vB)` - }, + addPaymentAddress: function () { this.payment.data.push({address: '', amount: undefined}) }, @@ -300,7 +294,7 @@ const watchOnly = async () => { createPsbt: async function () { const wallet = this.g.user.wallets[0] try { - this.computeFee() + this.computeFee(this.payment.feeRate) const tx = this.createTx() txSize(tx) for (const input of tx.inputs) { @@ -824,7 +818,6 @@ const watchOnly = async () => { h => h.address !== addrData.address ) - console.log('### addressHistory', addressHistory) // add new entries this.history.push(...addressHistory) this.history.sort((a, b) => (!a.height ? -1 : b.height - a.height)) @@ -899,14 +892,6 @@ const watchOnly = async () => { return this.addressHistoryFromTxs(addrData, addressTxs) }, - refreshRecommendedFees: async function () { - const { - bitcoin: {fees: feesAPI} - } = mempoolJS() - - const fn = async () => feesAPI.getFeesRecommended() - this.payment.recommededFees = await retryWithDelay(fn) - }, getAddressTxsUtxoDelayed: async function (address) { const { bitcoin: {addresses: addressesAPI} @@ -974,6 +959,10 @@ const watchOnly = async () => { handleAddressesUpdated: async function (addresses) { this.addresses = addresses await this.scanAddressWithAmount() + }, + handleFeeRateChanged: function (newFeeRate) { + console.log('### newFeeRate', newFeeRate) + this.feeValue = this.computeFee(newFeeRate) } }, created: async function () { diff --git a/lnbits/extensions/watchonly/static/js/tables.js b/lnbits/extensions/watchonly/static/js/tables.js index 7b253b076..26a0dfd05 100644 --- a/lnbits/extensions/watchonly/static/js/tables.js +++ b/lnbits/extensions/watchonly/static/js/tables.js @@ -48,14 +48,6 @@ const tableData = { changeAddress: {}, changeAmount: 0, - feeRate: 1, - recommededFees: { - fastestFee: 1, - halfHourFee: 1, - hourFee: 1, - economyFee: 1, - minimumFee: 1 - }, fee: 0, txSize: 0, tx: null, diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html index 4f2e8ad92..98911de5c 100644 --- a/lnbits/extensions/watchonly/templates/watchonly/index.html +++ b/lnbits/extensions/watchonly/templates/watchonly/index.html @@ -500,7 +500,6 @@ class="bg-dark text-white shadow-2" > - @@ -596,6 +595,7 @@ + +
+
+ +
+
+ + +
+
+ +
+
+ + - - -
-
Fee Rate:
-
- -
-
- -
-
-
-
-
- - Warning! The fee is too low. The transaction might take - a long time to confirm. - - - Warning! The fee is too high. You might be overpaying - for this transaction. - -
-
-
-
Fee:
-
{{computeFee()}} sats
-
- Refresh Fee Rates -
-
- - + {% endblock %}