feat: improve Select component to have a selected text

ui/app/AppLayouts/Wallet/SendModal.qml

@@ -28,7 +28,7 @@ ModalPopup {
         label: qsTr("Send")
 
         onClicked: {
-            let result = walletModel.onSendTransaction(sendModalContent.fromText,
+            let result = walletModel.onSendTransaction(sendModalContent.selectedFromAccountAddress,
                                                        sendModalContent.toText,
                                                        sendModalContent.amountText,
                                                        sendModalContent.passwordText)

ui/app/AppLayouts/Wallet/components/SendModalContent.qml

@@ -6,10 +6,11 @@ Item {
     id: sendModalContent
     property alias amountInput: txtAmount
     property alias amountText: txtAmount.text
-    property alias fromText: txtFrom.text
     property alias toText: txtTo.text
     property alias passwordText: txtPassword.text
     property string defaultAccount: "0x1234"
+    property string selectedAccount: "Account 1"
+    property string selectedFromAccountAddress: defaultAccount
 
     anchors.left: parent.left
     anchors.right: parent.right
@@ -22,13 +23,27 @@ Item {
         placeholderText: qsTr("Enter ETH")
     }
 
-    Input {
+
+    Select {
         id: txtFrom
         label: qsTr("From account")
-        text: defaultAccount
-        placeholderText: qsTr("Send from (account)")
         anchors.top: txtAmount.bottom
         anchors.topMargin: Theme.padding
+        selectedText: sendModalContent.selectedAccount
+        selectOptions: [
+            {
+                text: "Acount1",
+                onClicked: function () {
+                    selectedAccount = "Account 1"
+                }
+            },
+            {
+                text: "Acount2",
+                onClicked: function () {
+                    selectedAccount = "Account 2"
+                }
+            }
+        ]
     }
 
     Input {

ui/shared/Select.qml

@@ -5,13 +5,13 @@ import QtGraphicalEffects 1.13
 import "../imports"
 
 Item {
-    //    property string label: "My Label"
     property string label: ""
     readonly property bool hasLabel: label !== ""
     property color bgColor: Theme.grey
     readonly property int labelMargin: 7
     property var selectOptions
     property int customHeight: 44
+    property string selectedText: ""
 
     id: inputBox
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
@@ -40,6 +40,32 @@ Item {
         anchors.right: parent.right
         anchors.left: parent.left
 
+        StyledText {
+            id: selectedTextField
+            visible: inputBox.selectedText !== ""
+            text: inputBox.selectedText
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.padding
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 15
+        }
+
+        SVGImage {
+            id: caret
+            width: 11
+            height: 6
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.padding
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../app/img/caret.svg"
+        }
+        ColorOverlay {
+            anchors.fill: caret
+            source: caret
+            color: Theme.darkGrey
+        }
+
         Menu {
             id: selectMenu
             width: parent.width
@@ -77,17 +103,6 @@ Item {
                 }
             }
         }
-
-        SVGImage {
-            id: caret
-            width: 11
-            height: 6
-            anchors.right: parent.right
-            anchors.rightMargin: Theme.padding
-            anchors.verticalCenter: parent.verticalCenter
-            fillMode: Image.PreserveAspectFit
-            source: "../app/img/caret.svg"
-        }
     }
 
     MouseArea {