From ada4fdd407717697a180847698be76a3c2600e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= <michalcieslak@status.im>
Date: Wed, 19 Apr 2023 14:26:14 +0200
Subject: [PATCH] feat(TokenItem): add possibility to display amount, storybook
 page added

---
 storybook/PagesModel.qml                      |  4 +
 storybook/pages/TokenItemPage.qml             | 96 +++++++++++++++++++
 .../Chat/controls/community/TokenItem.qml     | 12 +++
 .../AppLayouts/Chat/controls/community/qmldir |  1 +
 4 files changed, 113 insertions(+)
 create mode 100644 storybook/pages/TokenItemPage.qml

diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml
index 01b737c8e7..dc3631bf5d 100644
--- a/storybook/PagesModel.qml
+++ b/storybook/PagesModel.qml
@@ -245,6 +245,10 @@ ListModel {
         title: "InlineNetworksComboBox"
         section: "Components"
     }
+    ListElement {
+        title: "TokenItem"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"
diff --git a/storybook/pages/TokenItemPage.qml b/storybook/pages/TokenItemPage.qml
new file mode 100644
index 0000000000..5e4762b008
--- /dev/null
+++ b/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"
+                }
+            }
+        }
+    }
+}
diff --git a/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml b/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml
index e930d05aa0..dc5199d105 100644
--- a/ui/app/AppLayouts/Chat/controls/community/TokenItem.qml
+++ b/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
diff --git a/ui/app/AppLayouts/Chat/controls/community/qmldir b/ui/app/AppLayouts/Chat/controls/community/qmldir
index 719b7a6476..2f5e141a6d 100644
--- a/ui/app/AppLayouts/Chat/controls/community/qmldir
+++ b/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