fix/tx-comps: Recipient selector -- ability to have readonly value shown

This work must have gotten lost in a rebase along the way.
This commit is contained in:
emizzle 2020-08-12 13:40:25 +10:00 committed by Iuri Matias
parent 7359f25c31
commit 60b0a4f115
4 changed files with 83 additions and 23 deletions

View File

@ -5,7 +5,7 @@ import "../shared/xss.js" as XSS
QtObject { QtObject {
function isHex(value) { function isHex(value) {
return /^(-0x|0x)?[0-9a-f]*$/i.test(value) return /^(-0x|0x)?[0-9a-fA-F]*$/i.test(value)
} }
function startsWith0x(value) { function startsWith0x(value) {
@ -65,4 +65,8 @@ QtObject {
function removeStatusEns(userName){ function removeStatusEns(userName){
return userName.endsWith(".stateofus.eth") ? userName.substr(0, userName.length - 14) : userName return userName.endsWith(".stateofus.eth") ? userName.substr(0, userName.length - 14) : userName
} }
function isValidAddress(inputValue) {
return /0x[a-fA-F0-9]{40}/.test(inputValue)
}
} }

View File

@ -12,9 +12,6 @@ Item {
height: inpAddress.height height: inpAddress.height
function isValidAddress(inputValue) {
return /0x[a-fA-F0-9]{40}/.test(inputValue)
}
function isValidEns(inputValue) { function isValidEns(inputValue) {
// TODO: Check if the entered value resolves to an address. Long operation. // TODO: Check if the entered value resolves to an address. Long operation.
// Issue tracked: https://github.com/status-im/nim-status-client/issues/718 // Issue tracked: https://github.com/status-im/nim-status-client/issues/718
@ -26,7 +23,7 @@ Item {
function validate(inputValue) { function validate(inputValue) {
if (!inputValue) inputValue = selectedAddress if (!inputValue) inputValue = selectedAddress
let isValid = let isValid =
(inputValue && inputValue.startsWith("0x") && isValidAddress(inputValue)) || (inputValue && inputValue.startsWith("0x") && Utils.isValidAddress(inputValue)) ||
isValidEns(inputValue) isValidEns(inputValue)
inpAddress.validationError = isValid ? "" : validationError inpAddress.validationError = isValid ? "" : validationError
return isValid return isValid
@ -48,7 +45,7 @@ Item {
} }
if (textField.focus) { if (textField.focus) {
text = metrics.text text = metrics.text
} else if (root.isValidAddress(metrics.text)) { } else if (Utils.isValidAddress(metrics.text)) {
text = metrics.elidedText text = metrics.elidedText
} }
} }

View File

@ -117,8 +117,8 @@ Item {
Text { Text {
text: name text: name
font.pixelSize: 15 font.pixelSize: 15
font.family: Style.current.fontBold.name font.family: Style.current.fontRegular.name
font.bold: true font.weight: Font.Medium
color: Style.current.textColor color: Style.current.textColor
height: 22 height: 22
} }

View File

@ -10,28 +10,52 @@ Item {
property var contacts property var contacts
property int inputWidth: 272 property int inputWidth: 272
property int sourceSelectWidth: 136 property int sourceSelectWidth: 136
property string label: qsTr("Recipient") property alias label: txtLabel.text
property string selectedRecipient: "" // If supplied, additional info will be displayed top-right in danger colour (red)
height: inpAddress.height + txtLabel.height property alias additionalInfo: txtAddlInfo.text
property var selectedRecipient: { }
property bool readOnly: false
height: (readOnly ? inpReadOnly.height : inpAddress.height) + txtLabel.height
readonly property string addressValidationError: qsTr("Invalid ethereum address")
function validate() { function validate() {
if (selAddressSource.selectedSource === "Address") { let isValid = true
inpAddress.validate() if (readOnly) {
isValid = Utils.isValidAddress(selectedRecipient.address)
if (!isValid) {
inpReadOnly.validationError = addressValidationError
}
} else if (selAddressSource.selectedSource === "Address") {
isValid = inpAddress.validate()
} else if (selAddressSource.selectedSource === "Contact") { } else if (selAddressSource.selectedSource === "Contact") {
selContact.validate() isValid = selContact.validate()
} }
return isValid
} }
Text { Text {
id: txtLabel id: txtLabel
visible: label !== "" visible: label !== ""
text: root.label text: qsTr("Recipient")
font.pixelSize: 13 font.pixelSize: 13
font.family: Style.current.fontBold.name font.family: Style.current.fontRegular.name
font.weight: Font.Medium
color: Style.current.textColor color: Style.current.textColor
height: 18 height: 18
} }
Text {
id: txtAddlInfo
visible: text !== ""
text: ""
font.pixelSize: 13
font.family: Style.current.fontRegular.name
font.weight: Font.Medium
color: Style.current.danger
height: 18
anchors.right: parent.right
}
RowLayout { RowLayout {
anchors.top: txtLabel.bottom anchors.top: txtLabel.bottom
anchors.topMargin: 7 anchors.topMargin: 7
@ -39,16 +63,41 @@ Item {
anchors.right: parent.right anchors.right: parent.right
spacing: 8 spacing: 8
Input {
id: inpReadOnly
visible: root.readOnly
Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
Layout.alignment: Qt.AlignTop
Layout.fillWidth: true
anchors.left: undefined
anchors.right: undefined
text: (root.selectedRecipient && root.selectedRecipient.name) ? root.selectedRecipient.name : qsTr("No recipient selected")
textField.leftPadding: 14
textField.topPadding: 18
textField.bottomPadding: 18
textField.verticalAlignment: TextField.AlignVCenter
textField.font.pixelSize: 15
textField.color: Style.current.secondaryText
textField.readOnly: true
validationErrorAlignment: TextEdit.AlignRight
validationErrorTopMargin: 8
customHeight: 56
}
AddressInput { AddressInput {
id: inpAddress id: inpAddress
width: root.inputWidth width: root.inputWidth
label: "" label: ""
Layout.preferredWidth: root.inputWidth visible: !root.readOnly
Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.fillWidth: true Layout.fillWidth: true
validationError: qsTr("Invalid ethereum address") validationError: root.addressValidationError
onSelectedAddressChanged: { onSelectedAddressChanged: {
root.selectedRecipient = selectedAddress if (root.readOnly) {
return
}
root.selectedRecipient = { address: selectedAddress }
} }
} }
@ -58,12 +107,15 @@ Item {
visible: false visible: false
width: root.inputWidth width: root.inputWidth
dropdownWidth: parent.width dropdownWidth: parent.width
Layout.preferredWidth: root.inputWidth Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.fillWidth: true Layout.fillWidth: true
onSelectedContactChanged: { onSelectedContactChanged: {
if (root.readOnly) {
return
}
if(selectedContact && selectedContact.address) { if(selectedContact && selectedContact.address) {
root.selectedRecipient = selectedContact.address root.selectedRecipient = { name: selectedContact.name, address: selectedContact.address }
} }
} }
} }
@ -75,21 +127,28 @@ Item {
width: root.inputWidth width: root.inputWidth
dropdownWidth: parent.width dropdownWidth: parent.width
label: "" label: ""
Layout.preferredWidth: root.inputWidth Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.fillWidth: true Layout.fillWidth: true
onSelectedAccountChanged: { onSelectedAccountChanged: {
root.selectedRecipient = selectedAccount.address if (root.readOnly) {
return
}
root.selectedRecipient = { address: selectedAccount.address }
} }
} }
AddressSourceSelector { AddressSourceSelector {
id: selAddressSource id: selAddressSource
visible: !root.readOnly
sources: ["Address", "Contact", "My account"] sources: ["Address", "Contact", "My account"]
width: sourceSelectWidth width: sourceSelectWidth
Layout.preferredWidth: root.sourceSelectWidth Layout.preferredWidth: root.sourceSelectWidth
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
onSelectedSourceChanged: { onSelectedSourceChanged: {
if (root.readOnly) {
return
}
switch (selectedSource) { switch (selectedSource) {
case "Address": case "Address":
inpAddress.visible = true inpAddress.visible = true