Feat/request payment cards 16737

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
+                    paymentRequestModel: mockedPaymentRequestModel
                     showLinkPreviewSettings: !linkPreviewEnabledSwitch.checked
                     visible: hasContent
 
@@ -82,6 +83,10 @@ SplitView {
     LinkPreviewModel {
         id: mockedLinkPreviewModel
     }
+
+    PaymentRequestModel {
+        id: mockedPaymentRequestModel
+    }
 }
 
 // category: Panels

storybook/pages/LinksMessageViewPage.qml

@@ -13,6 +13,10 @@ SplitView {
         id: mockedLinkPreviewModel
     }
 
+    PaymentRequestModel {
+        id: mockedPaymentRequestModel
+    }
+
     Pane {
         id: messageViewWrapper
         SplitView.fillWidth: true
@@ -27,6 +31,9 @@ SplitView {
             playAnimations: true
             linkPreviewModel: mockedLinkPreviewModel
             gifLinks: [ "https://media.tenor.com/qN_ytiwLh24AAAAC/cold.gif" ]
+            paymentRequestModel: mockedPaymentRequestModel
+
+            senderName: "Alice"
 
             gifUnfurlingEnabled: false
             canAskToUnfurlGifs: true

storybook/pages/StatusMessagePage.qml

@@ -17,6 +17,8 @@ SplitView {
     QtObject {
         id: d
 
+        readonly property var exampleAlbum: [ModelsData.banners.coinbase, ModelsData.icons.status]
+
         readonly property var messagesModel: ListModel {
             ListElement {
                 timestamp: 1656937930123
@@ -152,6 +154,17 @@ SplitView {
                 trustIndicator: StatusContactVerificationIcons.TrustedType.None
                 outgoingStatus: StatusMessage.OutgoingStatus.Delivered
             }
+            ListElement {
+                timestamp: 1667937830123
+                senderId: "zq123456790"
+                senderDisplayName: "Alice"
+                contentType: StatusMessage.ContentType.Image
+                message: "This message contains images"
+                isContact: true
+                isAReply: false
+                trustIndicator: StatusContactVerificationIcons.TrustedType.None
+                outgoingStatus: StatusMessage.OutgoingStatus.Delivered
+            }
         }
         readonly property var colorHash: ListModel {
             ListElement { colorId: 13; segmentLength: 5 }
@@ -202,6 +215,8 @@ SplitView {
                             colorId: index
                             colorHash: d.colorHash
                         }
+                        album: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum : []
+                        albumCount: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum.length : 0
                     }
 
                     replyDetails {
@@ -222,6 +237,7 @@ SplitView {
                     onReplyMessageClicked: logs.logEvent("StatusMessage::replyMessageClicked")
                     onResendClicked: logs.logEvent("StatusMessage::resendClicked")
                     onLinkActivated: logs.logEvent("StatusMessage::linkActivated" + link)
+                    onImageClicked: logs.logEvent("StatusMessage::imageClicked")
                 }
             }
         }

storybook/qmlTests/tests/tst_StatusMessage.qml

@@ -35,7 +35,7 @@ Item {
     property StatusMessage controlUnderTest: null
 
     TestCase {
-        name: "TokenSelectorView"
+        name: "StatusMessage"
         when: windowShown
 
         function init() {

storybook/src/Models/PaymentRequestModel.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
+PaymentRequestModel 1.0 PaymentRequestModel.qml
 
 singleton ModelsData 1.0 ModelsData.qml
 singleton NetworksModel 1.0 NetworksModel.qml

ui/StatusQ/src/StatusQ/Components/StatusMessage.qml

@@ -49,6 +49,7 @@ Control {
     property string messageAttachments: ""
     property var reactionIcons: []
     property var linkPreviewModel
+    property var paymentRequestModel
     property var gifLinks
 
     property string messageId: ""
@@ -312,6 +313,7 @@ Control {
                                 anchors.right: parent.right
                                 visible: active
                                 sourceComponent: StatusTextMessage {
+                                    objectName: "StatusMessage_textMessage"
                                     messageDetails: root.messageDetails
                                     isEdited: root.isEdited
                                     allowShowMore: !root.isInPinnedPopup
@@ -326,6 +328,7 @@ Control {
                             Loader {
                                 active: true
                                 sourceComponent: StatusMessageImageAlbum {
+                                    objectName: "StatusMessage_imageAlbum"
                                     width: messageLayout.width
                                     album: root.messageDetails.albumCount > 0 ? root.messageDetails.album : [root.messageDetails.messageContent]
                                     albumCount: root.messageDetails.albumCount > 0 ? root.messageDetails.albumCount : 1
@@ -375,7 +378,8 @@ Control {
                         Layout.preferredHeight: implicitHeight
                         active: !root.editMode &&
                                 ((!!root.linkPreviewModel && root.linkPreviewModel.count > 0)
-                                || (!!root.gifLinks && root.gifLinks.length > 0))
+                                || (!!root.gifLinks && root.gifLinks.length > 0)
+                                || (!!root.paymentRequestModel && root.paymentRequestModel.count > 0))
                         visible: active 
                     }
                     Loader {

ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml

@@ -24,6 +24,7 @@ RowLayout {
 
         delegate: Loader {
             active: true
+            objectName: "album_image_loader_" + index
             readonly property bool imageLoaded: index < root.album.length
             readonly property string imagePath: imageLoaded ? root.album[index] : ""
             sourceComponent: imageLoaded ? imageComponent : imagePlaceholderComponent

ui/StatusQ/src/assets.qrc

@@ -8043,6 +8043,7 @@
         <file>assets/png/chat/[email protected]</file>
         <file>assets/png/chat/[email protected]</file>
         <file>assets/png/chat/wave.png</file>
+        <file>assets/png/chat/request_payment_banner.png</file>
         <file>assets/png/keycard/authenticate.png</file>
         <file>assets/png/keycard/biometrics-fail.png</file>
         <file>assets/png/keycard/biometrics-success.png</file>

ui/app/AppLayouts/Chat/views/ChatColumnView.qml

@@ -391,6 +391,7 @@ Item {
                         d.activeChatContentModule.inputAreaModule.setLinkPreviewEnabledForCurrentMessage(false)
                     }
                     onDismissLinkPreview: (index) => d.activeChatContentModule.inputAreaModule.removeLinkPreviewData(index)
+                    onRemovePaymentRequestPreviewRequested: (index) => d.activeChatContentModule.inputAreaModule.removePaymentRequestPreviewData(index)
                 }
 
                 ChatPermissionQualificationPanel {

ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

@@ -326,6 +326,7 @@ Item {
             deletedByContactColorHash: model.deletedByContactColorHash
             linkPreviewModel: model.linkPreviewModel
             links: model.links
+            paymentRequestModel: model.paymentRequestModel
             messageAttachments: model.messageAttachments
             transactionParams: model.transactionParameters
             hasMention: model.mentioned

ui/app/mainui/AppMain.qml

@@ -515,6 +515,21 @@ Item {
             sendModal.open(address)
         }
 
+        function onPaymentRequestClicked(receiverAddress: string, symbol: string, amount: string, chainId: int) {
+            if (!!symbol) {
+                sendModal.preSelectedHoldingID = symbol
+                sendModal.preSelectedHoldingType = Constants.TokenType.ERC20
+            }
+            if (!!amount) {
+                sendModal.preDefinedAmountToSend = amount
+            }
+            if (!!chainId) {
+                sendModal.preSelectedChainId = chainId
+            }
+
+            sendModal.open(receiverAddress)
+        }
+
         function onSwitchToCommunity(communityId: string) {
             appMain.communitiesStore.setActiveCommunity(communityId)
         }

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

@@ -32,15 +32,23 @@ Control {
     */
     required property var linkPreviewModel
     required property bool showLinkPreviewSettings
+    /*
+    Expected roles:
+        string symbol
+        string amount
+    */
+    required property var paymentRequestModel
 
     readonly property alias hoveredUrl: d.hoveredUrl
-    readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0
+    readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0 || paymentRequestRepeater.count > 0
 
     signal imageRemoved(int index)
     signal imageClicked(var chatImage)
     signal linkReload(string link)
     signal linkClicked(string link)
 
+    signal removePaymentRequestPreviewRequested(int index)
+
     signal enableLinkPreview()
     signal enableLinkPreviewForThisMessage()
     signal disableLinkPreview()
@@ -96,6 +104,17 @@ Control {
                     onImageRemoved: root.imageRemoved(index)
                     visible: !!imagePreviewArray && imagePreviewArray.length > 0
                 }
+                Repeater {
+                    id: paymentRequestRepeater
+                    model: root.paymentRequestModel
+                    delegate: PaymentRequestMiniCardDelegate {
+                        required property var model
+
+                        amount: model.amount
+                        symbol: model.symbol
+                        onClose: root.removePaymentRequestPreviewRequested(model.index)
+                    }
+                }
                 Repeater {
                     id: linkPreviewRepeater
                     model: d.filteredModel

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

@@ -0,0 +1,112 @@
+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
+                }
+                RowLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    StatusBaseText {
+                        Layout.maximumWidth: parent.width * 0.8
+                        Layout.fillHeight: true
+                        font.pixelSize: Theme.tertiaryTextFontSize
+                        color: Theme.palette.baseColor1
+                        verticalAlignment: Text.AlignVCenter
+                        elide: Text.ElideRight
+                        text: root.amount
+                    }
+                    StatusBaseText {
+                        Layout.fillHeight: true
+                        font.pixelSize: Theme.tertiaryTextFontSize
+                        color: Theme.palette.baseColor1
+                        verticalAlignment: Text.AlignVCenter
+                        text: 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
+PaymentRequestMiniCardDelegate 1.0 PaymentRequestMiniCardDelegate.qml
 MessageMouseArea 1.0 MessageMouseArea.qml
 MessageReactionsRow 1.0 MessageReactionsRow.qml
 ProfileHeader 1.0 ProfileHeader.qml