feat(@desktop/wallet): New Error component defined for simple send

fixes #16707

storybook/pages/RouterErrorTagPage.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import Storybook 1.0
+
+import utils 1.0
+
+import AppLayouts.Wallet.controls 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    Rectangle {
+        SplitView.fillHeight: true
+        SplitView.fillWidth: true
+        color: Theme.palette.baseColor3
+        RouterErrorTag {
+            anchors.centerIn: parent
+            width: 400
+
+            errorTitle: ctrlText.text
+            buttonText: ctrlButtonText.text
+            errorDetails: ctrlErrorDetails.text
+            expandable: expandableCheckBox.checked
+        }
+    }
+
+    Pane {
+        ColumnLayout {
+            CheckBox {
+                id: expandableCheckBox
+                text: "expandable"
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Text:" }
+                TextField {
+                    id: ctrlText
+                    Layout.fillWidth: true
+                    text: "Not enough ETH to pay gas fees"
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Button text:" }
+                TextField {
+                    id: ctrlButtonText
+                    Layout.fillWidth: true
+                    text: "Add ETH"
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Asset name:" }
+                TextField {
+                    id: ctrlAssetName
+                    Layout.fillWidth: true
+                    text: "warning"
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Error Details:" }
+                TextField {
+                    id: ctrlErrorDetails
+                    Layout.fillWidth: true
+                    text: "Error Details will be displayed here"
+                }
+            }
+        }
+    }
+}
+
+// category: Views

storybook/pages/SendModalFooterPage.qml

@@ -1,11 +1,13 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQml.Models 2.15
 
 import StatusQ.Core.Theme 0.1
 
 import Storybook 1.0
 
 import AppLayouts.Wallet.views 1.0
+import AppLayouts.Wallet.controls 1.0
 
 SplitView {
     orientation: Qt.Vertical
@@ -25,6 +27,22 @@ SplitView {
             error: errorCheckbox.checked
 
             onReviewSendClicked: logs.logEvent("review send clicked")
+
+            errorTags: errorCheckbox.checked ? errorTagsModel: null
+        }
+    }
+
+    ObjectModel {
+        id: errorTagsModel
+        RouterErrorTag {
+            errorTitle: "Error 1"
+            buttonText: "Add ETH"
+        }
+        RouterErrorTag {
+            errorTitle: "Error 2"
+            buttonText: "Add ETH"
+            errorDetails: "Details will appear here"
+            expandable: true
         }
     }
 

storybook/pages/StatusDialogFooterPage.qml

@@ -8,6 +8,8 @@ import Storybook 1.0
 import StatusQ.Controls 0.1
 import StatusQ.Popups.Dialog 0.1
 
+import AppLayouts.Wallet.controls 1.0
+
 SplitView {
     id: root
 
@@ -51,6 +53,22 @@ SplitView {
                     Layout.minimumWidth: implicitWidth
                 }
             }
+
+            errorTags: errorTagsCheckbox.checked ? errorTagsModel: null
+        }
+    }
+
+    ObjectModel {
+        id: errorTagsModel
+        RouterErrorTag {
+            errorTitle: "Error 1"
+            buttonText: "Add ETH"
+        }
+        RouterErrorTag {
+            errorTitle: "Error 2"
+            buttonText: "Add ETH"
+            errorDetails: "Details will appear here"
+            expandable: true
         }
     }
 
@@ -82,6 +100,12 @@ SplitView {
 
                 text: "width not specified"
             }
+
+            CheckBox {
+                id: errorTagsCheckbox
+
+                text: "error tags assigned"
+            }
         }
     }
 }

