diff --git a/storybook/pages/StatusFeeOptionPage.qml b/storybook/pages/StatusFeeOptionPage.qml
new file mode 100644
index 0000000000..80ab296d2b
--- /dev/null
+++ b/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
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
new file mode 100644
index 0000000000..b471aed79b
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
@@ -0,0 +1,226 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+ \qmltype StatusFeeOption
+ \inherits Control
+ \inqmlmodule StatusQ.Controls
+ \since StatusQ.Controls 0.1
+ \brief Displays a clickable option which content is fully customizable
+
+ By design appearance of subText and additionalText as well as their values should be set from outside.
+ If any of those two need to be displayed a component that has an empty value will be rendering a loading state.
+ The control renders based on the selected property.
+ When control is clicked clicked signal will be emitted.
+
+ Example of how to use it:
+
+ \qml
+ StatusFeeOption {
+ subText: "1.65 EUR"
+ showSubText: true
+
+ additionalText: "~40s"
+ showAdditionalText: true
+
+ onSelectedChanged: {
+ // this option is selected/unselected
+ }
+ }
+ \endqml
+
+ For a list of components available see StatusQ.
+ */
+
+Control {
+ id: root
+
+ enum Type {
+ Normal,
+ Fast,
+ Urgent,
+ Custom
+ }
+
+ property int type: StatusFeeOption.Type.Normal
+
+ property bool selected: false
+
+ property string mainText: {
+ switch(type) {
+ case StatusFeeOption.Type.Fast:
+ return qsTr("Fast")
+ case StatusFeeOption.Type.Urgent:
+ return qsTr("Urgent")
+ case StatusFeeOption.Type.Custom:
+ return qsTr("Custom")
+ case StatusFeeOption.Type.Normal:
+ default:
+ return qsTr("Normal")
+ }
+ }
+
+ property string subText
+ property bool showSubText
+
+ property string additionalText
+ property bool showAdditionalText
+
+ property string unselectedText
+
+ property string icon: {
+ switch(type) {
+ case StatusFeeOption.Type.Fast:
+ return Theme.png("wallet/car")
+ case StatusFeeOption.Type.Urgent:
+ return Theme.png("wallet/rocket")
+ case StatusFeeOption.Type.Custom:
+ return Theme.png("wallet/handwrite")
+ case StatusFeeOption.Type.Normal:
+ default:
+ return Theme.png("wallet/clock")
+ }
+ }
+
+ signal clicked()
+
+ font.family: Theme.baseFont.name
+ font.pixelSize: Theme.tertiaryTextFontSize
+
+ horizontalPadding: 8
+ verticalPadding: 8
+
+ component AnimatedText: StatusBaseText {
+ id: animatedText
+ verticalAlignment: Qt.AlignVCenter
+ font: root.font
+ wrapMode: Text.WordWrap
+ elide: Text.ElideRight
+
+ onTextChanged: {
+ if (text === "") {
+ return
+ }
+ animate.restart()
+ }
+
+
+ StatusColorAnimation {
+ id: animate
+ target: animatedText
+ fromColor: animatedText.color
+ }
+ }
+
+ property Component subTextComponent: AnimatedText {
+ text: root.subText
+ }
+
+ property Component additionalTextComponent: AnimatedText {
+ text: root.additionalText
+ color: Theme.palette.baseColor1
+ }
+
+ property Component unselectedTextComponent: StatusBaseText {
+ verticalAlignment: Qt.AlignVCenter
+ text: root.unselectedText
+ color: Theme.palette.baseColor1
+ font.family: root.font.family
+ font.pixelSize: root.font.pixelSize
+ wrapMode: Text.WordWrap
+ elide: Text.ElideRight
+ }
+
+ property Component loaderComponent: LoadingComponent {
+ radius: 4
+ height: root.font.pixelSize
+ }
+
+ background: Rectangle {
+ id: background
+ implicitHeight: 84
+ implicitWidth: 101
+ radius: Theme.radius
+ border.width: 1
+ border.color: root.selected? Theme.palette.primaryColor1 : Theme.palette.baseColor2
+ color: {
+ if (root.hovered) {
+ return Theme.palette.baseColor2
+ }
+
+ if (root.selected) {
+ return Theme.palette.alphaColor(Theme.palette.baseColor2, 0.1)
+ }
+
+ return Theme.palette.statusAppLayout.backgroundColor
+ }
+ }
+
+ contentItem: ColumnLayout {
+ spacing: 4
+
+ RowLayout {
+
+ Layout.fillWidth: true
+ Layout.preferredHeight: Math.max(mText.height, image.height)
+
+ spacing: 4
+
+ StatusBaseText {
+ id: mText
+ Layout.fillWidth: true
+ verticalAlignment: Qt.AlignVCenter
+ text: root.mainText
+ font.family: root.font.family
+ font.pixelSize: root.font.pixelSize
+ wrapMode: Text.WordWrap
+ elide: Text.ElideRight
+ }
+
+ StatusImage {
+ id: image
+ visible: root.selected || root.hovered
+ width: 22
+ height: 22
+ source: root.icon
+ }
+ }
+
+ Item {
+ id: spacer
+ Layout.fillWidth: true
+ Layout.preferredHeight: 8 + (unselectedTextLoader.visible? parent.spacing : 0)
+ }
+
+ Loader {
+ visible: root.showSubText
+ Layout.preferredWidth: parent.width
+ sourceComponent: !!root.subText? subTextComponent : loaderComponent
+ }
+
+ Loader {
+ visible: root.showAdditionalText
+ Layout.preferredWidth: parent.width
+ sourceComponent: !!root.additionalText? additionalTextComponent : loaderComponent
+ }
+
+ Loader {
+ id: unselectedTextLoader
+ visible: !root.selected && !!root.unselectedText
+ Layout.preferredWidth: parent.width
+ Layout.fillHeight: true
+ sourceComponent: visible? unselectedTextComponent : loaderComponent
+ }
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: root.hovered? Qt.PointingHandCursor : undefined
+ onClicked: root.clicked()
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 8016825308..548cbb88a0 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -21,6 +21,7 @@ StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
StatusComboBox 0.1 StatusComboBox.qml
StatusCommunityTag 0.1 StatusCommunityTag.qml
StatusDropdown 0.1 StatusDropdown.qml
+StatusFeeOption 0.1 StatusFeeOption.qml
StatusFlatButton 0.1 StatusFlatButton.qml
StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
StatusIconSwitch 0.1 StatusIconSwitch.qml
diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc
index 428e1017f1..ec99fa3dea 100644
--- a/ui/StatusQ/src/assets.qrc
+++ b/ui/StatusQ/src/assets.qrc
@@ -8996,8 +8996,12 @@
assets/png/traffic_lights/maximize_pressed.png
assets/png/traffic_lights/minimise.png
assets/png/traffic_lights/minimise_pressed.png
- assets/png/wallet/wallet-green.png
+ assets/png/wallet/car.png
+ assets/png/wallet/clock.png
assets/png/wallet/flying-coin.png
+ assets/png/wallet/handwrite.png
+ assets/png/wallet/rocket.png
+ assets/png/wallet/wallet-green.png
assets/png/status-gradient-dot.png
assets/png/appearance-dark.png
assets/png/appearance-light.png
diff --git a/ui/StatusQ/src/assets/png/wallet/car.png b/ui/StatusQ/src/assets/png/wallet/car.png
new file mode 100644
index 0000000000..bb2d81a39a
Binary files /dev/null and b/ui/StatusQ/src/assets/png/wallet/car.png differ
diff --git a/ui/StatusQ/src/assets/png/wallet/clock.png b/ui/StatusQ/src/assets/png/wallet/clock.png
new file mode 100644
index 0000000000..842d9bfcc9
Binary files /dev/null and b/ui/StatusQ/src/assets/png/wallet/clock.png differ
diff --git a/ui/StatusQ/src/assets/png/wallet/handwrite.png b/ui/StatusQ/src/assets/png/wallet/handwrite.png
new file mode 100644
index 0000000000..217b2a7ac8
Binary files /dev/null and b/ui/StatusQ/src/assets/png/wallet/handwrite.png differ
diff --git a/ui/StatusQ/src/assets/png/wallet/rocket.png b/ui/StatusQ/src/assets/png/wallet/rocket.png
new file mode 100644
index 0000000000..0c9915aae6
Binary files /dev/null and b/ui/StatusQ/src/assets/png/wallet/rocket.png differ
diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc
index 90367c0fcd..37d24d673b 100644
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@@ -112,6 +112,7 @@
StatusQ/Controls/StatusComboBox.qml
StatusQ/Controls/StatusCommunityTag.qml
StatusQ/Controls/StatusDropdown.qml
+ StatusQ/Controls/StatusFeeOption.qml
StatusQ/Controls/StatusFlatButton.qml
StatusQ/Controls/StatusFlatRoundButton.qml
StatusQ/Controls/StatusIconSwitch.qml