feat(@desktop/wallet): fixing some issues in UI alignments

storybook/pages/SendModalFooterPage.qml

@@ -23,7 +23,7 @@ SplitView {
 
             loading: loadingCheckbox.checked
 
-            onReviewSendClicked: console.log("review send clicked")
+            onReviewSendClicked: logs.logEvent("review send clicked")
         }
     }
 

storybook/pages/SimpleSendModalPage.qml

@@ -121,10 +121,14 @@ SplitView {
             }
         })
 
-        onFetchFees: {
-            console.log("Fetch fees...")
-            d.setFees()
+        onFormChanged: {
+            resetFees()
+            if(formCorrectlyFilled) {
+                console.log("Fetch fees...")
+                d.setFees()
+            }
         }
+
         onReviewSendClicked: console.log("Review send clicked")
 
         Binding on selectedAccountAddress {
@@ -488,7 +492,7 @@ SplitView {
         }
     }
 
-    LogsAndControlsPanel {
+    Pane {
         SplitView.minimumHeight: 100
         SplitView.minimumWidth: 300
         SplitView.maximumWidth: 380

storybook/pages/SimpleTransactionsFeesPage.qml

@@ -9,7 +9,6 @@ import AppLayouts.Wallet.panels 1.0
 
 SplitView {
     orientation: Qt.Vertical
-    Logs { id: logs }
 
     Rectangle {
         SplitView.fillHeight: true
@@ -26,14 +25,12 @@ SplitView {
         }
     }
 
-    LogsAndControlsPanel {
+    Pane {
         id: logsAndControlsPanel
 
         SplitView.minimumHeight: 100
         SplitView.preferredHeight: 200
 
-        logsView.logText: logs.logText
-
         CheckBox {
             id: loadingCheckbox
             text: "loading"

ui/StatusQ/src/StatusQ/Components/private/StatusComboboxBackground.qml

@@ -11,7 +11,7 @@ Rectangle {
     border.width: 1
     border.color: Theme.palette.directColor7
     radius: 8
-    color: root.active ? Theme.palette.baseColor2 : "transparent"
+    color: root.active ? Theme.palette.directColor8 : "transparent"
     HoverHandler {
         cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
     }

ui/app/AppLayouts/Wallet/panels/SendModalHeader.qml

@@ -135,7 +135,7 @@ RowLayout {
 
         Layout.alignment: Qt.AlignTop
 
-        control.bottomPadding: 0
+        control.popup.y: networkFilter.height
 
         flatNetworks: root.networksModel
 

ui/app/AppLayouts/Wallet/panels/SimpleTransactionsFees.qml

@@ -20,7 +20,7 @@ Control {
     QtObject {
         id: d
 
-        readonly property string loadingText: "----------"
+        readonly property string loadingText: "XXXXXXXXXX"
     }
 
     implicitHeight: 64

ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml

@@ -1,10 +1,11 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.15
 import QtGraphicalEffects 1.15
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Popups.Dialog 0.1
 
-Rectangle {
+Control {
     id: root
 
     /**
@@ -48,10 +49,10 @@ Rectangle {
     Not using visible property directly here as the animation on
     implicitHeight doesnt work
     **/
-    property bool isScrolling
+    property bool stickyHeaderVisible
 
     /** input property for programatic selection of network **/
-    property int selectedChainId: -1
+    property int selectedChainId
 
     /** signal to propagate that an asset was selected **/
     signal assetSelected(string key)
@@ -68,48 +69,57 @@ Rectangle {
         sendModalHeader.setToken(name, icon, key)
     }
 
-    enabled: root.isScrolling
-    color: Theme.palette.baseColor3
-    radius: 8
+    QtObject {
+        id: d
+        readonly property int bottomMargin: 12
+    }
 
-    implicitHeight: root.isScrolling ?
-                        sendModalHeader.implicitHeight +
-                        sendModalHeader.anchors.topMargin +
-                        sendModalHeader.anchors.bottomMargin:
-                        0
-    implicitWidth: sendModalHeader.implicitWidth +
-                   sendModalHeader.anchors.leftMargin +
-                   sendModalHeader.anchors.rightMargin
+    implicitHeight: root.stickyHeaderVisible ?
+                        implicitContentHeight + Theme.padding + d.bottomMargin : 0
 
+    rightPadding: Theme.xlPadding
+    leftPadding: Theme.xlPadding
+    bottomPadding: d.bottomMargin
+    topPadding: root.stickyHeaderVisible ? Theme.padding : -implicitContentHeight - Theme.padding
 
-    // Drawer animation for stickey heade
     Behavior on implicitHeight {
         NumberAnimation { duration: 350 }
     }
-
-    // cover for the bottom rounded corners
-    Rectangle {
-        width: parent.width
-        height: parent.radius
-        anchors.bottom: parent.bottom
-        color: parent.color
+    Behavior on topPadding {
+        NumberAnimation { duration: 350 }
     }
 
-    SendModalHeader {
-        id: sendModalHeader
+    background: Rectangle {
+        color: root.implicitHeight > d.bottomMargin ? Theme.palette.baseColor3: Theme.palette.transparent
+        radius: 8
 
-        width: parent.width
+        layer.enabled: true
+        layer.effect: DropShadow {
+            horizontalOffset: 0
+            verticalOffset: 2
+            samples: 37
+            color: Theme.palette.dropShadow
+        }
+
+        // cover for the bottom rounded corners
+        Rectangle {
+            width: parent.width
+            height: parent.radius
+            anchors.bottom: parent.bottom
+            color: parent.color
+        }
 
-        anchors {
-            fill: parent
-            leftMargin: Theme.xlPadding
-            rightMargin: Theme.xlPadding
-            topMargin: 16
-            bottomMargin: 12
+        StatusDialogDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
         }
+    }
+
+    contentItem: SendModalHeader {
+        id: sendModalHeader
 
         isStickyHeader: true
-        isScrolling: root.isScrolling
+        isScrolling: root.stickyHeaderVisible
 
         networksModel: root.networksModel
         assetsModel: root.assetsModel
@@ -122,18 +132,4 @@ Rectangle {
         onAssetSelected: root.assetSelected(key)
         onNetworkSelected: root.networkSelected(chainId)
     }
-
-    StatusDialogDivider {
-        anchors.bottom: parent.bottom
-        width: parent.width
-    }
-
-    layer.enabled: true
-    layer.effect: DropShadow {
-        horizontalOffset: 0
-        verticalOffset: 2
-        samples: 37
-        color: Theme.palette.dropShadow
-    }
 }
-

ui/app/AppLayouts/Wallet/popups/simpleSend/SimpleSendModal.qml

@@ -102,6 +102,9 @@ StatusDialog {
     e.g. 1000000000000000000 for 1 ETH **/
     readonly property string selectedAmountInBaseUnit: amountToSend.amount
 
+    /** property to scheck if form has been filled correctly **/
+    readonly property bool formCorrectlyFilled: d.allValuesFilledCorrectly()
+
     /** TODO: replace with new and improved recipient selector StatusDateRangePicker
     TBD under https://github.com/status-im/status-desktop/issues/16916 **/
     property alias selectedRecipientAddress: recipientsPanel.selectedRecipientAddress
@@ -114,14 +117,28 @@ StatusDialog {
 
     /** Output signal to request signing of the transaction **/
     signal reviewSendClicked()
-    /** Output signal to request fetching fees **/
-    signal fetchFees()
+    /** Output signal to inform that the forms been updated **/
+    signal formChanged()
+
+    function resetFees() {
+        root.estimatedCryptoFees = ""
+        root.estimatedFiatFees = ""
+        root.estimatedTime = ""
+    }
 
     QtObject {
         id: d
 
-        readonly property bool isScrolling:
-            scrollView.flickable.contentY > sendModalHeader.height
+        readonly property real scrollViewContentY: scrollView.flickable.contentY
+        onScrollViewContentYChanged: {
+            const buffer = sendModalHeader.height + scrollViewLayout.spacing
+            if (scrollViewContentY > buffer) {
+                d.stickyHeaderVisible = true
+            } else if (scrollViewContentY === 0) {
+                d.stickyHeaderVisible = false
+            }
+        }
+        property bool stickyHeaderVisible: false
 
         // Used to get asset entry if selected token is an asset
         readonly property var selectedAssetEntry: ModelEntry {
@@ -215,20 +232,7 @@ StatusDialog {
             root.selectedAmount,
             amountToSend.markAsInvalid,
             amountToSend.valid]
-        onCombinedPropertyChangedHandlerChanged: Qt.callLater(() => d.fetchFees())
-
-        function resetFees() {
-            root.estimatedCryptoFees = ""
-            root.estimatedFiatFees = ""
-            root.estimatedTime = ""
-        }
-
-        function fetchFees() {
-            resetFees()
-            if(allValuesFilledCorrectly()) {
-                root.fetchFees()
-            }
-        }
+        onCombinedPropertyChangedHandlerChanged: Qt.callLater(() => root.formChanged())
 
         readonly property bool feesIsLoading: !root.estimatedCryptoFees &&
                                               !root.estimatedFiatFees &&
@@ -287,28 +291,36 @@ StatusDialog {
         }
 
         // Sticky header only visible when scrolling
-        StickySendModalHeader {
-            id: stickySendModalHeader
-
-            width: root.width
+        Item {
+            height: childrenRect.height + Theme.smallPadding
             anchors.top: accountSelector.bottom
-            anchors.topMargin:Theme.padding
+            anchors.topMargin: Theme.padding
             anchors.left: parent.left
             anchors.leftMargin: -Theme.xlPadding
+            anchors.right: parent.right
+            anchors.rightMargin: -Theme.xlPadding
+
+            clip: true
             z: 1
 
-            isScrolling: d.isScrolling
+            StickySendModalHeader {
+                id: stickySendModalHeader
 
-            networksModel: root.networksModel
-            assetsModel: root.assetsModel
-            collectiblesModel: root.collectiblesModel
+                width: parent.width
 
-            selectedChainId: root.selectedChainId
+                stickyHeaderVisible: d.stickyHeaderVisible
 
-            onCollectibleSelected: root.selectedTokenKey = key
-            onCollectionSelected: root.selectedTokenKey = key
-            onAssetSelected: root.selectedTokenKey = key
-            onNetworkSelected: root.selectedChainId = chainId
+                networksModel: root.networksModel
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+
+                selectedChainId: root.selectedChainId
+
+                onCollectibleSelected: root.selectedTokenKey = key
+                onCollectionSelected: root.selectedTokenKey = key
+                onAssetSelected: root.selectedTokenKey = key
+                onNetworkSelected: root.selectedChainId = chainId
+            }
         }
 
         // Main scrollable Layout
@@ -340,7 +352,7 @@ StatusDialog {
                     Layout.fillWidth: true
                     Layout.topMargin: 28
 
-                    isScrolling: d.isScrolling
+                    isScrolling: d.stickyHeaderVisible
 
                     networksModel: root.networksModel
                     assetsModel: root.assetsModel
@@ -400,8 +412,7 @@ StatusDialog {
                             return root.fnFormatCurrencyAmount(
                                         maxSafeValue,
                                         amountToSend.selectedSymbol,
-                                        { noSymbol: !amountToSend.fiatMode,
-                                            roundingMode: LocaleUtils.RoundingMode.Down
+                                        { roundingMode: LocaleUtils.RoundingMode.Down
                                         })
                         }
                         markAsInvalid: amountToSend.markAsInvalid

ui/app/AppLayouts/Wallet/views/SendModalFooter.qml

@@ -29,7 +29,7 @@ StatusDialogFooter {
         id: d
 
         readonly property string emptyText: "--"
-        readonly property string loadingText: "----------"
+        readonly property string loadingText: "XXXXXXXXXX"
     }
 
     leftButtons: ObjectModel {

ui/app/mainui/SendModalHandler.qml

@@ -82,10 +82,10 @@ QtObject {
     **/
     required property var flatNetworksModel
     /** true if testnet mode is on **/
-    required property var areTestNetworksEnabled
+    required property bool areTestNetworksEnabled
     /** whether community tokens are shown in send modal
     based on a global setting **/
-    required property var showCommunityAssetsInSend
+    required property bool showCommunityAssetsInSend
     /** required function to format currency amount to locale string **/
     required property var fnFormatCurrencyAmount
 
@@ -238,6 +238,13 @@ QtObject {
 
             onClosed: destroy()
 
+            onFormChanged: {
+                resetFees()
+                if(formCorrectlyFilled) {
+                    // TODO: call stores fetchSuggestedRoutes api
+                }
+            }
+
             TokenSelectorViewAdaptor {
                 id: assetsSelectorViewAdaptor