storybook/qmlTests/tests/tst_RouterErrorTag.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.15
+import QtTest 1.15
+
+import AppLayouts.Wallet.controls 1.0
+
+Item {
+    id: root
+    width: 600
+    height: 400
+
+    Component {
+        id: componentUnderTest
+        RouterErrorTag {
+            anchors.centerIn: parent
+            errorTitle: "Not enough ETH to pay gas fees"
+        }
+    }
+
+    SignalSpy {
+        id: signalSpy
+        target: controlUnderTest
+        signalName: "buttonClicked"
+    }
+
+    property RouterErrorTag controlUnderTest: null
+
+    TestCase {
+        name: "RouterErrorTag"
+        when: windowShown
+
+        function init() {
+            controlUnderTest = createTemporaryObject(componentUnderTest, root)
+            signalSpy.clear()
+        }
+
+        function test_basicGeometry() {
+            verify(!!controlUnderTest)
+            verify(controlUnderTest.width > 0)
+            verify(controlUnderTest.height > 0)
+        }
+
+        function test_DefaultState() {
+            verify(!!controlUnderTest)
+            const errorTitle = findChild(controlUnderTest, "errorTitle")
+            verify(!!errorTitle)
+            verify(errorTitle.visible)
+            const button = findChild(controlUnderTest, "addBalanceButton")
+            verify(!!button)
+            verify(!button.visible)
+            const expandButton = findChild(controlUnderTest, "expandButton")
+            verify(!!expandButton)
+            verify(!expandButton.visible)
+            const errorDetails = findChild(controlUnderTest, "errorDetails")
+            verify(!!errorDetails)
+            verify(!errorDetails.visible)
+        }
+
+        function test_correctWidthWithButtonOrWithout() {
+            verify(!!controlUnderTest)
+            waitForRendering(controlUnderTest)
+            const origWidth = controlUnderTest.width
+
+            controlUnderTest.buttonText = "Add assets"
+            waitForRendering(controlUnderTest)
+            const widthWithButton = controlUnderTest.width
+            verify(widthWithButton > origWidth)
+
+            controlUnderTest.buttonText = ""
+            waitForRendering(controlUnderTest)
+            verify(controlUnderTest.width < widthWithButton)
+        }
+
+        function test_addButtonClick() {
+            verify(!!controlUnderTest)
+            controlUnderTest.buttonText = "Add assets"
+            const button = findChild(controlUnderTest, "addBalanceButton")
+            verify(!!button)
+            verify(button.visible)
+            mouseClick(button)
+            tryCompare(signalSpy, "count", 1)
+        }
+
+        function test_detailsVisibleOnceItHasValidText() {
+            verify(!!controlUnderTest)
+            const errorDetails = findChild(controlUnderTest, "errorDetails")
+            verify(!!errorDetails)
+            verify(!errorDetails.visible)
+
+            controlUnderTest.errorDetails = "Added some details here"
+            verify(errorDetails.visible)
+        }
+
+        function test_expandableOption() {
+            verify(!!controlUnderTest)
+            controlUnderTest.buttonText = "Add assets"
+            controlUnderTest.errorDetails = "Added some details here"
+
+            const errorTitle = findChild(controlUnderTest, "errorTitle")
+            verify(!!errorTitle)
+            const button = findChild(controlUnderTest, "addBalanceButton")
+            verify(!!button)
+            const expandButton = findChild(controlUnderTest, "expandButton")
+            verify(!!expandButton)
+            const errorDetails = findChild(controlUnderTest, "errorDetails")
+            verify(!!errorDetails)
+
+            controlUnderTest.expandable = true
+            verify(errorTitle.visible)
+            verify(!button.visible)
+            verify(expandButton.visible)
+            compare(expandButton.text, qsTr("+ Show details"))
+            verify(!errorDetails.visible)
+
+            mouseClick(expandButton)
+            compare(expandButton.text, qsTr("- Hide details"))
+            verify(errorDetails.visible)
+
+            controlUnderTest.expandable = false
+            verify(errorTitle.visible)
+            verify(button.visible)
+            verify(!expandButton.visible)
+            verify(errorDetails.visible)
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Popups/Dialog/StatusDialogFooter.qml

@@ -11,6 +11,7 @@ Rectangle {
 
     property ObjectModel leftButtons
     property ObjectModel rightButtons
+    property ObjectModel errorTags
     property int spacing: 5
     property bool dropShadowEnabled
 
@@ -34,34 +35,56 @@ Rectangle {
         visible: !root.dropShadowEnabled
     }
 
-    RowLayout {
+    ColumnLayout {
         id: layout
 
-        spacing: root.spacing
-        clip: true
-
         anchors {
             fill: parent
             margins: 16
         }
 
+        spacing: 8
+
         Repeater {
-            model: root.leftButtons
+            Layout.topMargin: 4
+            model: root.errorTags
             onItemAdded: {
                 item.Layout.fillHeight = true
-                item.Layout.fillWidth = Qt.binding(() => root.width < root.implicitWidth)
+                item.Layout.fillWidth = true
             }
         }
 
-        Item {
+        StatusDialogDivider {
+            Layout.topMargin: 12
             Layout.fillWidth: true
+            visible: !!root.errorTags && root.errorTags.count > 0
         }
 
-        Repeater {
-            model: root.rightButtons
-            onItemAdded: {
-                item.Layout.fillHeight = true
-                item.Layout.fillWidth = Qt.binding(() => root.width < root.implicitWidth)
+        RowLayout {
+
+            Layout.fillWidth: true
+
+            spacing: root.spacing
+            clip: true
+
+            Repeater {
+                model: root.leftButtons
+                onItemAdded: {
+                    item.Layout.fillHeight = true
+                    item.Layout.fillWidth = Qt.binding(() => root.width < root.implicitWidth)
+                }
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            Repeater {
+                model: root.rightButtons
+                onItemAdded: {
+                    item.Layout.fillHeight = true
+                    item.Layout.fillWidth = Qt.binding(() => root.width < root.implicitWidth)
+                }
             }
         }
     }