feat(TokenItem): add possibility to display amount, storybook page added

storybook/PagesModel.qml

@@ -245,6 +245,10 @@ ListModel {
         title: "InlineNetworksComboBox"
         section: "Components"
     }
+    ListElement {
+        title: "TokenItem"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

storybook/pages/TokenItemPage.qml

@@ -0,0 +1,96 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import Models 1.0
+import Storybook 1.0
+import utils 1.0
+
+import AppLayouts.Chat.controls.community 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Vertical
+
+    component CustomTokenItem: TokenItem {
+        name: nameTextField.text
+        shortName: shortNameTextField.text
+        amount: amountTextField.text
+        iconSource: ModelsData.assets.socks
+
+        Layout.fillWidth: true
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        Rectangle {
+            anchors.fill: column
+            anchors.margins: -1
+            border.color: "lightgray"
+        }
+
+        ColumnLayout {
+            id: column
+
+            anchors.centerIn: parent
+
+            width: 300
+
+            CustomTokenItem {}
+
+            CustomTokenItem {
+                selected: true
+            }
+
+            CustomTokenItem {
+                showSubItemsIcon: true
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        SplitView.fillWidth: true
+
+        ColumnLayout {
+            RowLayout {
+                Label {
+                    text: "Name:\t"
+
+                }
+                TextField {
+                    id: nameTextField
+
+                    text: "Token name"
+                }
+            }
+            RowLayout {
+                Label {
+                    text: "Short name:\t"
+
+                }
+                TextField {
+                    id: shortNameTextField
+
+                    text: "TN"
+                }
+            }
+            RowLayout {
+                Label {
+                    text: "Amount:\t"
+
+                }
+                TextField {
+                    id: amountTextField
+
+                    text: "200"
+                }
+            }
+        }
+    }
+}

ui/app/AppLayouts/Chat/controls/community/TokenItem.qml

@@ -11,6 +11,7 @@ Control {
 
     property string name
     property string shortName
+    property string amount
     property url iconSource
     property bool selected: false
     property bool showSubItemsIcon: false
@@ -66,6 +67,17 @@ Control {
             }
         }
 
+        StatusBaseText {
+            visible: !!root.amount
+            text: root.amount
+            color: Theme.palette.baseColor1
+            font.pixelSize: 12
+            font.weight: Font.Medium
+            elide: Text.ElideRight
+
+            Layout.rightMargin: root.spacing
+        }
+
         StatusIcon {
             icon: root.selected && !root.showSubItemsIcon ? "checkmark" : "tiny/chevron-right"
             visible: root.selected || root.showSubItemsIcon

ui/app/AppLayouts/Chat/controls/community/qmldir

@@ -11,5 +11,6 @@ InlineNetworksComboBox 1.0 InlineNetworksComboBox.qml
 MembersSelectorPanel 1.0 MembersSelectorPanel.qml
 PermissionItem 1.0 PermissionItem.qml
 PermissionsDropdown 1.0 PermissionsDropdown.qml
+TokenItem 1.0 TokenItem.qml
 singleton PermissionTypes 1.0 PermissionTypes.qml
 singleton TokenCategories 1.0 TokenCategories.qml