feat(MintTokens): Update CommunityCollectibleView according to new design

- Title format changed. Now symbol is a title side text.
- Back button text changed.
- Description / boxes order changed.
- Boxes changed order and format.
- Warning description changed.

Closes #10601

storybook/src/Models/MintedCollectiblesModel.qml

@@ -25,7 +25,7 @@ QtObject {
                                               symbol: "SRW",
                                               description: "Desc",
                                               supply: 1,
-                                              availableTokens: 1,
+                                              remainingTokens: 1,
                                               infiniteSupply: true,
                                               transferable: false,
                                               remoteSelfDestruct: true,
@@ -41,7 +41,7 @@ QtObject {
                                               symbol: "KAT",
                                               description: "Desc",
                                               supply: 10,
-                                              availableTokens: 5,
+                                              remainingTokens: 5,
                                               infiniteSupply: false,
                                               transferable: false,
                                               remoteSelfDestruct: true,
@@ -57,7 +57,7 @@ QtObject {
                                               symbol: "MMM",
                                               description: "Desc",
                                               supply: 1,
-                                              availableTokens: 0,
+                                              remainingTokens: 0,
                                               infiniteSupply: true,
                                               transferable: false,
                                               remoteSelfDestruct: true,
@@ -73,7 +73,7 @@ QtObject {
                                               symbol: "CPA",
                                               description: "Desc",
                                               supply: 5000,
-                                              availableTokens: 1500,
+                                              remainingTokens: 1500,
                                               infiniteSupply: false,
                                               transferable: false,
                                               remoteSelfDestruct: false,

ui/app/AppLayouts/Chat/layouts/SettingsPageLayout.qml

@@ -13,7 +13,7 @@ Item {
     id: root
 
     // required
-    property string title
+    property alias title: itemHeader.text
     property Component content
 
 
@@ -29,6 +29,7 @@ Item {
     property alias saveChangesText: settingsDirtyToastMessage.saveChangesText
     property alias cancelChangesText: settingsDirtyToastMessage.cancelChangesText
     property alias changesDetectedText: settingsDirtyToastMessage.changesDetectedText
+    property alias subTitle: sideTextHeader.text
 
     readonly property Item contentItem: contentLoader.item
     readonly property size settingsDirtyToastMessageImplicitSize: 
@@ -61,15 +62,29 @@ Item {
             Layout.maximumWidth: root.headerWidth === 0 ? parent.width : (root.headerWidth + itemHeader.Layout.leftMargin)
             Layout.preferredHeight: 56
 
-            StatusBaseText {
+            RowLayout {
-                id: itemHeader
-                Layout.leftMargin: 64
-                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
-                text: root.title
+                Layout.fillWidth: true
-                color: Theme.palette.directColor1
+
-                font.pixelSize: 26
+                StatusBaseText {
-                font.bold: true
+                    id: itemHeader
+
+                    Layout.leftMargin: 64
+
+                    color: Theme.palette.directColor1
+                    font.pixelSize: 26
+                    font.bold: true
+                }
+
+                StatusBaseText {
+                    id: sideTextHeader
+
+                    Layout.leftMargin: 6
+                    Layout.topMargin: 6
+
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 15
+                }
             }
 
             StatusButton {

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

@@ -83,7 +83,6 @@ SettingsPageLayout {
         readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
         readonly property string newTokenButtonText: qsTr("Mint token")
         readonly property string backButtonText: qsTr("Back")
-        readonly property string backTokensText: qsTr("Tokens")
 
         property string accountAddress
         property string accountName
@@ -121,6 +120,7 @@ SettingsPageLayout {
         State {
             name: d.initialViewState
             PropertyChanges {target: root; title: d.welcomePageTitle}
+            PropertyChanges {target: root; subTitle: ""}
             PropertyChanges {target: root; previousPageName: ""}
             PropertyChanges {target: root; headerButtonVisible: true}
             PropertyChanges {target: root; headerButtonText: d.newTokenButtonText}
@@ -129,6 +129,7 @@ SettingsPageLayout {
         State {
             name: d.newCollectibleViewState
             PropertyChanges {target: root; title: d.newCollectiblePageTitle}
+            PropertyChanges {target: root; subTitle: ""}
             PropertyChanges {target: root; previousPageName: d.backButtonText}
             PropertyChanges {target: root; headerButtonVisible: false}
             PropertyChanges {target: root; headerWidth: 0}
@@ -141,7 +142,7 @@ SettingsPageLayout {
         },
         State {
             name: d.collectibleViewState
-            PropertyChanges {target: root; previousPageName: d.backTokensText}
+            PropertyChanges {target: root; previousPageName: d.backButtonText}
             PropertyChanges {target: root; headerButtonVisible: false}
             PropertyChanges {target: root; headerWidth: 0}
             PropertyChanges {target: root; footer: mintTokenFooter}
@@ -244,6 +245,13 @@ SettingsPageLayout {
                 value: preview.name
             }
 
+            Binding {
+                target: root
+                property: "subTitle"
+                value: preview.symbol
+                restoreMode: Binding.RestoreBindingOrValue
+            }
+
             SignMintTokenTransactionPopup {
                 id: popup
 
@@ -370,6 +378,13 @@ SettingsPageLayout {
                 value: view.name
             }
 
+            Binding {
+                target: root
+                property: "subTitle"
+                value: view.symbol
+                restoreMode: Binding.RestoreBindingOrValue
+            }
+
             Binding {
                 target: d
                 property: "tokenOwnersModel"
@@ -403,6 +418,7 @@ SettingsPageLayout {
                         Bind { property: "description"; value: model.description },
                         Bind { property: "supplyAmount"; value: model.supply },
                         Bind { property: "infiniteSupply"; value: model.infiniteSupply },
+                        Bind { property: "remainingTokens"; value: model.remainingTokens },
                         Bind { property: "selfDestruct"; value: model.remoteSelfDestruct },
                         Bind { property: "chainId"; value: model.chainId },
                         Bind { property: "chainName"; value: model.chainName },

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

@@ -26,6 +26,7 @@ StatusScrollView {
     property alias chainName: chainText.text
     property string name
     property int supplyAmount
+    property int remainingTokens
     property bool infiniteSupply
     property bool transferable
     property bool selfDestruct
@@ -52,6 +53,7 @@ StatusScrollView {
 
         readonly property int imageSelectorRectSize: 280
         readonly property int iconSize: 20
+        readonly property string infiniteSymbol: "∞"
     }
 
     contentWidth: mainLayout.width
@@ -101,15 +103,6 @@ StatusScrollView {
             }
         }
 
-        StatusBaseText {
-            id: descriptionItem
-
-            Layout.fillWidth: true
-            wrapMode: TextEdit.WordWrap
-            font.pixelSize: Theme.primaryTextFontSize
-            lineHeight: 1.2
-        }
-
         Flow {
             spacing: Style.current.halfPadding
             Layout.fillWidth: true
@@ -119,7 +112,6 @@ StatusScrollView {
 
                 property string label
                 property string value
-                property bool leftAlignment: true
 
                 radius: 8
                 border.color: Theme.palette.baseColor2
@@ -143,20 +135,28 @@ StatusScrollView {
 
                     StatusBaseText {
                         Layout.maximumWidth: mainLayout.width - Style.current.padding
-                        Layout.alignment: previewBox.leftAlignment ? Qt.AlignLeft : Qt.AlignHCenter
                         text: previewBox.value
                         elide: Text.ElideRight
                         font.pixelSize: Theme.primaryTextFontSize
                         color: Theme.palette.directColor1
-                        horizontalAlignment: previewBox.leftAlignment ? Text.AlignLeft : Text.AlignHCenter
                     }
                 }
             }
 
             CustomPreviewBox {
-                label: root.infiniteSupply ? qsTr("Infinite supply") : qsTr("Total")
+                id: symbolBox
-                value: root.infiniteSupply ? qsTr("Yes") : LocaleUtils.numberToLocaleString(root.supplyAmount)
+
-                leftAlignment: root.infiniteSupply
+                label: qsTr("Symbol")
+            }
+
+            CustomPreviewBox {
+                label: qsTr("Total")
+                value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.supplyAmount)
+            }
+
+            CustomPreviewBox {
+                label: qsTr("Remaining")
+                value: root.infiniteSupply ? d.infiniteSymbol : LocaleUtils.numberToLocaleString(root.remainingTokens)
             }
 
             CustomPreviewBox {
@@ -165,22 +165,14 @@ StatusScrollView {
             }
 
             CustomPreviewBox {
-                label: qsTr("Remote self-destruct")
+                label: qsTr("Remotely destructible")
                 value: root.selfDestruct ? qsTr("Yes") : qsTr("No")
             }
 
-            CustomPreviewBox {
-                id: symbolBox
-
-                label: qsTr("Symbol")
-                leftAlignment: false
-            }
-
             CustomPreviewBox {
                 id: accountBox
 
                 label: qsTr("Account")
-                leftAlignment: false
             }
 
             Rectangle {
@@ -218,6 +210,15 @@ StatusScrollView {
             }
         }
 
+        StatusBaseText {
+            id: descriptionItem
+
+            Layout.fillWidth: true
+            wrapMode: TextEdit.WordWrap
+            font.pixelSize: Theme.primaryTextFontSize
+            lineHeight: 1.2
+        }
+
         RowLayout {
             visible: root.preview
             Layout.fillWidth: true
@@ -235,7 +236,7 @@ StatusScrollView {
                 wrapMode: Text.Wrap
                 font.pixelSize: Style.current.primaryTextFontSize
                 color: Theme.palette.baseColor1
-                text: qsTr("Make sure you’re happy with your collectible before minting it as it can’t be edited later")
+                text: qsTr("Make sure you’re happy with your token before minting it as it can’t be edited later")
             }
         }
 

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

@@ -24,7 +24,7 @@ StatusScrollView {
     QtObject {
         id: d
 
-        function getSubtitle(deployState, availableTokens, supply) {
+        function getSubtitle(deployState, remainingTokens, supply) {
             if(deployState === Constants.DeployState.Failed) {
                 return qsTr("Failed")
             }
@@ -34,11 +34,11 @@ StatusScrollView {
             }
 
             // TO REMOVE: Just added bc backend still doesn't have `availableTokens` property in model. Once it is added, the following 2 lines can be removed.
-            if(!availableTokens)
+            if(!remainingTokens)
-                availableTokens = 0
+                remainingTokens = 0
             if(supply === 0)
                 supply = "∞"
-            return  qsTr("%1 / %2 remaining").arg(availableTokens).arg(supply)
+            return  qsTr("%1 / %2 remaining").arg(remainingTokens).arg(supply)
         }
     }
 
@@ -70,7 +70,7 @@ StatusScrollView {
                 height: gridView.cellHeight
                 width: gridView.cellWidth
                 title: model.name ? model.name : "..."
-                subTitle: d.getSubtitle(model.deployState, model.availableTokens, model.supply)
+                subTitle: d.getSubtitle(model.deployState, model.remainingTokens, model.supply)
                 fallbackImageUrl: model.image ? model.image : ""
                 backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent" // TODO BACKEND
                 isLoading: false