status-desktop/ui/shared/TransactionPreview.qml

561 lines
23 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 utils 1.0
import "../shared/status"
import "../shared/panels"
import "../shared/controls"
import "../shared/popups"
Item {
id: root
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
property var fromAccount
property var toAccount
property var asset
property var amount
2020-12-09 16:01:51 +00:00
property string trxData: ""
property string currency: "USD"
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
property var gas
height: content.height
signal fromClicked
signal gasClicked
// Creates a mouse area around the "from account". When clicked, triggers
// the "fromClicked" signal
property bool isFromEditable: false
// Creates a mouse area around the "network fee". When clicked, triggers
// the "gasClicked" signal
property bool isGasEditable: false
property bool isValid: toValid && fromValid && gasValid
property bool fromValid: true
property bool toValid: true
property bool toWarn: false
property bool gasValid: true
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
Column {
id: content
anchors.left: parent.left
anchors.right: parent.right
LabelValueRow {
id: itmFrom
2020-08-26 15:52:26 +00:00
//% "From"
label: qsTrId("from")
value: Item {
id: itmFromValue
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
function needsRightPadding() {
return !root.fromValid || root.isFromEditable
}
Row {
spacing: Style.current.halfPadding
rightPadding: itmFromValue.needsRightPadding() ? Style.current.halfPadding : 0
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
StyledText {
font.pixelSize: 15
height: 22
text: root.fromAccount ? root.fromAccount.name : ""
elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
SVGImage {
id: imgFromWallet
sourceSize.height: 18
sourceSize.width: 18
visible: !!root.fromAccount ? root.fromAccount.type === RecipientSelector.Type.Account : true
horizontalAlignment: Image.AlignLeft
width: itmFromValue.needsRightPadding() ? (Style.current.halfPadding + sourceSize.width) : undefined // adding width to add addl spacing to image
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("walletIcon")
ColorOverlay {
visible: parent.visible
anchors.fill: parent
source: parent
color: root.fromAccount && root.fromAccount.iconColor ? root.fromAccount.iconColor : Style.current.blue
}
}
SVGImage {
id: fromInvalid
anchors.verticalCenter: parent.verticalCenter
width: 13.33
height: 13.33
sourceSize.height: height * 2
sourceSize.width: width * 2
fillMode: Image.PreserveAspectFit
source: Style.svg("exclamation_outline")
visible: !root.fromValid
}
SVGImage {
id: fromArrow
width: 13
2021-03-03 13:52:51 +00:00
height: 7
visible: root.isFromEditable
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("caret")
rotation: 270
ColorOverlay {
anchors.fill: parent
visible: parent.visible
source: parent
color: Style.current.secondaryText
}
}
}
MouseArea {
anchors.fill: parent
visible: fromArrow.visible
cursorShape: Qt.PointingHandCursor
onClicked: root.fromClicked()
}
}
}
LabelValueRow {
id: itmTo
function needsRightPadding() {
return !root.toValid || root.toWarn
}
2020-08-26 15:52:26 +00:00
//% "Recipient"
label: qsTrId("recipient")
states: [
State {
name: "Address"
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
when: !!root.toAccount && root.toAccount.type === RecipientSelector.Type.Address
PropertyChanges {
target: txtToPrimary
2021-02-18 16:36:05 +00:00
//% "Unknown"
text: (!!root.toAccount && root.toAccount.address) ? root.toAccount.address : qsTrId("active-unknown")
elide: Text.ElideMiddle
anchors.leftMargin: 190
anchors.right: parent.right
}
PropertyChanges {
target: txtToSecondary
width: 0
}
},
State {
name: "Contact"
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
when: !!root.toAccount && root.toAccount.type === RecipientSelector.Type.Contact && !!root.toAccount.address
PropertyChanges {
target: metSecondary
text: root.toAccount.ensVerified ? root.toAccount.alias : root.toAccount.address
}
PropertyChanges {
target: txtToSecondary
anchors.right: idtToContact.left
anchors.rightMargin: Style.current.halfPadding
width: txtToSecondary.visible ? metSecondary.elidedWidth : 0
text: metSecondary.elidedText
visible: root.toAccount.address !== Constants.zeroAddress
}
PropertyChanges {
target: idtToContact
source: root.toAccount.identicon
visible: true
}
PropertyChanges {
target: txtToPrimary
text: Utils.removeStatusEns(root.toAccount.name)
}
},
State {
name: "Account"
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
when: !!root.toAccount && root.toAccount.type === RecipientSelector.Type.Account && !!root.toAccount.address
PropertyChanges {
target: metSecondary
text: root.toAccount.address
}
PropertyChanges {
target: txtToSecondary
anchors.right: imgToWallet.left
anchors.rightMargin: Style.current.halfPadding
text: metSecondary.elidedText
width: metSecondary.elidedWidth
}
PropertyChanges {
target: imgToWallet
visible: true
}
PropertyChanges {
target: ovlToWallet
visible: true
color: root.toAccount.iconColor
}
PropertyChanges {
target: txtToPrimary
text: root.toAccount.name
}
}
]
StyledText {
id: txtToPrimary
font.pixelSize: 15
height: 22
anchors.left: parent.left
anchors.right: txtToSeparator.visible ? txtToSeparator.left : idtToContact.left
anchors.rightMargin: txtToSeparator.visible ? 0 : Style.current.halfPadding
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
StyledText {
id: txtToSeparator
font.pixelSize: 15
height: 22
text: " • "
visible: txtToSecondary.visible && txtToSecondary.width > 0
color: Style.current.secondaryText
anchors.right: txtToSecondary.left
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtToSecondary
visible: true
font.pixelSize: 15
height: 22
color: Style.current.secondaryText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
TextMetrics {
id: metSecondary
elideWidth: 102
elide: Text.ElideMiddle
}
SVGImage {
id: imgToWallet
visible: false
sourceSize.height: 18
sourceSize.width: 18
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("walletIcon")
}
ColorOverlay {
id: ovlToWallet
anchors.fill: imgToWallet
visible: false
source: imgToWallet
}
StatusImageIdenticon {
id: idtToContact
visible: false
anchors.right: toInvalid.visible ? toInvalid.left : parent.right
anchors.rightMargin: toInvalid.visible ? Style.current.halfPadding : 0
anchors.verticalCenter: parent.verticalCenter
width: 32
height: 32
}
SVGImage {
id: toInvalid
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
width: 13.33
height: 13.33
sourceSize.height: height * 2
sourceSize.width: width * 2
fillMode: Image.PreserveAspectFit
source: Style.svg("exclamation_outline")
visible: !root.toValid || root.toWarn
}
}
LabelValueRow {
id: itmAsset
2020-08-26 15:52:26 +00:00
//% "Asset"
label: qsTrId("wallet-asset")
value: Item {
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
StyledText {
font.pixelSize: 15
height: 22
text: (root.asset && root.asset.name) ? root.asset.name : ""
anchors.left: parent.left
anchors.right: txtAssetSymbol.left
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
anchors.rightMargin: Style.current.halfPadding
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtAssetSymbol
font.pixelSize: 15
height: 22
text: (root.asset && root.asset.symbol) ? root.asset.symbol : ""
color: Style.current.secondaryText
anchors.right: imgAsset.left
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
anchors.rightMargin: Style.current.halfPadding
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
Image {
id: imgAsset
sourceSize.height: 32
sourceSize.width: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.png("tokens/" + ((root.asset && root.asset.symbol) ? root.asset.symbol : "ETH"))
onStatusChanged: {
if (status == Image.Error) {
source = Style.png("tokens/DEFAULT-TOKEN@3x")
}
}
}
}
}
LabelValueRow {
id: itmAmount
2020-08-26 15:52:26 +00:00
//% "Amount"
label: qsTrId("amount")
value: Item {
id: amountRoot
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
StyledText {
font.pixelSize: 15
height: 22
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: (root.amount && root.amount.value) ? Utils.stripTrailingZeros(root.amount.value) : ""
anchors.left: parent.left
anchors.right: txtAmountSymbol.left
anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
StyledText {
id: txtAmountSymbol
font.pixelSize: 15
height: 22
text: ((root.asset && root.asset.symbol) ? root.asset.symbol : "") + " •"
color: Style.current.secondaryText
anchors.right: txtAmountFiat.left
anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtAmountFiat
font.pixelSize: 15
height: 22
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: "~" + (root.amount && root.amount.fiatValue ? root.amount.fiatValue : "0.00")
anchors.right: txtAmountCurrency.left
anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtAmountCurrency
font.pixelSize: 15
height: 22
text: root.currency.toUpperCase()
color: Style.current.secondaryText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
}
}
LabelValueRow {
id: itmNetworkFee
2020-08-26 15:52:26 +00:00
//% "Network fee"
label: qsTrId("network-fee")
visible: !!root.gas
value: Item {
id: networkFeeRoot
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
function needsRightPadding() {
return !root.gasValid || root.isGasEditable
}
Row {
spacing: Style.current.halfPadding
rightPadding: networkFeeRoot.needsRightPadding() ? Style.current.halfPadding : 0
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
StyledText {
id: networkFeeText
font.pixelSize: 15
width: 75
height: 22
text: (root.gas && root.gas.value) ? Utils.stripTrailingZeros(root.gas.value) : ""
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
StatusToolTip {
enabled: networkFeeText.truncated
id: networkFeeTooltip
text: networkFeeText.text
}
MouseArea {
enabled: networkFeeText.truncated
anchors.fill: parent
hoverEnabled: enabled
onEntered: networkFeeTooltip.visible = true
onExited: networkFeeTooltip.visible = false
}
}
StyledText {
id: txtFeeSymbol
font.pixelSize: 15
height: 22
text: ((root.gas && root.gas.symbol) ? root.gas.symbol : "") + " •"
color: Style.current.secondaryText
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtFeeFiat
font.pixelSize: 15
height: 22
text: "~" + ((root.gas && root.gas.fiatValue) ? root.gas.fiatValue : "0.00")
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
StyledText {
id: txtFeeCurrency
font.pixelSize: 15
height: 22
text: root.currency.toUpperCase()
color: Style.current.secondaryText
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
SVGImage {
id: gasInvalid
anchors.verticalCenter: parent.verticalCenter
width: 13.33
height: 13.33
sourceSize.height: height * 2
sourceSize.width: width * 2
fillMode: Image.PreserveAspectFit
source: Style.svg("exclamation_outline")
visible: !root.gasValid
}
SVGImage {
id: gasArrow
width: 13
2021-03-03 13:52:51 +00:00
height: 7
visible: root.isGasEditable
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("caret")
rotation: 270
ColorOverlay {
anchors.fill: parent
visible: parent.visible
source: parent
color: Style.current.secondaryText
}
}
}
MouseArea {
anchors.fill: parent
visible: gasArrow.visible
cursorShape: Qt.PointingHandCursor
onClicked: root.gasClicked()
}
}
}
2020-12-09 15:58:42 +00:00
LabelValueRow {
id: itmData
2021-02-18 16:36:05 +00:00
//% "Data"
label: qsTrId("data")
2020-12-09 15:58:42 +00:00
visible: trxData !== "0x" && trxData !== ""
value: Item {
id: dataRoot
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
Row {
spacing: Style.current.halfPadding
rightPadding: 0
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
StyledText {
font.pixelSize: 15
height: 22
width: 200
text: trxData
elide: Text.ElideRight
color: Style.current.secondaryText
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
}
SVGImage {
width: 13
2021-03-03 13:52:51 +00:00
height: 7
2020-12-09 15:58:42 +00:00
visible: true
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: Style.svg("caret")
2020-12-09 15:58:42 +00:00
rotation: 270
ColorOverlay {
anchors.fill: parent
visible: parent.visible
source: parent
color: Style.current.secondaryText
}
}
}
// TODO: replace with StatusModal
2020-12-09 15:58:42 +00:00
ModalPopup {
id: dataPopup
2021-02-18 16:36:05 +00:00
//% "Data field"
title: qsTrId("data-field")
2020-12-09 15:58:42 +00:00
height: 286
width: 400
Item {
anchors.fill: parent
anchors.leftMargin: 0
anchors.rightMargin: 0
ScrollView {
width: parent.width
height: 150
TextArea {
wrapMode: TextEdit.Wrap
readOnly: true
text: trxData
}
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: dataPopup.open()
}
}
}
}
}