Merge #435: Initial Template for Request Payment page

13535ca qml: Introduce RequestPayment page (johnny9)
9f4411c qml: Introduce BitcoinAmount (johnny9)
b2d8c7b qml: Add pending icon (johnny9)
f7cc57d qml: Add flip-vertical icon (johnny9)
e8dd09d qml: Add copy icon (johnny9)
a395838 qml: Introduce LabeledTextInput control (johnny9)

Pull request description:

  These commits introduce the Request Payment flow. This view is available under the "Receive" tab on the Desktop Wallets main navigation view.

  The Request Payment form itself currently only includes fields currently supported by the Qt wallet (label, message, and amount). Follow up PR will add support for local notes.

  The Amount field in the Request form takes only valid Satoshi/Bitcoin amounts and supports flipping the units with the associated button toggle.

  When the Continue button is pressed the Request Confirmation page gets pushed to the stack will eventually reflect the fields inputted in the previous form backed by the output of the WalletModel result. In its current implemention it just has statically defined properties to check the visual layout. The page also contains an address field with the copy icon that can be used to move the address into your clipboard.

  Ubuntu screenshots
  ![](https://github.com/user-attachments/assets/d3cca6cd-5c6f-4a2f-bf4f-e37960bb3746)
  ![](https://github.com/user-attachments/assets/61fc296d-dfc8-4a22-a56d-29603042f2c4)

ACKs for top commit:
  hebasto:
    ACK 13535ca, I have reviewed the code and it looks OK.

Tree-SHA512: bd0ad001c858d59a258c22fa0e963021ddd3bfeab93d1e47ce460b41ceb96cda834eb3c5ebbef99f3c583844c166462fcc3673bf96cb7a0464f47da55ad0f50d

Author: hebasto

Diff for: src/Makefile.qt.include

@@ -46,6 +46,7 @@ QT_MOC_CPP = \
   qml/models/moc_walletlistmodel.cpp \
   qml/models/moc_walletqmlmodel.cpp \
   qml/moc_appmode.cpp \
+  qml/moc_bitcoinamount.cpp \
   qml/moc_walletqmlcontroller.cpp \
   qt/moc_addressbookpage.cpp \
   qt/moc_addresstablemodel.cpp \
@@ -130,6 +131,7 @@ BITCOIN_QT_H = \
   qml/models/walletqmlmodel.h \
   qml/appmode.h \
   qml/bitcoin.h \
+  qml/bitcoinamount.h \
   qml/guiconstants.h \
   qml/imageprovider.h \
   qml/util.h \
@@ -310,6 +312,7 @@ BITCOIN_QT_WALLET_CPP = \
 
 BITCOIN_QML_BASE_CPP = \
   qml/bitcoin.cpp \
+  qml/bitcoinamount.cpp \
   qml/components/blockclockdial.cpp \
   qml/controls/linegraph.cpp \
   qml/models/chainmodel.cpp \
@@ -340,9 +343,11 @@ QML_RES_ICONS = \
   qml/res/icons/caret-left.png \
   qml/res/icons/caret-right.png \
   qml/res/icons/check.png \
+  qml/res/icons/copy.png \
   qml/res/icons/cross.png \
   qml/res/icons/error.png \
   qml/res/icons/export.png \
+  qml/res/icons/flip-vertical.png \
   qml/res/icons/gear.png \
   qml/res/icons/gear-outline.png \
   qml/res/icons/hidden.png \
@@ -351,6 +356,7 @@ QML_RES_ICONS = \
   qml/res/icons/network-dark.png \
   qml/res/icons/network-light.png \
   qml/res/icons/plus.png \
+  qml/res/icons/pending.png \
   qml/res/icons/shutdown.png \
   qml/res/icons/singlesig-wallet.png \
   qml/res/icons/storage-dark.png \
@@ -393,6 +399,7 @@ QML_RES_QML = \
   qml/controls/InformationPage.qml \
   qml/controls/IPAddressValueInput.qml \
   qml/controls/KeyValueRow.qml \
+  qml/controls/LabeledTextInput.qml \
   qml/controls/NavButton.qml \
   qml/controls/PageIndicator.qml \
   qml/controls/NavigationBar.qml \
@@ -440,6 +447,7 @@ QML_RES_QML = \
   qml/pages/wallet/CreatePassword.qml \
   qml/pages/wallet/CreateWalletWizard.qml \
   qml/pages/wallet/DesktopWallets.qml \
+  qml/pages/wallet/RequestPayment.qml \
   qml/pages/wallet/WalletBadge.qml \
   qml/pages/wallet/WalletSelect.qml
 

Diff for: src/qml/bitcoin.cpp

@@ -15,6 +15,7 @@
 #include <node/interface_ui.h>
 #include <noui.h>
 #include <qml/appmode.h>
+#include <qml/bitcoinamount.h>
 #ifdef __ANDROID__
 #include <qml/androidnotifier.h>
 #endif
@@ -330,6 +331,7 @@ int QmlGuiMain(int argc, char* argv[])
     qmlRegisterType<BlockClockDial>("org.bitcoincore.qt", 1, 0, "BlockClockDial");
     qmlRegisterType<LineGraph>("org.bitcoincore.qt", 1, 0, "LineGraph");
     qmlRegisterUncreatableType<PeerDetailsModel>("org.bitcoincore.qt", 1, 0, "PeerDetailsModel", "");
+    qmlRegisterType<BitcoinAmount>("org.bitcoincore.qt", 1, 0, "BitcoinAmount");
 
 #ifdef ENABLE_WALLET
     qmlRegisterUncreatableType<WalletQmlModel>("org.bitcoincore.qt", 1, 0, "WalletQmlModel",

Diff for: src/qml/bitcoin_qml.qrc

@@ -23,6 +23,7 @@
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
         <file>controls/CoreTextField.qml</file>
+        <file>controls/LabeledTextInput.qml</file>
         <file>controls/ExternalLink.qml</file>
         <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
@@ -77,6 +78,7 @@
         <file>pages/wallet/CreatePassword.qml</file>
         <file>pages/wallet/CreateWalletWizard.qml</file>
         <file>pages/wallet/DesktopWallets.qml</file>
+        <file>pages/wallet/RequestPayment.qml</file>
         <file>pages/wallet/WalletBadge.qml</file>
         <file>pages/wallet/WalletSelect.qml</file>
     </qresource>
@@ -93,9 +95,11 @@
         <file alias="caret-left">res/icons/caret-left.png</file>
         <file alias="caret-right">res/icons/caret-right.png</file>
         <file alias="check">res/icons/check.png</file>
+        <file alias="copy">res/icons/copy.png</file>
         <file alias="cross">res/icons/cross.png</file>
         <file alias="error">res/icons/error.png</file>
         <file alias="export">res/icons/export.png</file>
+        <file alias="flip-vertical">res/icons/flip-vertical.png</file>
         <file alias="gear">res/icons/gear.png</file>
         <file alias="gear-outline">res/icons/gear-outline.png</file>
         <file alias="hidden">res/icons/hidden.png</file>
@@ -104,6 +108,7 @@
         <file alias="network-dark">res/icons/network-dark.png</file>
         <file alias="network-light">res/icons/network-light.png</file>
         <file alias="plus">res/icons/plus.png</file>
+        <file alias="pending">res/icons/pending.png</file>
         <file alias="shutdown">res/icons/shutdown.png</file>
         <file alias="singlesig-wallet">res/icons/singlesig-wallet.png</file>
         <file alias="storage-dark">res/icons/storage-dark.png</file>

Diff for: src/qml/bitcoinamount.cpp

@@ -0,0 +1,127 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+#include <qml/bitcoinamount.h>
+
+#include <QRegExp>
+#include <QStringList>
+
+
+BitcoinAmount::BitcoinAmount(QObject *parent) : QObject(parent)
+{
+    m_unit = Unit::BTC;
+}
+
+int BitcoinAmount::decimals(Unit unit)
+{
+    switch (unit) {
+    case Unit::BTC: return 8;
+    case Unit::SAT: return 0;
+    } // no default case, so the compiler can warn about missing cases
+    assert(false);
+}
+
+QString BitcoinAmount::sanitize(const QString &text)
+{
+    QString result = text;
+
+    // Remove any invalid characters
+    result.remove(QRegExp("[^0-9.]"));
+
+    // Ensure only one decimal point
+    QStringList parts = result.split('.');
+    if (parts.size() > 2) {
+        result = parts[0] + "." + parts[1];
+    }
+
+    // Limit decimal places to 8
+    if (parts.size() == 2 && parts[1].length() > 8) {
+        result = parts[0] + "." + parts[1].left(8);
+    }
+
+    return result;
+}
+
+BitcoinAmount::Unit BitcoinAmount::unit() const
+{
+    return m_unit;
+}
+
+void BitcoinAmount::setUnit(const Unit unit)
+{
+    m_unit = unit;
+    Q_EMIT unitChanged();
+}
+
+QString BitcoinAmount::unitLabel() const
+{
+    switch (m_unit) {
+    case Unit::BTC: return "₿";
+    case Unit::SAT: return "Sat";
+    }
+    assert(false);
+}
+
+QString BitcoinAmount::amount() const
+{
+    return m_amount;
+}
+
+void BitcoinAmount::setAmount(const QString& new_amount)
+{
+    m_amount = sanitize(new_amount);
+    Q_EMIT amountChanged();
+}
+
+long long BitcoinAmount::toSatoshis(QString& amount, const Unit unit)
+{
+
+    int num_decimals = decimals(unit);
+
+    QStringList parts = amount.remove(' ').split(".");
+
+    QString whole = parts[0];
+    QString decimals;
+
+    if(parts.size() > 1)
+    {
+        decimals = parts[1];
+    }
+    QString str = whole + decimals.leftJustified(num_decimals, '0', true);
+
+    return str.toLongLong();
+}
+
+QString BitcoinAmount::convert(const QString &amount, Unit unit)
+{
+    if (amount == "") {
+        return amount;
+    }
+
+    QString result = amount;
+    int decimalPosition  = result.indexOf(".");
+
+    if (decimalPosition == -1) {
+        decimalPosition = result.length();
+        result.append(".");
+    }
+
+    if (unit == Unit::BTC) {
+        int numDigitsAfterDecimal = result.length() - decimalPosition - 1;
+        if (numDigitsAfterDecimal < 8) {
+            result.append(QString(8 - numDigitsAfterDecimal, '0'));
+        }
+        result.remove(decimalPosition, 1);
+    } else if (unit == Unit::SAT) {
+        result.remove(decimalPosition, 1);
+        int newDecimalPosition = decimalPosition - 8;
+        if (newDecimalPosition < 1) {
+            result = QString("0").repeated(-newDecimalPosition) + result;
+            newDecimalPosition = 0;
+        }
+        result.insert(newDecimalPosition, ".");
+    }
+
+    return result;
+}

Diff for: src/qml/bitcoinamount.h

@@ -0,0 +1,52 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+#ifndef BITCOIN_QML_BITCOINAMOUNT_H
+#define BITCOIN_QML_BITCOINAMOUNT_H
+
+#include <QObject>
+#include <QString>
+#include <qobjectdefs.h>
+
+class BitcoinAmount : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(Unit unit READ unit WRITE setUnit NOTIFY unitChanged)
+    Q_PROPERTY(QString unitLabel READ unitLabel NOTIFY unitChanged)
+    Q_PROPERTY(QString amount READ amount WRITE setAmount NOTIFY amountChanged)
+
+public:
+    enum class Unit {
+        BTC,
+        SAT
+    };
+    Q_ENUM(Unit)
+
+    explicit BitcoinAmount(QObject *parent = nullptr);
+
+    Unit unit() const;
+    void setUnit(Unit unit);
+    QString unitLabel() const;
+    QString amount() const;
+    void setAmount(const QString& new_amount);
+
+public Q_SLOTS:
+    QString sanitize(const QString &text);
+    QString convert(const QString &text, Unit unit);
+
+Q_SIGNALS:
+    void unitChanged();
+    void unitLabelChanged();
+    void amountChanged();
+
+private:
+    long long toSatoshis(QString &amount, const Unit unit);
+    int decimals(Unit unit);
+
+    Unit m_unit;
+    QString m_unitLabel;
+    QString m_amount;
+};
+
+#endif // BITCOIN_QML_BITCOINAMOUNT_H

Diff for: src/qml/controls/LabeledTextInput.qml

@@ -0,0 +1,61 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+    property alias labelText: label.text
+    property alias text: input.text
+    property alias placeholderText: input.placeholderText
+    property alias iconSource: icon.source
+    property alias customIcon: iconContainer.data
+    property alias enabled: input.enabled
+
+    signal iconClicked
+    signal textEdited
+
+    id: root
+    implicitHeight: label.height + input.height
+
+    CoreText {
+        id: label
+        anchors.left: parent.left
+        anchors.top: parent.top
+        color: Theme.color.neutral7
+        font.pixelSize: 15
+    }
+
+    TextField {
+        id: input
+        anchors.left: parent.left
+        anchors.right: iconContainer.left
+        anchors.bottom: parent.bottom
+        leftPadding: 0
+        font.family: "Inter"
+        font.styleName: "Regular"
+        font.pixelSize: 18
+        color: Theme.color.neutral9
+        placeholderTextColor: Theme.color.neutral7
+        background: Item {}
+        selectByMouse: true
+        onTextEdited: root.textEdited()
+    }
+
+    Item {
+        id: iconContainer
+        anchors.right: parent.right
+        anchors.verticalCenter: input.verticalCenter
+
+        Icon {
+            id: icon
+            source: ""
+            color: Theme.color.neutral8
+            size: 30
+            enabled: source != ""
+            onClicked: root.iconClicked()
+        }
+    }
+}

Diff for: src/qml/imageprovider.cpp

@@ -77,6 +77,11 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/check").pixmap(requested_size);
     }
 
+    if (id == "copy") {
+        *size = requested_size;
+        return QIcon(":/icons/copy").pixmap(requested_size);
+    }
+
     if (id == "cross") {
         *size = requested_size;
         return QIcon(":/icons/cross").pixmap(requested_size);
@@ -92,6 +97,11 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/export").pixmap(requested_size);
     }
 
+    if (id == "flip-vertical") {
+        *size = requested_size;
+        return QIcon(":/icons/flip-vertical").pixmap(requested_size);
+    }
+
     if (id == "gear") {
         *size = requested_size;
         return QIcon(":/icons/gear").pixmap(requested_size);
@@ -122,6 +132,11 @@ QPixmap ImageProvider::requestPixmap(const QString& id, QSize* size, const QSize
         return QIcon(":/icons/network-light").pixmap(requested_size);
     }
 
+    if (id == "pending") {
+        *size = requested_size;
+        return QIcon(":/icons/pending").pixmap(requested_size);
+    }
+
     if (id == "shutdown") {
         *size = requested_size;
         return QIcon(":/icons/shutdown").pixmap(requested_size);