diff --git a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml index 39bd5b5e8b..a183a6300e 100644 --- a/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/swap/SwapModal.qml @@ -13,6 +13,7 @@ import StatusQ.Popups.Dialog 0.1 import shared.popups.send.controls 1.0 import shared.controls 1.0 +import shared.panels 1.0 import AppLayouts.Wallet.controls 1.0 import AppLayouts.Wallet.panels 1.0 @@ -370,6 +371,7 @@ StatusDialog { font.weight: Font.Medium } StatusTextWithLoadingState { + id: fees objectName: "maxFeesValue" text: { if(root.swapAdaptor.swapProposalLoading) { @@ -384,9 +386,22 @@ StatusDialog { return "--" } + + onTextChanged: { + if (text === "" || text === "--" || text === Constants.dummyText) { + return + } + animation.restart() + } + customColor: Theme.palette.directColor4 font.weight: Font.Medium loading: root.swapAdaptor.swapProposalLoading + + AnimatedText { + id: animation + target: fees + } } } StatusButton { diff --git a/ui/imports/shared/panels/AnimatedText.qml b/ui/imports/shared/panels/AnimatedText.qml new file mode 100644 index 0000000000..115620d01b --- /dev/null +++ b/ui/imports/shared/panels/AnimatedText.qml @@ -0,0 +1,30 @@ +import QtQuick 2.15 + +import StatusQ.Core.Theme 0.1 + +SequentialAnimation { + id: root + + property var target: null + property color fromColor: Theme.palette.directColor1 + property color toColor: Theme.palette.baseColor5 + property int duration: 500 // in milliseconds + + loops: 3 + + ColorAnimation { + target: root.target + property: "color" + from: root.fromColor + to: root.toColor + duration: root.duration + } + + ColorAnimation { + target: root.target + property: "color" + from: root.toColor + to: root.fromColor + duration: root.duration + } +} diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir index ac9137b100..34dc96c854 100644 --- a/ui/imports/shared/panels/qmldir +++ b/ui/imports/shared/panels/qmldir @@ -18,3 +18,4 @@ Separator 1.0 Separator.qml SequenceColumnLayout 1.0 SequenceColumnLayout.qml StatusAssetSelector 1.0 StatusAssetSelector.qml StyledText 1.0 StyledText.qml +AnimatedText 1.0 AnimatedText.qml diff --git a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml index c93172290a..50282ceac2 100644 --- a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml +++ b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml @@ -9,11 +9,12 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Popups.Dialog 0.1 import utils 1.0 +import shared.panels 1.0 StatusDialogFooter { id: root - property string maxFiatFees: "..." + property string maxFiatFees: d.emptyValue property string totalTimeEstimate property bool pending: true property string nextButtonText: qsTr("Next") @@ -26,6 +27,12 @@ StatusDialogFooter { color: Theme.palette.baseColor3 dropShadowEnabled: true + QtObject { + id: d + + readonly property string emptyValue: "..." + } + leftButtons: ObjectModel { ColumnLayout { Layout.leftMargin: Theme.padding @@ -34,8 +41,21 @@ StatusDialogFooter { text: qsTr("Estimated time:") } StatusBaseText { + id: estimatedTime wrapMode: Text.WordWrap text: root.totalTimeEstimate + + onTextChanged: { + if (text === "" || text === d.emptyValue) { + return + } + estimatedTimeAnimation.restart() + } + + AnimatedText { + id: estimatedTimeAnimation + target: estimatedTime + } } } } @@ -49,8 +69,21 @@ StatusDialogFooter { text: qsTr("Max fees:") } StatusBaseText { + id: fees text: maxFiatFees wrapMode: Text.WordWrap + + onTextChanged: { + if (text === "" || text === d.emptyValue) { + return + } + feesAnimation.restart() + } + + AnimatedText { + id: feesAnimation + target: fees + } } } StatusButton {