fix(Communities): Remotely destruct popup for regular collectibles integrated

Closes: #11924

storybook/pages/RemotelyDestructPopupPage.qml

@@ -31,7 +31,9 @@ SplitView {
         orientation: Qt.Vertical
         SplitView.fillWidth: true
 
-        Item {
+        Pane {
+            id: pane
+
             SplitView.fillWidth: true
             SplitView.fillHeight: true
 
@@ -49,17 +51,35 @@ SplitView {
             RemotelyDestructPopup {
                 id: dialog
 
-                anchors.centerIn: parent
+                margins: 250
+                topMargin: 30
+
+                closePolicy: Popup.NoAutoClose
+                visible: true
+                modal: false
+                destroyOnClose: false
+                parent: pane
+                anchors.centerIn: pane
+
+
                 collectibleName: editorCollectible.text
                 model: TokenHoldersModel {}
                 accounts: accountsModel
                 chainName: "Optimism"
-                feeText: "0,01et(100Usd)"
+                feeText: "0,01 ETH (60,34 USD)"
                 onRemotelyDestructClicked: {
-                    logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
+                    logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked",
+                                  ["walletsAndAmounts", "accountAddress"], [
+                                      JSON.stringify(walletsAndAmounts), accountAddress
+                                  ])
                     close()
                 }
-                onRemotelyDestructFeesRequested: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked")
+                onRemotelyDestructFeesRequested: {
+                    logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructFeesRequested",
+                                  ["walletsAndAmounts", "accountAddress"], [
+                                      JSON.stringify(walletsAndAmounts), accountAddress
+                                  ])
+                }
 
                 Component.onCompleted: {
                     open()

ui/StatusQ/src/StatusQ/Core/Utils/ModelUtils.qml

@@ -56,6 +56,9 @@ QtObject {
     }
 
     function indexOf(model, role, key) {
+        if (!model)
+            return -1
+
         const count = model.rowCount()
 
         for (let i = 0; i < count; i++)

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

@@ -67,10 +67,10 @@ StackView {
 
     signal deployFeesRequested(int chainId, string accountAddress, int tokenType)
     signal burnFeesRequested(string tokenKey, string amount, string accountAddress)
-    signal remotelyDestructFeesRequest(var remotelyDestructTokensList, // [key , amount]
+    signal remotelyDestructFeesRequest(var walletsAndAmounts, // { [walletAddress (string), amount (int)] }
                                        string tokenKey,
                                        string accountAddress)
-    signal remotelyDestructCollectibles(var remotelyDestructTokensList, // [key , amount]
+    signal remotelyDestructCollectibles(var walletsAndAmounts, // { [walletAddress (string), amount (int)] }
                                         string tokenKey,
                                         string accountAddress)
     signal signBurnTransactionOpened(string tokenKey, string amount, string accountAddress)
@@ -623,7 +623,7 @@ StackView {
             onBurnClicked: burnTokensPopup.open()
 
             // helper properties to pass data through popups
-            property var remotelyDestructTokensList
+            property var walletsAndAmounts
             property string burnAmount
             property string accountAddress
 
@@ -639,15 +639,16 @@ StackView {
                 isFeeLoading: root.isFeeLoading
                 feeErrorText: root.feeErrorText
 
-                onRemotelyDestructFeesRequested:root.remotelyDestructFeesRequest(remotelyDestructTokensList,
+                onRemotelyDestructFeesRequested: {
-                                                                                  tokenKey,
+                    root.remotelyDestructFeesRequest(walletsAndAmounts,
+                                                     view.token.key,
                                                      accountAddress)
+                }
 
                 onRemotelyDestructClicked: {
                     remotelyDestructPopup.close()
                     footer.accountAddress = accountAddress
-                    footer.remotelyDestructTokensList = remotelyDestructTokensList
+                    footer.walletsAndAmounts = walletsAndAmounts
-                    alertPopup.tokenCount = tokenCount
                     alertPopup.open()
                 }
             }
@@ -655,9 +656,8 @@ StackView {
             AlertPopup {
                 id: alertPopup
 
-                property int tokenCount
+                title: qsTr("Remotely destruct %n token(s)", "",
-
+                            remotelyDestructPopup.tokenCount)
-                title: qsTr("Remotely destruct %n token(s)", "", tokenCount)
                 acceptBtnText: qsTr("Remotely destruct")
                 alertText: qsTr("Continuing will destroy tokens held by members and revoke any permissions they are given. To undo you will have to issue them new tokens.")
 
@@ -677,7 +677,8 @@ StackView {
                     root.setFeeLoading()
 
                     if(signTransactionPopup.isRemotelyDestructTransaction)
-                        root.remotelyDestructCollectibles(footer.remotelyDestructTokensList, tokenKey, footer.accountAddress)
+                        root.remotelyDestructCollectibles(footer.walletsAndAmounts,
+                                                          tokenKey, footer.accountAddress)
                     else
                         root.burnToken(tokenKey, footer.burnAmount, footer.accountAddress)
 
@@ -698,7 +699,7 @@ StackView {
                 onOpened: {
                     root.setFeeLoading()
                     signTransactionPopup.isRemotelyDestructTransaction
-                            ? root.remotelyDestructFeesRequest(footer.remotelyDestructTokensList, tokenKey, footer.accountAddress)
+                            ? root.remotelyDestructFeesRequest(footer.walletsAndAmounts, tokenKey, footer.accountAddress)
                             : root.signBurnTransactionOpened(tokenKey, footer.burnAmount, footer.accountAddress)
                 }
                 onSignTransactionClicked: signTransaction()

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

@@ -79,12 +79,9 @@ Control {
             Layout.topMargin: 12
             isSelectorMode: root.isSelectorMode
             model: filteredModel
-            onSelfDestructRemoved: {
+            onSelfDestructRemoved: root.selfDestructRemoved(walletAddress)
-                root.selfDestructRemoved(walletAddress);
+            onSelfDestructAmountChanged: root.selfDestructAmountChanged(
-            }
+                                             walletAddress, amount)
-            onSelfDestructAmountChanged: {
-                root.selfDestructAmountChanged(walletAddress, amount);
-            }
         }
         Rectangle {
             Layout.fillWidth: true

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

@@ -1,7 +1,7 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
-import QtQml.Models 2.14
+import QtQml.Models 2.15
 
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
@@ -26,10 +26,12 @@ StatusDialog {
     property string feeErrorText: ""
     property string feeLabel: qsTr("Remotely destruct %1 token on %2").arg(root.collectibleName).arg(root.chainName)
 
+    readonly property alias tokenCount: d.tokenCount
+
     // Account expected roles: address, name, color, emoji, walletType
     property var accounts
-    signal remotelyDestructClicked(int tokenCount, var remotelyDestructTokensList, string accountAddress)
+    signal remotelyDestructClicked(var walletsAndAmounts, string accountAddress)
-    signal remotelyDestructFeesRequested(int tokenCount, var remotelyDestructTokensList, string accountAddress)
+    signal remotelyDestructFeesRequested(var walletsAndAmounts, string accountAddress)
 
     QtObject {
         id: d
@@ -37,7 +39,7 @@ StatusDialog {
         property string accountAddress
         readonly property int maxHeight: 560 // by design
         property int tokenCount: 0
-        readonly property ListModel selfDestructTokensList: ListModel {}
+        readonly property ListModel walletsAndAmountsList: ListModel {}
         readonly property bool isFeeError: root.feeErrorText !== ""
 
         function getVerticalPadding() {
@@ -49,27 +51,40 @@ StatusDialog {
         }
 
         function updateTokensToDestruct(walletAddress, amount) {
-            if(ModelUtils.contains(d.selfDestructTokensList, "walletAddress", walletAddress))
+            const index = ModelUtils.indexOf(d.walletsAndAmountsList,
-                clearTokensToDesctruct(walletAddress)
+                                             "walletAddress", walletAddress)
+
+            if (index !== -1)
+                d.walletsAndAmountsList.setProperty(index, "amount", amount)
+            else
+                d.walletsAndAmountsList.append({ walletAddress, amount })
 
-            d.selfDestructTokensList.append({"walletAddress": walletAddress,
-                                            "amount": amount})
             updateTokensCount()
         }
 
-        function clearTokensToDesctruct(walletAddress) {
+        function clearTokensToDestruct(walletAddress) {
-            var index = ModelUtils.indexOf(d.selfDestructTokensList, "walletAddress", walletAddress)
+            const index = ModelUtils.indexOf(d.walletsAndAmountsList,
-            d.selfDestructTokensList.remove(index)
+                                             "walletAddress", walletAddress)
+            d.walletsAndAmountsList.remove(index)
             updateTokensCount()
         }
 
         function updateTokensCount() {
-           d.tokenCount = 0
+            const amounts = ModelUtils.modelToFlatArray(
-           for(var i = 0; i < d.selfDestructTokensList.count; i ++)
+                              d.walletsAndAmountsList, "amount")
-               d.tokenCount += ModelUtils.get(d.selfDestructTokensList, i, "amount")
+            const sum = amounts.reduce((a, b) => a + b, 0)
-           if (d.tokenCount > 0) {
+            d.tokenCount = sum
-               root.remotelyDestructFeesRequested(d.tokenCount, d.selfDestructTokensList, d.accountAddress);
+
+            if (sum > 0)
+                sendFeeRequest()
         }
+
+        function sendFeeRequest() {
+            const walletsAndAmounts = ModelUtils.modelToArray(
+                                        d.walletsAndAmountsList)
+
+            root.remotelyDestructFeesRequested(walletsAndAmounts,
+                                               d.accountAddress)
         }
     }
 
@@ -86,7 +101,7 @@ StatusDialog {
             Layout.fillHeight: true
             isSelectorMode: true
             onSelfDestructAmountChanged: d.updateTokensToDestruct(walletAddress, amount)
-            onSelfDestructRemoved: d.clearTokensToDesctruct(walletAddress)
+            onSelfDestructRemoved: d.clearTokensToDestruct(walletAddress)
         }
 
         FeesBox {
@@ -108,21 +123,13 @@ StatusDialog {
                 if (accountsSelector.currentIndex < 0)
                     return
 
-                const item = ModelUtils.get(accountsSelector.model, accountsSelector.currentIndex)
+                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)
+                    d.sendFeeRequest()
-            }
-
-            ModelChangeTracker {
-                model: d.selfDestructTokensList
-
-                // Whenever a change in the form happens, new fee calculation:
-                onRevisionChanged: {
-                    root.remotelyDestructFeesRequested(d.tokenCount, d.selfDestructTokensList, d.accountAddress)
-                }
             }
 
             QtObject {
@@ -149,10 +156,15 @@ StatusDialog {
                 enabled: d.tokenCount > 0
                 text: qsTr("Remotely destruct %n token(s)", "", d.tokenCount)
                 type: StatusBaseButton.Type.Danger
-                onClicked:  root.remotelyDestructClicked(d.tokenCount,
+
-                                                         ModelUtils.modelToArray(d.selfDestructTokensList,["walletAddress", "amount"]),
+                onClicked: {
+                    const walletsAndAmounts = ModelUtils.modelToArray(
+                                                d.walletsAndAmountsList)
+
+                    root.remotelyDestructClicked(walletsAndAmounts,
                                                  d.accountAddress)
                 }
             }
         }
     }
+}

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

@@ -385,11 +385,11 @@ StatusSectionLayout {
 
             onRemotelyDestructFeesRequest:
                 communityTokensStore.computeSelfDestructFee(
-                    remotelyDestructTokensList, tokenKey, accountAddress)
+                    walletsAndAmounts, tokenKey, accountAddress)
 
             onRemotelyDestructCollectibles:
                 communityTokensStore.remoteSelfDestructCollectibles(
-                    root.community.id, remotelyDestructTokensList, tokenKey, accountAddress)
+                    root.community.id, walletsAndAmounts, tokenKey, accountAddress)
 
             onSignBurnTransactionOpened:
                 communityTokensStore.computeBurnFee(tokenKey, amount, accountAddress)

ui/imports/shared/stores/CommunityTokensStore.qml

@@ -108,14 +108,23 @@ QtObject {
         communityTokensModuleInst.computeDeployFee(chainId, accountAddress, tokenType, isOwnerDeployment)
     }
 
-    function computeSelfDestructFee(selfDestructTokensList, tokenKey, accountAddress) {
+    /**
+      * walletsAndAmounts - array of following structure is expected:
+      * [
+      *   {
+      *      walletAddress: string
+      *      amount: int
+      *   }
+      * ]
+      */
+    function computeSelfDestructFee(walletsAndAmounts, tokenKey, accountAddress) {
         //TODO uncomment accountAddress when supported in backend
-        communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/)
+        communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(walletsAndAmounts), tokenKey, /*accountAddress*/)
     }
 
-    function remoteSelfDestructCollectibles(communityId, selfDestructTokensList, tokenKey, accountAddress) {
+    function remoteSelfDestructCollectibles(communityId, walletsAndAmounts, tokenKey, accountAddress) {
         //TODO uncomment accountAddress when supported in backend
-        communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/)
+        communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(walletsAndAmounts), tokenKey, /*accountAddress*/)
     }
 
     // Burn: