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
2024-07-08 22:14:30 +02:00 · 2024-07-08 22:14:30 +02:00 · 8504fb55a1
parent 136194c112
commit 8504fb55a1
11 changed files with 83 additions and 119 deletions
--- 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",
--- 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}

--- 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"}
--- 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
--- 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
--- 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
--- 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 {
--- 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 {
--- a/ui/imports/shared/popups/send/views/SendModalFooter.qml
+++ b/ui/imports/shared/popups/send/views/SendModalFooter.qml
@ -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"
-            }
-        }
-    }
-}
-
--- a/ui/imports/shared/popups/send/views/TransactionModalFooter.qml
+++ 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
+            }
+        }
+    }
+}
--- 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
-