From 3ce0215c881c0f8639438a489e8155133014af37 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Thu, 10 Aug 2023 12:39:52 +0300 Subject: [PATCH] feat(RemotelyDestructPopup): Added fee box Closes #11624 --- storybook/pages/RemotelyDestructPopupPage.qml | 27 +++++- .../panels/MintTokensSettingsPanel.qml | 24 ++++-- .../Communities/panels/TokenHoldersList.qml | 2 +- .../popups/RemotelyDestructPopup.qml | 85 ++++++++++++++++--- .../views/CommunitySettingsView.qml | 6 +- .../shared/stores/CommunityTokensStore.qml | 10 ++- 6 files changed, 128 insertions(+), 26 deletions(-) diff --git a/storybook/pages/RemotelyDestructPopupPage.qml b/storybook/pages/RemotelyDestructPopupPage.qml index ccbc41ebc1..d7988d7af2 100644 --- a/storybook/pages/RemotelyDestructPopupPage.qml +++ b/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 {} - - onRemotelyDestructClicked: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked") + accounts: accountsModel + chainName: "Optimism" + feeText: "0,01et(100Usd)" + onRemotelyDestructClicked: { + logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked") + close() + } + onRemotelyDestructFeesRequested: logs.logEvent("RemoteSelfDestructPopup::onRemotelyDestructClicked") Component.onCompleted: { open() diff --git a/ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml b/ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml index 850ccebad8..b28fb9ee87 100644 --- a/ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml +++ b/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] - string tokenKey) + signal remotelyDestructFeesRequest(var remotelyDestructTokensList, // [key , amount] + 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( - footer.remotelyDestructTokensList, tokenKey) + root.remotelyDestructCollectibles(footer.remotelyDestructTokensList, tokenKey, footer.accountAddress) 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() diff --git a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml b/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml index a49761d088..05c21ba16c 100644 --- a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml +++ b/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) diff --git a/ui/app/AppLayouts/Communities/popups/RemotelyDestructPopup.qml b/ui/app/AppLayouts/Communities/popups/RemotelyDestructPopup.qml index 9c297eadc6..b3eea35abb 100644 --- a/ui/app/AppLayouts/Communities/popups/RemotelyDestructPopup.qml +++ b/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 { - id: tokenHoldersPanel - tokenName: root.collectibleName - isSelectorMode: true - onSelfDestructAmountChanged: d.updateTokensToDestruct(walletAddress, amount) - onSelfDestructRemoved: d.clearTokensToDesctruct(walletAddress) + contentItem: ColumnLayout { + spacing: Style.current.padding + TokenHoldersPanel { + id: tokenHoldersPanel + tokenName: root.collectibleName + 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, - ["walletAddress", "amount"])) + ModelUtils.modelToArray(d.selfDestructTokensList,["walletAddress", "amount"]), + d.accountAddress) } } } diff --git a/ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml b/ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml index a9b1760b90..3009154dd5 100644 --- a/ui/app/AppLayouts/Communities/views/CommunitySettingsView.qml +++ b/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) diff --git a/ui/imports/shared/stores/CommunityTokensStore.qml b/ui/imports/shared/stores/CommunityTokensStore.qml index fa40ccc58a..df9bff6375 100644 --- a/ui/imports/shared/stores/CommunityTokensStore.qml +++ b/ui/imports/shared/stores/CommunityTokensStore.qml @@ -100,12 +100,14 @@ QtObject { communityTokensModuleInst.computeDeployFee(chainId, accountAddress, tokenType) } - function computeSelfDestructFee(selfDestructTokensList, tokenKey) { - communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(selfDestructTokensList), tokenKey) + function computeSelfDestructFee(selfDestructTokensList, tokenKey, accountAddress) { + //TODO uncomment accountAddress when supported in backend + communityTokensModuleInst.computeSelfDestructFee(JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/) } - function remoteSelfDestructCollectibles(communityId, selfDestructTokensList, tokenKey) { - communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(selfDestructTokensList), tokenKey) + function remoteSelfDestructCollectibles(communityId, selfDestructTokensList, tokenKey, accountAddress) { + //TODO uncomment accountAddress when supported in backend + communityTokensModuleInst.selfDestructCollectibles(communityId, JSON.stringify(selfDestructTokensList), tokenKey, /*accountAddress*/) } // Burn: