feat(wallet): transaction settings component added

storybook/pages/StatusInputPage.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 import Storybook 1.0
 import Models 1.0
@@ -32,6 +33,16 @@ SplitView {
                 enabled: enabledCheckBox.checked
                 input.edit.readOnly: readOnlyCheckBox.checked
                 input.clearable: clearableCheckBox.checked
+                label: "main label"
+                secondaryLabel: "secondary label"
+                labelIcon: "info"
+                labelIconColor: Theme.palette.baseColor1
+                labelIconClickable: true
+                leftPadding: 10
+                errorMessageCmp.visible: true
+                errorMessageCmp.text: "Current: 8.2 GWEI"
+                errorMessageCmp.horizontalAlignment: Text.AlignLeft
+                bottomLabelMessageCmp.text: "0.0031 ETH"
             }
         }
 

storybook/pages/TransactionSettingsPanelPage.qml

@@ -0,0 +1,85 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Wallet.views 1.0
+
+import utils 1.0
+
+import Storybook 1.0
+
+SplitView {
+    id: root
+
+    SplitView {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        orientation: Qt.Vertical
+
+        Rectangle {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            color: Theme.palette.baseColor3
+
+            TransactionSettings {
+                id: txSettings
+                anchors.centerIn: parent
+
+                currentBaseFee: "8.2"
+                currentSuggestedMinPriorityFee: "0.06"
+                currentSuggestedMaxPriorityFee: "5.1"
+                currentGasAmount: "31500"
+                currentNonce: 21
+
+                normalPrice: "1.45 EUR"
+                normalTime: "~60s"
+                fastPrice: "1.65 EUR"
+                fastTime: "~40s"
+                urgentPrice: "1.85 EUR"
+                urgentTime: "~15s"
+
+                customPrice: "1.45 EUR"
+                customTime: "~60s"
+
+                customBaseFee: "6.6"
+                customPriorityFee: "7.7"
+                customGasAmount: "35000"
+                customNonce: "22"
+
+                onConfirmClicked: {
+                    logs.logEvent("confirm clicked...")
+                    logs.logEvent(`selected fee mode: ${txSettings.selectedFeeMode}`)
+                    if (selectedFeeMode === StatusFeeOption.Type.Custom) {
+                        logs.logEvent(`selected customBaseFee...${txSettings.customBaseFee}`)
+                        logs.logEvent(`selected customPriorityFee...${txSettings.customPriorityFee}`)
+                        logs.logEvent(`selected customGasAmount...${txSettings.customGasAmount}`)
+                        logs.logEvent(`selected customNonce...${txSettings.customNonce}`)
+                    }
+                }
+            }
+        }
+
+        Logs {
+            id: logs
+        }
+
+        LogsView {
+            clip: true
+
+            SplitView.preferredHeight: 150
+            SplitView.fillWidth: true
+
+            logText: logs.logText
+        }
+    }
+
+    Pane {
+        SplitView.preferredWidth: 300
+
+    }
+}
+
+// category: Panel

ui/StatusQ/src/StatusQ/Controls/StatusInput.qml

@@ -96,6 +96,22 @@ Item {
         \endqml
     */
     property alias errorMessageCmp: errorMessage
+    /*!
+       \qmlproperty bottomLabelMessageCmp
+        This property represents the bottomLabelMessage shown on statusInput on the right of errorMessageCmp.
+        By default this component is hidden and doesn't have any text set, once the text is set it will become visible.
+
+        Examples of usage
+
+        \qml
+            StatusInput {
+                bottomLabelMessageCmp.text: "some text"
+                bottomLabelMessageCmp.font.pixelSize: 15
+                bottomLabelMessageCmp.font.weight: Font.Medium
+            }
+        \endqml
+    */
+    property alias bottomLabelMessageCmp: bottomLabelMessage
     /*!
         \qmlproperty int StatusInput::labelPadding
         This property sets the padding of the label text.
@@ -111,6 +127,21 @@ Item {
         This property sets the secondary label text.
     */
     property string secondaryLabel: ""
+    /*!
+        \qmlproperty string StatusInput::labelIcon
+        This property sets the icon displayd on the right of the label.
+    */
+    property string labelIcon: ""
+    /*!
+        \qmlproperty string StatusInput::labelIconColor
+        This property sets the color of the label icon.
+    */
+    property string labelIconColor: Theme.palette.baseColor1
+    /*!
+        \qmlproperty string StatusInput::labelIconClickable
+        This property sets if the label icon is clickable or not, if clickable labelIconClicked signal will be emitted.
+    */
+    property bool labelIconClickable: false
     /*!
         \qmlproperty int StatusInput::charLimit
         This property sets the character limit of the text input.
@@ -205,6 +236,11 @@ Item {
         This signal is emitted when the icon is clicked.
     */
     signal iconClicked()
+    /*!
+        \qmlsignal
+        This signal is emitted when the label icon is clicked.
+    */
+    signal labelIconClicked()
     /*!
         \qmlsignal
         This signal is emitted when a hard key is pressed passing as parameter the keyboard event.
@@ -428,6 +464,23 @@ Item {
                 color: Theme.palette.baseColor1
             }
 
+            StatusIcon {
+                id: labelIcon
+                visible: !!root.labelIcon
+                width: 16
+                height: 16
+                icon: root.labelIcon
+                color: root.labelIconColor
+
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: root.labelIconClickable
+                    hoverEnabled: root.labelIconClickable
+                    cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    onClicked: root.labelIconClicked()
+                }
+            }
+
             Item {
                 Layout.fillWidth: true
             }
@@ -467,24 +520,34 @@ Item {
             }
         }
 
-        StatusBaseText {
-            id: errorMessage
-            visible: {
-                if (!text)
-                    return false;
+        RowLayout {
+            id: bottomRow
+            Layout.topMargin: 8
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                id: errorMessage
+                Layout.fillWidth: true
+                visible: {
+                    if (!text)
+                        return false;
 
-                if ((root.validationMode === StatusInput.ValidationMode.OnlyWhenDirty && statusBaseInput.dirty) ||
-                    root.validationMode === StatusInput.ValidationMode.Always)
-                    return !statusBaseInput.valid;
+                    if ((root.validationMode === StatusInput.ValidationMode.OnlyWhenDirty && statusBaseInput.dirty) ||
+                            root.validationMode === StatusInput.ValidationMode.Always)
+                        return !statusBaseInput.valid;
 
-                return false;
+                    return false;
+                }
+                font.pixelSize: 12
+                color: Theme.palette.dangerColor1
+                wrapMode: Text.WordWrap
+                horizontalAlignment: Text.AlignRight
+            }
+
+            StatusBaseText {
+                id: bottomLabelMessage
+                visible: !!text
             }
-            font.pixelSize: 12
-            color: Theme.palette.dangerColor1
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignRight
-            Layout.topMargin: 8
-            Layout.fillWidth: true
         }
     }
 }