feat: prompt for Connect and Login before signing

This commit is contained in:
Vlad Stan 2022-07-27 09:48:52 +03:00
parent 7a3b675119
commit 5d1d2d634a
4 changed files with 23 additions and 292 deletions

View File

@ -10,6 +10,7 @@ async function payment(path) {
'utxos',
'mempool_endpoint',
'sats_denominated',
'serial-signer-ref',
'adminkey'
],
watch: {
@ -76,9 +77,21 @@ async function payment(path) {
return satOrBtc(val, showUnit, this['sats_denominated'])
},
checkAndSend: async function () {
this.showChecking = true
try {
console.log('### this.checkAndSend')
this.showChecking = true
console.log(
'### this.checkAndSend',
this.serialSignerRef.isConnected()
)
if (!this.serialSignerRef.isConnected()) {
await this.serialSignerRef.openSerialPort()
return
}
if (!this.serialSignerRef.isAuthenticated()) {
await this.serialSignerRef.hwwShowPasswordDialog()
return
}
await this.createPsbt()
} catch (error) {
} finally {

View File

@ -107,6 +107,13 @@ async function serialSigner(path) {
}
},
isConnected: function () {
return !!this.selectedPort
},
isAuthenticated: function () {
return this.hww.authenticated
},
checkSerialPortSupported: function () {
if (!navigator.serial) {
this.$q.notify({

View File

@ -273,9 +273,6 @@ const watchOnly = async () => {
},
//################### SERIAL PORT ###################
sharePsbtWithAnimatedQRCode: async function () {
console.log('### sharePsbtWithAnimatedQRCode')
},
//################### HARDWARE WALLET ###################
//################### UTXOs ###################

View File

@ -107,293 +107,6 @@
:mempool_endpoint="config.data.mempool_endpoint"
:sats-denominated="config.data.sats_denominated"
></utxo-list>
<q-card v-if="payment.show"
><q-card-section>
<div class="row items-center no-wrap q-mb-md">
<div class="col-3 q-pr-lg">
<q-btn
unelevated
color="secondary"
type="submit"
class="btn-full"
>Check Tx</q-btn
>
</div>
<div class="col-9">
<q-input v-model="payment.psbtBase64" filled />
</div>
</div>
<q-separator
v-if="payment.psbtBase64"
class="q-mb-md"
></q-separator>
<div
v-if="payment.psbtBase64"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg">
<q-btn-dropdown
class="btn-full"
color="secondary"
label="Sign With"
>
<q-list>
<q-item
clickable
v-close-popup
@click="payment.signMode = 'serial-port'"
>
<q-item-section>
<q-item-label>Serial Port Device</q-item-label>
<q-item-label caption
>Connect via Serial Port and sign.</q-item-label
>
</q-item-section>
</q-item>
<q-item clickable disabled v-close-popup>
<q-item-section>
<q-item-label>Animated QR Code</q-item-label>
<q-item-label caption
>Share and Scan using animated QR
codes.</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div class="col-9">
<q-option-group
v-model="payment.signMode"
:options="payment.signModes"
color="primary"
inline
></q-option-group>
</div>
</div>
<q-separator
v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
class="q-mb-md"
></q-separator>
<div
v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
class="row items-center no-wrap q-mb-md q-mt-lg"
>
<div class="col-3 q-pr-lg">
<q-btn
v-if="!serial.selectedPort"
@click="openSerialPort()"
unelevated
color="secondary"
class="btn-full"
>Connect</q-btn
>
<q-btn
v-if="serial.selectedPort"
@click="closeSerialPort()"
outline
color="gray"
class="btn-full"
>Disconnect</q-btn
>
</div>
<div class="col-3">
<q-toggle
label="Advanced"
disabled
color="secodary float-left"
v-model="serial.showAdvancedConfig"
></q-toggle>
</div>
<div class="col-6"></div>
</div>
<q-separator
v-if="payment.psbtBase64 && payment.signMode === 'serial-port'"
class="q-mb-md"
></q-separator>
<div
v-if="serial.selectedPort && payment.psbtBase64 && payment.signMode === 'serial-port'"
class="row items-center no-wrap q-mb-md q-mt-lg"
>
<div class="col-3 q-pr-lg">
<q-btn-dropdown
split
class="btn-full"
color="secondary"
:label="hww.authenticated ? 'Sign Tx' : 'Login'"
@click="hwwExecuteDefaultCommand()"
>
</q-btn-dropdown>
</div>
<div class="col-3">
<q-toggle
label="Show Console"
color="secodary float-left"
v-model="hww.showConsole"
></q-toggle>
</div>
<div class="col-3">
<q-spinner
v-if="hww.sendingPsbt == true"
color="primary"
size="2.55em"
></q-spinner>
</div>
<div class="col-3"></div>
</div>
<div
v-if="hww.showConsole"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg"></div>
<div class="col-9">
<q-input
for="watchonly-serial-port-data-input"
v-model="serial.receivedData"
filled
type="textarea"
/>
</div>
</div>
<q-separator
v-if="hww.authenticated"
class="q-mb-md"
></q-separator>
<div
v-if="hww.authenticated && hww.psbtSent"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg">
<q-btn
@click="hwwSignPsbt()"
unelevated
color="green"
class="btn-full"
>Confirm
<q-spinner
v-if="hww.signingPsbt == true"
color="primary"
></q-spinner>
</q-btn>
</div>
<div class="col-3">
<q-toggle
v-if="payment.psbtBase64Signed"
label="Show Signed Psbt"
color="secodary float-left"
v-model="hww.showSignedPsbt"
></q-toggle>
</div>
<div class="col-6">
<q-badge
color="yellow"
text-color="black"
multi-line
class="text-subtitle2"
>Check transaction data on the Hardware Wallet
display</q-badge
>
</div>
</div>
<div
v-if="hww.showSignedPsbt"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg"></div>
<div class="col-9">
<q-input
v-model="payment.psbtBase64Signed"
filled
readonly
/>
</div>
</div>
<q-separator
v-if="payment.signedTx"
class="q-mb-md"
></q-separator>
<div
v-if="payment.psbtBase64Signed"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg">
<q-btn
v-if="payment.signedTx"
@click="broadcastTransaction()"
unelevated
color="secondary"
class="btn-full"
>Send Payment</q-btn
>
</div>
<div class="col-9">
<span class="text-subtitle2">Transaction Details</span>
<q-separator></q-separator>
</div>
</div>
<div
v-if="payment.signedTx"
class="row items-center no-wrap q-mb-md"
>
<div class="col-3 q-pr-lg"></div>
<div class="col-9">
<div class="row items-center no-wrap q-mb-sm">
<div class="col-3 q-pr-lg">Version</div>
<div class="col-9">{{payment.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">{{payment.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(payment.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 payment.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
v-if="payment.sentTxId"
class="q-mb-lg"
></q-separator>
<div
v-if="payment.sentTxId"
class="row items-center no-wrap q-mb-sm"
>
<div class="col-3">Transaction Id</div>
<div class="col-9">
<a
style="color: unset"
:href="config.data.mempool_endpoint + '/tx/' + payment.sentTxId"
target="_blank"
>
{{payment.sentTxId}}</a
>
</div>
</div>
</q-card-section>
</q-card>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
@ -405,6 +118,7 @@
:addresses="addresses"
:utxos="utxos.data"
:adminkey="g.user.wallets[0].adminkey"
:serial-signer-ref="$refs.serialSigner"
></payment>
<!-- todo: no more utxos.data -->
</div>