feat(wallet): Transaction settings

storybook/pages/StatusFeeOptionPage.qml

@@ -0,0 +1,169 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+import Storybook 1.0
+
+SplitView {
+    orientation: Qt.Horizontal
+
+    Logs { id: logs }
+
+    Pane {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        background: Rectangle {
+            color: Theme.palette.baseColor4
+        }
+
+        StatusFeeOption {
+            id: feeOption
+            anchors.centerIn: parent
+
+            onClicked: {
+                console.warn("control clicked...")
+                selected = !selected
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.fillHeight: true
+        SplitView.preferredWidth: 300
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            ComboBox {
+                model: [
+                    {testCase: StatusFeeOption.Type.Normal, name: "Normal"},
+                    {testCase: StatusFeeOption.Type.Fast, name: "Fast"},
+                    {testCase: StatusFeeOption.Type.Urgent, name: "Urgent"},
+                    {testCase: StatusFeeOption.Type.Custom, name: "Custom"}
+                ]
+
+                textRole: "name"
+                valueRole: "testCase"
+                onCurrentValueChanged: {
+                    console.warn("valueRole: ", currentValue)
+                    feeOption.type = currentValue
+                }
+            }
+
+            RowLayout {
+                TextField {
+                    id: price
+                    Layout.preferredWidth: 130
+                    text: "1.45 EUR"
+                    inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+                    Component.onCompleted: feeOption.subText = price.text
+                }
+
+                StatusButton {
+                    text: "Set price"
+                    onClicked: {
+                        feeOption.subText = price.text
+                    }
+                }
+            }
+
+            RowLayout {
+                TextField {
+                    id: time
+                    Layout.preferredWidth: 130
+                    text: "~60s"
+
+                    Component.onCompleted: feeOption.additionalText = time.text
+                }
+
+                StatusButton {
+                    text: "Set time"
+                    onClicked: {
+                        feeOption.additionalText = time.text
+                    }
+                }
+            }
+
+            RowLayout {
+                TextField {
+                    id: unselectedText
+                    Layout.preferredWidth: 130
+                    text: "Set your own fees & nonce"
+
+                }
+
+                StatusButton {
+                    text: "Set unselected text"
+                    onClicked: {
+                        feeOption.unselectedText = unselectedText.text
+                    }
+                }
+            }
+
+            CheckBox {
+                text: "Show subtext"
+                checked: true
+
+                onCheckStateChanged: {
+                    feeOption.showSubText = checked
+                }
+
+                Component.onCompleted: feeOption.showSubText = checked
+            }
+
+            CheckBox {
+                text: "Show additional text"
+                checked: true
+
+                onCheckStateChanged: {
+                    feeOption.showAdditionalText = checked
+                }
+
+                Component.onCompleted: feeOption.showAdditionalText = checked
+            }
+
+            CheckBox {
+                text: "Show unselected text"
+                checked: false
+
+                onCheckStateChanged: {
+                    if (checked) {
+                        feeOption.unselectedText = unselectedText.text
+                        return
+                    }
+                    feeOption.unselectedText = ""
+                }
+
+                Component.onCompleted: feeOption.unselectedText = ""
+            }
+
+            CheckBox {
+                id: loading
+                text: "Set loading state"
+                checked: false
+
+                onCheckStateChanged: {
+                    if (checked) {
+                        feeOption.subText = ""
+                        feeOption.additionalText = ""
+                        return
+                    }
+
+                    feeOption.subText = price.text
+                    feeOption.additionalText = time.text
+                }
+            }
+
+            Item { Layout.fillHeight: true }
+        }
+    }
+}
+
+// category: Controls

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/imports/shared/panels/AnimatedText.qml → ui/StatusQ/src/StatusQ/Controls/StatusColorAnimation.qml

@@ -2,6 +2,36 @@ import QtQuick 2.15
 
 import StatusQ.Core.Theme 0.1
 
+/*!
+    \qmltype StatusColorAnimation
+    \inherits SequentialAnimation
+    \inqmlmodule StatusQ.Controls
+    \since StatusQ.Controls 0.1
+    \brief Animates target property (that shold be a color property) from/to color to target component within set duration.
+
+   Example of how to use it:
+
+   \qml
+        StatusBaseText {
+            id: animatedText
+
+            onTextChanged: {
+                if (text === "") {
+                    return
+                }
+                animate.restart()
+            }
+
+            StatusColorAnimation {
+                id: animate
+                target: animatedText
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+ */
+
 SequentialAnimation {
     id: root