oxen-electron-gui-wallet/src/components/prove_transaction.vue

177 lines
4.5 KiB
Vue
Raw Normal View History

2019-06-13 01:20:26 +02:00
<template>
2020-03-03 04:16:23 +01:00
<div class="prove-transaction">
2019-06-13 01:20:26 +02:00
<div class="q-pa-md">
2020-03-03 04:16:23 +01:00
<div class="q-mb-lg description">
{{ $t("strings.proveTransactionDescription") }}
</div>
<div>
<LokiField :label="$t('fieldLabels.transactionId')" :error="$v.txid.$error">
<q-input
v-model.trim="txid"
:dark="theme == 'dark'"
:placeholder="$t('placeholders.pasteTransactionId')"
hide-underline
@blur="$v.txid.$touch"
/>
</LokiField>
<LokiField class="q-mt-md" :label="$t('fieldLabels.address')" :error="$v.address.$error" optional>
<q-input
v-model.trim="address"
:dark="theme == 'dark'"
:placeholder="$t('placeholders.recipientWalletAddress')"
hide-underline
@blur="$v.address.$touch"
/>
</LokiField>
<LokiField class="q-mt-md" :label="$t('fieldLabels.message')" optional>
<q-input
v-model.trim="message"
:dark="theme == 'dark'"
:placeholder="$t('placeholders.proveOptionalMessage')"
hide-underline
/>
</LokiField>
<q-field class="buttons q-pt-sm">
<q-btn color="primary" :label="$t('buttons.generate')" @click="generate" />
<q-btn v-if="canClear" color="secondary" :label="$t('buttons.clear')" @click="clear" />
<q-btn v-if="status.state.signature" color="secondary" :label="$t('buttons.copySignature')" @click="copy" />
</q-field>
</div>
<div v-if="status.state.signature">
<div class="txid q-mb-sm">
<div class="title">{{ $t("strings.transactionID") }}</div>
<div>{{ status.state.txid }}</div>
2019-06-13 03:52:38 +02:00
</div>
2020-03-03 04:16:23 +01:00
<p class="signature">
{{ status.state.signature }}
</p>
</div>
2019-06-13 01:20:26 +02:00
</div>
2020-03-03 04:16:23 +01:00
</div>
2019-06-13 01:20:26 +02:00
</template>
<script>
2020-03-03 04:16:23 +01:00
import { mapState } from "vuex";
import { required } from "vuelidate/lib/validators";
import { address } from "src/validators/common";
import LokiField from "components/loki_field";
import { clipboard } from "electron";
2019-06-13 01:20:26 +02:00
export default {
2020-03-03 04:16:23 +01:00
name: "ProveTransaction",
components: {
LokiField
},
data() {
return {
txid: "",
address: "",
message: ""
};
},
computed: mapState({
theme: state => state.gateway.app.config.appearance.theme,
status: state => state.gateway.prove_transaction_status,
canClear() {
return this.txid !== "" || this.address !== "" || this.message !== "";
}
}),
validations: {
txid: { required },
address: {
isAddress(value) {
if (value === "") return true;
2020-03-03 04:16:23 +01:00
return new Promise(resolve => {
address(value, this.$gateway)
.then(() => resolve(true))
.catch(() => resolve(false));
});
}
}
},
watch: {
status: {
handler(val, old) {
if (val.code == old.code) return;
switch (this.status.code) {
case -1:
this.$q.notify({
type: "negative",
timeout: 3000,
message: this.status.message
});
break;
}
2020-03-03 04:16:23 +01:00
},
deep: true
}
},
methods: {
generate() {
this.$v.txid.$touch();
this.$v.address.$touch();
2020-03-03 04:16:23 +01:00
if (this.$v.txid.$error) {
this.$q.notify({
type: "negative",
timeout: 1000,
message: this.$t("notification.errors.enterTransactionId")
});
return;
}
2020-03-03 04:16:23 +01:00
if (this.$v.address.$error) {
this.$q.notify({
type: "negative",
timeout: 1000,
message: this.$t("notification.errors.invalidAddress")
});
return;
}
2020-03-03 04:16:23 +01:00
this.$gateway.send("wallet", "prove_transaction", {
txid: this.txid.trim(),
address: this.address.trim(),
message: this.message.trim()
});
},
2020-03-03 04:16:23 +01:00
clear() {
this.txid = "";
this.address = "";
this.message = "";
this.$v.$reset();
},
copy() {
clipboard.writeText(this.status.state.signature);
this.$q.notify({
type: "positive",
timeout: 1000,
message: this.$t("notification.positive.signatureCopied")
});
}
2020-03-03 04:16:23 +01:00
}
};
2019-06-13 01:20:26 +02:00
</script>
<style lang="scss">
.prove-transaction {
2020-03-03 04:16:23 +01:00
.description {
white-space: pre-line;
}
.buttons {
.q-btn:not(:first-child) {
margin-left: 8px;
2019-06-13 03:52:38 +02:00
}
2020-03-03 04:16:23 +01:00
}
.signature {
flex: 1;
word-break: break-all;
word-wrap: break-word;
-webkit-user-select: all;
user-select: all;
padding: 8px;
}
}
</style>