From 7ddbcf926b58d5f2121d8d66c66c0262909e6ba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Wed, 14 Aug 2024 14:46:34 +0200
Subject: [PATCH] chore(AmountToSendNew): expose some more properties

- like cursorVisible or fiatInputInteractive
- add support for "loading" overlays
---
 storybook/pages/AmountToSendNewPage.qml       | 21 +++++++++++
 .../popups/send/views/AmountToSendNew.qml     | 35 +++++++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/storybook/pages/AmountToSendNewPage.qml b/storybook/pages/AmountToSendNewPage.qml
index 5b0ccda851..3f57b21bd9 100644
--- a/storybook/pages/AmountToSendNewPage.qml
+++ b/storybook/pages/AmountToSendNewPage.qml
@@ -20,8 +20,12 @@ SplitView {
             anchors.centerIn: parent
 
             interactive: interactiveCheckBox.checked
+            fiatInputInteractive: fiatInteractiveCheckBox.checked
             markAsInvalid: markAsInvalidCheckBox.checked
 
+            mainInputLoading: ctrlMainInputLoading.checked
+            bottomTextLoading: ctrlBottomTextLoading.checked
+
             caption: "Amount to send"
 
             decimalPoint: decimalPointRadioButton.checked ? "." : ","
@@ -93,11 +97,28 @@ SplitView {
                     checked: true
                 }
 
+                CheckBox {
+                    id: fiatInteractiveCheckBox
+
+                    text: "Fiat mode interactive"
+                    checked: true
+                }
+
                 CheckBox {
                     id: markAsInvalidCheckBox
 
                     text: "Mark as invalid"
                 }
+
+                CheckBox {
+                    id: ctrlMainInputLoading
+                    text: "Input loading"
+                }
+
+                CheckBox {
+                    id: ctrlBottomTextLoading
+                    text: "Bottom text loading"
+                }
             }
 
             Label {
diff --git a/ui/imports/shared/popups/send/views/AmountToSendNew.qml b/ui/imports/shared/popups/send/views/AmountToSendNew.qml
index a6e7699d31..f0c6c9dcb5 100644
--- a/ui/imports/shared/popups/send/views/AmountToSendNew.qml
+++ b/ui/imports/shared/popups/send/views/AmountToSendNew.qml
@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as SQUtils
-
+import StatusQ.Components 0.1
 import StatusQ.Validators 0.1
 
 import utils 1.0
@@ -22,6 +22,9 @@ Control {
      * crypto value otherwise. */
     readonly property alias fiatMode: d.fiatMode
 
+    /* Indicates whether toggling the fiatMode is enabled for the user */
+    property bool fiatInputInteractive: interactive
+
     /* Indicates if input represent valid number. E.g. empty input or containing
      * only decimal point is not valid. */
     readonly property alias valid: textField.acceptableInput
@@ -41,7 +44,7 @@ Control {
     property int fiatDecimalPlaces: 2
 
     /* Specifies how divisible given cryptocurrency is, e.g. 18 for ETH. Used
-     * for limiting allowed decimal places and computing final amout as an
+     * for limiting allowed decimal places and computing final amount as an
      * integer value */
     property int multiplierIndex: 18
 
@@ -51,6 +54,13 @@ Control {
     property alias caption: captionText.text
     property bool interactive: true
 
+    readonly property bool cursorVisible: textField.cursorVisible
+    readonly property alias placeholderText: textField.placeholderText
+
+    /* Loading states for the input and text below */
+    property bool mainInputLoading
+    property bool bottomTextLoading
+
     /* Allows mark input as invalid when it's valid number but doesn't satisfy
      * arbitrary external criteria, e.g. is higher than maximum expected value. */
     property bool markAsInvalid: false
@@ -132,6 +142,9 @@ Control {
                             SQUtils.AmountsArithmetic.fromNumber(
                                 price * (10 ** root.fiatDecimalPlaces))).round().toFixed()
 
+            if (!price)
+                return 0
+
             const multiplier = SQUtils.AmountsArithmetic.fromExponent(
                                  root.multiplierIndex)
 
@@ -191,7 +204,15 @@ Control {
 
                     maxDecimalDigits: d.fiatMode ? root.fiatDecimalPlaces
                                                  : root.multiplierIndex
+                    locale: root.locale.name
                 }
+                visible: !root.mainInputLoading
+            }
+            LoadingComponent {
+                objectName: "topAmountToSendInputLoadingComponent"
+                Layout.preferredWidth: textField.width
+                Layout.preferredHeight: textField.height
+                visible: root.mainInputLoading
             }
         }
 
@@ -224,7 +245,7 @@ Control {
 
                 anchors.fill: parent
                 cursorShape: enabled ? Qt.PointingHandCursor : undefined
-                enabled: root.interactive
+                enabled: root.fiatInputInteractive
 
                 onClicked: {
                     const secondaryValue = d.secondaryValue
@@ -250,6 +271,14 @@ Control {
                     textField.text = d.localize(trimmed)
                 }
             }
+            visible: !root.bottomTextLoading
+        }
+
+        LoadingComponent {
+            objectName: "bottomItemTextLoadingComponent"
+            Layout.preferredWidth: bottomItem.width
+            Layout.preferredHeight: bottomItem.height
+            visible: root.bottomTextLoading
         }
     }
 }