From 8504fb55a182b9686324f129dc50f358720e0a78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 8 Jul 2024 22:14:30 +0200 Subject: [PATCH] chore[UI - Wallet Stability] Rename SendModalFooter to TransactionModalFooter ... and remove particular code for send modal - derive the footer from the standard `StatusDialogFooter` to reduce code duplication (drop shadow, divider, margins, etc) - rename the default button text - expose the icon name and make it used the correct login/auth type icon - some minor fixes and cleanups Fixes #15212 --- .../src/Models/WalletSendAccountsModel.qml | 2 +- test/e2e/gui/objects_map/names.py | 2 +- .../global_shared/scripts/wallet_names.py | 2 +- ui/app/mainui/AppMain.qml | 1 + ui/imports/shared/popups/send/SendModal.qml | 13 ++- .../shared/popups/send/views/FeesView.qml | 2 +- .../NetworksAdvancedCustomRoutingView.qml | 2 +- .../send/views/NetworksSimpleRoutingView.qml | 2 +- .../popups/send/views/SendModalFooter.qml | 106 ------------------ .../send/views/TransactionModalFooter.qml | 67 +++++++++++ ui/imports/shared/popups/send/views/qmldir | 3 +- 11 files changed, 83 insertions(+), 119 deletions(-) delete mode 100644 ui/imports/shared/popups/send/views/SendModalFooter.qml create mode 100644 ui/imports/shared/popups/send/views/TransactionModalFooter.qml diff --git a/storybook/src/Models/WalletSendAccountsModel.qml b/storybook/src/Models/WalletSendAccountsModel.qml index 37d9b9435d..ade647dd4c 100644 --- a/storybook/src/Models/WalletSendAccountsModel.qml +++ b/storybook/src/Models/WalletSendAccountsModel.qml @@ -54,7 +54,7 @@ ListModel { }, { name: "Fab (key)", - emoji: "⌚", + emoji: "🔑", colorId: Constants.walletAccountColors.camel, color: "#C78F67", address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8884", diff --git a/test/e2e/gui/objects_map/names.py b/test/e2e/gui/objects_map/names.py index 3860eb174f..ad94adf62a 100644 --- a/test/e2e/gui/objects_map/names.py +++ b/test/e2e/gui/objects_map/names.py @@ -476,7 +476,7 @@ arbitrum_StatusListItem = {"container": statusDesktop_mainWindow_overlay, "objec mainnet_StatusListItem = {"container": statusDesktop_mainWindow_overlay, "objectName": "Mainnet", "type": "StatusListItem", "visible": True} statusListItemSubTitle_StatusTextWithLoadingState = {"container": statusDesktop_mainWindow_overlay, "objectName": "statusListItemSubTitle", "type": "StatusTextWithLoadingState", "visible": True} fiatFees_StatusBaseText = {"container": statusDesktop_mainWindow_overlay, "id": "fiatFees", "type": "StatusBaseText", "unnamed": 1, "visible": True} -send_StatusFlatButton = {"checkable": False, "container": statusDesktop_mainWindow_overlay, "objectName": "sendModalFooterSendButton", "type": "StatusFlatButton", "visible": True} +send_StatusFlatButton = {"checkable": False, "container": statusDesktop_mainWindow_overlay, "objectName": "transactionModalFooterButton", "type": "StatusButton", "visible": True} o_SearchBoxWithRightIcon = {"container": statusDesktop_mainWindow_overlay, "type": "SearchBoxWithRightIcon", "unnamed": 1, "visible": True} search_TextEdit = {"container": o_SearchBoxWithRightIcon, "id": "edit", "type": "TextEdit", "unnamed": 1, "visible": True} diff --git a/test/ui-test/testSuites/global_shared/scripts/wallet_names.py b/test/ui-test/testSuites/global_shared/scripts/wallet_names.py index af90470356..6c0788104f 100644 --- a/test/ui-test/testSuites/global_shared/scripts/wallet_names.py +++ b/test/ui-test/testSuites/global_shared/scripts/wallet_names.py @@ -68,7 +68,7 @@ mainWallet_Send_Popup_My_Accounts_Tab = {"container": statusDesktop_mainWindow, mainWallet_Send_Popup_My_Accounts_List = {"container": statusDesktop_mainWindow, "objectName": "myAccountsList", "type": "StatusListView"} mainWallet_Send_Popup_Header_Accounts = {"container": statusDesktop_mainWindow, "objectName": "accountsListFloatingHeader", "type": "Repeater"} mainWallet_Send_Popup_Networks_List = {"container": statusDesktop_mainWindow, "objectName": "networksList", "type": "Repeater"} -mainWallet_Send_Popup_Send_Button = {"container": statusDesktop_mainWindow, "objectName": "sendModalFooterSendButton", "type": "StatusFlatButton"} +mainWallet_Send_Popup_Send_Button = {"container": statusDesktop_mainWindow, "objectName": "transactionModalFooterButton", "type": "StatusButton"} mainWallet_Send_Popup_Asset_Selector = {"container": statusDesktop_mainWindow, "objectName": "assetSelectorButton", "type": "StatusComboBox"} mainWallet_Send_Popup_Asset_List = {"container": statusDesktop_mainWindow, "objectName": "assetSelectorList", "type": "StatusListView"} mainWallet_Send_Popup_GasPrice_Input = {"container": statusDesktop_mainWindow, "objectName": "gasPriceSelectorInput", "type": "StyledTextField"} diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index 0f93a7f96f..6ca2e637ad 100644 --- a/ui/app/mainui/AppMain.qml +++ b/ui/app/mainui/AppMain.qml @@ -1523,6 +1523,7 @@ Item { sourceComponent: SendModal { onlyAssets: sendModal.onlyAssets store: appMain.transactionStore + loginType: appMain.rootStore.loginType onClosed: { sendModal.closed() sendModal.preSelectedSendType = Constants.SendType.Unknown diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml index 46a5b33e13..4b5cd9aa08 100644 --- a/ui/imports/shared/popups/send/SendModal.qml +++ b/ui/imports/shared/popups/send/SendModal.qml @@ -49,6 +49,7 @@ StatusDialog { property var nestedCollectiblesModel: store.nestedCollectiblesModel property var bestRoutes property bool isLoading: false + property int loginType property MessageDialog sendingError: MessageDialog { id: sendingError @@ -194,7 +195,6 @@ StatusDialog { value: popup.store.selectedSenderAccountAddress } - bottomPadding: 16 padding: 0 background: StatusDialogBackground { implicitHeight: 846 @@ -279,8 +279,6 @@ StatusDialog { } ColumnLayout { - id: group1 - anchors.fill: parent Rectangle { @@ -440,7 +438,7 @@ StatusDialog { Layout.topMargin: Style.current.padding Layout.leftMargin: Style.current.xlPadding Layout.rightMargin: Style.current.xlPadding - Layout.bottomMargin: Style.current.xlPadding + Layout.bottomMargin: Style.current.xlPadding + Style.current.padding visible: !d.selectedHolding assets: assetsAdaptor.model @@ -473,6 +471,7 @@ StatusDialog { Layout.topMargin: Style.current.padding Layout.leftMargin: Style.current.xlPadding Layout.rightMargin: Style.current.xlPadding + Layout.bottomMargin: Style.current.padding visible: !recipientLoader.ready && !d.isBridgeTx && !!d.selectedHolding store: popup.store @@ -487,6 +486,8 @@ StatusDialog { id: scrollView padding: 0 + bottomPadding: Style.current.padding + Layout.fillWidth: true Layout.fillHeight: true Layout.topMargin: Style.current.bigPadding @@ -529,9 +530,11 @@ StatusDialog { } } - footer: SendModalFooter { + footer: TransactionModalFooter { width: parent.width nextButtonText: d.isBridgeTx ? qsTr("Bridge") : qsTr("Send") + nextButtonIconName: !!popup.selectedAccount && popup.selectedAccount.migratedToKeycard ? Constants.authenticationIconByType[Constants.LoginType.Keycard] + : Constants.authenticationIconByType[popup.loginType] maxFiatFees: popup.isLoading ? "..." : d.currencyStore.formatCurrencyAmount(d.totalFeesInFiat, d.currencyStore.currentCurrency) totalTimeEstimate: popup.isLoading? "..." : d.totalTimeEstimate pending: d.isPendingTx || popup.isLoading diff --git a/ui/imports/shared/popups/send/views/FeesView.qml b/ui/imports/shared/popups/send/views/FeesView.qml index bca0da11ba..12859ad47c 100644 --- a/ui/imports/shared/popups/send/views/FeesView.qml +++ b/ui/imports/shared/popups/send/views/FeesView.qml @@ -14,7 +14,7 @@ import "../controls" Rectangle { id: root - property var gasFiatAmount + property double gasFiatAmount property bool isLoading: false property var bestRoutes property var store diff --git a/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml index 8e0a52b9da..59379e6bec 100644 --- a/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml +++ b/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml @@ -79,7 +79,7 @@ ColumnLayout { Layout.fillWidth: true font.pixelSize: 15 color: Theme.palette.baseColor1 - text: qsTr("The networks where the receipient will receive tokens. Amounts calculated automatically for the lowest cost.") + text: qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.") wrapMode: Text.WordWrap } Loader { diff --git a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml index 167c06110b..70aa2b76de 100644 --- a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml +++ b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml @@ -54,7 +54,7 @@ RowLayout { font.pixelSize: 15 color: Theme.palette.baseColor1 text: isBridgeTx ? qsTr("Choose the network to bridge token to") : - qsTr("The networks where the receipient will receive tokens. Amounts calculated automatically for the lowest cost.") + qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.") wrapMode: Text.WordWrap } ScrollView { diff --git a/ui/imports/shared/popups/send/views/SendModalFooter.qml b/ui/imports/shared/popups/send/views/SendModalFooter.qml deleted file mode 100644 index 2ab00557ad..0000000000 --- a/ui/imports/shared/popups/send/views/SendModalFooter.qml +++ /dev/null @@ -1,106 +0,0 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtQuick.Layouts 1.13 -import QtGraphicalEffects 1.13 - -import utils 1.0 - -import StatusQ.Controls 0.1 -import StatusQ.Popups 0.1 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - -Rectangle { - id: footer - - property string maxFiatFees: "..." - property alias totalTimeEstimate: estimatedTime.text - property bool pending: true - property alias nextButtonText: nextButton.text - - signal nextButtonClicked() - - implicitHeight: 82 - radius: 8 - color: Theme.palette.baseColor3 - - layer.enabled: true - layer.effect: DropShadow { - verticalOffset: 2 - radius: 16 - samples: 17 - color: Theme.palette.directColor7 - } - - // This to have the square edges on top - Rectangle { - anchors.top: footer.top - anchors.left: footer.left - anchors.right: footer.right - color: footer.color - height: footer.radius - } - - RowLayout { - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 32 - anchors.rightMargin: 32 - - ColumnLayout { - StatusBaseText { - font.pixelSize: 15 - color: Theme.palette.directColor5 - text: qsTr("Estimated Time:") - wrapMode: Text.WordWrap - } - // To-do not implemented yet - StatusBaseText { - id: estimatedTime - font.pixelSize: 15 - color: Theme.palette.directColor1 - wrapMode: Text.WordWrap - } - } - - // To fill gap in between - Item { - Layout.fillWidth: true - implicitHeight: 1 - } - - RowLayout { - spacing: 16 - ColumnLayout { - StatusBaseText { - font.pixelSize: 15 - color: Theme.palette.directColor5 - text: qsTr("Max Fees:") - wrapMode: Text.WordWrap - } - StatusBaseText { - id: fiatFees - font.pixelSize: 15 - color: Theme.palette.directColor1 - text: maxFiatFees - wrapMode: Text.WordWrap - } - } - - StatusFlatButton { - id: nextButton - text: qsTr("Send") - objectName: "sendModalFooterSendButton" - size: StatusBaseButton.Size.Large - normalColor: Theme.palette.primaryColor2 - disabledColor: Theme.palette.baseColor2 - enabled: !footer.pending - loading: footer.pending - onClicked: nextButtonClicked() - icon.name: "password" - } - } - } -} - diff --git a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml new file mode 100644 index 0000000000..e1a7ee1691 --- /dev/null +++ b/ui/imports/shared/popups/send/views/TransactionModalFooter.qml @@ -0,0 +1,67 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQml.Models 2.15 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Popups.Dialog 0.1 + +import utils 1.0 + +StatusDialogFooter { + id: root + + property string maxFiatFees: "..." + property string totalTimeEstimate + property bool pending: true + property string nextButtonText: qsTr("Next") + property string nextButtonIconName: "password" + + signal nextButtonClicked() + + implicitHeight: 82 + spacing: Style.current.halfPadding + color: Theme.palette.baseColor3 + dropShadowEnabled: true + + leftButtons: ObjectModel { + ColumnLayout { + Layout.leftMargin: Style.current.padding + StatusBaseText { + color: Theme.palette.directColor5 + text: qsTr("Estimated time:") + } + StatusBaseText { + wrapMode: Text.WordWrap + text: root.totalTimeEstimate + } + } + } + + rightButtons: ObjectModel { + RowLayout { + spacing: Style.current.padding + ColumnLayout { + StatusBaseText { + color: Theme.palette.directColor5 + text: qsTr("Max fees:") + } + StatusBaseText { + text: maxFiatFees + wrapMode: Text.WordWrap + } + } + StatusButton { + Layout.rightMargin: Style.current.padding + text: root.nextButtonText + objectName: "transactionModalFooterButton" + enabled: !root.pending + loading: root.pending + onClicked: nextButtonClicked() + icon.name: root.nextButtonIconName + } + } + } +} diff --git a/ui/imports/shared/popups/send/views/qmldir b/ui/imports/shared/popups/send/views/qmldir index 7dcfafd1f8..011c536ed2 100644 --- a/ui/imports/shared/popups/send/views/qmldir +++ b/ui/imports/shared/popups/send/views/qmldir @@ -6,7 +6,6 @@ NetworksAdvancedCustomRoutingView 1.0 NetworksAdvancedCustomRoutingView.qml NetworkSelector 1.0 NetworkSelector.qml NetworksSimpleRoutingView 1.0 NetworksSimpleRoutingView.qml RecipientView 1.0 RecipientView.qml -SendModalFooter 1.0 SendModalFooter.qml +TransactionModalFooter 1.0 TransactionModalFooter.qml TabAddressSelectorView 1.0 TabAddressSelectorView.qml TokenListView 1.0 TokenListView.qml -