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 } } }