feat(RemotelyDestructPopup): Added fee box

Closes #11624

storybook/pages/MintTokensSettingsPanelPage.qml

@@ -47,6 +47,10 @@ SplitView {
 
         MintTokensSettingsPanel {
             id: panel
+            chainName: "Optimism"
+            totalFeeText: "0.00001 ($123.7)"
+            feeErrorText: "frndeufire"
+            generalAccountErrorText: "fgreudfighlre"
 
             MintedTokensModel {
                 id: mintedTokensModel

storybook/pages/RemotelyDestructPopupPage.qml

@@ -9,6 +9,23 @@ import AppLayouts.Communities.popups 1.0
 
 SplitView {
     Logs { id: logs }
+    ListModel {
+        id: accountsModel
+
+        ListElement {
+            name: "Test account"
+            emoji: "😋"
+            address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
+            color: "red"
+        }
+
+        ListElement {
+            name: "Another account - generated"
+            emoji: "🚗"
+            address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8888"
+            color: "blue"
+        }
+    }
 
     SplitView {
         orientation: Qt.Vertical
@@ -35,7 +52,11 @@ SplitView {
                 anchors.centerIn: parent
                 collectibleName: editorCollectible.text
                 model: TokenHoldersModel {}
-
+                accounts: accountsModel
+                chainName: "Optimism"
+                totalFeeText: "0.00001 ($123.7)"
+                feeErrorText: "ghreoghreui"
+                generalAccountErrorText: "fhirfghryeruof"
                 onRemotelyDestructClicked: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
 
                 Component.onCompleted: {

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

@@ -54,6 +54,9 @@ StackView {
     property string feeText
     property string feeErrorText
     property bool isFeeLoading: true
+    property string chainName
+    property string totalFeeText
+    property string generalAccountErrorText: ""
 
     // Network related properties:
     property var layer1Networks
@@ -630,6 +633,11 @@ StackView {
 
                 collectibleName: view.token.name
                 model: view.tokenOwnersModel || null
+                accounts: root.accounts
+                chainName: root.chainName
+                totalFeeText: root.totalFeeText
+                feeErrorText: root.feeErrorText
+                generalAccountErrorText: root.generalAccountErrorText
 
                 onRemotelyDestructClicked: {
                     remotelyDestructPopup.close()

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

@@ -31,7 +31,7 @@ Item {
     readonly property alias sortBy: d.sortBy
     readonly property alias sortOrder: d.sorting
     readonly property bool bottomSeparatorVisible: ((listView.contentY > 0) &&
-    (listView.contentY < (listView.contentHeight - listView.height - 40/*margins*/)))
+    (listView.contentY < (listView.contentHeight - listView.height)))
 
     signal selfDestructAmountChanged(string walletAddress, int amount)
     signal selfDestructRemoved(string walletAddress)

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

@@ -10,6 +10,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
 
 import AppLayouts.Communities.panels 1.0
+import SortFilterProxyModel 0.2
 
 import utils 1.0
 
@@ -17,11 +18,19 @@ StatusDialog {
     id: root
 
     property alias model: tokenHoldersPanel.model
-
     property string collectibleName
-
+    property string chainName
+    property string totalFeeText
+    property bool isFeeLoading
+    property string feeErrorText: ""
+    property string generalAccountErrorText: ""
+    property string feeLabel: qsTr("Remotely destruct %1 token on %2").arg(root.collectibleName).arg(root.chainName)
+    property string feePlaceholderText: qsTr("Select a hodler to see remote destruction gas fees")
+    // Account expected roles: address, name, color, emoji, walletType
+    property var accounts
     signal remotelyDestructClicked(int tokenCount, var remotelyDestructTokensList)
 
+
     QtObject {
         id: d
 
@@ -63,12 +72,58 @@ StatusDialog {
     implicitWidth: 600 // by design
     padding: 0
 
-    contentItem: TokenHoldersPanel {
+    contentItem: ColumnLayout {
-        id: tokenHoldersPanel
+        spacing: 16
-        tokenName: root.collectibleName
+        TokenHoldersPanel {
-        isSelectorMode: true
+            id: tokenHoldersPanel
-        onSelfDestructAmountChanged: d.updateTokensToDestruct(walletAddress, amount)
+            tokenName: root.collectibleName
-        onSelfDestructRemoved: d.clearTokensToDesctruct(walletAddress)
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            isSelectorMode: true
+            onSelfDestructAmountChanged: d.updateTokensToDestruct(walletAddress, amount)
+            onSelfDestructRemoved: d.clearTokensToDesctruct(walletAddress)
+        }
+        FeesBox {
+            Layout.fillWidth: true
+            Layout.bottomMargin: 16
+            Layout.leftMargin: 16
+            Layout.rightMargin: 16
+            implicitWidth: 0
+            totalFeeText: root.totalFeeText
+            generalErrorText: root.generalAccountErrorText
+            accountErrorText: root.feeErrorText
+            placeholderText: root.feePlaceholderText
+            showAccountsSelector: true
+            model: d.tokenCount > 0 ? singleFeeModel : undefined
+            accountsSelector.model: SortFilterProxyModel {
+                sourceModel: root.accounts
+                proxyRoles: [
+                    ExpressionRole {
+                        name: "color"
+                        function getColor(colorId) {
+                            return Utils.getColorForId(colorId)
+                        }
+                        // Direct call for singleton function is not handled properly by
+                        // SortFilterProxyModel that's why helper function is used instead.
+                        expression: { return getColor(model.colorId) }
+                    }
+                ]
+                filters: ValueFilter {
+                    roleName: "walletType"
+                    value: Constants.watchWalletType
+                    inverted: true
+                }
+            }
+
+            QtObject {
+                id: singleFeeModel
+
+                readonly property string title: root.feeLabel
+                readonly property string feeText: root.isFeeLoading ?
+                                                      "" : root.feeText
+                readonly property bool error: d.isFeeError
+            }
+        }
     }
 
     footer: StatusDialogFooter {