feat: move validators outside of TransactionPreview

BalanceValidator and GasValidator have been moved outside of the TransactionPreview component, because there are some transaction modals that may not need them to be baked in to TransactionPreview. It is useful to have these components on the tx preview step only when we start the process on the preview step.
2020-10-22 23:06:35 +11:00 · 2020-10-22 23:06:35 +11:00 · bc0855bcdc
parent c6d3d47982
commit bc0855bcdc
4 changed files with 155 additions and 128 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/SignTransactionModal.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/SignTransactionModal.qml
@ -212,6 +212,10 @@ ModalPopup {
                asset: root.selectedAsset
                amount: { "value": root.selectedAmount, "fiatValue": root.selectedFiatAmount }
                currency: walletModel.defaultCurrency
+                isFromEditable: true
+                isGasEditable: true
+                fromValid: balanceValidator.isValid
+                gasValid: gasValidator.isValid
                reset: function() {
                    fromAccount =  Qt.binding(function() { return selectFromAccount.selectedAccount })
                    gas = Qt.binding(function() {
@ -224,16 +228,30 @@ ModalPopup {
                    toAccount =  Qt.binding(function() { return selectRecipient.selectedRecipient })
                    asset = Qt.binding(function() { return root.selectedAsset })
                    amount = Qt.binding(function() { return { "value": root.selectedAmount, "fiatValue": root.selectedFiatAmount } })
+                    fromValid = Qt.binding(function() { return balanceValidator.isValid })
+                    gasValid = Qt.binding(function() { return gasValidator.isValid })
                }
-                isFromEditable: true
-                isGasEditable: true
                onFromClicked: { stack.push(groupSelectAcct, StackView.Immediate) }
                onGasClicked: { stack.push(groupSelectGas, StackView.Immediate) }
            }
+            BalanceValidator {
+                id: balanceValidator
+                anchors.top: pvwTransaction.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                account: selectFromAccount.selectedAccount
+                amount: !!root.selectedAmount ? parseFloat(root.selectedAmount) : 0.0
+                asset: root.selectedAsset
+                reset: function() {
+                    account = Qt.binding(function() { return selectFromAccount.selectedAccount })
+                    amount = Qt.binding(function() { return !!root.selectedAmount ? parseFloat(root.selectedAmount) : 0.0 })
+                    asset = Qt.binding(function() { return root.selectedAsset })
+                }
+            }
            GasValidator {
                id: gasValidator2
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 8
+                anchors.top: balanceValidator.visible ? balanceValidator.bottom : pvwTransaction.bottom
+                anchors.topMargin: balanceValidator.visible ? 5 : 0
+                anchors.horizontalCenter: parent.horizontalCenter
                selectedAccount: selectFromAccount.selectedAccount
                selectedAmount: parseFloat(root.selectedAmount)
                selectedAsset: root.selectedAsset
--- a/ui/shared/BalanceValidator.qml
+++ b/ui/shared/BalanceValidator.qml
@ -4,21 +4,18 @@ import QtQuick.Layouts 1.13
 import "../imports"
 import "./status"

-IconButton {
+Column {
    id: root
+    anchors.horizontalCenter: parent.horizontalCenter
+    visible: !isValid
+    spacing: 5
+
    property var account
    property double amount
    property var asset
-    property bool isValid: true
+    property bool isValid: false
    property var reset: function() {}
-    clickable: false
-    width: 13.33
-    height: 13.33
-    iconWidth: width
-    iconHeight: height    
-    iconName: "exclamation_outline"
-    color: Style.current.transparent
-    visible: !isValid
+    property alias errorMessage: txtValidationError.text

    onAccountChanged: validate()
    onAmountChanged: validate()
@ -28,7 +25,7 @@ IconButton {
        account = undefined
        amount = 0
        asset = undefined
-        isValid = true
+        isValid = false
    }

    function validate() {
@ -44,11 +41,23 @@ IconButton {
        root.isValid = isValid
        return isValid
    }
-
-    StatusToolTip {
-        id: tooltip
-        visible: parent.hovered
-        width: 100
+    SVGImage {
+        id: imgExclamation
+        width: 13.33
+        height: 13.33
+        sourceSize.height: height * 2
+        sourceSize.width: width * 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.PreserveAspectFit
+        source: "../app/img/exclamation_outline.svg"
+    }
+    StyledText {
+        id: txtValidationError
        text: qsTr("Insufficient balance")
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: 13
+        height: 18
+        color: Style.current.danger
    }
 }
--- a/ui/shared/GasValidator.qml
+++ b/ui/shared/GasValidator.qml
@ -2,15 +2,15 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../imports"
-import "./"
+import "./status"

-Item {
+Column {
    id: root
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: colValidation.height
-    //% "Not enough ETH for gas"
-    property string notEnoughEthForGasMessage: qsTrId("wallet-insufficient-gas")
+    anchors.horizontalCenter: parent.horizontalCenter
+    visible: !isValid
+    spacing: 5
+    
+    property alias errorMessage: txtValidationError.text
    property var selectedAccount
    property double selectedAmount
    property var selectedAsset
@ -28,7 +28,7 @@ Item {
        selectedAmount = 0
        selectedAsset = undefined
        selectedGasEthValue = 0
-        isValid = true
+        isValid = false
    }

    function validate() {
@ -36,7 +36,7 @@ Item {
        if (!(selectedAccount && selectedAccount.assets && selectedAsset && selectedGasEthValue > 0)) {
            return root.isValid
        }
-        txtValidationError.text = ""
+        isValid = true
        let gasTotal = selectedGasEthValue
        if (selectedAsset && selectedAsset.symbol && selectedAsset.symbol.toUpperCase() === "ETH") {
            gasTotal += selectedAmount
@ -44,18 +44,10 @@ Item {
        const currAcctGasAsset = Utils.findAssetBySymbol(selectedAccount.assets, "ETH")
        if (currAcctGasAsset && currAcctGasAsset.value < gasTotal) {
            isValid = false
-            txtValidationError.text = notEnoughEthForGasMessage
        }
        root.isValid = isValid
        return isValid
    }
-
-    Column {
-        id: colValidation
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: txtValidationError.text !== ""
-        spacing: 5
-
    SVGImage {
        id: imgExclamation
        width: 13.33
@ -68,12 +60,12 @@ Item {
    }
    StyledText {
        id: txtValidationError
-            text: ""
+        //% "Not enough ETH for gas"
+        text: qsTrId("wallet-insufficient-gas")
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 13
        height: 18
        color: Style.current.danger
    }
-    }
 }
--- a/ui/shared/TransactionPreview.qml
+++ b/ui/shared/TransactionPreview.qml
@ -23,7 +23,9 @@ Item {
    // Creates a mouse area around the "network fee". When clicked, triggers 
    // the "gasClicked" signal
    property bool isGasEditable: false
-    property alias isValid: balanceValidator.isValid
+    property bool isValid: fromValid && gasValid
+    property bool fromValid: true
+    property bool gasValid: true

    function resetInternal() {
        fromAccount = undefined
@ -31,8 +33,6 @@ Item {
        asset = undefined
        amount = undefined
        gas = undefined
-        balanceValidator.resetInternal()
-        balanceValidator.reset()
    }

    Column {
@ -46,8 +46,9 @@ Item {
            value: Item {
                id: itmFromValue
                anchors.fill: parent
+                anchors.verticalCenter: parent.verticalCenter
                function needsRightPadding() {
-                    return !balanceValidator.isValid || fromArrow.visible
+                    return !root.fromValid || root.isFromEditable
                }
                Row {
                    spacing: Style.current.halfPadding
@ -81,17 +82,16 @@ Item {
                            color: root.fromAccount && root.fromAccount.iconColor ? root.fromAccount.iconColor : Style.current.blue
                        }
                    }
-                    BalanceValidator {
-                        id: balanceValidator
-                        account: root.fromAccount
-                        amount: !!(root.amount && root.amount.value) ? parseFloat(root.amount.value) : 0.0
-                        asset: root.asset
+                    SVGImage {
+                        id: fromInvalid
                        anchors.verticalCenter: parent.verticalCenter
-                        reset: function() {
-                            account = Qt.binding(function() { return root.fromAccount })
-                            amount = Qt.binding(function() { return !!(root.amount && root.amount.value) ? parseFloat(root.amount.value) : 0.0 })
-                            asset = Qt.binding(function() { return root.asset })
-                        }
+                        width: 13.33
+                        height: 13.33
+                        sourceSize.height: height * 2
+                        sourceSize.width: width * 2
+                        fillMode: Image.PreserveAspectFit
+                        source: "../app/img/exclamation_outline.svg"
+                        visible: !root.fromValid
                    }
                    SVGImage {
                        id: fromArrow
@ -370,14 +370,18 @@ 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 {
                        font.pixelSize: 15
                        height: 22
                        text: (root.gas && root.gas.value) ? Utils.stripTrailingZeros(root.gas.value) : ""
-                    anchors.left: parent.left
-                    anchors.right: txtFeeSymbol.left
-                    anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
@ -389,8 +393,6 @@ Item {
                        height: 22
                        text: ((root.gas && root.gas.symbol) ? root.gas.symbol : "") + " •"
                        color: Style.current.secondaryText
-                    anchors.right: txtFeeFiat.left
-                    anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
@ -400,8 +402,6 @@ Item {
                        font.pixelSize: 15
                        height: 22
                        text: "~" + ((root.gas && root.gas.fiatValue) ? root.gas.fiatValue : "0.00")
-                    anchors.right: txtFeeCurrency.left
-                    anchors.rightMargin: 5
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
@ -412,18 +412,25 @@ Item {
                        height: 22
                        text: root.currency.toUpperCase()
                        color: Style.current.secondaryText
-                    anchors.right: gasArrow.visible ? gasArrow.left : parent.right
-                    anchors.rightMargin: gasArrow.visible ? Style.current.padding : 0
                        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: "../app/img/exclamation_outline.svg"
+                        visible: !root.gasValid
+                    }
                    SVGImage {
                        id: gasArrow
                        width: 13
                        visible: root.isGasEditable
-                    anchors.right: parent.right
-                    anchors.rightMargin: 7
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.PreserveAspectFit
                        source: "../app/img/caret.svg"
@ -435,6 +442,7 @@ Item {
                            color: Style.current.secondaryText
                        }
                    }
+                }
                MouseArea {
                    anchors.fill: parent
                    visible: gasArrow.visible