refator: change send modal to use the shared component

ui/app/AppLayouts/Wallet/SendModal.qml

@@ -6,37 +6,33 @@ import "../../../imports"
 import "../../../shared"
 import "./components"
 
-Item {
+ModalPopup {
-    function open() {
+    id: popup
-        popup.open()
+
-        sendModalContent.valueInput.text = ""
+    title: qsTr("Send")
-        sendModalContent.valueInput.forceActiveFocus(Qt.MouseFocusReason)
+
+    onOpened: {
+        sendModalContent.amountInput.text = ""
+        sendModalContent.amountInput.forceActiveFocus(Qt.MouseFocusReason)
         sendModalContent.defaultAccount = walletModel.getDefaultAccount()
     }
 
-    function close() {
+    SendModalContent {
-        popup.close()
+        id: sendModalContent
     }
 
-    Popup {
+    footer: StyledButton {
-        id: popup
+        anchors.top: parent.top
-        modal: true
+        anchors.right: parent.right
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+        anchors.rightMargin: Theme.padding
-        Overlay.modal: Rectangle {
+        label: qsTr("Send")
-            color: "#60000000"
+
-        }
+        onClicked: {
-        parent: Overlay.overlay
+            let result = walletModel.onSendTransaction(sendModalContent.fromText,
-        x: Math.round((parent.width - width) / 2)
+                                                       sendModalContent.toText,
-        y: Math.round((parent.height - height) / 2)
+                                                       sendModalContent.amountText,
-        width: 480
+                                                       sendModalContent.passwordText)
-        height: 510
+            console.log(result)
-        background: Rectangle {
-            color: Theme.white
-            radius: Theme.radius
-        }
-        padding: 0
-        contentItem: SendModalContent {
-            id: sendModalContent
         }
     }
 }

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

@@ -3,59 +3,20 @@ import "../../../../imports"
 import "../../../../shared"
 
 Item {
-    id: element
+    id: sendModalContent
-    property alias valueInput: txtValue
+    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"
 
-    StyledText {
-        id: modalDialogTitle
-        text: "Send"
-        anchors.top: parent.top
     anchors.left: parent.left
-        font.bold: true
-        font.pixelSize: 17
-        anchors.leftMargin: 16
-        anchors.topMargin: 16
-    }
-
-    SVGImage {
-        id: closeModalImg
-        anchors.top: parent.top
     anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.topMargin: 16
-        source: "../../../../shared/img/close.svg"
-        width: 25
-        height: 25
-        MouseArea {
-            id: closeModalMouseArea
-            cursorShape: Qt.PointingHandCursor
-            anchors.fill: parent
-            onClicked: {
-                popup.close()
-            }
-        }
-    }
-
-    Separator {
-        id: headerSeparator
-        anchors.top: modalDialogTitle.bottom
-    }
-
-    Item {
-        id: modalBody
-        anchors.right: parent.right
-        anchors.rightMargin: 32
-        anchors.top: headerSeparator.bottom
-        anchors.topMargin: Theme.padding
-        anchors.bottom: footerSeparator.top
-        anchors.bottomMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 32
 
     Input {
-            id: txtValue
+        id: txtAmount
-            label: "Amount"
+        label: qsTr("Amount")
         icon: "../../../img/token-icons/eth.svg"
         anchors.top: parent.top
         placeholderText: qsTr("Enter ETH")
@@ -63,62 +24,29 @@ Item {
 
     Input {
         id: txtFrom
-            label: "From account"
+        label: qsTr("From account")
         text: defaultAccount
         placeholderText: qsTr("Send from (account)")
-            anchors.top: txtValue.bottom
+        anchors.top: txtAmount.bottom
         anchors.topMargin: Theme.padding
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
     }
 
     Input {
         id: txtTo
-            label: "Recipient"
+        label: qsTr("Recipient")
         text: defaultAccount
         placeholderText: qsTr("Send to")
         anchors.top: txtFrom.bottom
         anchors.topMargin: Theme.padding
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
     }
 
     Input {
         id: txtPassword
-            label: "Password"
+        label: qsTr("Password")
-            placeholderText: "Enter Password"
+        placeholderText: qsTr("Enter Password")
         anchors.top: txtTo.bottom
         anchors.topMargin: Theme.padding
-            anchors.right: parent.right
+        textField.echoMode: TextInput.Password
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-        }
-    }
-
-    Separator {
-        id: footerSeparator
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 76
-    }
-
-    StyledButton {
-        anchors.right: parent.right
-        anchors.rightMargin: Theme.padding
-        label: "Send"
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Theme.padding
-        onClicked: {
-            let result = walletModel.onSendTransaction(txtFrom.text,
-                                                       txtTo.text,
-                                                       txtValue.text,
-                                                       txtPassword.text)
-            console.log(result)
-        }
     }
 }
 

ui/shared/Input.qml

@@ -66,7 +66,7 @@ Item {
             anchors.rightMargin: parent.rightMargin
             anchors.left: parent.left
             anchors.leftMargin: 0
-            leftPadding: inputBox.hasIcon ? 36 : Theme.padding
+            leftPadding: inputBox.hasIcon ? iconWidth + 20 : Theme.padding
             selectByMouse: true
             font.pixelSize: fontPixelSize
             background: Rectangle {