status-desktop/ui/imports/shared/controls/GasSelector.qml

441 lines
16 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import shared.panels 1.0
import shared.controls 1.0
import shared.controls.chat 1.0
import StatusQ.Controls 0.1
Item {
id: root
width: parent.width
height: visible ? Style.current.smallPadding + prioritytext.height +
(advancedMode ? advancedModeItemGroup.height : selectorButtons.height) : 0
2021-07-05 12:34:56 +00:00
property var suggestedFees: ({
eip1559Enabled: true
})
2021-07-05 12:34:56 +00:00
property var getGasGweiValue: function () {}
property var getGasEthValue: function () {}
property var getFiatValue: function () {}
property var getEstimatedTime: function () {}
property string defaultCurrency: "USD"
property alias selectedGasPrice: inputGasPrice.text
property alias selectedGasLimit: inputGasLimit.text
2021-07-05 12:34:56 +00:00
property string defaultGasLimit: "0"
property string maxFiatFees: selectedGasFiatValue + root.defaultCurrency.toUpperCase()
property int estimatedTxTimeFlag: Constants.transactionEstimatedTime.unknown
2022-06-07 13:57:09 +00:00
property int chainId: 1
2021-07-05 12:34:56 +00:00
property alias selectedTipLimit: inputPerGasTipLimit.text
property alias selectedOverallLimit: inputGasPrice.text
property double selectedGasEthValue
property double selectedGasFiatValue
property string greaterThan0ErrorMessage: qsTr("Must be greater than 0")
property string invalidInputErrorMessage: qsTr("This needs to be a number")
property string noInputErrorMessage: qsTr("Please enter an amount")
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 bool isValid: true
feat: load installed stickers while offline When the network connection is changed, the sticker packs are cleared and then re-loaded (either loading the offline (installed) sticker packs, or all the sticker packs from the network). Stickers can be sent while offline, though the sticker images do not load once offline (this is likely a side effect of the bug described below). There is a known bug in QNetworkAccessManager (https://bugreports.qt.io/browse/QTBUG-55180) that was re-introduced in 5.14.1 that does not allow us to download resources if we go offline then come back online. The workaround employed in this PR manually sets the NetworkAccessible property of QNetworkAccessManager once we have been connected back online. The NetworkAccessible property is marked as obsolete and will be removed in Qt6, so it is something that we need to be aware of when we upgrade. However the hope is that the bug has been fixed. Close StickersPopup when disconnected from network (so that re-loading of sticker packs doesn't look out of place). fix: set network status correctly at load feat: stickers gas estimate async feat: When network re-connected, any http images that were not properly loaded in an ImageLoader component will automatically be reloaded. fix: Sticker button loading icon chore: Bump nimqml and dotherside NOTE: This PR uses an updated nimqml and dotherside. The respective changes should be merged first, and the commit hash should be bumped in this PR prior to merging. Relevant PRs: [https://github.com/status-im/dotherside/pull/20](https://github.com/status-im/dotherside/pull/20) [https://github.com/status-im/nimqml/pull/17](https://github.com/status-im/nimqml/pull/17)
2020-12-14 05:50:47 +00:00
readonly property string uuid: Utils.uuid()
property bool advancedMode: false
2021-07-05 12:34:56 +00:00
// TODO: change these values false once EIP1559 suggestions are revised
property double perGasTipLimitFloor: 1 // Matches status-react minimum-priority-fee
property double perGasTipLimitAverage: formatDec(root.suggestedFees.maxPriorityFeePerGas, 2) // 1.5 // Matches status-react average-priority-fee
2021-07-05 12:34:56 +00:00
property bool showPriceLimitWarning : false
property bool showTipLimitWarning : false
function formatDec(num, dec){
return Math.round((num + Number.EPSILON) * Math.pow(10, dec)) / Math.pow(10, dec)
}
function updateGasEthValue() {
// causes error on application load without this null check
if (!inputGasPrice || !inputGasLimit) {
return
}
Qt.callLater(function () {
2022-06-07 13:57:09 +00:00
let ethValue = root.getGasEthValue(inputGasPrice.text, inputGasLimit.text)
let fiatValue = root.getFiatValue(ethValue, "ETH", root.defaultCurrency)
selectedGasEthValue = ethValue
selectedGasFiatValue = fiatValue
root.estimatedTxTimeFlag = root.getEstimatedTime(root.chainId, inputPerGasTipLimit.text, inputGasPrice.text)
})
}
2021-07-05 12:34:56 +00:00
function appendError(accum, error, nonBlocking = false) {
return accum + ` <span class="${nonBlocking ? "non-blocking" : ""}">${error}.</span>`
}
function checkLimits(){
if(!root.suggestedFees.eip1559Enabled) return;
2021-07-05 12:34:56 +00:00
let inputTipLimit = parseFloat(inputPerGasTipLimit.text || "0.00")
let inputOverallLimit = parseFloat(inputGasPrice.text || "0.00")
let gasLimit = parseInt(inputGasLimit.text, 10)
errorsText.text = "";
showPriceLimitWarning = false
showTipLimitWarning = false
let errorMsg = "";
2022-02-09 09:43:23 +00:00
2021-07-05 12:34:56 +00:00
if(gasLimit < 21000) {
errorMsg = appendError(errorMsg, qsTr("Min 21000 units"))
} else if (gasLimit < parseInt(defaultGasLimit)){
errorMsg = appendError(errorMsg, qsTr("Not enough gas").arg(perGasTipLimitAverage), true)
}
// Per-gas tip limit rules
if(inputTipLimit < perGasTipLimitFloor){
errorMsg = appendError(errorMsg, qsTr("Miners will currently not process transactions with a tip below %1 Gwei, the average is %2 Gwei").arg(perGasTipLimitFloor).arg(perGasTipLimitAverage))
showTipLimitWarning = true
} else if (inputTipLimit < perGasTipLimitAverage) {
errorMsg = appendError(errorMsg, qsTr("The average miner tip is %1 Gwei").arg(perGasTipLimitAverage), true)
}
errorsText.text = `<style type="text/css">span { color: "#ff0000" } span.non-blocking { color: "#FE8F59" }</style>${errorMsg}`
}
function checkOptimal() {
if (!optimalGasButton.gasRadioBtn.checked) {
optimalGasButton.gasRadioBtn.toggle()
}
2021-07-05 12:34:56 +00:00
}
function validate() {
// causes error on application load without a null check
2021-07-05 12:34:56 +00:00
if (!inputGasLimit || !inputGasPrice || !inputPerGasTipLimit) {
return
}
2021-07-05 12:34:56 +00:00
inputGasLimit.validationError = ""
inputGasPrice.validationError = ""
2021-07-05 12:34:56 +00:00
inputPerGasTipLimit.validationError = ""
const noInputLimit = inputGasLimit.text === ""
const noInputPrice = inputGasPrice.text === ""
2021-07-05 12:34:56 +00:00
const noPerGasTip = inputPerGasTipLimit.text === ""
if (noInputLimit) {
inputGasLimit.validationError = root.noInputErrorMessage
}
2021-07-05 12:34:56 +00:00
if (noInputPrice) {
inputGasPrice.validationError = root.noInputErrorMessage
}
2021-07-05 12:34:56 +00:00
if (root.suggestedFees.eip1559Enabled && noPerGasTip) {
2021-07-05 12:34:56 +00:00
inputPerGasTipLimit.validationError = root.noInputErrorMessage
}
if (isNaN(inputGasLimit.text)) {
inputGasLimit.validationError = invalidInputErrorMessage
}
if (isNaN(inputGasPrice.text)) {
inputGasPrice.validationError = invalidInputErrorMessage
}
2021-07-05 12:34:56 +00:00
if (root.suggestedFees.eip1559Enabled && isNaN(inputPerGasTipLimit.text)) {
2021-07-05 12:34:56 +00:00
inputPerGasTipLimit.validationError = invalidInputErrorMessage
}
let inputLimit = parseFloat(inputGasLimit.text || "0.00")
let inputPrice = parseFloat(inputGasPrice.text || "0.00")
2021-07-05 12:34:56 +00:00
let inputTipLimit = parseFloat(inputPerGasTipLimit.text || "0.00")
if (inputLimit <= 0.00) {
inputGasLimit.validationError = root.greaterThan0ErrorMessage
}
2021-07-05 12:34:56 +00:00
if (inputPrice <= 0.00) {
inputGasPrice.validationError = root.greaterThan0ErrorMessage
}
if (root.suggestedFees.eip1559Enabled && inputTipLimit <= 0.00) {
2021-07-05 12:34:56 +00:00
inputPerGasTipLimit.validationError = root.greaterThan0ErrorMessage
}
2022-06-07 13:57:09 +00:00
return inputGasLimit.validationError === "" && inputGasPrice.validationError === "" && (!root.suggestedFees.eip1559Enabled || (root.suggestedFees.eip1559Enabled && inputPerGasTipLimit.validationError === ""))
}
StyledText {
id: prioritytext
anchors.top: parent.top
anchors.left: parent.left
text: root.suggestedFees.eip1559Enabled ? qsTr("Priority") : qsTr("Gas Price")
font.weight: Font.Medium
font.pixelSize: 13
color: Style.current.textColor
}
2021-07-05 12:34:56 +00:00
StyledText {
id: baseFeeText
visible: root.suggestedFees.eip1559Enabled && advancedMode
2021-07-05 12:34:56 +00:00
anchors.top: parent.top
anchors.left: prioritytext.right
anchors.leftMargin: Style.current.smallPadding
text: qsTr("Current base fee: %1 %2").arg(root.suggestedFees.baseFee).arg("Gwei")
2021-07-05 12:34:56 +00:00
font.weight: Font.Medium
font.pixelSize: 13
color: Style.current.secondaryText
}
StatusFlatButton {
id: buttonAdvanced
anchors.verticalCenter: prioritytext.verticalCenter
anchors.right: parent.right
visible: root.suggestedFees.eip1559Enabled
text: advancedMode ?
qsTr("Use suggestions") :
qsTr("Use custom")
font.pixelSize: 13
onClicked: advancedMode = !advancedMode
}
Row {
id: selectorButtons
visible: root.suggestedFees.eip1559Enabled && !advancedMode
anchors.top: prioritytext.bottom
anchors.topMargin: Style.current.halfPadding
spacing: 11
ButtonGroup {
id: gasGroup
onClicked: updateGasEthValue()
}
GasSelectorButton {
id: lowGasButton
buttonGroup: gasGroup
2021-07-05 12:34:56 +00:00
text: qsTr("Low")
price: {
if (!root.suggestedFees.eip1559Enabled) return root.suggestedFees.gasPrice;
return formatDec(root.suggestedFees.maxFeePerGasL, 6)
2021-07-05 12:34:56 +00:00
}
gasLimit: inputGasLimit ? inputGasLimit.text : ""
getGasEthValue: root.getGasEthValue
getFiatValue: root.getFiatValue
defaultCurrency: root.defaultCurrency
2021-07-05 12:34:56 +00:00
onChecked: {
if (root.suggestedFees.eip1559Enabled){
inputPerGasTipLimit.text = formatDec(root.suggestedFees.maxPriorityFeePerGas, 2);
inputGasPrice.text = formatDec(root.suggestedFees.maxFeePerGasL, 2);
2021-07-05 12:34:56 +00:00
} else {
inputGasPrice.text = price
}
root.updateGasEthValue()
root.checkLimits()
}
}
GasSelectorButton {
id: optimalGasButton
buttonGroup: gasGroup
text: qsTr("Optimal")
price: {
if (!root.suggestedFees.eip1559Enabled) {
2021-07-05 12:34:56 +00:00
// Setting the gas price field here because the binding didn't work
inputGasPrice.text = root.suggestedFees.gasPrice
return root.suggestedFees.gasPrice
2021-07-05 12:34:56 +00:00
}
return formatDec(root.suggestedFees.maxFeePerGasM, 6)
}
gasLimit: inputGasLimit ? inputGasLimit.text : ""
getGasEthValue: root.getGasEthValue
getFiatValue: root.getFiatValue
defaultCurrency: root.defaultCurrency
2021-07-05 12:34:56 +00:00
onChecked: {
if (root.suggestedFees.eip1559Enabled){
inputPerGasTipLimit.text = formatDec(root.suggestedFees.maxPriorityFeePerGas, 2);
inputGasPrice.text = formatDec(root.suggestedFees.maxFeePerGasM, 2);
2021-07-05 12:34:56 +00:00
} else {
inputGasPrice.text = root.suggestedFees.gasPrice
2021-07-05 12:34:56 +00:00
}
root.updateGasEthValue()
root.checkLimits()
}
}
GasSelectorButton {
id: highGasButton
buttonGroup: gasGroup
2021-07-05 12:34:56 +00:00
text: qsTr("High")
price: {
if (!root.suggestedFees.eip1559Enabled) return root.suggestedFees.gasPrice;
return formatDec(root.suggestedFees.maxFeePerGasH,6);
2021-07-05 12:34:56 +00:00
}
gasLimit: inputGasLimit ? inputGasLimit.text : ""
getGasEthValue: root.getGasEthValue
getFiatValue: root.getFiatValue
defaultCurrency: root.defaultCurrency
2021-07-05 12:34:56 +00:00
onChecked: {
if (root.suggestedFees.eip1559Enabled){
inputPerGasTipLimit.text = formatDec(root.suggestedFees.maxPriorityFeePerGas, 2);
inputGasPrice.text = formatDec(root.suggestedFees.maxFeePerGasH, 2);
2021-07-05 12:34:56 +00:00
} else {
inputGasPrice.text = price
}
root.updateGasEthValue()
root.checkLimits()
}
}
}
Item {
id: advancedModeItemGroup
anchors.top: prioritytext.bottom
anchors.topMargin: 14
visible: !root.suggestedFees.eip1559Enabled || root.advancedMode
width: parent.width
height: childrenRect.height
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
Input {
id: inputGasLimit
label: qsTr("Gas amount limit")
text: "21000"
2021-07-05 12:34:56 +00:00
inputLabel.color: Style.current.secondaryText
customHeight: 56
anchors.top: parent.top
anchors.left: parent.left
anchors.right: root.suggestedFees.eip1559Enabled ? inputPerGasTipLimit.left : inputGasPrice.left
anchors.rightMargin: Style.current.padding
placeholderText: "21000"
validator: IntValidator{
bottom: 1
}
validationErrorAlignment: TextEdit.AlignRight
validationErrorTopMargin: 8
onTextChanged: {
if (root.validate()) {
root.updateGasEthValue()
2021-07-05 12:34:56 +00:00
root.checkLimits()
}
}
}
Input {
id: inputPerGasTipLimit
label: qsTr("Per-gas tip limit")
inputLabel.color: Style.current.secondaryText
anchors.top: parent.top
anchors.right: inputGasPrice.left
anchors.rightMargin: Style.current.padding
anchors.left: undefined
visible: root.suggestedFees.eip1559Enabled
2021-07-05 12:34:56 +00:00
width: 125
customHeight: 56
text: formatDec(root.suggestedFees.maxPriorityFeePerGas, 2);
2021-07-05 12:34:56 +00:00
placeholderText: "20"
onTextChanged: {
if (root.validate()) {
root.updateGasEthValue()
root.checkLimits()
}
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
}
}
2021-07-05 12:34:56 +00:00
StyledText {
color: Style.current.secondaryText
text: qsTr("Gwei")
visible: root.suggestedFees.eip1559Enabled
2021-07-05 12:34:56 +00:00
anchors.top: parent.top
anchors.topMargin: 42
anchors.right: inputPerGasTipLimit.right
anchors.rightMargin: Style.current.padding
font.pixelSize: 15
}
Input {
id: inputGasPrice
label: qsTr("Per-gas overall limit")
2021-07-05 12:34:56 +00:00
inputLabel.color: Style.current.secondaryText
anchors.top: parent.top
anchors.left: undefined
anchors.right: parent.right
2021-07-05 12:34:56 +00:00
width: 125
customHeight: 56
placeholderText: "20"
onTextChanged: {
if (root.validate()) {
root.updateGasEthValue()
2021-07-05 12:34:56 +00:00
root.checkLimits()
}
}
}
StyledText {
color: Style.current.secondaryText
text: qsTr("Gwei")
anchors.top: parent.top
anchors.topMargin: 42
anchors.right: inputGasPrice.right
anchors.rightMargin: Style.current.padding
font.pixelSize: 15
}
2021-07-05 12:34:56 +00:00
StyledText {
id: errorsText
text: ""
width: parent.width - Style.current.padding
visible: text != ""
height: visible ? undefined : 0
anchors.top: inputGasLimit.bottom
anchors.topMargin: Style.current.smallPadding + 5
font.pixelSize: 13
textFormat: Text.RichText
color: Style.current.secondaryText
wrapMode: Text.WordWrap
}
StyledText {
id: maxPriorityFeeText
2021-07-05 12:34:56 +00:00
anchors.left: parent.left
visible: root.suggestedFees.eip1559Enabled
2021-07-05 12:34:56 +00:00
text: {
2022-02-09 09:43:23 +00:00
let v = selectedGasEthValue > 0.00009 ? selectedGasEthValue :
2021-07-05 12:34:56 +00:00
(selectedGasEthValue < 0.000001 ? "0.000000..." : selectedGasEthValue.toFixed(6))
return qsTr("Maximum priority fee: %1 ETH").arg(v)
2021-07-05 12:34:56 +00:00
}
anchors.top: errorsText.bottom
anchors.topMargin: Style.current.smallPadding + 5
font.pixelSize: 13
2021-07-05 12:34:56 +00:00
color: Style.current.textColor
}
StyledText {
id: maxPriorityFeeFiatText
text: root.maxFiatFees
visible: root.suggestedFees.eip1559Enabled
anchors.verticalCenter: maxPriorityFeeText.verticalCenter
anchors.left: maxPriorityFeeText.right
anchors.leftMargin: 6
color: Style.current.secondaryText
anchors.topMargin: 19
font.pixelSize: 13
}
StyledText {
id: maxPriorityFeeDetailsText
text: qsTr("Maximum overall price for the transaction. If the block base fee exceeds this, it will be included in a following block with a lower base fee.")
visible: root.suggestedFees.eip1559Enabled
width: parent.width
anchors.top: maxPriorityFeeText.bottom
anchors.topMargin: Style.current.smallPadding
font.pixelSize: 13
color: Style.current.secondaryText
wrapMode: Text.WordWrap
}
}
}