status-desktop/ui/shared/ContactSelector.qml

239 lines
7.9 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared/status"
Item {
id: root
property var contacts
property var selectedContact
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
height: select.height
property int dropdownWidth: width
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
//% "Please select a contact"
property string validationError: qsTrId("please-select-a-contact")
property alias validationErrorAlignment: select.validationErrorAlignment
property bool isValid: false
property alias isPending: ensResolver.isPending
property bool readOnly: false
property bool isResolvedAddress: false
//% "Select a contact"
property string selectAContact: qsTrId("select-a-contact")
2021-02-18 16:36:05 +00:00
//% "Contact does not have an ENS address. Please send a transaction in chat."
property string noEnsAddressMessage: qsTrId("contact-does-not-have-an-ens-address--please-send-a-transaction-in-chat-")
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
function resolveEns() {
if (selectedContact.ensVerified) {
root.isResolvedAddress = false
ensResolver.resolveEns(selectedContact.name)
}
}
onContactsChanged: {
if (root.readOnly) {
return
}
root.selectedContact = { name: selectAContact }
}
onSelectedContactChanged: validate()
function validate() {
if (!selectedContact) {
return root.isValid
}
let isValidAddress = Utils.isValidAddress(selectedContact.address)
let isDefaultValue = selectedContact.name === selectAContact
let isValid = (selectedContact.ensVerified && isValidAddress) || isPending || isValidAddress
select.validationError = ""
if (!isValid && !isDefaultValue &&
(
!selectedContact.ensVerified ||
(selectedContact.ensVerified && isResolvedAddress)
)
) {
select.validationError = !selectedContact.ensVerified ? noEnsAddressMessage : validationError
}
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
root.isValid = isValid
return isValid
}
Input {
id: inpReadOnly
visible: root.readOnly
width: parent.width
2021-02-18 16:36:05 +00:00
//% "No contact selected"
text: (root.selectedContact && root.selectedContact.name) ? root.selectedContact.name : qsTrId("no-contact-selected")
textField.leftPadding: 14
textField.topPadding: 18
textField.bottomPadding: 18
textField.verticalAlignment: TextField.AlignVCenter
textField.font.pixelSize: 15
textField.color: Style.current.secondaryText
readOnly: true
validationErrorAlignment: TextEdit.AlignRight
validationErrorTopMargin: 8
customHeight: 56
}
Select {
id: select
label: ""
model: root.contacts
width: parent.width
visible: !root.readOnly
menuAlignment: Select.MenuAlignment.Left
selectedItemView: Item {
anchors.fill: parent
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 14
anchors.verticalCenter: parent.verticalCenter
height: 32
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
width: (!!selectedContact && !!selectedContact.identicon) ? 32 : 0
visible: !!selectedContact && !!selectedContact.identicon
source: (!!selectedContact && !!selectedContact.identicon) ? selectedContact.identicon : ""
}
StyledText {
id: selectedTextField
feat(tx-comps): Send transaction modal Fixes #669. Composes all tx components to create a send transaction modal for the wallet. 1. Add a reusable TransactionStackView component that wraps a StackView component to show the screens of the Send Tx modal and handles back/forward/reset functionality. 2. Add a reusable TransactionStackGroup which holds tx components and allows modal header and button text to be defined and handles validation for all child components. 3. Add an isValid property to all tx comps for pristine validation state. 4. Reset all components in modal once modal is closed. This consists of a `resetInternal` function that each component should implement to reinstate its original starting state, and a `reset` function that parent components can use to reinstate the overridden properties. 5. Tx error handling to display either a StatusGo error message in the dialog, or wrong password in the TransactionSigner. 6. Fix ReceiveModal to allow for pre-selected account based on current wallet account. 7. Add focused border colour to Input component. 8. Fix issue with last TransactionStackGroup input not being able to obtain focus. 9. Fix fiatBalance not appearing on initial load on AccountSelector. 10. Fix selected asset updated properly when assets changed in the AssetSelector component. 11. AccountSelector is pre-populated with selected wallet account. Supporting work on the components has been done to suppor this. 12. Changing accounts in the "from account" updates the asset balances in the AssetAndAmountInput component. 13. Move validation from ContactSelector to the Select component. 1. Test sending of tokens. This requires that tokens contracts are setup on testnet. Right now, they are set up for contract addresses on mainnet. 2. Loading state once transaction is sent. Button in modal needs to move to a loading state and the "toast" messages in the wallet need to appear informaing user of tx progress. 3. Need to clarify (and implement?) support of ENS names in the AddressInput. It appears that ENS names could be resolved. This would be a long operation and require some kind of UI loading indication. 4. Wallet balances need to be updated on every block, so for example, sending funds between accounts I should be able to see the balance updated in real time. 1. Sending to a contact currently doesn't work because the ContactSelector component selects the Contact's whipser key, instead of his/her wallet address. May need to figure out how this is done in status-react. As it stands, attempting to send to a contact will crash the app. 2. Sending *from* an imported account does not work, with an error from StatusGo `cannot locate account for address: 0x123...`
2020-08-20 04:45:29 +00:00
text: !!selectedContact ? selectedContact.name : ""
anchors.left: iconImg.right
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
verticalAlignment: Text.AlignVCenter
}
}
zeroItemsView: Item {
height: 186
StyledText {
anchors.fill: parent
2021-02-18 16:36:05 +00:00
//% "You dont have any contacts yet"
2020-08-26 15:52:26 +00:00
text: qsTrId("you-don-t-have-any-contacts-yet")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 13
height: 18
color: Style.current.secondaryText
}
}
menu.delegate: menuItem
menu.width: dropdownWidth
}
EnsResolver {
id: ensResolver
anchors.top: select.bottom
anchors.right: select.right
anchors.topMargin: Style.current.halfPadding
debounceDelay: 0
onResolved: {
root.isResolvedAddress = true
var selectedContact = root.selectedContact
selectedContact.address = resolvedAddress
root.selectedContact = selectedContact
}
onIsPendingChanged: {
if (isPending) {
root.selectedContact.address = ""
}
}
}
Component {
id: menuItem
MenuItem {
id: itemContainer
property bool isFirstItem: index === 0
property bool isLastItem: index === contacts.rowCount() - 1
width: parent.width
height: visible ? 72 : 0
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
source: identicon
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
Text {
text: name
font.pixelSize: 15
font.family: Style.current.fontRegular.name
font.weight: Font.Medium
color: Style.current.textColor
height: 22
}
Row {
StyledText {
text: alias + " • "
visible: ensVerified
color: Style.current.secondaryText
font.pixelSize: 12
height: 16
}
StyledText {
text: address
width: 85
elide: Text.ElideMiddle
color: Style.current.secondaryText
font.pixelSize: 12
height: 16
}
}
}
background: Rectangle {
color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background
radius: Style.current.radius
// cover bottom left/right corners with square corners
Rectangle {
visible: !isLastItem
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: parent.radius
color: parent.color
}
// cover top left/right corners with square corners
Rectangle {
visible: !isFirstItem
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: parent.radius
color: parent.color
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
root.selectedContact = { address, name, alias, isContact, identicon, ensVerified }
resolveEns()
select.menu.close()
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/