feat(Communities): Add fee box and updated sign popup to owner/token master tokens minting

storybook/pages/EditOwnerTokenViewPage.qml

@@ -24,7 +24,20 @@ SplitView {
             SplitView.fillWidth: true
             SplitView.fillHeight: true
 
+            Timer {
+                id: feeCalculationTimer
+
+                interval: 2000
+
+                onTriggered: {
+                    editOwnerTokenView.feeText = "0.0015 ETH ($75.43)"
+                    editOwnerTokenView.isFeeLoading = false
+                }
+            }
+
             EditOwnerTokenView {
+                id: editOwnerTokenView
+
                 anchors.fill: parent
                 anchors.margins: 50
 
@@ -40,6 +53,14 @@ SplitView {
                 accounts: WalletAccountsModel {}
 
                 onMintClicked: logs.logEvent("EditOwnerTokenView::onMintClicked")
+
+                onDeployFeesRequested: {
+                    feeText = ""
+                    feeErrorText = ""
+                    isFeeLoading = true
+
+                    feeCalculationTimer.restart()
+                }
             }
         }
 

storybook/pages/MintTokensSettingsPanelPage.qml

@@ -96,7 +96,14 @@ SplitView {
             onMintCollectible: logs.logEvent("CommunityMintTokensSettingsPanel::mintCollectible")
             onMintAsset: logs.logEvent("CommunityMintTokensSettingsPanel::mintAssets")
             onDeleteToken: logs.logEvent("CommunityMintTokensSettingsPanel::deleteToken: " + tokenKey)
-            onSignMintTransactionOpened: feesTimer.restart()
+
+            onDeployFeesRequested: {
+                feeText = ""
+                feeErrorText = ""
+                isFeeLoading = true
+
+                feesTimer.restart()
+            }
         }
     }
 

ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml

@@ -18,6 +18,7 @@ Item {
 
     property alias currentIndex: comboBox.currentIndex
     property alias currentValue: comboBox.currentValue
+    property alias currentText: comboBox.currentText
 
     property alias label: labelItem.text
     property alias validationError: validationErrorItem.text

ui/app/AppLayouts/Communities/panels/FeesPanel.qml

@@ -22,6 +22,8 @@ Control {
 
     property alias placeholderText: placeholderText.text
 
+    property bool highlightFees: count === 1
+
     property Item footer
 
     states: State {
@@ -71,7 +73,7 @@ Control {
                 title: model.title
                 feeText: model.feeText
                 errorFee: !!model.error
-                highlightFee: repeater.count === 1
+                highlightFee: root.highlightFees
             }
         }
     }

ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml

@@ -50,7 +50,7 @@ StackView {
 
     // Transaction related properties:
     property string feeText
-    property string errorText
+    property string feeErrorText
     property bool isFeeLoading: true
 
     // Network related properties:
@@ -64,8 +64,7 @@ StackView {
     signal mintAsset(var assetItem)
     signal mintOwnerToken(var ownerToken, var tMasterToken)
 
-    signal signMintTransactionOpened(int chainId, string accountAddress, int tokenType)
+    signal deployFeesRequested(int chainId, string accountAddress, int tokenType)
-
     signal signRemoteDestructTransactionOpened(var remotelyDestructTokensList, // [key , amount]
                                                string tokenKey)
     signal remotelyDestructCollectibles(var remotelyDestructTokensList, // [key , amount]
@@ -78,7 +77,7 @@ StackView {
     function setFeeLoading() {
         root.isFeeLoading = true
         root.feeText = ""
-        root.errorText = ""
+        root.feeErrorText = ""
     }
 
     function navigateBack() {
@@ -248,25 +247,31 @@ StackView {
 
                 onMintClicked: signMintPopup.open()
 
-                SignTokenTransactionsPopup {
+                onDeployFeesRequested: root.deployFeesRequested(
+                                           ownerToken.chainId,
+                                           ownerToken.accountAddress,
+                                           Constants.TokenType.ERC721)
+
+
+                feeText: root.feeText
+                feeErrorText: root.feeErrorText
+                isFeeLoading: root.isFeeLoading
+
+                SignMultiTokenTransactionsPopup {
                     id: signMintPopup
 
-                    anchors.centerIn: Overlay.overlay
+                    title: qsTr("Sign transaction - Mint %1 tokens").arg(
-                    title: qsTr("Sign transaction - Mint %1 tokens").arg(signMintPopup.tokenName)
+                               editOwnerTokenView.communityName)
-                    tokenName: editOwnerTokenView.communityName
+                    totalFeeText: root.isFeeLoading ?
+                                      "" : root.feeText
                     accountName: editOwnerTokenView.ownerToken.accountName
-                    networkName: editOwnerTokenView.ownerToken.chainName
-                    feeText: root.feeText
-                    errorText: root.errorText
-                    isFeeLoading: root.isFeeLoading
 
-                    onOpened: {
+                    model: QtObject {
-                        root.setFeeLoading()
+                        readonly property string title: editOwnerTokenView.feeLabel
-                        root.signMintTransactionOpened(editOwnerTokenView.ownerToken.chainId,
+                        readonly property string feeText: signMintPopup.totalFeeText
-                                                       editOwnerTokenView.ownerToken.accountAddress,
+                        readonly property bool error: root.feeErrorText !== ""
-                                                       Constants.TokenType.ERC721)
                     }
-                    onCancelClicked: close()
+
                     onSignTransactionClicked: editOwnerTokenView.signMintTransaction()
                 }
             }
@@ -412,7 +417,7 @@ StackView {
                     accountName: preview.accountName
                     networkName: preview.chainName
                     feeText: root.feeText
-                    errorText: root.errorText
+                    errorText: root.feeErrorText
                     isFeeLoading: root.isFeeLoading
 
                     onOpened: {
@@ -632,7 +637,7 @@ StackView {
                 networkName: footer.token.chainName
                 feeText: root.feeText
                 isFeeLoading: root.isFeeLoading
-                errorText: root.errorText
+                errorText: root.feeErrorText
 
                 onOpened: {
                     root.setFeeLoading()

ui/app/AppLayouts/Communities/popups/SignMultiTokenTransactionsPopup.qml

@@ -37,6 +37,8 @@ StatusDialog {
     contentItem: FeesPanel {
         id: feesPanel
 
+        highlightFees: false
+
         footer: FeesSummaryFooter {
             id: footer
         }

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

@@ -309,17 +309,17 @@ StatusSectionLayout {
                     mintPanel.feeText = valueStr
 
                     if (errorCode === Constants.ComputeFeeErrorCode.Balance)
-                        mintPanel.errorText = qsTr("Not enough funds to make transaction")
+                        mintPanel.feeErrorText = qsTr("Not enough funds to make transaction")
 
                     mintPanel.isFeeLoading = false
 
                     return
                 } else if (errorCode === Constants.ComputeFeeErrorCode.Infura) {
-                    mintPanel.errorText = qsTr("Infura error")
+                    mintPanel.feeErrorText = qsTr("Infura error")
                     mintPanel.isFeeLoading = true
                     return
                 }
-                mintPanel.errorText = qsTr("Unknown error")
+                mintPanel.feeErrorText = qsTr("Unknown error")
                 mintPanel.isFeeLoading = true
             }
 
@@ -347,7 +347,7 @@ StatusSectionLayout {
             allNetworks: communityTokensStore.allNetworks
             accounts: root.rootStore.accounts
 
-            onSignMintTransactionOpened:
+            onDeployFeesRequested:
                 communityTokensStore.computeDeployFee(
                     chainId, accountAddress, tokenType)
 

ui/app/AppLayouts/Communities/views/EditOwnerTokenView.qml

@@ -37,6 +37,10 @@ StatusScrollView {
     // Wallet account expected roles: address, name, color, emoji, walletType
     property var accounts
 
+    property string feeText
+    property string feeErrorText
+    property bool isFeeLoading
+
     // Privileged tokens:
     readonly property TokenObject ownerToken: TokenObject {
         type: Constants.TokenType.ERC721
@@ -61,7 +65,12 @@ StatusScrollView {
         description: qsTr("This is the %1 TokenMaster token. The hodler of this collectible has full admin rights for the %1 Community in Status and can mint and airdrop %1 Community tokens.").arg(root.communityName)
     }
 
+    readonly property string feeLabel:
+        qsTr("Mint %1 Owner and TokenMaster tokens on %2")
+        .arg(communityName).arg(ownerToken.chainName)
+
     signal mintClicked
+    signal deployFeesRequested
 
     QtObject {
         id: d
@@ -145,9 +154,16 @@ StatusScrollView {
         StatusEmojiAndColorComboBox {
             id: accountBox
 
-            readonly property string address: SQUtils.ModelUtils.get(root.accounts, currentIndex, "address")
+            readonly property string address: {
+                root.accounts.count
+                return SQUtils.ModelUtils.get(root.accounts, currentIndex, "address")
+            }
+
             readonly property string initAccountName: ownerToken.accountName
-            readonly property int initIndex: SQUtils.ModelUtils.indexOf(root.accounts, "name", initAccountName)
+            readonly property int initIndex: {
+                root.accounts.count
+                return SQUtils.ModelUtils.indexOf(root.accounts, "name", initAccountName)
+            }
 
             Layout.fillWidth: true
             Layout.topMargin: -Style.current.halfPadding
@@ -182,6 +198,8 @@ StatusScrollView {
             onAddressChanged: {
                 ownerToken.accountAddress = address
                 tMasterToken.accountAddress = address
+
+                root.deployFeesRequested()
             }
             control.onDisplayTextChanged: {
                 ownerToken.accountName = control.displayText
@@ -196,6 +214,22 @@ StatusScrollView {
             description: qsTr("The network on which these tokens will be minted.")
         }
 
+        FeesBox {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.padding
+
+            model: QtObject {
+                id: singleFeeModel
+
+                readonly property string title: root.feeLabel
+                readonly property string feeText: root.isFeeLoading ?
+                                                      "" : root.feeText
+                readonly property bool error: root.feeErrorText !== ""
+            }
+
+            showAccountsSelector: false
+        }
+
         RowLayout {
             Layout.fillWidth: true
             Layout.topMargin: Style.current.halfPadding
@@ -224,7 +258,7 @@ StatusScrollView {
             Layout.preferredHeight: 44
             Layout.alignment: Qt.AlignHCenter
             Layout.fillWidth: true
-            Layout.topMargin: Style.current.padding
+            Layout.topMargin: 4
             Layout.bottomMargin: Style.current.padding
             text: qsTr("Mint")
 
@@ -265,6 +299,8 @@ StatusScrollView {
 
         function setChain(chainId) { netFilter.setChain(chainId) }
 
+        readonly property alias currentNetworkName: netFilter.currentValue
+
         Layout.fillWidth: true
         Layout.topMargin: Style.current.padding
         spacing: 8
@@ -287,18 +323,19 @@ StatusScrollView {
 
             multiSelection: false
 
-            onToggleNetwork: (network) =>
+            onToggleNetwork: (network) => {
-                             {
+                // Set Owner Token network properties:
-                                 // Set Owner Token network properties:
+                ownerToken.chainId = network.chainId
-                                 ownerToken.chainId = network.chainId
+                ownerToken.chainName = network.chainName
-                                 ownerToken.chainName = network.chainName
+                ownerToken.chainIcon = network.iconUrl
-                                 ownerToken.chainIcon = network.iconUrl
 
-                                 // Set TMaster Token network properties:
+                // Set TMaster Token network properties:
-                                 tMasterToken.chainId = network.chainId
+                tMasterToken.chainId = network.chainId
-                                 tMasterToken.chainName = network.chainName
+                tMasterToken.chainName = network.chainName
-                                 tMasterToken.chainIcon = network.iconUrl
+                tMasterToken.chainIcon = network.iconUrl
-                             }
+
+                root.deployFeesRequested()
+            }
         }
     }
 }