From f2883fdcee3262a45e6ef9e76857582767eecaa2 Mon Sep 17 00:00:00 2001
From: Sale Djenic <aleksandardjenic@status.im>
Date: Mon, 28 Oct 2024 12:23:46 +0100
Subject: [PATCH] fix: animation for updating fees added to send and swap modal

Closes #16624
---
 .../Wallet/popups/swap/SwapModal.qml          | 15 ++++++++
 ui/imports/shared/panels/AnimatedText.qml     | 30 ++++++++++++++++
 ui/imports/shared/panels/qmldir               |  1 +
 .../send/views/TransactionModalFooter.qml     | 35 ++++++++++++++++++-
 4 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 ui/imports/shared/panels/AnimatedText.qml

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 {