chore(wallet): moving animated text from inline to stand alone component

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

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
     }
 

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

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>