feat(MintCollectibles): Add sign transaction dialog in minting creation flow

It integrates sign mint transaction dialog in mint collectibles flow.
Mocked fee data, it still needs backend integration.

Closes #9802

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

@@ -10,6 +10,7 @@ import StatusQ.Core.Utils 0.1
 
 import AppLayouts.Chat.layouts 1.0
 import AppLayouts.Chat.views.communities 1.0
+import AppLayouts.Chat.popups.community 1.0
 
 import utils 1.0
 
@@ -19,6 +20,8 @@ SettingsPageLayout {
     // Models:
     property var tokensModel
     property var holdersModel
+    property string feeText
+    property bool isFeeLoading: true
 
     // Network related properties:
     property var layer1Networks
@@ -44,6 +47,8 @@ SettingsPageLayout {
                            string accountName,
                            string accountAddress)
 
+    signal signMintTransactionOpened
+
     function navigateBack() {
         stackManager.pop(StackView.Immediate)
     }
@@ -63,7 +68,6 @@ SettingsPageLayout {
         readonly property string backTokensText: qsTr("Tokens")
 
         property bool preview: false
-        property string collectibleName
         property string accountAddress
         readonly property var initialItem: (root.tokensModel && root.tokensModel.count > 0) ? mintedTokensView : welcomeView
     }
@@ -94,15 +98,12 @@ SettingsPageLayout {
         },
         State {
             name: d.previewCollectibleViewState
-            PropertyChanges {target: root; title: d.collectibleName}
             PropertyChanges {target: root; previousPageName: d.backButtonText}
             PropertyChanges {target: root; headerButtonVisible: false}
             PropertyChanges {target: root; headerWidth: 0}
-            PropertyChanges {target: d; preview: true}
         },
         State {
             name: d.collectibleViewState
-            PropertyChanges {target: root; title: d.collectibleName}
             PropertyChanges {target: root; previousPageName: d.backTokensText}
             PropertyChanges {target: root; headerButtonVisible: false}
             PropertyChanges {target: root; headerWidth: 0}
@@ -154,11 +155,11 @@ SettingsPageLayout {
             accounts: root.accounts
 
             onPreviewClicked: {
-                d.collectibleName = name
                 d.accountAddress = accountAddress
                 stackManager.push(d.previewCollectibleViewState,
                                   collectibleView,
                                   {
+                                      preview: true,
                                       name,
                                       artworkSource,
                                       symbol,
@@ -181,17 +182,16 @@ SettingsPageLayout {
         id: collectibleView
 
         CommunityCollectibleView {
-            viewWidth: root.viewWidth
+            id: view
-            preview: d.preview
-            holdersModel: root.holdersModel
 
-            onMintCollectible: {
+            function signMintTransaction() {
-                d.collectibleName = name
+                root.isFeeLoading = true
+                root.feeText = ""
                 root.mintCollectible(artworkSource,
                                      name,
                                      symbol,
                                      description,
-                                     supply,
+                                     parseInt(supplyText),
                                      infiniteSupply,
                                      transferable,
                                      selfDestruct,
@@ -201,6 +201,32 @@ SettingsPageLayout {
 
                 stackManager.clear(d.initialViewState, StackView.Immediate)
             }
+
+            viewWidth: root.viewWidth
+            holdersModel: root.holdersModel
+
+            onMintCollectible: popup.open()
+
+            Binding {
+                target: root
+                property: "title"
+                value: view.name
+            }
+
+            SignMintTokenTransactionPopup {
+                id: popup
+
+                anchors.centerIn: Overlay.overlay
+                collectibleName: parent.name
+                accountName: parent.accountName
+                networkName: parent.chainName
+                feeText: root.feeText
+                isFeeLoading: root.isFeeLoading
+
+                onOpened: root.signMintTransactionOpened()
+                onCancelClicked: close()
+                onSignTransactionClicked: parent.signMintTransaction()
+            }
         }
     }
 
@@ -222,11 +248,11 @@ SettingsPageLayout {
             viewWidth: root.viewWidth
             model: root.tokensModel
             onItemClicked: {
-                d.collectibleName = name
                 stackManager.push(d.collectibleViewState,
                                   collectibleView,
                                   {
-                                      deployState: Qt.binding(() => deployState),
+                                      preview: false,
+                                      deployState,
                                       name,
                                       artworkSource,
                                       symbol,

ui/app/AppLayouts/Chat/stores/CommunityTokensStore.qml

@@ -5,15 +5,7 @@ QtObject {
     id: root
 
     property var communityTokensModuleInst: communityTokensModule ?? null
-
+    property string deployFee: "0.0015 ETH ($75.34)"//communityTokensModuleInst.computeFee // TODO: Backend
-    // Minting tokens:
-    function deployCollectible(communityId, accountAddress, name, symbol, description, supply,
-                             infiniteSupply, transferable, selfDestruct, chainId, artworkSource, accountName)
-    {
-        // TODO: Backend needs to create new role `accountName` and update this call accordingly
-        communityTokensModuleInst.deployCollectible(communityId, accountAddress, name, symbol, description, supply,
-                                                    infiniteSupply, transferable, selfDestruct, chainId, artworkSource)
-    }
 
     // Network selection properties:
     property var layer1Networks: networksModule.layer1
@@ -57,6 +49,22 @@ QtObject {
                    ])
     }
 
+    signal deployFeeUpdated(string value) // TO BE REMOVED
+
+    // Minting tokens:
+    function deployCollectible(communityId, accountAddress, name, symbol, description, supply,
+                             infiniteSupply, transferable, selfDestruct, chainId, artworkSource, accountName)
+    {
+        // TODO: Backend needs to create new role `accountName` and update this call accordingly
+        communityTokensModuleInst.deployCollectible(communityId, accountAddress, name, symbol, description, supply,
+                                                    infiniteSupply, transferable, selfDestruct, chainId, artworkSource)
+    }
+
+    function computeDeployFee() {
+        // TODO: Backend compute minitng fee
+        root.deployFeeUpdated(root.deployFee) // TO BE REMOVED
+    }
+
     // Airdrop tokens:
     function airdrop(airdropTokens, address) {
         console.warn("TODO: Airdrop backend call!")

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

@@ -283,6 +283,8 @@ StatusSectionLayout {
             }
 
             CommunityMintTokensSettingsPanel {
+                id: mintPanel
+
                 readonly property CommunityTokensStore communityTokensStore:
                     rootStore.communityTokensStore
 
@@ -296,6 +298,7 @@ StatusSectionLayout {
                 accounts: root.rootStore.accounts
 
                 onPreviousPageNameChanged: root.backButtonName = previousPageName
+                onSignMintTransactionOpened: communityTokensStore.computeDeployFee()
                 onMintCollectible: {
                     communityTokensStore.deployCollectible(root.community.id,
                                                            accountAddress,
@@ -310,6 +313,15 @@ StatusSectionLayout {
                                                            artworkSource,
                                                            accountName)
                 }
+
+                // TODO: Review once backend is done
+                Connections {
+                    target: rootStore.communityTokensStore
+                    function onDeployFeeUpdated(value) {
+                        mintPanel.isFeeLoading = false
+                        mintPanel.feeText = value
+                    }
+                }
             }
 
             CommunityAirdropsSettingsPanel {