feat(TokenPanel): Add support for amounts and network selection

Closes: #9797

storybook/PagesModel.qml

@@ -129,6 +129,10 @@ ListModel {
         title: "ProfileShowcaseAssetsPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "TokenPanel"
+        section: "Panels"
+    }
     ListElement {
         title: "InviteFriendsToCommunityPopup"
         section: "Popups"

storybook/figma.json

@@ -81,7 +81,6 @@
     ],
     "HoldingsDropdown": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499660&t=F5yiYQV2YGPBdrJ8-0",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A499992&t=je3ZsbFwMntKAhKe-0",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22827%3A501381&t=7gqqAFbdG5KrPOmn-0",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22733%3A502088&t=5QSRGGAhrksqBs8e-0",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22772%3A496580&t=7gqqAFbdG5KrPOmn-0",

storybook/pages/TokenPanelPage.qml

@@ -0,0 +1,121 @@
+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
+
+    ListModel {
+        id: networksModel
+
+        readonly property var modelData: [
+            {
+                name: "Optimism",
+                icon: Style.svg(ModelsData.networks.optimism),
+                amount: "300"
+            },
+            {
+                name: "Arbitrum",
+                icon: Style.svg(ModelsData.networks.arbitrum),
+                amount: "400"
+            },
+            {
+                name: "Hermez",
+                icon: Style.svg(ModelsData.networks.hermez),
+                amount: "500"
+            }
+        ]
+
+        Component.onCompleted: append(modelData)
+    }
+
+    Item {
+        id: container
+
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        Rectangle {
+            anchors.fill: tokenPanel
+            border.width: 1
+            anchors.margins: -15
+        }
+
+        TokenPanel {
+            id: tokenPanel
+
+            mode: {
+                if (addRadioButton.checked)
+                    return HoldingTypes.Mode.Add
+                else if (updateRadioButton.checked)
+                    return HoldingTypes.Mode.Update
+                else
+                    return HoldingTypes.Mode.UpdateOrRemove
+            }
+
+            tokenCategoryText: "Community asset"
+            tokenName: "Token name"
+            tokenShortName: "TN"
+            tokenAmount: amountTextField.text
+            tokenImage: ModelsData.assets.socks
+
+            networksModel: networksModelCheckBox.checked ? networksModel : null
+
+            width: 300
+            anchors.centerIn: parent
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        SplitView.fillWidth: true
+
+        ColumnLayout {
+            RowLayout {
+                RadioButton {
+                    id: addRadioButton
+                    text: "Add"
+
+                    checked: true
+                }
+                RadioButton {
+                    id: updateRadioButton
+                    text: "Update"
+                }
+
+                RadioButton {
+                    id: updateOrRemoveRadioButton
+                    text: "Update or remove"
+                }
+            }
+
+            CheckBox {
+                id: networksModelCheckBox
+
+                text: "Networks model"
+            }
+
+            RowLayout {
+                Label {
+                    text: "Amount:"
+
+                }
+                TextField {
+                    id: amountTextField
+
+                    text: "∞"
+                }
+            }
+        }
+    }
+}

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

@@ -8,19 +8,26 @@ import StatusQ.Components 0.1
 
 import shared.controls 1.0
 
+import utils 1.0
+
+
 ColumnLayout {
     id: root
 
     property int mode: HoldingTypes.Mode.Add
     property alias tokenName: item.name
     property alias tokenShortName: item.shortName
+    property alias tokenAmount: item.amount
     property alias tokenImage: item.iconSource
     property alias amountText: amountInput.text
     property alias amount: amountInput.amount
     property alias tokenCategoryText: tokenLabel.text
+    property alias networkLabelText: d.networkLabelText
     property alias addOrUpdateButtonEnabled: addOrUpdateButton.enabled
     property alias allowDecimals: amountInput.allowDecimals
-    readonly property bool amountValid: amountInput.valid && amountInput.text.length > 0
+    readonly property bool amountValid: amountInput.valid && !!amountInput.text
+
+    property var networksModel
 
     signal addClicked
     signal updateClicked
@@ -36,25 +43,62 @@ ColumnLayout {
         // values from design
         readonly property int defaultHeight: 44
         readonly property int defaultSpacing: 8
+
+        property string networkLabelText: qsTr("Network for airdrop")
+    }
+
+    component CustomText: StatusBaseText {
+        color: Theme.palette.baseColor1
+        font.pixelSize: 12
+        elide: Text.ElideRight
+
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: d.defaultSpacing
     }
 
     spacing: d.defaultSpacing
 
-    StatusBaseText {
+    CustomText {
         id: tokenLabel
+
         Layout.topMargin: 2 * d.defaultSpacing
+    }
+
+    TokenItem {
+        id: item
+
         Layout.fillWidth: true
-        Layout.alignment: Qt.AlignVCenter
+        enabled: false
-        Layout.leftMargin: d.defaultSpacing
+    }
+
+    Loader {
+        active: !!root.networksModel
+        visible: active
+
+        Layout.fillWidth: true
+        Layout.topMargin: 14
+        Layout.bottomMargin: d.defaultSpacing
+
+        sourceComponent: ColumnLayout {
+             spacing: 10
+
+            CustomText {
+                id: networkLabel
+
+                text: d.networkLabelText
+
                 color: Theme.palette.baseColor1
                 font.pixelSize: 12
                 elide: Text.ElideRight
             }
 
-    TokenItem {
+            InlineNetworksComboBox {
-        id: item
                 Layout.fillWidth: true
-        enabled: false
+
+                model: root.networksModel
+            }
+        }
     }
 
     AmountInput {

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

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