mirror of
https://github.com/lnbits/lnbits-legend.git
synced 2025-02-25 23:21:21 +01:00
1f139884fe
* feat: add `Share PSBT` button with options * feat: add basic communication via the serial port * chore: code format * feat: send data to and from serial port * fix: port disconnect * feat: handle psbt extract * feat: show signed transaction details * fix: handle Connect/Disconnect failure state * feat:small UI improvements * feat: broadcast transaction (partial solution) * feat: integrate psbt response from HWW * feat: login and send commands to HWW * feat: ui improvements * feat: ui/ux improvements * feat: more small UI impreovemsnts * feat: simplify UI * feat: add `help` command * feat: add wipe command * feet: add `seed` command * feat: add `restore` command * feat: always show PSBT input text (for outside PSBTs) * feat: show spinner while signing tx * feat: hide panels after transaction is broadcast * feat: basic use of custom components * refactor: move components one folder up * refactor: extract wallet-config * refactor: extract `wallet-list` component * refactor: clean-up * chore: code format html component files * refactor: extract address-list component * refactor: extract `history` component * refactor: extract `utxo-list` component * feat: UI/UX improvements * feat: partial payment redesign * refactor: rename `fee` to `fee-rate` * refactor: rename component * refactor: extract `send-to` component * refactor: payment: first migration * fix: init `sendToList` * fix: change address * fix: change address and `Select All` coins * feat: show custom fees & two way binding for addresses * fix: scanAddressesWithAmount * fix: max amount * fix: coin selection mode * chore: code clean-up * feat: shuffle the UI * fix: change amount * feat: update tx size in real time * fix: coin selection * fix: show erro messages * fix: psbt generation * refactor: move serial port logic * refactor: payment component * refactor: code clean-up; use `slot` for `serial-signer` * feat: toggle serial port * feat: add Disconnect command * feat: prompt for `Connect` and `Login` before signing * refactor: send psbt to device * feat: extract signed transaction * refactor: code clean-up * feat: show auth green icon * chore: code clean-up * feat: show console * feat: allow `Connect` from dropdown menu * fix: stop if serial port cannot be open * feat: confirm outputs and fee * feat: add cancel command * fix: add `sats-denominated` for confirmations * feat: wait for HWW to authenticate, then open dialog * feat: share PSBT as text * refactor: extract `refreshAddresses` * feat: small UI improvements * feat: add default `Mainnet` network * feat: fix mempool endpint * feat: propagate config update only when explicitly updated * feat: add network for wallet accounts * fix: stop scanning when network changed * chore: code clean-up * chore: code clean-up * feat: show hardware device Xpub option * fix: handle failed to parse psbt * feat: add accounts using the HWW * fix: testnet is in the bip32 derivation path * feat: add spinner while wallet account is created * fix: check network and masterpub for duplicate accounts * feat: integrate transaction broadcast * feat: add password confirmation for `Wipe` and `Restore` * fix: fingerprint is not unique per account (it is the fingerprint of the master) * chore: code clean-up, remove `masterpub_fingerprint` * fix: account name diplay * chore: code format * fix: memppol links * fix: shortcut buttons * fix: note update * chore: code format * chore: clean-up rebase left overs * chore: clean-up * feat: less technical labels for addresses * feat: add serial port config params * fix: address type selection * chore: drop `mempool` table * fix: change & fee value * fix: handle no input signed scenario * fix: sat/btc unit * fix: small UI stuff * doc: update the readme * Update README.md
312 lines
9.5 KiB
HTML
312 lines
9.5 KiB
HTML
<div>
|
|
<q-form @submit="checkAndSend" ref="paymentFormRef" class="q-gutter-md">
|
|
<q-card class="q-mt-lg">
|
|
<q-card-section>
|
|
<send-to
|
|
:data.sync="sendToList"
|
|
:fee-rate="feeRate"
|
|
:tx-size="txSizeNoChange"
|
|
:selected-amount="selectedAmount"
|
|
:sats-denominated="satsDenominated"
|
|
@update:outputs="handleOutputsChange"
|
|
></send-to>
|
|
</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 Custom Fee"
|
|
color="secodary"
|
|
class="float-left"
|
|
v-model="showCustomFee"
|
|
></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"
|
|
:mempool-endpoint="mempoolEndpoint"
|
|
:sats-denominated="satsDenominated"
|
|
></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="mempoolEndpoint"
|
|
:sats-denominated="satsDenominated"
|
|
:accounts="accounts"
|
|
></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-dropdown
|
|
split
|
|
unelevated
|
|
:disabled="changeAmount < 0 || showChecking"
|
|
label="Check & Send"
|
|
color="green"
|
|
type="submit"
|
|
class="btn-full"
|
|
>
|
|
<q-list>
|
|
<q-item :disabled="changeAmount < 0" clickable v-close-popup>
|
|
<q-item-section>
|
|
<q-item-label>Serial Port</q-item-label>
|
|
<q-item-label caption>
|
|
Sign using a Serial Port device</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item @click="showPsbtDialog" clickable v-close-popup>
|
|
<q-item-section>
|
|
<q-item-label>Share PSBT</q-item-label>
|
|
<q-item-label caption
|
|
>Share the PSBT as text or Animated QR Code</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
|
|
<div class="col-9">
|
|
<q-spinner
|
|
v-if="showChecking"
|
|
size="2.55em"
|
|
color="primary"
|
|
></q-spinner>
|
|
<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-dialog v-model="showPsbt" position="top">
|
|
<q-card class="q-pa-lg q-pt-xl">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="psbtBase64"
|
|
type="textarea"
|
|
rows="25"
|
|
cols="200"
|
|
label="PSBT"
|
|
></q-input>
|
|
|
|
<div class="row q-mt-lg">
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="showFinalTx" position="top">
|
|
<q-card class="q-pa-lg q-pt-xl">
|
|
<div class="row items-center no-wrap q-mb-sm">
|
|
<div class="col-12">
|
|
<span class="text-subtitle1">Transaction Details</span>
|
|
</div>
|
|
</div>
|
|
<q-separator class="q-mb-lg"></q-separator>
|
|
<div v-if="signedTx" class="row items-center no-wrap q-mb-md">
|
|
<div class="col-12">
|
|
<div class="row items-center no-wrap q-mb-sm">
|
|
<div class="col-3 q-pr-lg">Version</div>
|
|
<div class="col-9">{{signedTx.version}}</div>
|
|
</div>
|
|
<div class="row items-center no-wrap q-mb-sm">
|
|
<div class="col-3 q-pr-lg">Locktime</div>
|
|
<div class="col-9">{{signedTx.locktime}}</div>
|
|
</div>
|
|
<div class="row items-center no-wrap q-mb-sm">
|
|
<div class="col-3 q-pr-lg">Fee</div>
|
|
<div class="col-9">
|
|
<q-badge color="orange">{{satBtc(signedTx.fee)}} </q-badge>
|
|
</div>
|
|
</div>
|
|
<q-separator class="q-mb-lg"></q-separator>
|
|
<span class="text-subtitle2">Outputs</span>
|
|
<q-separator class="q-mb-lg"></q-separator>
|
|
<div
|
|
v-for="out in signedTx.outputs"
|
|
class="row items-center no-wrap q-mb-sm"
|
|
>
|
|
<div class="col-3 q-pr-lg">
|
|
<q-badge color="orange">{{satBtc(out.amount)}}</q-badge>
|
|
</div>
|
|
|
|
<div class="col-9">
|
|
<q-badge outline color="blue">{{out.address}}</q-badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<q-separator class="q-mb-lg"></q-separator>
|
|
<div class="row q-mt-lg">
|
|
<div class="col-12">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="signedTxHex"
|
|
type="textarea"
|
|
cols="300"
|
|
rows="1"
|
|
label="Signed Tx Hex"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
<div class="row q-mt-lg">
|
|
<div class="col-12">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="psbtBase64Signed"
|
|
ype="textarea"
|
|
cols="300"
|
|
rows="1"
|
|
label="PSBT"
|
|
></q-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
unelevated
|
|
color="secondary"
|
|
class="float-left"
|
|
@click="broadcastTransaction"
|
|
>Send</q-btn
|
|
>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|