feat(RemotelyDestructPopup): Added fee box

Closes #11624

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,8 +52,14 @@ SplitView {
                 anchors.centerIn: parent
                 collectibleName: editorCollectible.text
                 model: TokenHoldersModel {}
-
+                accounts: accountsModel
-                onRemotelyDestructClicked: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
+                chainName: "Optimism"
+                feeText: "0,01et(100Usd)"
+                onRemotelyDestructClicked: {
+                    logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
+                    close()
+                }
+                onRemotelyDestructFeesRequested: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
 
                 Component.onCompleted: {
                     open()

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

@@ -67,10 +67,12 @@ StackView {
 
     signal deployFeesRequested(int chainId, string accountAddress, int tokenType)
     signal burnFeesRequested(string tokenKey, int amount, string accountAddress)
-    signal signRemoteDestructTransactionOpened(var remotelyDestructTokensList, // [key , amount]
+    signal remotelyDestructFeesRequest(var remotelyDestructTokensList, // [key , amount]
-                                               string tokenKey)
+                                       string tokenKey,
+                                       string accountAddress)
     signal remotelyDestructCollectibles(var remotelyDestructTokensList, // [key , amount]
-                                        string tokenKey)
+                                        string tokenKey,
+                                        string accountAddress)
     signal signBurnTransactionOpened(string tokenKey, int amount, string accountAddress)
     signal burnToken(string tokenKey, int amount, string accountAddress)
     signal airdropToken(string tokenKey, int type, var addresses)
@@ -630,9 +632,20 @@ StackView {
 
                 collectibleName: view.token.name
                 model: view.tokenOwnersModel || null
+                accounts: root.accounts
+                chainName: view.token.chainName
+
+                feeText: root.feeText                
+                isFeeLoading: root.isFeeLoading
+                feeErrorText: root.feeErrorText
+
+                onRemotelyDestructFeesRequested:root.remotelyDestructFeesRequest(remotelyDestructTokensList,
+                                                                                  tokenKey,
+                                                                                  accountAddress)
 
                 onRemotelyDestructClicked: {
                     remotelyDestructPopup.close()
+                    footer.accountAddress = accountAddress
                     footer.remotelyDestructTokensList = remotelyDestructTokensList
                     alertPopup.tokenCount = tokenCount
                     alertPopup.open()
@@ -664,8 +677,7 @@ StackView {
                     root.setFeeLoading()
 
                     if(signTransactionPopup.isRemotelyDestructTransaction)
-                        root.remotelyDestructCollectibles(
+                        root.remotelyDestructCollectibles(footer.remotelyDestructTokensList, tokenKey, footer.accountAddress)
-                                    footer.remotelyDestructTokensList, tokenKey)
                     else
                         root.burnToken(tokenKey, footer.burnAmount, footer.accountAddress)
 
@@ -686,7 +698,7 @@ StackView {
                 onOpened: {
                     root.setFeeLoading()
                     signTransactionPopup.isRemotelyDestructTransaction
-                            ? root.signRemoteDestructTransactionOpened(footer.remotelyDestructTokensList, tokenKey)
+                            ? root.remotelyDestructFeesRequest(footer.remotelyDestructTokensList, tokenKey, footer.accountAddress)
                             : root.signBurnTransactionOpened(tokenKey, footer.burnAmount, footer.accountAddress)
                 }
                 onSignTransactionClicked: signTransaction()

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

@@ -17,17 +17,28 @@ StatusDialog {
     id: root
 
     property alias model: tokenHoldersPanel.model
-
     property string collectibleName
+    property string chainName
 
-    signal remotelyDestructClicked(int tokenCount, var remotelyDestructTokensList)
+    // Fees related properties:
+    property bool isFeeLoading
+    property string feeText: ""
+    property string feeErrorText: ""
+    property string feeLabel: qsTr("Remotely destruct %1 token on %2").arg(root.collectibleName).arg(root.chainName)
+
+    // Account expected roles: address, name, color, emoji, walletType
+    property var accounts
+    signal remotelyDestructClicked(int tokenCount, var remotelyDestructTokensList, string accountAddress)
+    signal remotelyDestructFeesRequested(int tokenCount, var remotelyDestructTokensList, string accountAddress)
 
     QtObject {
         id: d
 
+        property string accountAddress
         readonly property int maxHeight: 560 // by design
         property int tokenCount: 0
         readonly property ListModel selfDestructTokensList: ListModel {}
+        readonly property bool isFeeError: root.feeErrorText !== ""
 
         function getVerticalPadding() {
             return root.topPadding + root.bottomPadding
@@ -56,6 +67,9 @@ StatusDialog {
            d.tokenCount = 0
            for(var i = 0; i < d.selfDestructTokensList.count; i ++)
                d.tokenCount += ModelUtils.get(d.selfDestructTokensList, i, "amount")
+           if (d.tokenCount > 0) {
+               root.remotelyDestructFeesRequested(d.tokenCount, d.selfDestructTokensList, d.accountAddress);
+           }
        }
     }
 
@@ -63,12 +77,63 @@ StatusDialog {
     implicitWidth: 600 // by design
     padding: 0
 
-    contentItem: TokenHoldersPanel {
+    contentItem: ColumnLayout {
-        id: tokenHoldersPanel
+        spacing: Style.current.padding
-        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 {
+            id: feesBox
+
+            Layout.fillWidth: true
+            Layout.bottomMargin: 16
+            Layout.leftMargin: 16
+            Layout.rightMargin: 16
+
+            implicitWidth: 0
+            accountErrorText: root.feeErrorText
+            placeholderText: qsTr("Select a hodler to see remote destruction gas fees")
+            showAccountsSelector: true
+            model: d.tokenCount > 0 ? singleFeeModel : undefined            
+            accountsSelector.model: root.accounts
+
+            accountsSelector.onCurrentIndexChanged: {
+                if (accountsSelector.currentIndex < 0)
+                    return
+
+                const item = ModelUtils.get(accountsSelector.model, accountsSelector.currentIndex)
+                d.accountAddress = item.address
+
+                // Whenever a change in the form happens, new fee calculation:
+                if(d.tokenCount > 0)
+                    root.remotelyDestructFeesRequested(d.tokenCount, d.selfDestructTokensList, d.accountAddress)
+            }
+
+            ModelChangeTracker {
+                model: d.selfDestructTokensList
+
+                // Whenever a change in the form happens, new fee calculation:
+                onRevisionChanged: {
+                    root.remotelyDestructFeesRequested(d.tokenCount, d.selfDestructTokensList, d.accountAddress)
+                }
+            }
+
+            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 {
@@ -85,8 +150,8 @@ StatusDialog {
                 text: qsTr("Remotely destruct %n token(s)", "", d.tokenCount)
                 type: StatusBaseButton.Type.Danger
                 onClicked:  root.remotelyDestructClicked(d.tokenCount,
-                                                    ModelUtils.modelToArray(d.selfDestructTokensList,
+                                                         ModelUtils.modelToArray(d.selfDestructTokensList,["walletAddress", "amount"]),
-                                                                            ["walletAddress", "amount"]))
+                                                         d.accountAddress)
             }
         }
     }

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

@@ -382,13 +382,13 @@ StatusSectionLayout {
                 communityTokensStore.deployOwnerToken(
                     root.community.id, ownerToken, tMasterToken)
 
-            onSignRemoteDestructTransactionOpened:
+            onRemotelyDestructFeesRequest:
                 communityTokensStore.computeSelfDestructFee(
-                    remotelyDestructTokensList, tokenKey)
+                    remotelyDestructTokensList, tokenKey, accountAddress)
 
             onRemotelyDestructCollectibles:
                 communityTokensStore.remoteSelfDestructCollectibles(
-                    root.community.id, remotelyDestructTokensList, tokenKey)
+                    root.community.id, remotelyDestructTokensList, tokenKey, accountAddress)
 
             onSignBurnTransactionOpened:
                 communityTokensStore.computeBurnFee(tokenKey, amount, accountAddress)

ui/imports/shared/stores/CommunityTokensStore.qml

@@ -100,12 +100,14 @@ QtObject {
         communityTokensModuleInst.computeDeployFee(chainId, accountAddress, tokenType)
     }
 
-    function computeSelfDestructFee(selfDestructTokensList, tokenKey) {
+    function computeSelfDestructFee(selfDestructTokensList, tokenKey, accountAddress) {
-        communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(selfDestructTokensList), tokenKey)
+        //TODO uncomment accountAddress when supported in backend
+        communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/)
     }
 
-    function remoteSelfDestructCollectibles(communityId, selfDestructTokensList, tokenKey) {
+    function remoteSelfDestructCollectibles(communityId, selfDestructTokensList, tokenKey, accountAddress) {
-        communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(selfDestructTokensList), tokenKey)
+        //TODO uncomment accountAddress when supported in backend
+        communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/)
     }
 
     // Burn: