feat: chat mini card

storybook/pages/ChatInputLinksPreviewAreaPage.qml

@@ -32,6 +32,7 @@ SplitView {
                     width: parent.width
                     imagePreviewArray: ["https://picsum.photos/200/300?random=1", "https://picsum.photos/200/300?random=1"]
                     linkPreviewModel: showLinkPreviewSettings ? emptyModel : mockedLinkPreviewModel
+                    requestPaymentModel: mockedRequestPaymentModel
                     showLinkPreviewSettings: !linkPreviewEnabledSwitch.checked
                     visible: hasContent
 
@@ -82,6 +83,10 @@ SplitView {
     LinkPreviewModel {
         id: mockedLinkPreviewModel
     }
+
+    RequestPaymentModel {
+        id: mockedRequestPaymentModel
+    }
 }
 
 // category: Panels

storybook/src/Models/RequestPaymentModel.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.15
+
+ListModel {
+    id: root
+
+    ListElement {
+        symbol: "WBTC"
+        amount: "0.00017"
+        address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
+        chainId: 1 // main
+    }
+    ListElement {
+        symbol: "ETH"
+        amount: "12345.6789"
+        address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
+        chainId: 10 // Opti
+    }
+}

storybook/src/Models/qmldir

@@ -23,6 +23,7 @@ TokensBySymbolModel 1.0 TokensBySymbolModel.qml
 CommunitiesModel 1.0 CommunitiesModel.qml
 OnRampProvidersModel 1.0 OnRampProvidersModel.qml
 SwapTransactionRoutes 1.0 SwapTransactionRoutes.qml
+RequestPaymentModel 1.0 RequestPaymentModel.qml
 
 singleton ModelsData 1.0 ModelsData.qml
 singleton NetworksModel 1.0 NetworksModel.qml

storybook/stubs/shared/stores/RequestPaymentStore.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.15
+
+QtObject {
+    required property CurrenciesStore currencyStore
+    required property var flatNetworksModel
+    required property var processedAssetsModel
+    required property var accountsModel
+
+    property var requestPaymentModel: ListModel {}
+
+    function addPaymentRequest(symbol, amount, address, chainId) {
+        requestPaymentModel.append({
+            symbol: symbol,
+            amount: amount,
+            address: address,
+            chainId: chainId
+        })
+    }
+
+    function removePaymentRequest(index) {
+        requestPaymentModel.remove(index)
+    }
+}

ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml

@@ -32,6 +32,12 @@ Control {
     */
     required property var linkPreviewModel
     required property bool showLinkPreviewSettings
+    /*
+    Expected roles:
+        string symbol
+        string amount
+    */
+    required property var requestPaymentModel
 
     readonly property alias hoveredUrl: d.hoveredUrl
     readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0
@@ -41,6 +47,8 @@ Control {
     signal linkReload(string link)
     signal linkClicked(string link)
 
+    signal paymentRequestRemoved(int index)
+
     signal enableLinkPreview()
     signal enableLinkPreviewForThisMessage()
     signal disableLinkPreview()
@@ -96,6 +104,17 @@ Control {
                     onImageRemoved: root.imageRemoved(index)
                     visible: !!imagePreviewArray && imagePreviewArray.length > 0
                 }
+                Repeater {
+                    id: requestPaymentRepeater
+                    model: root.requestPaymentModel
+                    delegate: RequestPaymentMiniCardDelegate {
+                        required property var model
+
+                        amount: model.amount
+                        symbol: model.symbol
+                        onClose: root.paymentRequestRemoved(model.index)
+                    }
+                }
                 Repeater {
                     id: linkPreviewRepeater
                     model: d.filteredModel

ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml

@@ -0,0 +1,100 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+
+import utils 1.0
+
+CalloutCard {
+    id: root
+
+    required property string amount
+    required property string symbol
+
+    readonly property bool containsMouse: mouseArea.hovered || closeButton.hovered
+
+    signal close()
+
+    implicitWidth:260
+    implicitHeight: 64
+    verticalPadding: 15
+    horizontalPadding: 12
+    borderColor: Theme.palette.directColor7
+    backgroundColor: root.containsMouse ? Theme.palette.directColor7 : Theme.palette.background
+
+    contentItem: Item {
+        implicitHeight: layout.implicitHeight
+        implicitWidth: layout.implicitWidth
+
+        RowLayout {
+            id: layout
+            anchors.fill: parent
+            spacing: 16
+
+            StatusRoundIcon {
+                id: favIcon
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                Layout.preferredWidth: 36
+                Layout.preferredHeight: 36
+                asset.width: 24
+                asset.height: 24
+                asset.bgColor: Theme.palette.directColor7
+                asset.bgHeight: 36
+                asset.bgWidth: 36
+                asset.color: Theme.palette.primaryColor1
+                asset.name: Theme.svg("send")
+
+                StatusSmartIdenticon {
+                    anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.right
+                    asset.width: 16
+                    asset.height: 16
+                    asset.bgColor: root.containsMouse ? Theme.palette.transparent : Theme.palette.background
+                    asset.bgHeight: 20
+                    asset.bgWidth: 20
+                    asset.isImage: true
+                    asset.name: Constants.tokenIcon(root.symbol)
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                StatusBaseText {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    text: qsTr("Payment request")
+                    font.pixelSize: Theme.additionalTextSize
+                    font.weight: Font.Medium
+                }
+                StatusBaseText {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    font.pixelSize: Theme.tertiaryTextFontSize
+                    color: Theme.palette.baseColor1
+                    verticalAlignment: Text.AlignVCenter
+                    text: "%1 %2".arg(root.amount).arg(root.symbol)
+                }
+            }
+
+            StatusFlatButton {
+                id: closeButton
+                icon.name: "close"
+                size: StatusBaseButton.Size.Small
+                hoverColor: Theme.palette.directColor8
+                textColor: Theme.palette.directColor1
+                onClicked: root.close()
+            }
+        }
+    }
+
+    HoverHandler {
+        id: mouseArea
+        target: background
+        cursorShape: Qt.PointingHandCursor
+    }
+}

ui/imports/shared/controls/chat/qmldir

@@ -10,6 +10,7 @@ LinkPreviewCard 1.0 LinkPreviewCard.qml
 LinkPreviewMiniCard 1.0 LinkPreviewMiniCard.qml
 LinkPreviewSettingsCard 1.0 LinkPreviewSettingsCard.qml
 LinkPreviewSettingsCardMenu 1.0 LinkPreviewSettingsCardMenu.qml
+RequestPaymentMiniCardDelegate 1.0 RequestPaymentMiniCardDelegate.qml
 MessageMouseArea 1.0 MessageMouseArea.qml
 MessageReactionsRow 1.0 MessageReactionsRow.qml
 ProfileHeader 1.0 ProfileHeader.qml

ui/imports/shared/stores/RequestPaymentStore.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.15
+
+QtObject {
+    required property CurrenciesStore currencyStore
+    required property var flatNetworksModel
+    required property var processedAssetsModel
+    required property var accountsModel
+
+    property var requestPaymentModel: null
+}