Files
pay/guis/desktop/SendTransactionPane.qml
T
tomFlowee 2765fa4e84 Ensure that on send the comment textfield has focus.
Allowing the user to start typing instantly.
2025-11-16 12:35:01 +01:00

724 lines
28 KiB
QML

/*
* This file is part of the Flowee project
* Copyright (C) 2020-2024 Tom Zander <tom@flowee.org>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick
import QtQuick.Controls.Basic as QQC2
import QtQuick.Layouts
import QtQuick.Window
import "../Flowee" as Flowee
import "../ControlColors.js" as ControlColors
import Flowee.org.pay
Rectangle {
id: sendPanel
focus: true
color: palette.window
onActiveFocusChanged: {
if (!activeFocus)
return;
/*
The application can be started with a click on a payment link,
in that case the link gets made available in the following property
and we start a payment protocol with the value.
Afterwards we reset the property to avoid the next opening of this
screen repeating the payment.
*/
var paymentProtcolUrl = intent.paymentUrl;
if (paymentProtcolUrl !== "") {
payment.targetAddress = paymentProtcolUrl;
intent.paymentUrl = "";
}
}
Payment { // the model behind the Payment logic
id: payment
fiatPrice: Fiat.price
account: portfolio.current
}
Flickable {
id: contentArea
width: sendPanel.width - 20
y: 40
x: 10
height: parent.height - 40
contentHeight: mainColumn.height
contentWidth: width
clip: true
Column {
id: mainColumn
width: parent.width
spacing: 10
Repeater {
model: payment.details
delegate: Item {
width: mainColumn.width
height: loader.height + 6
Loader {
id: loader
width: parent.width
height: status === Loader.Ready ? item.implicitHeight : 0
sourceComponent: {
if (modelData.type === Payment.PayToAddress)
return destinationFields;
if (modelData.type === Payment.InputSelector)
return inputFields;
if (modelData.type === Payment.CommentOutput)
return opReturnInput;
return null; // should never happen
}
onLoaded: item.paymentDetail = modelData
}
Rectangle {
id: deleteDetailButton
anchors.right: parent.right
anchors.rightMargin: 6
y: 6
width: 32
height: 32
radius: 4
visible: modelData.collapsable && !modelData.collapsed
color: palette.base
border.color: palette.button
Image {
source: "qrc:/edit-delete.svg"
width: 20
height: 20
anchors.centerIn: parent
}
MouseArea {
id: mouseArea
anchors.fill: parent
anchors.margins: -3
cursorShape: Qt.ArrowCursor
}
}
Flowee.Dialog {
id: okCancelDiag
onAccepted: payment.remove(modelData);
title: qsTr("Confirm delete")
text: qsTr("Do you really want to delete this detail?")
}
}
}
RowLayout {
width: parent.width
spacing: 0
Flowee.Button {
text: qsTr("Add Destination")
onClicked: payment.addExtraOutput();
}
Item { Layout.fillWidth: true }
Flowee.Button {
id: prepareButton
text: qsTr("Prepare")
enabled: payment.isValid
property QtObject portfolioUsed: null
onClicked: {
portfolioUsed = portfolio.current
if (payment.walletNeedsPin) {
passwdDialog.start()
} else {
payment.prepare();
}
}
}
Flowee.PasswdDialog {
id: passwdDialog
title: qsTr("Enter your PIN")
onAccepted: {
payment.decrypt(pwd);
if (payment.error === "")
payment.prepare();
}
}
Flowee.Dialog {
title: qsTr("Warning")
standardButtons: QQC2.DialogButtonBox.Ok
text: {
var warnings = payment.warnings
if (warnings.length === 0)
return "";
return qsTr("Payment request warnings:")
+ "\n" + warnings.join("\n");
}
visible: text !== ""
onAccepted: payment.clearWarnings();
}
}
Flowee.WarningLabel {
id: warningLabel
width: parent.width
text: payment.error
color: txid.color // make sure this is 'disabled' when the warning is not for this wallet.
}
Flowee.GroupBox {
id: txDetails
Layout.columnSpan: 4
title: qsTr("Transaction Details")
width: parent.width
GridLayout {
columns: 2
property bool txOk: payment.txPrepared
Flowee.Label {
// no need translating this one.
text: "TxId:"
Layout.alignment: Qt.AlignRight | Qt.AlignTop
}
Flowee.LabelWithClipboard {
id: txid
text: payment.txid === "" ? qsTr("Not prepared yet") : payment.txid
Layout.fillWidth: true
// Change the color when the portfolio changed since 'prepare' was clicked.
color: prepareButton.portfolioUsed === portfolio.current
? palette.windowText
: Qt.darker(palette.windowText, (Pay.useDarkSkin ? 1.6 : 0.4))
menuText: qsTr("Copy transaction-ID")
}
Flowee.Label {
text: qsTr("Fee") + ":"
Layout.alignment: Qt.AlignRight
}
Flowee.BitcoinAmountLabel {
value: !parent.txOk ? 0 : payment.assignedFee
colorize: false
color: txid.color
}
Flowee.Label {
text: qsTr("Transaction size") + ":"
Layout.alignment: Qt.AlignRight
}
Flowee.Label {
text: {
if (!parent.txOk)
return "";
var rc = payment.txSize;
return qsTr("%1 bytes").arg(rc)
}
color: txid.color
}
Flowee.Label {
text: qsTr("Fee per byte") + ":"
Layout.alignment: Qt.AlignRight
}
Flowee.Label {
text: {
if (!parent.txOk)
return "";
var rc = payment.assignedFee / payment.txSize;
var fee = rc.toFixed(3); // no more than 3 numbers behind the separator
fee = (fee * 1.0).toString(); // remove trailing zero's (1.000 => 1)
return qsTr("%1 sat/byte", "fee").arg(fee);
}
color: txid.color
}
}
}
Flowee.DialogButtonBox {
id: box
width: parent.width
standardButtons: QQC2.DialogButtonBox.Cancel | QQC2.DialogButtonBox.Ok
onStandardButtonsChanged: {
var okButton = standardButton(QQC2.DialogButtonBox.Ok)
if (okButton !== null) {
okButton.text = qsTr("Send")
okButton.enabled = canSend
}
}
property bool canSend: payment.isValid && payment.txPrepared
&& prepareButton.portfolioUsed === portfolio.current; // also make sure we prepared for the current portfolio.
onCanSendChanged: setEnabled(QQC2.DialogButtonBox.Ok, canSend)
onRejected: payment.reset();
onAccepted: {
payment.markUserApproved();
broadcastFeedback.personalNote = payment.userComment
broadcastFeedback.start();
broadcastFeedback.takeFocus();
}
}
}
}
// the panel that allows us to tweak the payment (add details)
PaymentTweakingPanel {
anchors.fill: parent
}
Keys.forwardTo: Flowee.ListViewKeyHandler {
id: listViewKeyHandler
}
Flowee.BroadcastFeedback {
id: broadcastFeedback
anchors.leftMargin: 0
anchors.rightMargin: 0
fullScreen: true
bitcoinAmount: payment.paymentAmount
fiatPrice: payment.fiatPrice
targetAddress: payment.niceAddress
status: payment.broadcastStatus
processNote: function process(note) {
payment.userComment = note
}
onCloseButtonPressed: {
payment.reset();
reset();
}
}
// ============= Payment components ===============
/*
* Destination.
* The payment-output (address based) component.
*/
Component {
id: destinationFields
Flowee.GroupBox {
id: destinationPane
property QtObject paymentDetail: null
collapsable: paymentDetail.collapsable
onEffectiveCollapsedChanged: paymentDetail.collapsed = effectiveCollapsed
collapsed: paymentDetail.collapsed
title: qsTr("Destination")
summary: {
var ad = paymentDetail.address
if (ad === "")
ad = "\'\'";
if (paymentDetail.fiatFollows) {
if (paymentDetail.maxSelected)
var amount = qsTr("Max available", "The maximum balance available")
else
amount = Pay.amountToStringPretty(paymentDetail.paymentAmount)
+ " " + Pay.unitName;
}
else {
amount = Fiat.formattedPrice(paymentDetail.paymentAmountFiat)
}
return qsTr("%1 to %2", "summary text to pay X-euro to address M")
.arg(amount).arg(ad);
}
Item {
implicitWidth: parent.width
implicitHeight: Math.max(contentColumn.height, warningArea.visible ? warningArea.height : 0)
ColumnLayout {
id: contentColumn
width: parent.width
RowLayout {
width: parent.width
Flowee.TextField {
id: destination
focus: true
property var addressType: Pay.identifyString(text);
Layout.fillWidth: true
Layout.columnSpan: 3
placeholderText: enabled ? qsTr("Enter Bitcoin Cash Address") : ""
text: destinationPane.paymentDetail.address
onTextChanged: {
destinationPane.paymentDetail.address = text
addressInfo.createInfo();
}
color: {
if (!activeFocus && text !== "" && !addressInfo.addressOk)
return mainWindow.errorRed
return palette.windowText
}
enabled: paymentDetail.editable
}
Flowee.Label {
color: "green"
font.pixelSize: 24
text: addressInfo.addressOk ? "✔" : " "
}
}
Flowee.LabelWithClipboard {
visible: paymentDetail.address !== text
Layout.fillWidth: true
text: paymentDetail.formattedTarget
horizontalAlignment: Qt.AlignRight
font.italic: true
menuText: qsTr("Copy Address")
}
Flowee.AddressInfoWidget {
id: addressInfo
width: parent.width
addressType: destination.addressType
}
Flowee.Label {
id: payAmount
text: qsTr("Amount") + ":"
}
RowLayout {
Flowee.FiatValueField {
id: fiatValueField
visible: Fiat.price > 0
onValueEdited: destinationPane.paymentDetail.paymentAmountFiat = value
value: destinationPane.paymentDetail.paymentAmountFiat
}
Flowee.CheckBox {
id: amountSelector
sliderOnIndicator: false
visible: Fiat.price > 0
enabled: false
checked: destinationPane.paymentDetail.fiatFollows
}
Flowee.BitcoinValueField {
id: bitcoinValueField
value: destinationPane.paymentDetail.paymentAmount
onValueEdited: destinationPane.paymentDetail.paymentAmount = value
}
Flowee.Button {
id: sendAll
visible: destinationPane.paymentDetail.maxAllowed
text: qsTr("Max")
checkable: true
checked: destinationPane.paymentDetail.maxSelected
onClicked: destinationPane.paymentDetail.maxSelected = checked
}
}
}
Item {
id: warningArea
// BTC address entered warning.
visible: (destination.addressType === Wallet.LegacySH || destination.addressType === Wallet.LegacyPKH)
&& paymentDetail.forceLegacyOk === false;
width: parent.width - 40
height: warningColumn.height + 20 + destination.height
Rectangle {
anchors.fill: warningColumn
anchors.margins: -7
color: palette.window
border.width: 2
border.color: mainWindow.errorRed
radius: 10
}
Flowee.ArrowPoint {
x: 20
anchors.bottom: warningColumn.top
anchors.bottomMargin: 4
rotation: -90
color: mainWindow.errorRed
}
Column {
id: warningColumn
x: 10
y: destination.height + 10
width: parent.width
spacing: 10
Flowee.Label {
font.bold: true
font.pixelSize: warning.font.pixelSize * 1.2
text: qsTr("Warning")
}
Flowee.Label {
id: warning
width: parent.width
text: qsTr("This is a BTC address, which is an incompatible coin. Your funds could get lost and Flowee will have no way to recover them. Are you sure this is the right address?")
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
RowLayout {
width: parent.width
Item {
width: 1; height: 1
Layout.fillWidth: true
}
Flowee.Button {
text: qsTr("Continue")
onClicked: paymentDetail.forceLegacyOk = true
}
Flowee.Button {
text: qsTr("Cancel")
onClicked: destination.text = ""
}
}
}
}
}
}
}
/*
* The input selector component.
*/
Component {
id: inputFields
Flowee.GroupBox {
id: inputsPane
collapsable: paymentDetail.collapsable
collapsed: paymentDetail.collapsed
onEffectiveCollapsedChanged: paymentDetail.collapsed = effectiveCollapsed
property QtObject paymentDetail: null
title: qsTr("Coin Selector")
summary: qsTr("Selected %1 %2 in %3 coins", "selected 2 BCH in 5 coins", paymentDetail.selectedCount)
.arg(Pay.amountToStringPretty(paymentDetail.selectedValue))
.arg(Pay.unitName)
.arg(paymentDetail.selectedCount)
// make this tabs arrow-navigation go to our coinsListView.
Component.onCompleted: listViewKeyHandler.target = coinsListView
columns: 4
Flowee.Label {
text: qsTr("Total", "Number of coins") + ":"
}
Flowee.Label {
text: coinsListView.count
Layout.fillWidth: true
}
Flowee.Label {
text: qsTr("Needed") +":"
}
Flowee.BitcoinAmountLabel {
id: neededAmountLabel
value: payment.paymentAmount
Layout.fillWidth: true
colorize: false
}
// next row
Flowee.Label {
text: qsTr("Selected") + ":"
}
Flowee.Label {
text: inputsPane.paymentDetail.selectedCount
Layout.fillWidth: true
}
Flowee.Label {
text: qsTr("Value") + ":"
}
Flowee.BitcoinAmountLabel {
value: inputsPane.paymentDetail.selectedValue
Layout.fillWidth: true
colorize: false
}
// next row
ListView {
id: coinsListView
clip: true
Layout.columnSpan: 4
Layout.fillWidth: true
implicitHeight: {
var ch = contentHeight
var suggested = contentArea.height * 0.7
if (ch < 0 || suggested < ch)
return suggested
return ch
}
model: inputsPane.paymentDetail.coins
property bool menuIsOpen: false
delegate: Rectangle {
width: ListView.view.width - 5
height: mainText.height + ageLabel.height + 12
color: index %2 == 0 ? palette.alternateBase : palette.base
Rectangle {
id: lockedRect
color: Pay.useDarkSkin ? "#002558" : "#1a6ae2"
anchors.fill: parent
visible: locked // if the UTXO is user-locked
QQC2.ToolTip {
delay: 600
text: qsTr("Locked coins will never be used for payments. Right-click for menu.")
visible: model.locked && rowMouseArea.containsMouse
}
}
Flowee.CheckBox {
y: 6
id: selectedBox
checked: model.selected
visible: !lockedRect.visible
enabled: visible
}
Flowee.Label {
id: mainText
y: 6
anchors.right: amountLabel.left
anchors.left: parent.left
anchors.leftMargin: 50
text: {
var fancy = cloakedAddress;
if (typeof fancy != "undefined")
return fancy;
return address;
}
elide: Flowee.Label.ElideRight
}
Flowee.BitcoinAmountLabel {
id: amountLabel
value: model.value
anchors.baseline: mainText.baseline
anchors.right: cfIcon.visible ? cfIcon.left : parent.right
// only HD wallets can use this
anchors.rightMargin: portfolio.current.isHDWallet ? 30 : 0
colorize: false
fiatWidth: Pay.isMainChain ? 90 : 0
}
Flowee.Label {
id: ageLabel
text: qsTr("Age") + ": " + age
anchors.left: mainText.left
anchors.top: mainText.bottom
font.pixelSize: mainText.font.pixelSize * 0.8
}
MouseArea {
id: rowMouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: locked
onClicked: (mouse)=> {
// make it easy for the user to close a menu with either mouse
// button without instantly triggering another action.
if (coinsListView.menuIsOpen) {
coinsListView.menuIsOpen = false
return;
}
if (mouse.button === Qt.LeftButton) {
if (!model.locked) {
var willCheck = !selectedBox.checked
selectedBox.checked = willCheck
inputsPane.paymentDetail.setRowIncluded(index, willCheck)
}
}
else {
coinsListView.menuIsOpen = true
// Make sure that the menu
// opens where we clicked.
mousePos.x = mouse.x
mousePos.y = mouse.y
lockingMenu.open();
}
}
Item {
id: mousePos
width: 1; height: 1
QQC2.Menu {
id: lockingMenu
QQC2.MenuItem {
text: selectedBox.checked ? qsTr("Unselect All") : qsTr("Select All")
onClicked: {
coinsListView.menuIsOpen = false
if (selectedBox.checked)
inputsPane.paymentDetail.unselectAll();
else
inputsPane.paymentDetail.selectAll();
}
}
QQC2.MenuItem {
text: locked ? qsTr("Unlock coin") : qsTr("Lock coin")
onClicked: {
inputsPane.paymentDetail.setOutputLocked(index, !locked)
coinsListView.menuIsOpen = false
}
}
QQC2.MenuItem {
text: qsTr("Copy Address")
onClicked: Pay.copyToClipboard(Pay.chainPrefix + address);
}
}
}
}
Flowee.CFIcon {
id: cfIcon
anchors.right: parent.right
anchors.verticalCenter: mainText.verticalCenter
visible: model.fused
}
}
}
}
}
/*
* Op-Return comment / data field.
*/
Component {
id: opReturnInput
Flowee.GroupBox {
property QtObject paymentDetail: null
collapsable: paymentDetail.collapsable
onEffectiveCollapsedChanged: paymentDetail.collapsed = effectiveCollapsed
collapsed: paymentDetail.collapsed
title: qsTr("Public-comment")
columns: 2
Flowee.Label {
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
Layout.columnSpan: 2
text: {
if (paymentDetail.editable) // user-created.
return qsTr("Add a comment you want to include in the transaction, visible for everyone.")
return qsTr("Custom message, to be included in the transaction.")
}
font.italic: true
}
Flowee.Label {
text: qsTr("Text") + ":"
}
Flowee.TextField {
id: textData
Layout.fillWidth: true
text: paymentDetail.editable ? paymentDetail.commentString : paymentDetail.preview
enabled: paymentDetail.editable
onTextChanged: if (paymentDetail.editable) paymentDetail.commentString = text
}
Flowee.Label {
text: qsTr("Size")+ ":"
}
Flowee.Label {
text: paymentDetail.size
}
}
}
}