feat(MintToken/RemoteDestruct): Added animation when `remotely destroy` process is in progress

- Added property `remotelyDestructState` and `burnState` in `CommunityCollectibleView`.
- Added `fire` and `loading` icons while destruct/burn is in progress.
- Added short animation when destruct/burn process is completed.
- Renamed `Constants.DeployState` to `Constants.BackendProcessState`, more generic one that can be used for different processes.
- Updated `storybook` with new options to test animation.

Closes #10603

storybook/pages/CommunityCollectibleViewPage.qml

@@ -26,12 +26,15 @@ SplitView {
                 anchors.margins: 50
                 artworkSource: ModelsData.icons.superRare
                 preview: previewBox.checked
-                deployState: mintingStateBox.checked ? 1 : 0
+                deployState: mintingStateBox.checked ? 1 /*Completed*/ : 0 /*Failed*/
+                remotelyDestructState: remotelyDestructStateBox.checked ? 1 /*In progress*/ : 2 /*Completed*/
+                burnState: burnDestructStateBox.checked ? 1 /*In progress*/ : 2 /*Completed*/
                 name: nameText.text
                 symbol: symbolText.text
                 description: descriptionText.text
                 supplyAmount: parseInt(supplyText.text)
                 infiniteSupply: unlimitedSupplyChecker.checked
+                remainingTokens: parseInt(remainingText.text)
                 transferable: transferibleChecker.checked
                 selfDestruct: selfdestructChecker.checked
                 chainId: 1
@@ -80,6 +83,18 @@ SplitView {
                 checked: true
             }
 
+            CheckBox {
+                id: remotelyDestructStateBox
+                text: "Remotely destruct in progress"
+                checked: false
+            }
+
+            CheckBox {
+                id: burnDestructStateBox
+                text: "Burn in progress"
+                checked: false
+            }
+
             Label {
                 Layout.topMargin: 10
                 Layout.fillWidth: true
@@ -162,6 +177,14 @@ SplitView {
                 text: "123"
             }
 
+            TextField {
+                id: remainingText
+                visible: !unlimitedSupplyChecker.checked
+                background: Rectangle { border.color: 'lightgrey' }
+                Layout.preferredWidth: 200
+                text: "123"
+            }
+
             CheckBox {
                 id: transferibleChecker
                 Layout.topMargin: 10

ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml

@@ -412,6 +412,7 @@ SettingsPageLayout {
                     component Bind: Binding { target: view }
                     readonly property list<Binding> bindings: [
                         Bind { property: "deployState"; value: model.deployState },
+                        Bind { property: "remotelyDestructState"; value: model.remotelyDestructState },
                         Bind { property: "name"; value: model.name },
                         Bind { property: "artworkSource"; value: model.image },
                         Bind { property: "symbol"; value: model.symbol },

ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml

@@ -341,15 +341,15 @@ StatusSectionLayout {
                         let loading = false
                         let type = Constants.ephemeralNotificationType.normal
                         switch (status) {
-                        case Constants.DeployState.InProgress:
+                        case Constants.BackendProcessState.InProgress:
                             title = qsTr("Token is being minted...")
                             loading = true
                             break
-                        case Constants.DeployState.Deployed:
+                        case Constants.BackendProcessState.Completed:
                             title = qsTr("Token minting finished")
                             type = Constants.ephemeralNotificationType.success
                             break
-                        case Constants.DeployState.Failed:
+                        case Constants.BackendProcessState.Failed:
                             title = qsTr("Token minting failed")
                             break
                         default:

ui/app/AppLayouts/Chat/views/communities/CommunityCollectibleView.qml

@@ -6,6 +6,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 import utils 1.0
 import shared.panels 1.0
@@ -32,9 +33,10 @@ StatusScrollView {
     property bool selfDestruct
     property int chainId
     property string chainIcon
-    property int deployState
+    property int deployState: Constants.BackendProcessState.None
+    property int remotelyDestructState: Constants.BackendProcessState.None
+    property int burnState: Constants.BackendProcessState.None
     property var tokenOwnersModel
-
     property alias accountName: accountBox.value
 
     signal mintCollectible(url artworkSource,
@@ -54,12 +56,22 @@ StatusScrollView {
         readonly property int imageSelectorRectSize: 280
         readonly property int iconSize: 20
         readonly property string infiniteSymbol: "∞"
+
+        function startAnimation(isBurn) {
+            totalbox.highlighted = true
+
+            if(isBurn)
+                remainingBox.highlighted = true
+        }
     }
 
     contentWidth: mainLayout.width
     contentHeight: mainLayout.height
     padding: 0
 
+    onRemotelyDestructStateChanged: if(remotelyDestructState === Constants.BackendProcessState.Completed) d.startAnimation(false)
+    onBurnStateChanged: if(burnState === Constants.BackendProcessState.Completed) d.startAnimation(true)
+
     ColumnLayout {
         id: mainLayout
 
@@ -67,7 +79,7 @@ StatusScrollView {
         spacing: Style.current.padding
 
         RowLayout {
-            visible: !root.preview && (root.deployState === Constants.DeployState.InProgress)
+            visible: !root.preview && (root.deployState === Constants.BackendProcessState.InProgress)
             spacing: Style.current.halfPadding
 
             StatusDotsLoadingIndicator {}
@@ -112,12 +124,25 @@ StatusScrollView {
 
                 property string label
                 property string value
+                property bool isLoading: false
+                property bool highlighted: false
 
                 radius: 8
                 border.color: Theme.palette.baseColor2
-                color: "transparent"
                 implicitWidth: Math.min(boxContent.implicitWidth + Style.current.padding, mainLayout.width)
                 implicitHeight: boxContent.implicitHeight + Style.current.padding
+                states: [
+                    State {
+                        when: !previewBox.highlighted
+                        PropertyChanges { target: previewBox; color: "transparent" }
+                    },
+                    State {
+                        when: previewBox.highlighted
+                        PropertyChanges { target: previewBox; color: Theme.palette.primaryColor3 }
+                    }
+                ]
+
+                onHighlightedChanged: if(highlighted) animation.start()
 
                 ColumnLayout {
                     id: boxContent
@@ -130,7 +155,16 @@ StatusScrollView {
                         elide: Text.ElideRight
                         font.pixelSize: 13
                         color: Theme.palette.baseColor1
-                        horizontalAlignment: Text.AlignHCenter
+                    }
+
+                    RowLayout {
+                        spacing: 3
+
+                        StatusBaseText {
+                            text: StatusQUtils.Emoji.fromCodePoint("1f525") // :fire: emoji
+                            font.pixelSize: Theme.tertiaryTextFontSize
+                            visible: previewBox.isLoading
+                            color: Theme.palette.directColor1
                         }
 
                         StatusBaseText {
@@ -140,6 +174,23 @@ StatusScrollView {
                             font.pixelSize: Theme.primaryTextFontSize
                             color: Theme.palette.directColor1
                         }
+
+                        StatusLoadingIndicator {
+                            Layout.preferredHeight: Theme.primaryTextFontSize
+                            Layout.preferredWidth: Layout.preferredHeight
+                            Layout.leftMargin: 6
+                            Layout.rightMargin: 3
+                            visible: previewBox.isLoading
+                            color: Theme.palette.primaryColor1
+                        }
+                    }
+                }
+
+                Timer {
+                    id: animation
+
+                    interval: 1500
+                    onRunningChanged: if(!running) previewBox.highlighted = false
                 }
             }
 
@@ -150,13 +201,21 @@ StatusScrollView {
             }
 
             CustomPreviewBox {
+                id: totalbox
+
                 label: qsTr("Total")
                 value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.supplyAmount)
+                isLoading: !root.infiniteSupply &&
+                           ((root.remotelyDestructState === Constants.BackendProcessState.InProgress) ||
+                            (root.burnState === Constants.BackendProcessState.InProgress))
             }
 
             CustomPreviewBox {
+                id: remainingBox
+
                 label: qsTr("Remaining")
                 value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.remainingTokens)
+                isLoading: !root.infiniteSupply && (root.burnState === Constants.BackendProcessState.InProgress)
             }
 
             CustomPreviewBox {

ui/app/AppLayouts/Chat/views/communities/CommunityMintedTokensView.qml

@@ -25,11 +25,11 @@ StatusScrollView {
         id: d
 
         function getSubtitle(deployState, remainingTokens, supply) {
-            if(deployState === Constants.DeployState.Failed) {
+            if(deployState === Constants.BackendProcessState.Failed) {
                 return qsTr("Failed")
             }
 
-            if(deployState === Constants.DeployState.InProgress) {
+            if(deployState === Constants.BackendProcessState.InProgress) {
                 return qsTr("Minting...")
             }
 

ui/imports/utils/Constants.qml

@@ -888,10 +888,11 @@ QtObject {
         Everyone = 4
     }
 
-    enum DeployState {
+    enum BackendProcessState {
         Failed,
         InProgress,
-          Deployed
+        Completed,
+        None
     }
 
     enum ContactRequestState {