From 77003fb0527f991b865daa5aa8e9de8a555f23f4 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Sat, 7 Dec 2024 22:18:06 +0100 Subject: [PATCH] feat(@desktop/wallet): New simple fees component fixes #16706 --- storybook/pages/SimpleSendModalPage.qml | 6 ++ .../pages/SimpleTransactionsFeesPage.qml | 42 ++++++++++ .../Wallet/panels/RecipientSelectorPanel.qml | 2 - .../Wallet/panels/SimpleTransactionsFees.qml | 82 +++++++++++++++++++ ui/app/AppLayouts/Wallet/panels/qmldir | 1 + .../popups/simpleSend/SimpleSendModal.qml | 50 +++++++++-- 6 files changed, 175 insertions(+), 8 deletions(-) create mode 100644 storybook/pages/SimpleTransactionsFeesPage.qml create mode 100644 ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml diff --git a/storybook/pages/SimpleSendModalPage.qml b/storybook/pages/SimpleSendModalPage.qml index 041f95c944..daf9e3d9ff 100644 --- a/storybook/pages/SimpleSendModalPage.qml +++ b/storybook/pages/SimpleSendModalPage.qml @@ -87,6 +87,7 @@ SplitView { modal: false closePolicy: Popup.CloseOnEscape + feesLoading: feesLoadingCheckbox.checked interactive: interactiveCheckbox.checked accountsModel: d.walletAccountsModel @@ -490,6 +491,11 @@ SplitView { checked: true } + CheckBox { + id: feesLoadingCheckbox + text: "Fees loading" + } + Text { text: "Select an accounts" } diff --git a/storybook/pages/SimpleTransactionsFeesPage.qml b/storybook/pages/SimpleTransactionsFeesPage.qml new file mode 100644 index 0000000000..a4fedd476f --- /dev/null +++ b/storybook/pages/SimpleTransactionsFeesPage.qml @@ -0,0 +1,42 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 + +import StatusQ.Core.Theme 0.1 + +import Storybook 1.0 + +import AppLayouts.Wallet.panels 1.0 + +SplitView { + orientation: Qt.Vertical + Logs { id: logs } + + Rectangle { + SplitView.fillHeight: true + SplitView.fillWidth: true + color: Theme.palette.baseColor3 + + SimpleTransactionsFees { + anchors.centerIn: parent + width: 400 + + loading: loadingCheckbox.checked + } + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 200 + + logsView.logText: logs.logText + + CheckBox { + id: loadingCheckbox + text: "loading" + } + } +} + +// category: Views diff --git a/ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml b/ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml index b02ed6236c..d1e18c44de 100644 --- a/ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml +++ b/ui/app/AppLayouts/Wallet/panels/RecipientSelectorPanel.qml @@ -130,8 +130,6 @@ Rectangle { rotation: 45 }, StatusTextWithLoadingState { - font.pixelSize: 15 - customColor: Theme.palette.directColor1 text: LocaleUtils.currencyAmountToLocaleString(entry.amountCurrency) } ] diff --git a/ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml b/ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml new file mode 100644 index 0000000000..82eae04f45 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml @@ -0,0 +1,82 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.14 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 + +Control { + id: root + + /** property to set fees in fiat along with fiat symbol **/ + property alias cryptoFees: cryptoFeesText.text + /** property to set fees in crypto along with crypto symbol **/ + property alias fiatFees: fiatFeesText.text + + /** property to set loading state in the fees component **/ + property bool loading + + implicitHeight: 64 + + padding: Theme.padding + topPadding: 12 + bottomPadding: 12 + + background: Rectangle { + color: Theme.palette.indirectColor1 + radius: 8 + } + + contentItem: RowLayout { + width: parent.width + spacing: 12 + + StatusRoundIcon { + Layout.alignment: Qt.AlignTop + + radius: 8 + asset.name: "gas" + asset.color: Theme.palette.directColor1 + } + ColumnLayout { + Layout.fillWidth: true + + spacing: 0 + + StatusBaseText { + Layout.fillWidth: true + + lineHeightMode: Text.FixedHeight + lineHeight: 22 + + text: qsTr("Est Mainnet transaction fee") + } + StatusTextWithLoadingState { + id: cryptoFeesText + + Layout.fillWidth: true + + loading: root.loading + customColor: Theme.palette.baseColor1 + lineHeightMode: Text.FixedHeight + lineHeight: 22 + + text: qsTr("0.0007 ETH") + } + } + StatusTextWithLoadingState { + id: fiatFeesText + + Layout.alignment: Qt.AlignRight + + loading: root.loading + customColor: Theme.palette.baseColor1 + lineHeightMode: Text.FixedHeight + lineHeight: 22 + + text: qsTr("1.45 EUR") + } + } +} diff --git a/ui/app/AppLayouts/Wallet/panels/qmldir b/ui/app/AppLayouts/Wallet/panels/qmldir index cb8395528c..647aff01cb 100644 --- a/ui/app/AppLayouts/Wallet/panels/qmldir +++ b/ui/app/AppLayouts/Wallet/panels/qmldir @@ -15,3 +15,4 @@ WalletHeader 1.0 WalletHeader.qml SendModalHeader 1.0 SendModalHeader.qml StickySendModalHeader 1.0 StickySendModalHeader.qml RecipientSelectorPanel 1.0 RecipientSelectorPanel.qml +SimpleTransactionsFees 1.0 SimpleTransactionsFees.qml diff --git a/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml b/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml index 8061906be1..b0ece3bd18 100644 --- a/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml @@ -14,6 +14,7 @@ import shared.controls 1.0 import AppLayouts.Wallet.panels 1.0 import AppLayouts.Wallet.controls 1.0 +import AppLayouts.Wallet.views 1.0 import AppLayouts.Wallet 1.0 import utils 1.0 @@ -78,8 +79,10 @@ StatusDialog { /** Input function to format currency amount to locale string **/ required property var fnFormatCurrencyAmount - /** input property to decide if send mdoal is interactive or prefilled**/ + /** input property to decide if send modal is interactive or prefilled **/ property bool interactive + /** input property to decide if fees are loading **/ + property bool feesLoading /** property to set and expose currently selected account **/ property string selectedAccountAddress @@ -176,6 +179,12 @@ StatusDialog { d.selectedTokenEntry.currentBalance : 0 return WalletUtils.calculateMaxSafeSendAmount(maxCryptoBalance, d.selectedCryptoTokenSymbol) } + + readonly property bool allValuesFilled: !!root.selectedAccountAddress && + root.selectedChainId !== 0 && + !!root.selectedTokenKey && + !!root.selectedRecipientAddress && + !!root.selectedAmount } width: 556 @@ -205,7 +214,13 @@ StatusDialog { anchors.top: parent.top implicitWidth: parent.width - implicitHeight: scrollView.implicitHeight + implicitHeight: Math.max(sendModalHeader.height + + amountToSend.height + + recipientsPanelLayout.height + + feesLayout.height + + scrollViewLayout.spacing*3 + + 28, + scrollView.implicitHeight) // Floating account Selector AccountSelectorHeader { @@ -358,20 +373,22 @@ StatusDialog { /** TODO: replace with new and improved recipient selector TBD under https://github.com/status-im/status-desktop/issues/16916 **/ ColumnLayout { - spacing: Theme.halfPadding + id: recipientsPanelLayout + Layout.fillWidth: true + + spacing: Theme.halfPadding + StatusBaseText { elide: Text.ElideRight text: qsTr("To") - font.pixelSize: 15 - color: Theme.palette.directColor1 } RecipientSelectorPanel { id: recipientsPanel Layout.fillWidth: true Layout.fillHeight: true - Layout.bottomMargin: Theme.xlPadding + Layout.bottomMargin: feesLayout.visible ? 0 : Theme.xlPadding savedAddressesModel: root.savedAddressesModel myAccountsModel: root.accountsModel @@ -380,6 +397,27 @@ StatusDialog { onResolveENS: root.fnResolveENS(ensName, uuid) } } + + // Fees Component + ColumnLayout { + id: feesLayout + + Layout.fillWidth: true + Layout.bottomMargin: Theme.xlPadding + + spacing: Theme.halfPadding + + StatusBaseText { + elide: Text.ElideRight + text: qsTr("Fees") + } + SimpleTransactionsFees { + Layout.fillWidth: true + + loading: root.feesLoading + } + visible: d.allValuesFilled + } } } }