feat(@desktop/wallet): Adapt AmountToSend for Simple Send

fixes #16703

storybook/pages/AmountToSendPage.qml

@@ -19,6 +19,8 @@ SplitView {
 
             anchors.centerIn: parent
 
+            width: 400
+
             interactive: interactiveCheckBox.checked
             fiatInputInteractive: fiatInteractiveCheckBox.checked
             markAsInvalid: markAsInvalidCheckBox.checked
@@ -26,7 +28,7 @@ SplitView {
             mainInputLoading: ctrlMainInputLoading.checked
             bottomTextLoading: ctrlBottomTextLoading.checked
 
-            caption: "Amount to send"
+            caption: captionField.text
 
             decimalPoint: decimalPointRadioButton.checked ? "." : ","
             price: parseFloat(priceTextField.text)
@@ -35,6 +37,10 @@ SplitView {
 
             formatFiat: balance => `${balance.toLocaleString(Qt.locale())} USD`
             formatBalance: balance => `${balance.toLocaleString(Qt.locale())} ETH`
+
+            dividerVisible: ctrlDividerVisible.checked
+            selectedSymbol: ctrlShowMainInputSymbol.checked ? amountToSend.fiatMode ? "USD": "ETH": ""
+            progressivePixelReduction: ctrlProgressivePixelReduction.checked
         }
     }
 
@@ -46,6 +52,19 @@ SplitView {
         ColumnLayout {
             spacing: 15
 
+
+            RowLayout {
+                Label {
+                    text: "Caption"
+                }
+
+                TextField {
+                    id: captionField
+
+                    text: "Amount to send"
+                }
+            }
+
             RowLayout {
                 Label {
                     text: "Price"
@@ -119,6 +138,22 @@ SplitView {
                     id: ctrlBottomTextLoading
                     text: "Bottom text loading"
                 }
+
+                CheckBox {
+                    id: ctrlDividerVisible
+                    text: "Divider"
+                }
+
+                CheckBox {
+                    id: ctrlProgressivePixelReduction
+                    text: "Progressive Pixel Reduction"
+                    checked: true
+                }
+
+                CheckBox {
+                    id: ctrlShowMainInputSymbol
+                    text: "Show Main Input Symbol"
+                }
             }
 
             Label {

storybook/pages/AmountValidatorPage.qml

@@ -20,6 +20,7 @@ Item {
 
                 maxIntegralDigits: maxIntegralDigitsSpinBox.value
                 maxDecimalDigits: maxDecimalDigitsSpinBox.value
+                maxDigits: maxTotalDigitsSpinBox.value
             }
         }
 
@@ -80,6 +81,20 @@ Item {
                 value: 5
             }
         }
+
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+
+            Label {
+                text: "Max total digits:"
+            }
+
+            SpinBox {
+                id: maxTotalDigitsSpinBox
+
+                value: maxIntegralDigitsSpinBox.value + maxDecimalDigitsSpinBox.value
+            }
+        }
     }
 }
 

storybook/qmlTests/tests/tst_AmountValidator.qml

@@ -171,5 +171,27 @@ Item {
             compare(textField.acceptableInput, true)
             compare(textField.text, ".22")
         }
+
+        function test_maxTotalDigits() {
+            textField.text = "1234567891."
+            textField.forceActiveFocus()
+            textField.validator.maxDecimalDigits = 18
+            textField.validator.maxDigits = 15
+            textField.cursorPosition = 11
+
+            type(Qt.Key_1)
+            type(Qt.Key_2)
+            type(Qt.Key_3)
+            type(Qt.Key_4)
+            type(Qt.Key_5)
+
+            compare(textField.acceptableInput, true)
+            compare(textField.text, "1234567891.12345")
+
+            type(Qt.Key_6)
+
+            compare(textField.acceptableInput, true)
+            compare(textField.text, "1234567891.12345")
+        }
     }
 }

storybook/qmlTests/tests/tst_SwapInputPanel.qml

@@ -176,7 +176,11 @@ Item {
 
             const amountToSendInput = findChild(controlUnderTest, "amountToSendInput")
             verify(!!amountToSendInput)
-            mouseClick(amountToSendInput)
+
+            const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField")
+            verify(!!amountToSend_textField)
+
+            mouseClick(amountToSend_textField)
             waitForRendering(amountToSendInput)
             verify(amountToSendInput.cursorVisible)
 
@@ -221,7 +225,11 @@ Item {
 
             const amountToSendInput = findChild(controlUnderTest, "amountToSendInput")
             verify(!!amountToSendInput)
-            mouseClick(amountToSendInput)
+
+            const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField")
+            verify(!!amountToSend_textField)
+
+            mouseClick(amountToSend_textField)
             waitForRendering(amountToSendInput)
             verify(amountToSendInput.cursorVisible)
 
@@ -398,10 +406,13 @@ Item {
             const amountToSendInput = findChild(controlUnderTest, "amountToSendInput")
             verify(!!amountToSendInput)
 
+            const amountToSend_textField = findChild(controlUnderTest, "amountToSend_textField")
+            verify(!!amountToSend_textField)
+
             const bottomItemText = findChild(amountToSendInput, "bottomItemText")
             verify(!!bottomItemText)
 
-            mouseClick(amountToSendInput)
+            mouseClick(amountToSend_textField)
             // enter 5.42 as entered amount
             keyClick(Qt.Key_5)
             keyClick(Qt.Key_Period)

ui/StatusQ/src/StatusQ/Validators/AmountValidator.qml

@@ -24,6 +24,7 @@ GenericValidator {
     property string decimalPoint: Qt.locale(locale).decimalPoint
     property int maxIntegralDigits: 10
     property int maxDecimalDigits: 10
+    property int maxDigits: maxIntegralDigits + maxDecimalDigits
 
     validate: {
         if (input.length === 0)
@@ -52,6 +53,9 @@ GenericValidator {
         const [integral, decimal] = pointsCount ? delocalized.split(".")
                                                 : [delocalized, ""]
 
+        if ((integral.length + decimal.length) > root.maxDigits)
+            return GenericValidator.Invalid
+
         if (integral.length > root.maxIntegralDigits)
             return GenericValidator.Invalid
 

ui/imports/shared/popups/send/views/AmountToSend.qml

@@ -55,6 +55,19 @@ Control {
     property alias caption: captionText.text
     property bool interactive: true
 
+    /* Boolean flag decides whether divider is shown between main input
+       area and bottom text */
+    property bool dividerVisible
+
+    /* Boolean flag decides whether the main input text area's fontsize reduces
+       as more and more characters are added.
+       True by default */
+    property bool progressivePixelReduction: true
+
+    /* This string holds the current main input area's currency symbol (fiat or crypto)
+       Not set = not shown */
+    property string selectedSymbol
+
     readonly property bool cursorVisible: textField.cursorVisible
     readonly property alias placeholderText: textField.placeholderText
 
@@ -155,6 +168,22 @@ Control {
                             multiplier),
                         SQUtils.AmountsArithmetic.fromNumber(price)).toFixed()
         }
+
+        /* Incase we dont have progressing font size reduction we only
+           allow users to enter digits until there is place left */
+        function getMaxDigitsAllowed() {
+            if (root.progressivePixelReduction)  {
+                return validator.maxDecimalDigits + validator.maxIntegralDigits
+            } else {
+                let availableSpaceForAmount = root.availableWidth - currencyField.contentWidth - layout.spacing
+                return Math.floor(availableSpaceForAmount/textMetrics.tightBoundingRect.width)
+            }
+        }
+
+        readonly property TextMetrics textMetrics: TextMetrics {
+            font: textField.font
+            text: "0"
+        }
     }
 
     contentItem: ColumnLayout {
@@ -173,13 +202,14 @@ Control {
         }
 
         RowLayout {
+            id: layout
+            spacing: 4
+
             StatusTextField {
                 id: textField
 
                 objectName: "amountToSend_textField"
 
-                Layout.fillWidth: true
-
                 implicitHeight: 44
                 padding: 0
                 background: null
@@ -198,11 +228,16 @@ Control {
                             + "0".repeat(root.fiatDecimalPlaces)
                 }
 
-                font.pixelSize: Utils.getFontSizeBasedOnLetterCount(text)
+                font.pixelSize:{
+                    if (!root.progressivePixelReduction)
+                        return 34
+                    return Utils.getFontSizeBasedOnLetterCount(text)
+                }
 
                 validator: AmountValidator {
                     id: validator
 
+                    maxDigits: d.getMaxDigitsAllowed()
                     maxDecimalDigits: d.fiatMode ? root.fiatDecimalPlaces
                                                  : root.multiplierIndex
                     locale: root.locale.name
@@ -215,6 +250,26 @@ Control {
                 Layout.preferredHeight: textField.height
                 visible: root.mainInputLoading
             }
+            StatusBaseText {
+                id: currencyField
+
+                objectName: "amountToSend_currencyField"
+
+                Layout.alignment: Qt.AlignVCenter
+                Layout.topMargin: 10
+
+                color: Theme.palette.directColor5
+                text: selectedSymbol
+                font.pixelSize: Theme.additionalTextSize
+            }
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 1
+            Layout.bottomMargin: 12
+            color: Theme.palette.baseColor2
+            visible: root.dividerVisible
         }
 
         StatusBaseText {