feat: add icon to select and add address to send modal

ui/app/AppLayouts/Wallet/SendModal.qml

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

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

@@ -10,8 +10,8 @@ Item {
     property alias passwordText: txtPassword.text
     property var accounts
     property string defaultAccount: "0x1234"
-    property string selectedAccount: accounts[0].name
+    property int selectedAccountIndex: 0
-    property string selectedFromAccountAddress: defaultAccount
+    property string selectedAccountAddress: accounts[selectedAccountIndex].address
 
     anchors.left: parent.left
     anchors.right: parent.right
@@ -24,30 +24,44 @@ Item {
         placeholderText: qsTr("Enter ETH")
     }
 
-
     Select {
         id: txtFrom
+        iconHeight: 12
+        iconWidth: 12
+        icon: "../../../img/walletIcon.svg"
+        iconColor: accounts[selectedAccountIndex].iconColor
         label: qsTr("From account")
         anchors.top: txtAmount.bottom
         anchors.topMargin: Theme.padding
-        selectedText: sendModalContent.selectedAccount
+        selectedText: accounts[selectedAccountIndex].name
-        selectOptions: sendModalContent.accounts.map(function (account) {
+        selectOptions: sendModalContent.accounts.map(function (account, index) {
             return {
                 text: account.name,
                 onClicked: function () {
-                    selectedAccount = account.name
+                    selectedAccountIndex = index
-                    selectedFromAccountAddress = account.address
                 }
             }
         })
     }
 
+    StyledText {
+        id: textSelectAccountAddress
+        text: accounts[selectedAccountIndex].address
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.leftMargin: 2
+        elide: Text.ElideMiddle
+        anchors.top: txtFrom.bottom
+        font.pixelSize: 12
+        color: Theme.darkGrey
+    }
+
     Input {
         id: txtTo
         label: qsTr("Recipient")
         text: defaultAccount
         placeholderText: qsTr("Send to")
-        anchors.top: txtFrom.bottom
+        anchors.top: textSelectAccountAddress.bottom
         anchors.topMargin: Theme.padding
     }
 
@@ -63,6 +77,6 @@ Item {
 
 /*##^##
 Designer {
-    D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.75;height:480;width:640}
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
 }
 ##^##*/

ui/shared/Input.qml

@@ -79,7 +79,7 @@ Item {
             sourceSize.height: iconHeight
             sourceSize.width: iconWidth
             anchors.left: parent.left
-            anchors.leftMargin: 10
+            anchors.leftMargin: Theme.smallPadding
             anchors.verticalCenter: parent.verticalCenter
             fillMode: Image.PreserveAspectFit
             source: inputBox.icon

ui/shared/Select.qml

@@ -12,6 +12,12 @@ Item {
     property var selectOptions
     property int customHeight: 44
     property string selectedText: ""
+    property url icon: ""
+    property int iconHeight: 24
+    property int iconWidth: 24
+    property color iconColor
+
+    readonly property bool hasIcon: icon.toString() !== ""
 
     id: inputBox
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
@@ -44,12 +50,28 @@ Item {
         anchors.right: parent.right
         anchors.left: parent.left
 
+        SVGImage {
+            id: iconImg
+            sourceSize.height: iconHeight
+            sourceSize.width: iconWidth
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.smallPadding
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+            source: inputBox.icon
+        }
+        ColorOverlay {
+            anchors.fill: iconImg
+            source: iconImg
+            color: iconColor ? iconColor : Theme.transparent
+        }
+
         StyledText {
             id: selectedTextField
             visible: inputBox.selectedText !== ""
             text: inputBox.selectedText
             anchors.left: parent.left
-            anchors.leftMargin: Theme.padding
+            anchors.leftMargin: inputBox.hasIcon ? iconWidth + 20 : Theme.padding
             anchors.verticalCenter: parent.verticalCenter
             font.pixelSize: 15
         }