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

feat: shuffle the UI

Browse Source
This commit is contained in:
Vlad Stan 2022-07-26 15:54:08 +03:00
parent 1bd74aba4d
commit 31729e41cf
3 changed files with 118 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
lnbits/extensions/watchonly/static/components/payment/payment.html
View File

@ -32,7 +32,7 @@
</q-td>
<q-td key="totalOutputs" :props="props">
<q-badge class="text-subtitle2" color="blue">
{{satBtc(getTotalPaymentAmount())}}
{{satBtc(totalPayedAmount)}}
</q-badge>
</q-td>
<q-td key="fees" :props="props">
@ -86,7 +86,7 @@
<div class="row items-center no-wrap">
<div class="col-4">
<q-toggle
label="Custom Fee"
label="Show Custom Fee"
color="secodary"
class="float-left"
v-model="showCustomFee"
@ -95,14 +95,14 @@
<div class="col-8">
<div class="float-right">
<span>Fee:</span>
<span class="text-subtitle2 q-ml-md">
{{satBtc(feeValue)}}
</span>
<span class="q-ml-lg">Fee Rate:</span>
<span >Fee Rate:</span>
<span class="text-subtitle2 q-ml-md">
{{feeRate}} sats/vbyte</span
>
<span class="q-ml-lg">Fee:</span>
<span class="text-subtitle2 q-ml-md">
{{satBtc(feeValue)}}
</span>
</div>
</div>
</div>
@ -118,19 +118,76 @@
</div>
</q-card-section>
</q-card>
<div class="row items-center no-wrap q-mb-md q-pt-lg">
<div class="col-3">
<q-btn unelevated color="green" type="submit" class="btn-full"
>Check & Send</q-btn
>
</div>
<div class="col-9"></div>
</div>
</q-tab-panel>
<q-tab-panel name="coinControl">
<q-card class="q-mb-lg">
<q-card class="q-mt-lg">
<q-card-section>
<div class="row items-center no-wrap">
<div class="col-4">
<q-toggle
label="Show Coin Select"
color="secodary"
class="float-left"
v-model="showCoinSelect"
></q-toggle>
</div>
<div class="col-8">
<div class="float-right">
<span>Balance:</span>
<span class="text-subtitle2 q-ml-md">
{{satBtc(balance)}}
</span>
<span class="q-ml-lg">Selected:</span>
<span class="text-subtitle2 q-ml-md">
{{satBtc(selectedAmount)}}
</span>
</div>
</div>
</div>
<div
v-show="showCoinSelect"
class="row items-center no-wrap q-mt-md"
>
<div class="col-12">
<q-separator class="q-mb-md"></q-separator>
<utxo-list
:utxos="utxos"
:selectable="true"
:payed-amount="totalPayedAmount"
:mempool_endpoint="mempool_endpoint"
:sats-denominated="sats_denominated"
></utxo-list>
</div>
</div>
</q-card-section>
</q-card>
<q-card class="q-mt-lg">
<q-card-section>
<div class="row items-center no-wrap">
<div class="col-4">
<q-toggle
label="Show Change"
color="secodary"
class="float-left"
v-model="showChange"
></q-toggle>
</div>
<div class="col-8">
<div class="float-right">
<span>Change:</span>
<span class="text-subtitle2 q-ml-md">
{{satBtc(balance)}}
</span>
</div>
</div>
</div>
<div v-show="showChange" class="row items-center no-wrap q-mt-md">
<div class="col-12">
<q-separator class="q-mb-md"></q-separator>
<div class="row items-center no-wrap">
<div class="col-2 q-pr-lg">Change Account:</div>
<div class="col-3 q-pr-lg">
@ -157,15 +214,25 @@
></q-input>
</div>
</div>
</div>
</div>
</q-card-section>
</q-card>
<utxo-list
:utxos="utxos"
:selectable="true"
:payed-amount="getTotalPaymentAmount()"
:mempool_endpoint="mempool_endpoint"
:sats-denominated="sats_denominated"
></utxo-list>
<div class="row items-center no-wrap q-mb-md q-pt-lg">
<div class="col-3">
<q-btn unelevated color="green" type="submit" class="btn-full"
>Check & Send</q-btn
>
</div>
<div class="col-9"></div>
</div>
</q-tab-panel>
<q-tab-panel name="coinControl">
<q-card class="q-mb-lg">
<q-card-section> </q-card-section>
</q-card>
</q-tab-panel>
</q-tab-panels>
</q-form>

8
lnbits/extensions/watchonly/static/components/payment/payment.js
View File

@ -30,6 +30,8 @@ async function payment(path) {
changeAddress: {},
changeAmount: 0,
showCustomFee: false,
showCoinSelect: false,
showChange: false,
feeRate: 1
}
},
@ -50,6 +52,12 @@ async function payment(path) {
return this.utxos
.filter(utxo => utxo.selected)
.reduce((t, a) => t + (a.amount || 0), 0)
},
balance: function () {
return this.utxos.reduce((t, a) => t + (a.amount || 0), 0)
},
totalPayedAmount: function () {
return this.sendToList.reduce((t, a) => t + (a.amount || 0), 0)
}
},