feat(MintTokens): Add mint failure flow

- It updates `CommunityCollectibleView` to display minting failure state.
- It updates `CommunityMintedTokensView` to display minting failure state.
- It exposes subtitle color property in `CollectibleView`.
- It updates `storybook` with more options to display minting failure state.

Closes #10620

storybook/pages/CommunityCollectibleViewPage.qml

@@ -7,6 +7,8 @@ import AppLayouts.Chat.views.communities 1.0
 import Storybook 1.0
 import Models 1.0
 
+import utils 1.0
+
 SplitView {
 
     Logs { id: logs }
@@ -26,7 +28,6 @@ SplitView {
                 anchors.margins: 50
                 artworkSource: ModelsData.icons.superRare
                 preview: previewBox.checked
-                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
@@ -77,10 +78,29 @@ SplitView {
                 checked: true
             }
 
-            CheckBox {
+            ColumnLayout {
-                id: mintingStateBox
+                Label {
-                text: "Minting in progress"
+                    text: "Minting state:"
-                checked: true
+                }
+
+                RadioButton {
+                    id: mintingInProgress
+                    text: "In progress"
+                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.InProgress
+                }
+
+                RadioButton {
+                    id: mintingFailed
+                    text: "Failed"
+                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Failed
+                }
+
+                RadioButton {
+                    id: mintingCompleted
+                    text: "Completed"
+                    checked: true
+                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Completed
+                }
             }
 
             CheckBox {

storybook/src/Models/MintedCollectiblesModel.qml

@@ -21,7 +21,7 @@ QtObject {
                                           {
                                               name: "SuperRare artwork",
                                               image: ModelsData.banners.superRare,
-                                              deployState: 1,
+                                              deployState: 0,
                                               symbol: "SRW",
                                               description: "Desc",
                                               supply: 1,

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

@@ -79,15 +79,27 @@ StatusScrollView {
         spacing: Style.current.padding
 
         RowLayout {
-            visible: !root.preview && (root.deployState === Constants.BackendProcessState.InProgress)
+            visible: !root.preview && ((root.deployState === Constants.BackendProcessState.InProgress) ||
+                                       (root.deployState === Constants.BackendProcessState.Failed))
             spacing: Style.current.halfPadding
 
-            StatusDotsLoadingIndicator {}
+            StatusDotsLoadingIndicator {
+                visible: (root.deployState === Constants.BackendProcessState.InProgress)
+            }
+
+            StatusIcon {
+                visible: (root.deployState === Constants.BackendProcessState.Failed)
+                icon: "warning"
+                color: Theme.palette.dangerColor1
+            }
 
             StatusBaseText {
                 elide: Text.ElideRight
                 font.pixelSize: Theme.primaryTextFontSize
-                text: qsTr("Collectible is being minted")
+                text: (root.deployState === Constants.BackendProcessState.InProgress) ?
+                          qsTr("Collectible is being minted") :
+                          (root.deployState === Constants.BackendProcessState.Failed) ? qsTr("Collectible minting failed") : ""
+                color: (root.deployState === Constants.BackendProcessState.Failed) ? Theme.palette.dangerColor1 : Theme.palette.directColor1
             }
         }
 

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

@@ -26,7 +26,7 @@ StatusScrollView {
 
         function getSubtitle(deployState, remainingTokens, supply) {
             if(deployState === Constants.BackendProcessState.Failed) {
-                return qsTr("Failed")
+                return qsTr("Minting failed")
             }
 
             if(deployState === Constants.BackendProcessState.InProgress) {
@@ -71,6 +71,7 @@ StatusScrollView {
                 width: gridView.cellWidth
                 title: model.name ? model.name : "..."
                 subTitle: d.getSubtitle(model.deployState, model.remainingTokens, model.supply)
+                subTitleColor: (model.deployState === Constants.BackendProcessState.Failed) ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
                 fallbackImageUrl: model.image ? model.image : ""
                 backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent" // TODO BACKEND
                 isLoading: false

ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml

@@ -14,6 +14,7 @@ Control {
 
     property string title: ""
     property string subTitle: ""
+    property alias subTitleColor: subTitleItem.customColor
     property string backgroundColor: "transparent"
     property url mediaUrl : ""
     property string mediaType: ""
@@ -86,6 +87,8 @@ Control {
         }
 
         StatusTextWithLoadingState {
+            id: subTitleItem
+
             Layout.alignment: Qt.AlignLeft
             Layout.leftMargin: Style.current.halfPadding
             Layout.rightMargin: Layout.leftMargin