feat(wallet): Update send modal height handling (#17143)

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

@@ -33,8 +33,11 @@ Rectangle {
     /** Search pattern in recipient view input **/
     readonly property string searchPattern: recipientInputLoader.searchPattern
 
+    /** Currently viewed tab is empty **/
+    readonly property bool emptyListVisible: emptyListText.visible && !selectedRecipientAddress
+
     /** Currently selected recipient tab  **/
-    readonly property int selectedRecipientType: Constants.RecipientAddressObjectType.RecentsAddress
+    readonly property alias selectedRecipientType: d.selectedRecipientType
     /** Selected recipient address. It is input and output property **/
     property alias selectedRecipientAddress: recipientInputLoader.selectedRecipientAddress
 
@@ -62,6 +65,7 @@ Rectangle {
 
         readonly property bool searchInProgress: !!root.searchPattern && root.recipientsFilterModel.ModelCount.count > 0
         property int highlightedIndex: 0
+        property int selectedRecipientType: Constants.RecipientAddressObjectType.RecentsAddress
 
         function handleKeyPressOnSearch(event) {
             if (!event || !d.searchInProgress || highlightedIndex === -1)
@@ -144,19 +148,19 @@ Rectangle {
                 width: implicitWidth
                 objectName: "recentAddressesTab"
                 text: qsTr("Recent")
-                onClicked: root.selectedRecipientType = Constants.RecipientAddressObjectType.RecentsAddress
+                onClicked: d.selectedRecipientType = Constants.RecipientAddressObjectType.RecentsAddress
             }
             StatusTabButton {
                 width: implicitWidth
                 objectName: "savedAddressesTab"
                 text: qsTr("Saved")
-                onClicked: root.selectedRecipientType = Constants.RecipientAddressObjectType.SavedAddress
+                onClicked: d.selectedRecipientType = Constants.RecipientAddressObjectType.SavedAddress
             }
             StatusTabButton {
                 width: implicitWidth
                 objectName: "myAccountsTab"
                 text: qsTr("My Accounts")
-                onClicked: root.selectedRecipientType = Constants.RecipientAddressObjectType.Account
+                onClicked: d.selectedRecipientType = Constants.RecipientAddressObjectType.Account
             }
 
             visible: !root.selectedRecipientAddress && !d.searchInProgress

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

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Window 2.15
 import QtQuick.Layouts 1.15
 import QtQml.Models 2.15
 
@@ -335,10 +336,32 @@ StatusDialog {
     }
 
     width: 556
+    height: {
+        if (!selectedRecipientAddress)
+            return root.contentItem.Window.height - topMargin - margins
+        let contentHeight = Math.max(sendModalHeader.height +
+                                     amountToSend.height +
+                                     recipientsPanelLayout.height +
+                                     feesLayout.height +
+                                     scrollViewLayout.spacing*3 +
+                                     28,
+                                     scrollView.implicitHeight) + footer.height
+
+        if (!!footer.errorTags && !feesLayout.visible) {
+            // Utilize empty space when fees are not visible and error is shown
+            contentHeight -= feesLayout.height
+        }
+        return contentHeight
+    }
     padding: 0
     horizontalPadding: Theme.xlPadding
     topMargin: margins + accountSelector.height + Theme.padding
 
+    Behavior on height {
+        enabled: !!root.selectedRecipientAddress
+        NumberAnimation { duration: 100; easing: Easing.OutCurve }
+    }
+
     background: StatusDialogBackground {
         color: Theme.palette.baseColor3
     }
@@ -353,13 +376,6 @@ StatusDialog {
         anchors.top: parent.top
 
         implicitWidth: parent.width
-        implicitHeight: Math.max(sendModalHeader.height +
-                                 amountToSend.height +
-                                 recipientsPanelLayout.height +
-                                 feesLayout.height +
-                                 scrollViewLayout.spacing*3 +
-                                 28,
-                                 scrollView.implicitHeight)
 
         // Floating account Selector
         AccountSelectorHeader {
@@ -523,19 +539,41 @@ StatusDialog {
                     id: recipientsPanelLayout
 
                     Layout.fillWidth: true
+                    Layout.fillHeight: true
 
                     spacing: Theme.halfPadding
 
                     StatusBaseText {
                         elide: Text.ElideRight
                         text: qsTr("To")
+                        Layout.alignment: Qt.AlignTop
                     }
-                    RecipientSelectorPanel {
-                        id: recipientsPanel
+                    Item {
+                        Layout.alignment: Qt.AlignTop
 
                         Layout.fillWidth: true
-                        Layout.fillHeight: true
                         Layout.bottomMargin: feesLayout.visible ? 0 : Theme.xlPadding
+                        implicitHeight: recipientsPanel.height
+
+                        Rectangle {
+                            anchors {
+                                top: recipientsPanel.top
+                                left: recipientsPanel.left
+                                right: recipientsPanel.right
+                            }
+                            // Imitate recipient background and overflow the rectangle under footer
+                            height: recipientsPanel.emptyListVisible ? sendModalcontentItem.height : 0
+                            color: recipientsPanel.color
+                            radius: recipientsPanel.radius
+                        }
+
+                        RecipientSelectorPanel {
+                            id: recipientsPanel
+                            anchors {
+                                top: parent.top
+                                left: parent.left
+                                right: parent.right
+                            }
 
                             interactive: root.interactive
 
@@ -545,6 +583,7 @@ StatusDialog {
                             onResolveENS: root.fnResolveENS(ensName, uuid)
                         }
                     }
+                }
 
                 // Fees Component
                 ColumnLayout {