diff --git a/ui/StatusQ/doc/src/images/status_token_inline_selector.png b/ui/StatusQ/doc/src/images/status_token_inline_selector.png
new file mode 100644
index 0000000000..9273a08923
Binary files /dev/null and b/ui/StatusQ/doc/src/images/status_token_inline_selector.png differ
diff --git a/ui/StatusQ/sandbox/pages/StatusInputPage.qml b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
index 47888b4112..59167cd740 100644
--- a/ui/StatusQ/sandbox/pages/StatusInputPage.qml
+++ b/ui/StatusQ/sandbox/pages/StatusInputPage.qml
@@ -196,4 +196,20 @@ Column {
toggled = !toggled
}
}
+
+ StatusInput {
+ label: "Input with inline token selector"
+ input.leftComponent: StatusTokenInlineSelector {
+ tokens: [{amount: 0.1, token: "ETH"},
+ {amount: 10, token: "SNT"},
+ {amount: 15, token: "MANA"}]
+
+ StatusToolTip {
+ id: toolTip
+ text: "posted"
+ }
+ onTriggered: toolTip.visible = true
+ }
+ input.edit.readOnly: true
+ }
}
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTokenInlineSelector.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTokenInlineSelector.qml
new file mode 100644
index 0000000000..650066bdc9
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusTokenInlineSelector.qml
@@ -0,0 +1,170 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+ \qmltype StatusTokenInlineSelector
+ \inherits RowLayout
+ \inqmlmodule StatusQ.Controls
+ \since StatusQ.Controls 0.1
+ \brief It presents selectable tokens in inline form.
+
+ The \c StatusTokenInlineSelector is a graphical component that is meant to be used as inline text input.
+
+ Example of how the component looks like:
+ \image status_token_inline_selector.png
+*/
+
+RowLayout {
+ id: root
+
+ /*!
+ \qmlproperty var StatusTokenInlineSelector::tokens
+ This is a REQUIRED property that contains an array of objects that describes each token.
+
+ \qml
+ tokens: [{amount: 0.1, token: "ETH"}, {amount: 10, token: "SNT"}]
+ \endqml
+ */
+ property var tokens
+
+ /*!
+ \qmlproperty var StatusTokenInlineSelector::tokenImageSourceGetter
+ This is a property function used to acquire image source for given token.
+ */
+ property var tokenImageSourceGetter: function (token) {
+ return "../../assets/img/icons/%1.png".arg(token)
+ }
+
+ signal triggered(real amount, string token)
+
+ StatusBaseText {
+ text: qsTr("Hold")
+ color: Theme.palette.directColor6
+ font.pixelSize: 15
+ }
+
+ Repeater {
+ model: Math.max(0, root.tokens.length - 1)
+ delegate: Loader {
+ sourceComponent: tokenComponent
+ onLoaded: d.assignItemProperties(item, index, root.tokens[index])
+ }
+ }
+
+ StatusBaseText {
+ text: qsTr("or")
+ color: Theme.palette.directColor6
+ font.pixelSize: 15
+ }
+
+ Loader {
+ active: root.tokens.length > 1
+ sourceComponent: tokenComponent
+ onLoaded: {
+ const index = root.tokens.length - 1
+ d.assignItemProperties(item, index, root.tokens[index])
+ }
+ }
+
+ StatusBaseText {
+ text: qsTr("to post")
+ color: Theme.palette.directColor6
+ font.pixelSize: 15
+ }
+
+ QtObject {
+ id: d
+ function assignItemProperties(item, index, modelData) {
+ item.tokenImageSource = root.tokenImageSourceGetter(modelData.token)
+ item.token = modelData.token
+ item.amount = modelData.amount
+ item.backgroundColor = Qt.binding(() => index % 2 ? Theme.palette.primaryColor3 : Theme.palette.dangerColor3)
+ item.hoverColor = Qt.binding(() => index % 2 ? Theme.palette.primaryColor2 : Theme.palette.dangerColor2)
+ item.textColor = Qt.binding(() => index % 2 ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1)
+ }
+ }
+
+ Component {
+ id: tokenComponent
+
+ Rectangle {
+ property string amount
+ property string token
+ property string tokenImageSource
+ property color backgroundColor
+ property color hoverColor
+ property color textColor
+
+ width: content.width + 4
+ height: content.height + 4
+
+ radius: height/2
+
+ color: mouseArea.containsMouse ? hoverColor : backgroundColor
+
+ Behavior on color {
+ ColorAnimation {
+ }
+ }
+
+ RowLayout {
+ id: content
+
+ anchors.centerIn: parent
+
+ StatusRoundedImage {
+ id: roundedImage
+ Layout.maximumHeight: text.height + 2
+ Layout.maximumWidth: text.height + 2
+ image.source: tokenImageSource
+ }
+
+ StatusBaseText {
+ id: text
+ text: amount + " " + token
+ color: textColor
+ font.pixelSize: 15
+ }
+
+ Item {
+ implicitWidth: 2
+ }
+ }
+
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ hoverEnabled: true
+ propagateComposedEvents: true
+ }
+
+ Rectangle {
+ id: pressIndicator
+
+ height: parent.height
+ radius: height / 2
+ color: textColor
+ opacity: 0.1
+
+ NumberAnimation on width {
+ from: 0
+ to: parent.width
+ duration: 800
+ running: mouseArea.containsPress
+
+ onStopped: {
+ if (pressIndicator.width == parent.width) {
+ root.triggered(amount, token)
+ }
+ pressIndicator.width = 0
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir
index 012df95ad8..8c677cf3f4 100644
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@@ -31,6 +31,7 @@ StatusPasswordStrengthIndicator 0.1 StatusPasswordStrengthIndicator.qml
StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
StatusSelectableText 0.1 StatusSelectableText.qml
+StatusTokenInlineSelector 0.1 StatusTokenInlineSelector.qml
StatusWalletColorButton 0.1 StatusWalletColorButton.qml
StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml
StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
diff --git a/ui/StatusQ/src/assets/img/icons/ETH.png b/ui/StatusQ/src/assets/img/icons/ETH.png
new file mode 100644
index 0000000000..e569e930f2
Binary files /dev/null and b/ui/StatusQ/src/assets/img/icons/ETH.png differ
diff --git a/ui/StatusQ/src/assets/img/icons/MANA.png b/ui/StatusQ/src/assets/img/icons/MANA.png
new file mode 100644
index 0000000000..499288dcc0
Binary files /dev/null and b/ui/StatusQ/src/assets/img/icons/MANA.png differ
diff --git a/ui/StatusQ/src/assets/img/icons/OMG.png b/ui/StatusQ/src/assets/img/icons/OMG.png
new file mode 100644
index 0000000000..9158b10265
Binary files /dev/null and b/ui/StatusQ/src/assets/img/icons/OMG.png differ
diff --git a/ui/StatusQ/src/assets/img/icons/SNT.png b/ui/StatusQ/src/assets/img/icons/SNT.png
new file mode 100644
index 0000000000..6a5b152b2e
Binary files /dev/null and b/ui/StatusQ/src/assets/img/icons/SNT.png differ
diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc
index e1a2118ef3..b59f4be943 100644
--- a/ui/StatusQ/statusq.qrc
+++ b/ui/StatusQ/statusq.qrc
@@ -330,5 +330,10 @@
src/StatusQ/Controls/Validators/StatusRegularExpressionValidator.qml
src/StatusQ/Controls/Validators/StatusIntValidator.qml
src/StatusQ/Controls/StatusSeedPhraseInput.qml
+ src/StatusQ/Controls/StatusTokenInlineSelector.qml
+ src/assets/img/icons/SNT.png
+ src/assets/img/icons/OMG.png
+ src/assets/img/icons/ETH.png
+ src/assets/img/icons/MANA.png