refactor: payment component
This commit is contained in:
Vlad Stan
parent
df7ebc6699
commit
5ee81f2e5a
3 changed files with 179 additions and 202 deletions
|
|
@ -1,207 +1,183 @@
|
||||||
<div>
|
<div>
|
||||||
<q-form @submit="checkAndSend" class="q-gutter-md">
|
<q-form @submit="checkAndSend" class="q-gutter-md">
|
||||||
<q-tabs v-model="paymentTab" no-caps class="bg-dark text-white shadow-2">
|
<q-card class="q-mt-lg">
|
||||||
<q-tab name="destination" label="Send To"></q-tab>
|
<q-card-section>
|
||||||
<q-tab name="coinControl" label="Coin Select"></q-tab>
|
<send-to
|
||||||
</q-tabs>
|
:data.sync="sendToList"
|
||||||
<q-tab-panels v-model="paymentTab">
|
:fee-rate="feeRate"
|
||||||
<q-tab-panel name="destination">
|
:tx-size="txSizeNoChange"
|
||||||
<q-card>
|
:selected-amount="selectedAmount"
|
||||||
<q-card-section>
|
:sats-denominated="sats_denominated"
|
||||||
<send-to
|
@update:outputs="handleOutputsChange"
|
||||||
:data.sync="sendToList"
|
></send-to>
|
||||||
:fee-rate="feeRate"
|
</q-card-section>
|
||||||
:tx-size="txSizeNoChange"
|
</q-card>
|
||||||
:selected-amount="selectedAmount"
|
|
||||||
:sats-denominated="sats_denominated"
|
|
||||||
@update:outputs="handleOutputsChange"
|
|
||||||
></send-to>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-card class="q-mt-lg">
|
<q-card class="q-mt-lg">
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row items-center no-wrap">
|
<div class="row items-center no-wrap">
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<q-toggle
|
<q-toggle
|
||||||
label="Show Custom Fee"
|
label="Show Custom Fee"
|
||||||
color="secodary"
|
color="secodary"
|
||||||
class="float-left"
|
class="float-left"
|
||||||
v-model="showCustomFee"
|
v-model="showCustomFee"
|
||||||
></q-toggle>
|
></q-toggle>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-8">
|
|
||||||
<div class="float-right">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-show="showCustomFee"
|
|
||||||
class="row items-center no-wrap q-mt-md"
|
|
||||||
>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-separator class="q-mb-md"></q-separator>
|
|
||||||
<fee-rate :fee-value="feeValue" :rate.sync="feeRate"></fee-rate>
|
|
||||||
</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 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
|
|
||||||
ref="utxoList"
|
|
||||||
: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-4">
|
|
||||||
<q-badge
|
|
||||||
v-if="changeAmount > 0 && changeAmount < DUST_LIMIT"
|
|
||||||
class="text-subtitle2 float-right"
|
|
||||||
color="yellow"
|
|
||||||
text-color="black"
|
|
||||||
>
|
|
||||||
Below dust limit. Will be used as fee.
|
|
||||||
</q-badge>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="float-right">
|
|
||||||
<span>Change:</span>
|
|
||||||
<span v-if="changeAmount < 0" class="text-subtitle2 q-ml-md">
|
|
||||||
{{satBtc(0)}}
|
|
||||||
</span>
|
|
||||||
<span v-if="changeAmount >= 0" class="text-subtitle2 q-ml-md">
|
|
||||||
{{satBtc(changeAmount)}}
|
|
||||||
</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">
|
|
||||||
<q-select
|
|
||||||
filled
|
|
||||||
dense
|
|
||||||
emit-value
|
|
||||||
v-model="changeWallet"
|
|
||||||
:options="accounts"
|
|
||||||
@input="selectChangeAddress"
|
|
||||||
:rules="[val => !!val || 'Field is required']"
|
|
||||||
label="Wallet Account"
|
|
||||||
></q-select>
|
|
||||||
</div>
|
|
||||||
<div class="col-7">
|
|
||||||
<q-input
|
|
||||||
filled
|
|
||||||
dense
|
|
||||||
readonly
|
|
||||||
v-model.trim="changeAddress.address"
|
|
||||||
:rules="[val => !!val || 'Field is required']"
|
|
||||||
type="text"
|
|
||||||
label="Change Address"
|
|
||||||
></q-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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
|
|
||||||
:disabled="changeAmount < 0"
|
|
||||||
label="Check & Send"
|
|
||||||
color="green"
|
|
||||||
type="submit"
|
|
||||||
class="btn-full"
|
|
||||||
>
|
|
||||||
<q-spinner v-if="showChecking" color="primary"></q-spinner
|
|
||||||
></q-btn>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9">
|
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="float-right">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div v-show="showCustomFee" class="row items-center no-wrap q-mt-md">
|
||||||
|
<div class="col-12">
|
||||||
|
<q-separator class="q-mb-md"></q-separator>
|
||||||
|
<fee-rate :fee-value="feeValue" :rate.sync="feeRate"></fee-rate>
|
||||||
|
</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 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
|
||||||
|
ref="utxoList"
|
||||||
|
: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-4">
|
||||||
<q-badge
|
<q-badge
|
||||||
v-if="changeAmount < 0"
|
v-if="changeAmount > 0 && changeAmount < DUST_LIMIT"
|
||||||
class="text-subtitle2 float-right"
|
class="text-subtitle2 float-right"
|
||||||
color="yellow"
|
color="yellow"
|
||||||
text-color="black"
|
text-color="black"
|
||||||
>
|
>
|
||||||
The payed amount is higher than the selected amount!
|
Below dust limit. Will be used as fee.
|
||||||
</q-badge>
|
</q-badge>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="float-right">
|
||||||
|
<span>Change:</span>
|
||||||
|
<span v-if="changeAmount < 0" class="text-subtitle2 q-ml-md">
|
||||||
|
{{satBtc(0)}}
|
||||||
|
</span>
|
||||||
|
<span v-if="changeAmount >= 0" class="text-subtitle2 q-ml-md">
|
||||||
|
{{satBtc(changeAmount)}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-tab-panel>
|
|
||||||
|
|
||||||
<q-tab-panel name="coinControl">
|
<div v-show="showChange" class="row items-center no-wrap q-mt-md">
|
||||||
<q-card class="q-mb-lg">
|
<div class="col-12">
|
||||||
<q-card-section> </q-card-section>
|
<q-separator class="q-mb-md"></q-separator>
|
||||||
</q-card>
|
<div class="row items-center no-wrap">
|
||||||
</q-tab-panel>
|
<div class="col-2 q-pr-lg">Change Account:</div>
|
||||||
</q-tab-panels>
|
<div class="col-3 q-pr-lg">
|
||||||
|
<q-select
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
emit-value
|
||||||
|
v-model="changeWallet"
|
||||||
|
:options="accounts"
|
||||||
|
@input="selectChangeAddress"
|
||||||
|
:rules="[val => !!val || 'Field is required']"
|
||||||
|
label="Wallet Account"
|
||||||
|
></q-select>
|
||||||
|
</div>
|
||||||
|
<div class="col-7">
|
||||||
|
<q-input
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
readonly
|
||||||
|
v-model.trim="changeAddress.address"
|
||||||
|
:rules="[val => !!val || 'Field is required']"
|
||||||
|
type="text"
|
||||||
|
label="Change Address"
|
||||||
|
></q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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
|
||||||
|
:disabled="changeAmount < 0"
|
||||||
|
label="Check & Send"
|
||||||
|
color="green"
|
||||||
|
type="submit"
|
||||||
|
class="btn-full"
|
||||||
|
>
|
||||||
|
<q-spinner v-if="showChecking" color="primary"></q-spinner
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-9">
|
||||||
|
<q-badge
|
||||||
|
v-if="changeAmount < 0"
|
||||||
|
class="text-subtitle2 float-right"
|
||||||
|
color="yellow"
|
||||||
|
text-color="black"
|
||||||
|
>
|
||||||
|
The payed amount is higher than the selected amount!
|
||||||
|
</q-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</q-form>
|
</q-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
>
|
>
|
||||||
<q-list>
|
<q-list>
|
||||||
<q-item v-if="!selectedPort" clickable v-close-popup>
|
<q-item v-if="!selectedPort" clickable v-close-popup>
|
||||||
<q-item-section >
|
<q-item-section>
|
||||||
<q-item-label>Configure</q-item-label>
|
<q-item-label>Configure</q-item-label>
|
||||||
<q-item-label caption
|
<q-item-label caption
|
||||||
>Set the Serial Port communication parameters</q-item-label
|
>Set the Serial Port communication parameters</q-item-label
|
||||||
|
|
|
||||||
|
|
@ -403,16 +403,17 @@
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
</q-tab-panels>
|
</q-tab-panels>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section v-show="showPayment">
|
|
||||||
<payment
|
|
||||||
:accounts="walletAccounts"
|
|
||||||
:addresses="addresses"
|
|
||||||
:utxos="utxos.data"
|
|
||||||
:adminkey="g.user.wallets[0].adminkey"
|
|
||||||
></payment>
|
|
||||||
<!-- todo: no more utxos.data -->
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
|
<div class="q-mt-lg">
|
||||||
|
<payment
|
||||||
|
v-show="showPayment"
|
||||||
|
:accounts="walletAccounts"
|
||||||
|
:addresses="addresses"
|
||||||
|
:utxos="utxos.data"
|
||||||
|
:adminkey="g.user.wallets[0].adminkey"
|
||||||
|
></payment>
|
||||||
|
<!-- todo: no more utxos.data -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue