feat(communities): AirdropTokensSelector component added

Closes: #9798

storybook/PagesModel.qml

@@ -165,6 +165,10 @@ ListModel {
         title: "StatusGroupBox"
         section: "Components"
     }
+    ListElement {
+        title: "AirdropTokensSelector"
+        section: "Components"
+    }
     ListElement {
         title: "StatusEmojiAndColorComboBox"
         section: "Components"

storybook/figma.json

@@ -3,6 +3,11 @@
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=1159%3A114479",
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=1684%3A127762"
     ],
+    "AirdropTokensSelector": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22602-495563",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22628-494998",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22647-501909"
+    ],
     "BrowserSettings": [
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=448%3A36296",
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=1573%3A296338"
@@ -11,6 +16,36 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A415655",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A415935"
     ],
+    "CommunityCollectibleView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A481005&t=Qo2FwPRxvSxbluqB-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479431&t=Qo2FwPRxvSxbluqB-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479570&t=Qo2FwPRxvSxbluqB-1"
+    ],
+    "CommunityMintTokensSettingsPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498587&t=v2Krj5iZQaSTK7Om-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=v2Krj5iZQaSTK7Om-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=v2Krj5iZQaSTK7Om-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480927&t=v2Krj5iZQaSTK7Om-1"
+    ],
+    "CommunityMintedTokensView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479136&t=zs22ORYUVDYpqubQ-1"
+    ],
+    "CommunityNewCollectibleView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=Qo2FwPRxvSxbluqB-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=26601%3A518245&t=Qo2FwPRxvSxbluqB-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=Qo2FwPRxvSxbluqB-1"
+    ],
+    "CommunityNewPermissionView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
+    ],
+    "CommunityPermissionsSettingsPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2992%3A367890&t=7gqqAFbdG5KrPOmn-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22137%3A484809&t=7gqqAFbdG5KrPOmn-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
+    ],
+    "CommunityPermissionsView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
+    ],
     "CommunityProfilePopupInviteFriendsPanel": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2927%3A343592",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2990%3A353179",
@@ -29,6 +64,9 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A489607",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2975%3A492910"
     ],
+    "DidYouKnowSplashScreen": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=25878%3A518438&t=C7xTpNib38t7s7XU-4"
+    ],
     "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",
@@ -53,6 +91,14 @@
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=4291%3A385536",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=4295%3A385958"
     ],
+    "JoinCommunityView": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A317901&t=05yQWHWBWOs2DUTp-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2698%3A380426&t=UOvsb3QLi26KmVrk-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0"
+    ],
+    "JoinPermissionsOverlayPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0"
+    ],
     "LanguageCurrencySettings": [
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=701%3A74776",
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=1592%3A112840",
@@ -61,6 +107,13 @@
     "LoginView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=1080%3A313192"
     ],
+    "PermissionConflictWarningPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
+    ],
+    "PermissionQualificationPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480089",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22734%3A502803"
+    ],
     "ProfileDialogView": [
         "https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=733%3A12552",
         "https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=682%3A15078",
@@ -73,66 +126,14 @@
         "https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=6%3A16845&t=h8DUW6Eysawqe5u0-0",
         "https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=4%3A25437&t=h8DUW6Eysawqe5u0-0"
     ],
-    "StatusCommunityCard": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
-    ],
-    "CommunityPermissionsSettingsPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2992%3A367890&t=7gqqAFbdG5KrPOmn-0",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22137%3A484809&t=7gqqAFbdG5KrPOmn-0",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
-    ],
-    "CommunityPermissionsView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
-    ],
-    "PermissionQualificationPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480089",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22734%3A502803"
-    ],
-    "PermissionConflictWarningPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
-    ],
-    "CommunityNewPermissionView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
-    ],
-    "JoinPermissionsOverlayPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0"
-    ],
-    "JoinCommunityView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A317901&t=05yQWHWBWOs2DUTp-0",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2698%3A380426&t=UOvsb3QLi26KmVrk-0",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0"
-    ],
-    "DidYouKnowSplashScreen": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=25878%3A518438&t=C7xTpNib38t7s7XU-4"
-    ],
-    "CommunityMintTokensSettingsPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498587&t=v2Krj5iZQaSTK7Om-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=v2Krj5iZQaSTK7Om-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=v2Krj5iZQaSTK7Om-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480927&t=v2Krj5iZQaSTK7Om-1"
-    ],
-    "CommunityCollectibleView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A481005&t=Qo2FwPRxvSxbluqB-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479431&t=Qo2FwPRxvSxbluqB-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479570&t=Qo2FwPRxvSxbluqB-1"
-    ],
-    "CommunityNewCollectibleView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=Qo2FwPRxvSxbluqB-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=26601%3A518245&t=Qo2FwPRxvSxbluqB-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=Qo2FwPRxvSxbluqB-1"
-    ],
-    "CommunityMintedTokensView": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479136&t=zs22ORYUVDYpqubQ-1"
-    ],
     "ProfileSocialLinksPanel": [
         "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14588%3A308727&t=cwFGbBHsAGOP0T5R-0"
     ],
-    "CommunityMintTokensSettingsPanel": [
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22602%3A495365&t=PTKo9Q0qIy9YzZxF-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22602%3A495563&t=PTKo9Q0qIy9YzZxF-1"
-    ],
     "SignMintTokenTransactionPopup": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=27140%3A521359&t=V6wYVbwctoC6uD2E-1"
+    ],
+    "StatusCommunityCard": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
     ]
 }

storybook/pages/AirdropTokensSelectorPage.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import AppLayouts.Chat.controls.community 1.0
+
+import utils 1.0
+
+ColumnLayout {
+    readonly property var items: [
+        {
+            tokenText: "2 MCT",
+            networkText: "Ethereum",
+            tokenImage: Style.png("tokens/SNT"),
+            networkImage: Style.svg("network/Network=Ethereum")
+        },
+        {
+            tokenText: "64 DAI",
+            networkText: "Optimism",
+            tokenImage: Style.png("tokens/DAI"),
+            networkImage: Style.svg("network/Network=Optimism")
+        },
+        {
+            tokenText: "0.125 ETH",
+            networkText: "Arbitrum",
+            tokenImage: Style.png("tokens/ETH"),
+            networkImage: Style.svg("network/Network=Arbitrum")
+        }
+    ]
+
+    Item {
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        AirdropTokensSelector {
+            anchors.centerIn: parent
+            placeholderText: "Example: Empty items"
+
+            property int counter: 0
+
+            model: ListModel {
+                id:listModel
+            }
+
+            addButton.onClicked: model.append(items[(counter++) % items.length])
+            onItemClicked: model.remove(index)
+
+            Component.onCompleted: model.append(items[counter++])
+        }
+    }
+
+    Button {
+        Layout.bottomMargin: 10
+        Layout.alignment: Qt.AlignHCenter
+
+        text: "Clear list"
+        onClicked: listModel.clear()
+    }
+}

ui/StatusQ/src/StatusQ/Components/StatusRoundedImage.qml

@@ -4,7 +4,7 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 Rectangle {
-    id: statusRoundImage
+    id: root
 
     property bool showLoadingIndicator: false
 
@@ -17,27 +17,25 @@ Rectangle {
     layer.enabled: true
     layer.effect: OpacityMask {
         maskSource: Rectangle {
-            x: statusRoundImage.x; y: statusRoundImage.y
+            x: root.x; y: root.y
-            width: statusRoundImage.width
+            width: root.width
-            height: statusRoundImage.height
+            height: root.height
-            radius: statusRoundImage.radius
+            radius: root.radius
         }
     }
 
     Image {
         id: image
-        width: statusRoundImage.width
+
-        height: statusRoundImage.height
+        width: root.width
+        height: root.height
         fillMode: Image.PreserveAspectFit
         anchors.centerIn: parent
 
         onSourceChanged: {
             if (sourceSize.width < width || sourceSize.height < height) {
-                sourceSize = Qt.binding(function() {
+                sourceSize = Qt.binding(() => Qt.size(width * 2, height * 2))
-                    return Qt.size(width * 2, height * 2)
+            } else {
-                })
-            }
-            else {
                 sourceSize = undefined
             }
         }
@@ -45,12 +43,13 @@ Rectangle {
 
     Loader {
         id: itemSelector
+
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
         active: showLoadingIndicator && image.status === Image.Loading
+
         sourceComponent: StatusLoadingIndicator {
             color: Theme.palette.directColor6
-
         }
     }
 }

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

@@ -0,0 +1,84 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+import utils 1.0
+
+StatusFlowSelector {
+    id: root
+
+    property alias model: repeater.model
+
+    signal itemClicked(int index, var mouse)
+
+    placeholderText: qsTr("Example: 1 SOCK")
+    placeholderItem.visible: repeater.count === 0
+
+    title: qsTr("What")
+    icon: Style.svg("token")
+
+    QtObject {
+        id: d
+
+        readonly property int commonMargin: 6
+        readonly property int iconSize: 28
+    }
+
+    Repeater {
+        id: repeater
+
+        Control {
+            component Icon: StatusRoundedImage {
+                implicitWidth: d.iconSize
+                implicitHeight: d.iconSize
+            }
+
+            component Text: StatusBaseText {
+                Layout.fillWidth: true
+
+                color: Theme.palette.primaryColor1
+                elide: Text.ElideRight
+            }
+
+            implicitHeight: root.placeholderItemHeight
+            leftPadding: (root.placeholderItemHeight - d.iconSize) / 2
+            rightPadding: d.commonMargin * 2
+
+            background: Rectangle {
+                color: Theme.palette.primaryColor3
+                radius: root.placeholderItemHeight / 2
+
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: root.itemClicked(model.index, mouse)
+                }
+            }
+
+            contentItem: RowLayout {
+                spacing: d.commonMargin
+
+                Icon {
+                    image.source: model.tokenImage
+                }
+
+                Text {
+                    text: qsTr("%1 on", "It means that a given token is deployed 'on' a given network, e.g. '2 MCT on Ethereum'. The name of the network is preceded by an icon, so it is not part of this phrase.")
+                    .arg(model.tokenText)
+                }
+
+                Icon {
+                    image.source: model.networkImage
+                }
+
+                Text {
+                    text: model.networkText
+                }
+            }
+        }
+    }
+}

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

@@ -1,3 +1,4 @@
+AirdropTokensSelector 1.0 AirdropTokensSelector.qml
 CommunityCategoryListItem 1.0 CommunityCategoryListItem.qml
 CommunityListItem 1.0 CommunityListItem.qml
 HoldingTypes 1.0 HoldingTypes.qml