From babc3f7dddd719702d5ff82aacbfc8114b0409f9 Mon Sep 17 00:00:00 2001
From: Sale Djenic <aleksandardjenic@status.im>
Date: Fri, 21 Feb 2025 09:30:57 +0100
Subject: [PATCH] chore(wallet): moving animated text from inline to stand
 alone component

---
 .../StatusQ/Controls/StatusAnimatedText.qml   | 51 +++++++++++++++++++
 .../src/StatusQ/Controls/StatusFeeOption.qml  | 28 ++--------
 ui/StatusQ/src/StatusQ/Controls/qmldir        |  1 +
 ui/StatusQ/src/statusq.qrc                    |  1 +
 4 files changed, 58 insertions(+), 23 deletions(-)
 create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusAnimatedText.qml

diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusAnimatedText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusAnimatedText.qml
new file mode 100644
index 0000000000..a56b7d3ee2
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusAnimatedText.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.15
+
+import StatusQ.Core 0.1
+
+/*!
+    \qmltype StatusAnimatedText
+    \inherits StatusBaseText
+    \inqmlmodule StatusQ.Controls
+    \since StatusQ.Controls 0.1
+    \brief Displays a status base text with color animation on text change
+
+    A property animation is exposed in case any further change is needed, like setting different
+    than the default color for animation. For more context on that refer to `StatusColorAnimation`
+    component.
+
+    Example of how to use it:
+
+    \qml
+        StatusAnimatedText {
+            id: animatedText
+
+            text: "anything"
+            color: "red"
+            animation.toColor: "blue"
+        }
+    \endqml
+
+    For a list of components available see StatusQ.
+ */
+
+StatusBaseText {
+    id: root
+
+    property alias animation: animate  // Expose animation for customization
+
+    wrapMode: Text.WordWrap
+    elide: Text.ElideRight
+
+    onTextChanged: {
+        if (text === "") {
+            return
+        }
+        animate.restart()
+    }
+
+    StatusColorAnimation {
+        id: animate
+        target: root
+        fromColor: root.color
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
index b471aed79b..58465b0ab4 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
@@ -95,34 +95,16 @@ Control {
     horizontalPadding: 8
     verticalPadding: 8
 
-    component AnimatedText: StatusBaseText {
-        id: animatedText
+    property Component subTextComponent: StatusAnimatedText {
         verticalAlignment: Qt.AlignVCenter
-        font: root.font
-        wrapMode: Text.WordWrap
-        elide: Text.ElideRight
-
-        onTextChanged: {
-            if (text === "") {
-                return
-            }
-            animate.restart()
-        }
-
-
-        StatusColorAnimation {
-            id: animate
-            target: animatedText
-            fromColor: animatedText.color
-        }
-    }
-
-    property Component subTextComponent: AnimatedText {
         text: root.subText
+        font: root.font
     }
 
-    property Component additionalTextComponent: AnimatedText {
+    property Component additionalTextComponent: StatusAnimatedText {
+        verticalAlignment: Qt.AlignVCenter
         text: root.additionalText
+        font: root.font
         color: Theme.palette.baseColor1
     }
 
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 548cbb88a0..609c49b50d 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -2,6 +2,7 @@ module StatusQ.Controls
 
 StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
 StatusAmountInput 0.1 StatusAmountInput.qml
+StatusAnimatedText 0.1 StatusAnimatedText.qml
 StatusBackButton 0.1 StatusBackButton.qml
 StatusBanner 0.1 StatusBanner.qml
 StatusBaseButton 0.1 StatusBaseButton.qml
diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc
index 37d24d673b..289e1a4d0f 100644
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@@ -93,6 +93,7 @@
         <file>StatusQ/Components/qmldir</file>
         <file>StatusQ/Controls/StatusActivityCenterButton.qml</file>
         <file>StatusQ/Controls/StatusAmountInput.qml</file>
+        <file>StatusQ/Controls/StatusAnimatedText.qml</file>
         <file>StatusQ/Controls/StatusBackButton.qml</file>
         <file>StatusQ/Controls/StatusBanner.qml</file>
         <file>StatusQ/Controls/StatusBaseButton.qml</file>