From c27e765cdd7961c2e0b082edc17fc0262fff87f8 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Mon, 4 Nov 2024 21:39:01 +0100 Subject: [PATCH 1/7] feat: chat mini card --- .../pages/ChatInputLinksPreviewAreaPage.qml | 5 + storybook/src/Models/RequestPaymentModel.qml | 18 ++++ storybook/src/Models/qmldir | 1 + .../shared/stores/RequestPaymentStore.qml | 23 ++++ .../chat/ChatInputLinksPreviewArea.qml | 19 ++++ .../chat/RequestPaymentMiniCardDelegate.qml | 100 ++++++++++++++++++ ui/imports/shared/controls/chat/qmldir | 1 + .../shared/stores/RequestPaymentStore.qml | 10 ++ 8 files changed, 177 insertions(+) create mode 100644 storybook/src/Models/RequestPaymentModel.qml create mode 100644 storybook/stubs/shared/stores/RequestPaymentStore.qml create mode 100644 ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml create mode 100644 ui/imports/shared/stores/RequestPaymentStore.qml diff --git a/storybook/pages/ChatInputLinksPreviewAreaPage.qml b/storybook/pages/ChatInputLinksPreviewAreaPage.qml index adde059d238..0a0dd784873 100644 --- a/storybook/pages/ChatInputLinksPreviewAreaPage.qml +++ b/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 diff --git a/storybook/src/Models/RequestPaymentModel.qml b/storybook/src/Models/RequestPaymentModel.qml new file mode 100644 index 00000000000..2e6128ae196 --- /dev/null +++ b/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 + } +} diff --git a/storybook/src/Models/qmldir b/storybook/src/Models/qmldir index 04d623fc7e5..0aa9e394590 100644 --- a/storybook/src/Models/qmldir +++ b/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 diff --git a/storybook/stubs/shared/stores/RequestPaymentStore.qml b/storybook/stubs/shared/stores/RequestPaymentStore.qml new file mode 100644 index 00000000000..0b9c09840c2 --- /dev/null +++ b/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) + } +} diff --git a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml index 9da7811cd79..5d42b059f6b 100644 --- a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml +++ b/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 diff --git a/ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml b/ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml new file mode 100644 index 00000000000..15dd28e5535 --- /dev/null +++ b/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 + } +} diff --git a/ui/imports/shared/controls/chat/qmldir b/ui/imports/shared/controls/chat/qmldir index 3acd3d26894..60106adacf8 100644 --- a/ui/imports/shared/controls/chat/qmldir +++ b/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 diff --git a/ui/imports/shared/stores/RequestPaymentStore.qml b/ui/imports/shared/stores/RequestPaymentStore.qml new file mode 100644 index 00000000000..c4bd78fa809 --- /dev/null +++ b/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 +} From a3f1b2ad4f711fce9ec9bb06aaa57bff436aef54 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Fri, 8 Nov 2024 16:50:35 +0100 Subject: [PATCH 2/7] feat: chat request payment card --- storybook/pages/StatusMessagePage.qml | 32 +++++ .../qmlTests/tests/tst_StatusMessage.qml | 67 ++++++++- .../src/StatusQ/Components/StatusMessage.qml | 72 +++++++++- .../Components/StatusMessageDetails.qml | 1 + .../statusMessage/StatusMessageImageAlbum.qml | 1 + ui/StatusQ/src/assets.qrc | 1 + .../png/chat/request_payment_banner.png | Bin 0 -> 3596 bytes .../chat/RequestPaymentCardDelegate.qml | 133 ++++++++++++++++++ ui/imports/shared/controls/chat/qmldir | 1 + ui/imports/shared/views/chat/MessageView.qml | 2 + ui/imports/utils/Constants.qml | 1 + 11 files changed, 308 insertions(+), 3 deletions(-) create mode 100644 ui/StatusQ/src/assets/png/chat/request_payment_banner.png create mode 100644 ui/imports/shared/controls/chat/RequestPaymentCardDelegate.qml diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml index 8481b6cd653..cb84cb9ac53 100644 --- a/storybook/pages/StatusMessagePage.qml +++ b/storybook/pages/StatusMessagePage.qml @@ -17,6 +17,9 @@ SplitView { QtObject { id: d + readonly property var exampleAlbum: [ModelsData.banners.coinbase, ModelsData.icons.status] + readonly property var requestPaymentModel: RequestPaymentModel {} + readonly property var messagesModel: ListModel { ListElement { timestamp: 1656937930123 @@ -152,6 +155,28 @@ 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 + } + ListElement { + timestamp: 1667937830123 + senderId: "zq123456790" + senderDisplayName: "Alice" + contentType: StatusMessage.ContentType.Attachment + message: "This message contains attachments" + isContact: true + isAReply: false + trustIndicator: StatusContactVerificationIcons.TrustedType.None + outgoingStatus: StatusMessage.OutgoingStatus.Delivered + } } readonly property var colorHash: ListModel { ListElement { colorId: 13; segmentLength: 5 } @@ -202,6 +227,11 @@ SplitView { colorId: index colorHash: d.colorHash } + album: model.contentType === StatusMessage.ContentType.Image + || model.contentType === StatusMessage.ContentType.Attachment ? d.exampleAlbum : [] + albumCount: model.contentType === StatusMessage.ContentType.Image + || model.contentType === StatusMessage.ContentType.Attachment ? d.exampleAlbum.length : 0 + requestPaymentModel: model.contentType === StatusMessage.ContentType.Attachment ? d.requestPaymentModel : null } replyDetails { @@ -222,6 +252,8 @@ SplitView { onReplyMessageClicked: logs.logEvent("StatusMessage::replyMessageClicked") onResendClicked: logs.logEvent("StatusMessage::resendClicked") onLinkActivated: logs.logEvent("StatusMessage::linkActivated" + link) + onRequestPaymentClicked: logs.logEvent("StatusMessage::requestPaymentActivated") + onImageClicked: logs.logEvent("StatusMessage::imageClicked") } } } diff --git a/storybook/qmlTests/tests/tst_StatusMessage.qml b/storybook/qmlTests/tests/tst_StatusMessage.qml index af663888916..1f7063320a8 100644 --- a/storybook/qmlTests/tests/tst_StatusMessage.qml +++ b/storybook/qmlTests/tests/tst_StatusMessage.qml @@ -35,7 +35,7 @@ Item { property StatusMessage controlUnderTest: null TestCase { - name: "TokenSelectorView" + name: "StatusMessage" when: windowShown function init() { @@ -86,5 +86,70 @@ Item { compare(actualLinkCount, data.validAddressEnsCount, "TextEdit should contain a link %1".arg(data.messageText)) } + + function test_attachment_empty() { + verify(!!controlUnderTest) + controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment + controlUnderTest.messageDetails.messageText = "" + waitForRendering(controlUnderTest) + + const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") + verify(!statusTextMessage) + const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") + verify(!!imageAlbum) + compare(imageAlbum.albumCount, 0) + const image = findChild(imageAlbum, "album_image_loader_0") + verify(!image) + const requestPaymentItem = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") + verify(!requestPaymentItem) + } + + function test_attachment_only_text() { + verify(!!controlUnderTest) + controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment + controlUnderTest.messageDetails.messageText = "test message" + waitForRendering(controlUnderTest) + + const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") + verify(!!statusTextMessage) + verify(statusTextMessage.textField.text.indexOf("test message") > 0) + const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") + verify(!!imageAlbum) + compare(imageAlbum.albumCount, 0) + const image = findChild(imageAlbum, "album_image_loader_0") + verify(!image) + const requestPaymentItem = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") + verify(!requestPaymentItem) + } + + function test_attachment_multiple_attachments() { + verify(!!controlUnderTest) + controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment + controlUnderTest.messageDetails.messageText = "test message with attachments" + controlUnderTest.messageDetails.album = [ "image0", "image1", "image2" ] + controlUnderTest.messageDetails.albumCount = 3 + controlUnderTest.messageDetails.requestPaymentModel = [ + {amount: "0.1", currency: "ETH", address: "0x1234567890abcdef1234567890abcdef12345678", chainId: 1}, + {amount: "0.2", currency: "DAI", address: "0xAbCdEf1234567890abcdef1234567890AbCdEf12", chainId: 10}, + ] + waitForRendering(controlUnderTest) + + const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") + verify(!!statusTextMessage) + verify(statusTextMessage.textField.text.indexOf("test message with attachments") > 0) + const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") + verify(!!imageAlbum) + compare(imageAlbum.albumCount, 3) + for (let i = 0 ; i < 3 ; i++) { + const image = findChild(imageAlbum, "album_image_loader_"+i) + verify(!!image) + } + const requestPaymentItem0 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") + verify(!!requestPaymentItem0) + const requestPaymentItem1 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_1") + verify(!!requestPaymentItem1) + const requestPaymentItem2 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_2") + verify(!requestPaymentItem2) + } } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml index 77d9650bc1e..e8695c8c967 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml @@ -7,6 +7,8 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 import StatusQ.Controls 0.1 +import shared.controls.chat 1.0 + import "./private/statusMessage" Control { @@ -26,7 +28,8 @@ Control { SystemMessageMutualEventSent = 15, SystemMessageMutualEventAccepted = 16, SystemMessageMutualEventRemoved = 17, - BridgeMessage = 18 + BridgeMessage = 18, + Attachment = 19 } enum OutgoingStatus { @@ -89,6 +92,7 @@ Control { signal addReactionClicked(var sender, var mouse) signal toggleReactionClicked(int emojiId) signal imageClicked(var image, var mouse, var imageSource) + signal requestPaymentClicked(var symbol, var amount, var address, var chainId) signal stickerClicked() signal resendClicked() @@ -299,7 +303,7 @@ Control { } } Loader { - active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode + active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode visible: active Layout.fillWidth: true @@ -312,6 +316,7 @@ Control { anchors.right: parent.right visible: active sourceComponent: StatusTextMessage { + objectName: "StatusMessage_textMessage" messageDetails: root.messageDetails isEdited: root.isEdited allowShowMore: !root.isInPinnedPopup @@ -326,6 +331,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 @@ -337,6 +343,68 @@ Control { } } + Loader { + active: root.messageDetails.contentType === StatusMessage.ContentType.Attachment && !editMode + visible: active + Layout.fillWidth: true + + sourceComponent: Column { + id: attachmentsColumn + spacing: 8 + Loader { + active: root.messageDetails.messageText !== "" + anchors.left: parent.left + anchors.right: parent.right + visible: active + sourceComponent: StatusTextMessage { + objectName: "StatusMessage_textMessage" + messageDetails: root.messageDetails + isEdited: root.isEdited + allowShowMore: !root.isInPinnedPopup + textField.anchors.rightMargin: root.isInPinnedPopup ? Theme.xlPadding : 0 // margin for the "Unpin" floating button + highlightedLink: root.highlightedLink + onLinkActivated: { + root.linkActivated(link); + } + } + } + + Flow { + width: messageLayout.width + height: childrenRect.height + Theme.smallPadding + Loader { + active: true + sourceComponent: StatusMessageImageAlbum { + objectName: "StatusMessage_imageAlbum" + album: root.messageDetails.albumCount > 0 ? root.messageDetails.album : [root.messageDetails.messageContent] + albumCount: root.messageDetails.albumCount > 0 ? root.messageDetails.albumCount : 0 + imageWidth: Math.min(messageLayout.width / root.messageDetails.albumCount - 9 * (root.messageDetails.albumCount - 1), 144) + shapeType: StatusImageMessage.ShapeType.LEFT_ROUNDED + onImageClicked: root.imageClicked(image, mouse, imageSource) + } + } + Loader { + active: true + sourceComponent: RowLayout { + Repeater { + model: root.messageDetails.requestPaymentModel + delegate: RequestPaymentCardDelegate { + objectName: "StatusMessage_requestPaymentDelegate_" + model.index + required property var model + amount: model.amount + symbol: model.symbol + address: model.address + senderName: root.messageDetails.sender.displayName + senderImageAssetSettings: root.messageDetails.sender.profileImage.assetSettings + onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.address, model.chainId) + } + } + } + } + } + } + } + Loader { active: root.messageAttachments && !editMode visible: active diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml index 939b93acd31..a880864fd2d 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml @@ -15,4 +15,5 @@ QtObject { property bool messageDeleted: false property var album: [] property int albumCount: 0 + property var requestPaymentModel: null } diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml index 24bdb9728e3..a6159859fa5 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageImageAlbum.qml +++ b/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 diff --git a/ui/StatusQ/src/assets.qrc b/ui/StatusQ/src/assets.qrc index 8f7d43516fa..9a7f4ea985b 100644 --- a/ui/StatusQ/src/assets.qrc +++ b/ui/StatusQ/src/assets.qrc @@ -8043,6 +8043,7 @@ assets/png/chat/chat@2x.png assets/png/chat/chat@3x.png assets/png/chat/wave.png + assets/png/chat/request_payment_banner.png assets/png/keycard/authenticate.png assets/png/keycard/biometrics-fail.png assets/png/keycard/biometrics-success.png diff --git a/ui/StatusQ/src/assets/png/chat/request_payment_banner.png b/ui/StatusQ/src/assets/png/chat/request_payment_banner.png new file mode 100644 index 0000000000000000000000000000000000000000..9714b5a1c50c740a40ad3134503d34f823d356c5 GIT binary patch literal 3596 zcmZ`+cQ_kb8;{l~s?=zVs&%zmgqCs}GgghNs?k`nS_DPRqExLS)HRwKCB#nEXlz1_ zn6YVWYSb2ck1xI7zu$MB=d9m5&ig#)J->5K+Vjk1rE~8hmlH5@={8DNcN);qb0ns3Q(Rk+2HQP8*65n530BG>+0E(yP zhr-z-2Sc_c7@)B6TC?dEPWnx%j9<6)>B6t=J4yxj0gWl$cJtdGkR1~V`&6KvGFZ*0 zV$E9ngfLDpa5U)@o$|Lf7$jz3}(Fa(V4{dqOiWu1v+VvN|X75a$ zL8_O^KqbvTKoK62Wn(yqiY4&#z_Dv=?A4sDt$SoIp@prv_vS4F{0ubo(ydMY>7Wo1 z_7|#hKS|Sh>I(r!iA(0EPgEP6;3m)r>Flz6h@}vUR{#6>WeYtVpUbTl6V1KX2z|bX zGNX2+2wxk2ji+%P69QQ0Z;XZfKf}!o;w_l`#DxUw_Tk>2zz1fa~80T*#mBR zx_x(ljf|5@hI(zazREoLz;j8TssJk*7S`AFNU)ab_-I8?#p%_v$C$uq+Bfj>>H)sI z&Kxr!^MVqeUPE@h z=zqvLidZlZx}-na9I9qt`jp3MmX~_{EHJY&$wXrqE9ogw?*rPH9#B2z3dxJ*9?I!s zMQMK?C@(3ST8f+KuB$20n~Zim(rF|E{bCXhlk>I&c@Cjt2WgG@SY$y@x8`}s@KrA! z+va5Oc)O7<2OAqhn4PmIF8x{596mKcqPaf*LBywC*}3w_aw_~{&&%6i^+eZ1EG%`# zeFN9hI?lo#-ABKYJ%pX*V@cnSd&_&olbdH*;V78+2JYzSHZo#zYg`>G;PuexXmMK2 z`u*U3VAYqzYw5hPg9|K3KK1$DeID|eS>+qCDF=mVMSxHAa=GpD4_f;A^c%@0kve2B zTUWLLcYhdR5Y3#K&BQuXNNoMQ1l#1=MXsFQ^3b~C$D};7X{VHGp{iMW+VKQ$8(l2k ze(>PnTUB3}avioPyxf34I{K$`f#S($0wP}1pxOba8Wci39i;;gnB0w?<$qxhQ1Fp? z*P+0VYTZHE&kdTY_{Gv4!G71X1HXzQ%3;VPU{eTC$;?t!^E$k9`fC>NTk4MzgoVKz zlDO;D!n8})*6fDS=4T()M-NxZLx<)^kEm{fH*>1y!$D9G2r5UTqIR&O3v>k$yGQFm z>Uh*Y#w_+a{xI_|g)Qop+I)~xxI$Zns7wp2j;Y{q=X&St7|G5kx}Ss zr3Q9-U9ojIBJ-iqz}}?6@SX#Cyk<(7!{Yc!7f(K)su&Z*j@|IB!fx1H6XuGJ*!t^5 zjE7ME$sq32z#&@B6rX8Xa(t#l^d>%N6<6TT-*E2nV16rF_{=^y-xZN{qYOHRo5j2s zu5ELV%k>5@R_+F6bh;EXd_?;`bwOltWdAGo0fF7UCUzB4hFNq}`#5Phyj`pZWAw$u zUn-^prqXV}jb|}bAgMvZ-mGlP0E_a(p@}nTz=mB17evjM&JM(5H(nZxxGYmaY^3#` zs+|(ENW%#k|BBXg`ULI5!q;i_`)c3p%&QT4PQMAQ} zyh=OK&i6M=B?7PVRy{Xg(s(x3rq=3CSy!*sse*VV^~`y=smV}Wv$Sk;7E{Uk8HiIc zTSQg%uX&l@$JZccv8A9(iHWEgmXo8?DY9D;aV)`cpLxJH~-$$a-?XnTU zo0J^&z~SnB#2H{>>t34zWmQ!iN;^vgR|p=$9%{Kzu2X{+$2qb23X4?oUpF?VE*!N% zdILoBDaLMD2IospO?>!Cy@$#6HvY=8<=gIx>Ft&S`om`_98pkiHIG%4!1mw59}+^c z^~KhQ-^vRR2&sq3AAmX(a?}SecHE`B47`qJ7q?E!A1@DRTmN&A(%n$RG~l#UPJD1- z3#aJAPvwP}sGax{YM2Mfx?~?3N;uvCyDM_&W^TR<3X|bcGEmQD68GYUuY2r{tdTDitsI3t z@PE<)!U8*Wu8@0ClPJ4rEM<=?Wp~9}2raZQg5@+D&Qe|HU0Nrqv=+blvc~{TNcK8% zQ%4Sqq#Jb0e4g!c%sHL@N6mzn8yz%*2hlx4J+~D2M)J?Kxts60pGz@PI9RII8%vN+ zh%^Ganioj|Qs;f$*_^~T_(s$COV%bBC;Vvd&9fl)5x>AP*iNUWc@ z|F#eJOwB=mEcm?C5HBiM5Ne3GUBt0n-#hTkGF)PO5H<3aX-nJ z3WF28h6Q`jb@0N)+E%et-QqHKqVj{iXqoC@qlc?hYS~~;d%;I`?KNR^mxWrzv39iV zY7LK{UcoQzm}~WAdZ%wU0>LQ?ZLb9<)?i<5e1_m-wB!Q!=mtcNI|J*?GM~wab#q`g zLT+X4Xw_JRBr`psDTp73zeK;nc+z0@eI0poW@k;k!l%@2dF+%z?DV#V9hA5f9G&$Barto&!P3Q6n21RE)WwGrz=dP zH-t= Date: Mon, 11 Nov 2024 08:56:54 +0100 Subject: [PATCH 3/7] feat: Move request payment delegate --- storybook/pages/LinksMessageViewPage.qml | 7 ++ storybook/pages/StatusMessagePage.qml | 21 +----- .../qmlTests/tests/tst_StatusMessage.qml | 65 ----------------- .../src/StatusQ/Components/StatusMessage.qml | 70 +------------------ .../Components/StatusMessageDetails.qml | 1 - ui/imports/shared/controls/chat/qmldir | 1 - .../RequestPaymentCardDelegate.qml | 2 + ui/imports/shared/controls/delegates/qmldir | 1 + .../shared/views/chat/LinksMessageView.qml | 21 ++++++ ui/imports/shared/views/chat/MessageView.qml | 4 +- ui/imports/utils/Constants.qml | 1 - 11 files changed, 38 insertions(+), 156 deletions(-) rename ui/imports/shared/controls/{chat => delegates}/RequestPaymentCardDelegate.qml (99%) diff --git a/storybook/pages/LinksMessageViewPage.qml b/storybook/pages/LinksMessageViewPage.qml index cf5c540548e..a7694c1beba 100644 --- a/storybook/pages/LinksMessageViewPage.qml +++ b/storybook/pages/LinksMessageViewPage.qml @@ -13,6 +13,10 @@ SplitView { id: mockedLinkPreviewModel } + RequestPaymentModel { + id: mockedRequestPaymentModel + } + Pane { id: messageViewWrapper SplitView.fillWidth: true @@ -27,6 +31,9 @@ SplitView { playAnimations: true linkPreviewModel: mockedLinkPreviewModel gifLinks: [ "https://media.tenor.com/qN_ytiwLh24AAAAC/cold.gif" ] + requestPaymentModel: mockedRequestPaymentModel + + senderName: "Alice" gifUnfurlingEnabled: false canAskToUnfurlGifs: true diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml index cb84cb9ac53..41668e7971a 100644 --- a/storybook/pages/StatusMessagePage.qml +++ b/storybook/pages/StatusMessagePage.qml @@ -18,7 +18,6 @@ SplitView { id: d readonly property var exampleAlbum: [ModelsData.banners.coinbase, ModelsData.icons.status] - readonly property var requestPaymentModel: RequestPaymentModel {} readonly property var messagesModel: ListModel { ListElement { @@ -33,6 +32,7 @@ SplitView { isAReply: false trustIndicator: StatusContactVerificationIcons.TrustedType.Verified outgoingStatus: StatusMessage.OutgoingStatus.Delivered + requeestPaymentModel: [] } ListElement { timestamp: 1657937930135 @@ -166,17 +166,6 @@ SplitView { trustIndicator: StatusContactVerificationIcons.TrustedType.None outgoingStatus: StatusMessage.OutgoingStatus.Delivered } - ListElement { - timestamp: 1667937830123 - senderId: "zq123456790" - senderDisplayName: "Alice" - contentType: StatusMessage.ContentType.Attachment - message: "This message contains attachments" - isContact: true - isAReply: false - trustIndicator: StatusContactVerificationIcons.TrustedType.None - outgoingStatus: StatusMessage.OutgoingStatus.Delivered - } } readonly property var colorHash: ListModel { ListElement { colorId: 13; segmentLength: 5 } @@ -227,11 +216,8 @@ SplitView { colorId: index colorHash: d.colorHash } - album: model.contentType === StatusMessage.ContentType.Image - || model.contentType === StatusMessage.ContentType.Attachment ? d.exampleAlbum : [] - albumCount: model.contentType === StatusMessage.ContentType.Image - || model.contentType === StatusMessage.ContentType.Attachment ? d.exampleAlbum.length : 0 - requestPaymentModel: model.contentType === StatusMessage.ContentType.Attachment ? d.requestPaymentModel : null + album: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum : [] + albumCount: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum.length : 0 } replyDetails { @@ -252,7 +238,6 @@ SplitView { onReplyMessageClicked: logs.logEvent("StatusMessage::replyMessageClicked") onResendClicked: logs.logEvent("StatusMessage::resendClicked") onLinkActivated: logs.logEvent("StatusMessage::linkActivated" + link) - onRequestPaymentClicked: logs.logEvent("StatusMessage::requestPaymentActivated") onImageClicked: logs.logEvent("StatusMessage::imageClicked") } } diff --git a/storybook/qmlTests/tests/tst_StatusMessage.qml b/storybook/qmlTests/tests/tst_StatusMessage.qml index 1f7063320a8..09c388b4471 100644 --- a/storybook/qmlTests/tests/tst_StatusMessage.qml +++ b/storybook/qmlTests/tests/tst_StatusMessage.qml @@ -86,70 +86,5 @@ Item { compare(actualLinkCount, data.validAddressEnsCount, "TextEdit should contain a link %1".arg(data.messageText)) } - - function test_attachment_empty() { - verify(!!controlUnderTest) - controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment - controlUnderTest.messageDetails.messageText = "" - waitForRendering(controlUnderTest) - - const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") - verify(!statusTextMessage) - const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") - verify(!!imageAlbum) - compare(imageAlbum.albumCount, 0) - const image = findChild(imageAlbum, "album_image_loader_0") - verify(!image) - const requestPaymentItem = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") - verify(!requestPaymentItem) - } - - function test_attachment_only_text() { - verify(!!controlUnderTest) - controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment - controlUnderTest.messageDetails.messageText = "test message" - waitForRendering(controlUnderTest) - - const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") - verify(!!statusTextMessage) - verify(statusTextMessage.textField.text.indexOf("test message") > 0) - const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") - verify(!!imageAlbum) - compare(imageAlbum.albumCount, 0) - const image = findChild(imageAlbum, "album_image_loader_0") - verify(!image) - const requestPaymentItem = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") - verify(!requestPaymentItem) - } - - function test_attachment_multiple_attachments() { - verify(!!controlUnderTest) - controlUnderTest.messageDetails.contentType = StatusMessage.ContentType.Attachment - controlUnderTest.messageDetails.messageText = "test message with attachments" - controlUnderTest.messageDetails.album = [ "image0", "image1", "image2" ] - controlUnderTest.messageDetails.albumCount = 3 - controlUnderTest.messageDetails.requestPaymentModel = [ - {amount: "0.1", currency: "ETH", address: "0x1234567890abcdef1234567890abcdef12345678", chainId: 1}, - {amount: "0.2", currency: "DAI", address: "0xAbCdEf1234567890abcdef1234567890AbCdEf12", chainId: 10}, - ] - waitForRendering(controlUnderTest) - - const statusTextMessage = findChild(controlUnderTest, "StatusMessage_textMessage") - verify(!!statusTextMessage) - verify(statusTextMessage.textField.text.indexOf("test message with attachments") > 0) - const imageAlbum = findChild(controlUnderTest, "StatusMessage_imageAlbum") - verify(!!imageAlbum) - compare(imageAlbum.albumCount, 3) - for (let i = 0 ; i < 3 ; i++) { - const image = findChild(imageAlbum, "album_image_loader_"+i) - verify(!!image) - } - const requestPaymentItem0 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_0") - verify(!!requestPaymentItem0) - const requestPaymentItem1 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_1") - verify(!!requestPaymentItem1) - const requestPaymentItem2 = findChild(controlUnderTest, "StatusMessage_requestPaymentDelegate_2") - verify(!requestPaymentItem2) - } } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml index e8695c8c967..8441995a049 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml @@ -7,8 +7,6 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 import StatusQ.Controls 0.1 -import shared.controls.chat 1.0 - import "./private/statusMessage" Control { @@ -28,8 +26,7 @@ Control { SystemMessageMutualEventSent = 15, SystemMessageMutualEventAccepted = 16, SystemMessageMutualEventRemoved = 17, - BridgeMessage = 18, - Attachment = 19 + BridgeMessage = 18 } enum OutgoingStatus { @@ -92,7 +89,6 @@ Control { signal addReactionClicked(var sender, var mouse) signal toggleReactionClicked(int emojiId) signal imageClicked(var image, var mouse, var imageSource) - signal requestPaymentClicked(var symbol, var amount, var address, var chainId) signal stickerClicked() signal resendClicked() @@ -303,7 +299,7 @@ Control { } } Loader { - active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode + active: root.messageDetails.contentType === StatusMessage.ContentType.Image && !editMode visible: active Layout.fillWidth: true @@ -343,68 +339,6 @@ Control { } } - Loader { - active: root.messageDetails.contentType === StatusMessage.ContentType.Attachment && !editMode - visible: active - Layout.fillWidth: true - - sourceComponent: Column { - id: attachmentsColumn - spacing: 8 - Loader { - active: root.messageDetails.messageText !== "" - anchors.left: parent.left - anchors.right: parent.right - visible: active - sourceComponent: StatusTextMessage { - objectName: "StatusMessage_textMessage" - messageDetails: root.messageDetails - isEdited: root.isEdited - allowShowMore: !root.isInPinnedPopup - textField.anchors.rightMargin: root.isInPinnedPopup ? Theme.xlPadding : 0 // margin for the "Unpin" floating button - highlightedLink: root.highlightedLink - onLinkActivated: { - root.linkActivated(link); - } - } - } - - Flow { - width: messageLayout.width - height: childrenRect.height + Theme.smallPadding - Loader { - active: true - sourceComponent: StatusMessageImageAlbum { - objectName: "StatusMessage_imageAlbum" - album: root.messageDetails.albumCount > 0 ? root.messageDetails.album : [root.messageDetails.messageContent] - albumCount: root.messageDetails.albumCount > 0 ? root.messageDetails.albumCount : 0 - imageWidth: Math.min(messageLayout.width / root.messageDetails.albumCount - 9 * (root.messageDetails.albumCount - 1), 144) - shapeType: StatusImageMessage.ShapeType.LEFT_ROUNDED - onImageClicked: root.imageClicked(image, mouse, imageSource) - } - } - Loader { - active: true - sourceComponent: RowLayout { - Repeater { - model: root.messageDetails.requestPaymentModel - delegate: RequestPaymentCardDelegate { - objectName: "StatusMessage_requestPaymentDelegate_" + model.index - required property var model - amount: model.amount - symbol: model.symbol - address: model.address - senderName: root.messageDetails.sender.displayName - senderImageAssetSettings: root.messageDetails.sender.profileImage.assetSettings - onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.address, model.chainId) - } - } - } - } - } - } - } - Loader { active: root.messageAttachments && !editMode visible: active diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml index a880864fd2d..939b93acd31 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessageDetails.qml @@ -15,5 +15,4 @@ QtObject { property bool messageDeleted: false property var album: [] property int albumCount: 0 - property var requestPaymentModel: null } diff --git a/ui/imports/shared/controls/chat/qmldir b/ui/imports/shared/controls/chat/qmldir index 04772acb805..60106adacf8 100644 --- a/ui/imports/shared/controls/chat/qmldir +++ b/ui/imports/shared/controls/chat/qmldir @@ -10,7 +10,6 @@ LinkPreviewCard 1.0 LinkPreviewCard.qml LinkPreviewMiniCard 1.0 LinkPreviewMiniCard.qml LinkPreviewSettingsCard 1.0 LinkPreviewSettingsCard.qml LinkPreviewSettingsCardMenu 1.0 LinkPreviewSettingsCardMenu.qml -RequestPaymentCardDelegate 1.0 RequestPaymentCardDelegate.qml RequestPaymentMiniCardDelegate 1.0 RequestPaymentMiniCardDelegate.qml MessageMouseArea 1.0 MessageMouseArea.qml MessageReactionsRow 1.0 MessageReactionsRow.qml diff --git a/ui/imports/shared/controls/chat/RequestPaymentCardDelegate.qml b/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml similarity index 99% rename from ui/imports/shared/controls/chat/RequestPaymentCardDelegate.qml rename to ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml index 665d154b8bb..5fc0bdc9600 100644 --- a/ui/imports/shared/controls/chat/RequestPaymentCardDelegate.qml +++ b/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml @@ -8,6 +8,8 @@ import QtGraphicalEffects 1.15 import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 +import shared.controls.chat 1.0 + import utils 1.0 CalloutCard { diff --git a/ui/imports/shared/controls/delegates/qmldir b/ui/imports/shared/controls/delegates/qmldir index 45e2a69f021..e81ea58eaf7 100644 --- a/ui/imports/shared/controls/delegates/qmldir +++ b/ui/imports/shared/controls/delegates/qmldir @@ -2,4 +2,5 @@ ContactListItemDelegate 1.0 ContactListItemDelegate.qml LinkPreviewCardDelegate 1.0 LinkPreviewCardDelegate.qml LinkPreviewGifDelegate 1.0 LinkPreviewGifDelegate.qml LinkPreviewMiniCardDelegate 1.0 LinkPreviewMiniCardDelegate.qml +RequestPaymentCardDelegate 1.0 RequestPaymentCardDelegate.qml InfoCard 1.0 InfoCard.qml diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml index 8d7787d4b9c..24b26bfec1e 100644 --- a/ui/imports/shared/views/chat/LinksMessageView.qml +++ b/ui/imports/shared/views/chat/LinksMessageView.qml @@ -25,15 +25,21 @@ Flow { required property var linkPreviewModel required property var gifLinks + required property var requestPaymentModel + required property bool gifUnfurlingEnabled required property bool canAskToUnfurlGifs + property string senderName + property var senderImageAssetSettings + readonly property alias hoveredLink: linksRepeater.hoveredUrl property string highlightLink: "" signal imageClicked(var image, var mouse, string imageSource, string url) signal openContextMenu(var item, string url, string domain) signal setNeverAskAboutUnfurlingAgain(bool neverAskAgain) + signal requestPaymentClicked(var symbol, var amount, var address, var chainId) function resetLocalAskAboutUnfurling() { d.localAskAboutUnfurling = true @@ -56,6 +62,21 @@ Flow { sourceComponent: enableLinkComponent } + Repeater { + id: requestPaymentRepeater + model: root.requestPaymentModel + delegate: RequestPaymentCardDelegate { + required property var model + objectName: "RrequestPaymentDelegate_" + model.index + amount: model.amount + symbol: model.symbol + address: model.address + senderName: root.senderName + senderImageAssetSettings: root.senderImageAssetSettings + onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.address, model.chainId) + } + } + Repeater { id: tempRepeater visible: root.canAskToUnfurlGifs diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 2fcfbf4f493..9a05f5bfa8d 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -70,6 +70,7 @@ Loader { property string messagePinnedBy: "" property var reactionsModel: [] property var linkPreviewModel + property var requestPaymentModel property string messageAttachments: "" property var transactionParams property var emojiReactionsModel @@ -364,8 +365,6 @@ Loader { return StatusMessage.ContentType.SystemMessageMutualEventAccepted; case Constants.messageContentType.systemMessageMutualEventRemoved: return StatusMessage.ContentType.SystemMessageMutualEventRemoved; - case Constants.messageContentType.attachmentType: - return StatusMessage.ContentType.Attachment; case Constants.messageContentType.fetchMoreMessagesButton: case Constants.messageContentType.chatIdentifier: case Constants.messageContentType.unknownContentType: @@ -975,6 +974,7 @@ Loader { linkPreviewModel: root.linkPreviewModel gifLinks: root.gifLinks + requestPaymentModel: root.requestPaymentModel playAnimations: root.Window.active && root.messageStore.isChatActive isOnline: root.rootStore.mainModuleInst.isOnline highlightLink: delegate.hoveredLink diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml index 0db68276997..9f04a462b26 100644 --- a/ui/imports/utils/Constants.qml +++ b/ui/imports/utils/Constants.qml @@ -476,7 +476,6 @@ QtObject { readonly property int systemMessageMutualEventAccepted: 16 readonly property int systemMessageMutualEventRemoved: 17 readonly property int bridgeMessageType: 18 - readonly property int attachmentType: 19 } readonly property QtObject messageModelRoles: QtObject { From 9ad2726794406e38c0214ef11cc6044cff6d4689 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Sun, 24 Nov 2024 08:23:16 +0100 Subject: [PATCH 4/7] feat: qml fixes && open send modal --- .../src/StatusQ/Components/StatusMessage.qml | 4 +++- .../AppLayouts/Chat/views/ChatMessagesView.qml | 1 + ui/app/mainui/AppMain.qml | 15 +++++++++++++++ .../controls/chat/ChatInputLinksPreviewArea.qml | 2 +- .../delegates/RequestPaymentCardDelegate.qml | 11 +++++++++-- .../shared/views/chat/LinksMessageView.qml | 16 +++++++++------- ui/imports/shared/views/chat/MessageView.qml | 9 +++++++-- ui/imports/utils/Global.qml | 1 + 8 files changed, 46 insertions(+), 13 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml index 8441995a049..15b5ed26dea 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml +++ b/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: "" @@ -377,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 { diff --git a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml index 575ed4edab1..f0a5aeb6d14 100644 --- a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml +++ b/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 diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index d3dad94d50c..0bfe4a1886d 100644 --- a/ui/app/mainui/AppMain.qml +++ b/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) } diff --git a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml index 5d42b059f6b..5543fbd777f 100644 --- a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml +++ b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml @@ -40,7 +40,7 @@ Control { required property var requestPaymentModel 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 || requestPaymentRepeater.count > 0 signal imageRemoved(int index) signal imageClicked(var chatImage) diff --git a/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml b/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml index 5fc0bdc9600..cea15478181 100644 --- a/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml +++ b/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml @@ -20,7 +20,8 @@ CalloutCard { required property string address property string senderName - property var senderImageAssetSettings + property string senderThumbnailImage + property int senderColorId property bool highlight: false @@ -97,7 +98,13 @@ CalloutCard { StatusSmartIdenticon { width: symbolImage.width height: symbolImage.height - asset: root.senderImageAssetSettings + asset.width: symbolImage.width + asset.height: symbolImage.height + asset.isImage: !!root.senderThumbnailImage + asset.name: root.senderThumbnailImage + asset.isLetterIdenticon: root.senderThumbnailImage === "" + asset.color: Theme.palette.userCustomizationColors[root.senderColorId] + asset.charactersLen: 2 name: root.senderName } } diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml index 24b26bfec1e..b749f2eb400 100644 --- a/ui/imports/shared/views/chat/LinksMessageView.qml +++ b/ui/imports/shared/views/chat/LinksMessageView.qml @@ -25,13 +25,14 @@ Flow { required property var linkPreviewModel required property var gifLinks - required property var requestPaymentModel + required property var paymentRequestModel required property bool gifUnfurlingEnabled required property bool canAskToUnfurlGifs property string senderName - property var senderImageAssetSettings + property string senderThumbnailImage + property int senderColorId readonly property alias hoveredLink: linksRepeater.hoveredUrl property string highlightLink: "" @@ -39,7 +40,7 @@ Flow { signal imageClicked(var image, var mouse, string imageSource, string url) signal openContextMenu(var item, string url, string domain) signal setNeverAskAboutUnfurlingAgain(bool neverAskAgain) - signal requestPaymentClicked(var symbol, var amount, var address, var chainId) + signal requestPaymentClicked(var symbol, var amount, var receiver, var chainId) function resetLocalAskAboutUnfurling() { d.localAskAboutUnfurling = true @@ -64,16 +65,17 @@ Flow { Repeater { id: requestPaymentRepeater - model: root.requestPaymentModel + model: root.paymentRequestModel delegate: RequestPaymentCardDelegate { required property var model objectName: "RrequestPaymentDelegate_" + model.index amount: model.amount symbol: model.symbol - address: model.address + address: model.receiver senderName: root.senderName - senderImageAssetSettings: root.senderImageAssetSettings - onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.address, model.chainId) + senderThumbnailImage: root.senderThumbnailImage + senderColorId: root.senderColorId + onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.receiver, model.chainId) } } diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 9a05f5bfa8d..0093ef6354e 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -70,7 +70,7 @@ Loader { property string messagePinnedBy: "" property var reactionsModel: [] property var linkPreviewModel - property var requestPaymentModel + property var paymentRequestModel property string messageAttachments: "" property var transactionParams property var emojiReactionsModel @@ -721,6 +721,7 @@ Loader { resendError: root.resendError reactionsModel: root.reactionsModel linkPreviewModel: root.linkPreviewModel + paymentRequestModel: root.paymentRequestModel gifLinks: root.gifLinks showHeader: root.shouldRepeatHeader || dateGroupLabel.visible || isAReply || @@ -974,7 +975,10 @@ Loader { linkPreviewModel: root.linkPreviewModel gifLinks: root.gifLinks - requestPaymentModel: root.requestPaymentModel + senderName: root.senderDisplayName + senderThumbnailImage: root.senderIcon || "" + senderColorId: Utils.colorIdForPubkey(root.senderId) + paymentRequestModel: root.paymentRequestModel playAnimations: root.Window.active && root.messageStore.isChatActive isOnline: root.rootStore.mainModuleInst.isOnline highlightLink: delegate.hoveredLink @@ -988,6 +992,7 @@ Loader { gifUnfurlingEnabled: root.sharedRootStore.gifUnfurlingEnabled canAskToUnfurlGifs: !root.sharedRootStore.neverAskAboutUnfurlingAgain onSetNeverAskAboutUnfurlingAgain: root.sharedRootStore.setNeverAskAboutUnfurlingAgain(neverAskAgain) + onRequestPaymentClicked: Global.paymentRequestClicked(receiver, symbol, amount, chainId) Component.onCompleted: { root.messageStore.messageModule.forceLinkPreviewsLocalData(root.messageId) diff --git a/ui/imports/utils/Global.qml b/ui/imports/utils/Global.qml index 658ae65e880..2ae89636def 100644 --- a/ui/imports/utils/Global.qml +++ b/ui/imports/utils/Global.qml @@ -73,6 +73,7 @@ QtObject { signal appSectionBySectionTypeChanged(int sectionType, int subsection, int subSubsection, var data) signal openSendModal(string address) + signal paymentRequestClicked(string receiverAddress, string symbol, string amount, int chainId) signal switchToCommunity(string communityId) signal switchToCommunitySettings(string communityId) signal switchToCommunityChannelsView(string communityId) From d1ccce5d4d32cdbb54493722824567786a273c7a Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Sun, 24 Nov 2024 08:30:18 +0100 Subject: [PATCH 5/7] feat: Rename to payment request --- .../pages/ChatInputLinksPreviewAreaPage.qml | 6 ++--- storybook/pages/LinksMessageViewPage.qml | 6 ++--- ...ymentModel.qml => PaymentRequestModel.qml} | 0 storybook/src/Models/qmldir | 2 +- .../shared/stores/RequestPaymentStore.qml | 23 ------------------- .../chat/ChatInputLinksPreviewArea.qml | 10 ++++---- ...qml => PaymentRequestMiniCardDelegate.qml} | 0 ui/imports/shared/controls/chat/qmldir | 2 +- ...ate.qml => PaymentRequestCardDelegate.qml} | 0 ui/imports/shared/controls/delegates/qmldir | 2 +- .../shared/stores/RequestPaymentStore.qml | 10 -------- .../shared/views/chat/LinksMessageView.qml | 10 ++++---- ui/imports/shared/views/chat/MessageView.qml | 2 +- 13 files changed, 20 insertions(+), 53 deletions(-) rename storybook/src/Models/{RequestPaymentModel.qml => PaymentRequestModel.qml} (100%) delete mode 100644 storybook/stubs/shared/stores/RequestPaymentStore.qml rename ui/imports/shared/controls/chat/{RequestPaymentMiniCardDelegate.qml => PaymentRequestMiniCardDelegate.qml} (100%) rename ui/imports/shared/controls/delegates/{RequestPaymentCardDelegate.qml => PaymentRequestCardDelegate.qml} (100%) delete mode 100644 ui/imports/shared/stores/RequestPaymentStore.qml diff --git a/storybook/pages/ChatInputLinksPreviewAreaPage.qml b/storybook/pages/ChatInputLinksPreviewAreaPage.qml index 0a0dd784873..7c9adbba35a 100644 --- a/storybook/pages/ChatInputLinksPreviewAreaPage.qml +++ b/storybook/pages/ChatInputLinksPreviewAreaPage.qml @@ -32,7 +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 + paymentRequestModel: mockedPaymentRequestModel showLinkPreviewSettings: !linkPreviewEnabledSwitch.checked visible: hasContent @@ -84,8 +84,8 @@ SplitView { id: mockedLinkPreviewModel } - RequestPaymentModel { - id: mockedRequestPaymentModel + PaymentRequestModel { + id: mockedPaymentRequestModel } } diff --git a/storybook/pages/LinksMessageViewPage.qml b/storybook/pages/LinksMessageViewPage.qml index a7694c1beba..96d9f8f6363 100644 --- a/storybook/pages/LinksMessageViewPage.qml +++ b/storybook/pages/LinksMessageViewPage.qml @@ -13,8 +13,8 @@ SplitView { id: mockedLinkPreviewModel } - RequestPaymentModel { - id: mockedRequestPaymentModel + PaymentRequestModel { + id: mockedPaymentRequestModel } Pane { @@ -31,7 +31,7 @@ SplitView { playAnimations: true linkPreviewModel: mockedLinkPreviewModel gifLinks: [ "https://media.tenor.com/qN_ytiwLh24AAAAC/cold.gif" ] - requestPaymentModel: mockedRequestPaymentModel + paymentRequestModel: mockedPaymentRequestModel senderName: "Alice" diff --git a/storybook/src/Models/RequestPaymentModel.qml b/storybook/src/Models/PaymentRequestModel.qml similarity index 100% rename from storybook/src/Models/RequestPaymentModel.qml rename to storybook/src/Models/PaymentRequestModel.qml diff --git a/storybook/src/Models/qmldir b/storybook/src/Models/qmldir index 0aa9e394590..d72574bb7bc 100644 --- a/storybook/src/Models/qmldir +++ b/storybook/src/Models/qmldir @@ -23,7 +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 +PaymentRequestModel 1.0 PaymentRequestModel.qml singleton ModelsData 1.0 ModelsData.qml singleton NetworksModel 1.0 NetworksModel.qml diff --git a/storybook/stubs/shared/stores/RequestPaymentStore.qml b/storybook/stubs/shared/stores/RequestPaymentStore.qml deleted file mode 100644 index 0b9c09840c2..00000000000 --- a/storybook/stubs/shared/stores/RequestPaymentStore.qml +++ /dev/null @@ -1,23 +0,0 @@ -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) - } -} diff --git a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml index 5543fbd777f..b287e7e2be1 100644 --- a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml +++ b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml @@ -37,10 +37,10 @@ Control { string symbol string amount */ - required property var requestPaymentModel + required property var paymentRequestModel readonly property alias hoveredUrl: d.hoveredUrl - readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0 || requestPaymentRepeater.count > 0 + readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0 || paymentRequestRepeater.count > 0 signal imageRemoved(int index) signal imageClicked(var chatImage) @@ -105,9 +105,9 @@ Control { visible: !!imagePreviewArray && imagePreviewArray.length > 0 } Repeater { - id: requestPaymentRepeater - model: root.requestPaymentModel - delegate: RequestPaymentMiniCardDelegate { + id: paymentRequestRepeater + model: root.paymentRequestModel + delegate: PaymentRequestMiniCardDelegate { required property var model amount: model.amount diff --git a/ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml similarity index 100% rename from ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml rename to ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml diff --git a/ui/imports/shared/controls/chat/qmldir b/ui/imports/shared/controls/chat/qmldir index 60106adacf8..b422a4d1ac0 100644 --- a/ui/imports/shared/controls/chat/qmldir +++ b/ui/imports/shared/controls/chat/qmldir @@ -10,7 +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 +PaymentRequestMiniCardDelegate 1.0 PaymentRequestMiniCardDelegate.qml MessageMouseArea 1.0 MessageMouseArea.qml MessageReactionsRow 1.0 MessageReactionsRow.qml ProfileHeader 1.0 ProfileHeader.qml diff --git a/ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml b/ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml similarity index 100% rename from ui/imports/shared/controls/delegates/RequestPaymentCardDelegate.qml rename to ui/imports/shared/controls/delegates/PaymentRequestCardDelegate.qml diff --git a/ui/imports/shared/controls/delegates/qmldir b/ui/imports/shared/controls/delegates/qmldir index e81ea58eaf7..8e630eb00ea 100644 --- a/ui/imports/shared/controls/delegates/qmldir +++ b/ui/imports/shared/controls/delegates/qmldir @@ -2,5 +2,5 @@ ContactListItemDelegate 1.0 ContactListItemDelegate.qml LinkPreviewCardDelegate 1.0 LinkPreviewCardDelegate.qml LinkPreviewGifDelegate 1.0 LinkPreviewGifDelegate.qml LinkPreviewMiniCardDelegate 1.0 LinkPreviewMiniCardDelegate.qml -RequestPaymentCardDelegate 1.0 RequestPaymentCardDelegate.qml +PaymentRequestCardDelegate 1.0 PaymentRequestCardDelegate.qml InfoCard 1.0 InfoCard.qml diff --git a/ui/imports/shared/stores/RequestPaymentStore.qml b/ui/imports/shared/stores/RequestPaymentStore.qml deleted file mode 100644 index c4bd78fa809..00000000000 --- a/ui/imports/shared/stores/RequestPaymentStore.qml +++ /dev/null @@ -1,10 +0,0 @@ -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 -} diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml index b749f2eb400..a9dfc79d0e1 100644 --- a/ui/imports/shared/views/chat/LinksMessageView.qml +++ b/ui/imports/shared/views/chat/LinksMessageView.qml @@ -40,7 +40,7 @@ Flow { signal imageClicked(var image, var mouse, string imageSource, string url) signal openContextMenu(var item, string url, string domain) signal setNeverAskAboutUnfurlingAgain(bool neverAskAgain) - signal requestPaymentClicked(var symbol, var amount, var receiver, var chainId) + signal paymentRequestClicked(var symbol, var amount, var receiver, var chainId) function resetLocalAskAboutUnfurling() { d.localAskAboutUnfurling = true @@ -64,18 +64,18 @@ Flow { } Repeater { - id: requestPaymentRepeater + id: paymentRequestRepeater model: root.paymentRequestModel - delegate: RequestPaymentCardDelegate { + delegate: PaymentRequestCardDelegate { required property var model - objectName: "RrequestPaymentDelegate_" + model.index + objectName: "RpaymentRequestDelegate_" + model.index amount: model.amount symbol: model.symbol address: model.receiver senderName: root.senderName senderThumbnailImage: root.senderThumbnailImage senderColorId: root.senderColorId - onClicked: root.requestPaymentClicked(model.symbol, model.amount, model.receiver, model.chainId) + onClicked: root.paymentRequestClicked(model.symbol, model.amount, model.receiver, model.chainId) } } diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 0093ef6354e..6067588a723 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -992,7 +992,7 @@ Loader { gifUnfurlingEnabled: root.sharedRootStore.gifUnfurlingEnabled canAskToUnfurlGifs: !root.sharedRootStore.neverAskAboutUnfurlingAgain onSetNeverAskAboutUnfurlingAgain: root.sharedRootStore.setNeverAskAboutUnfurlingAgain(neverAskAgain) - onRequestPaymentClicked: Global.paymentRequestClicked(receiver, symbol, amount, chainId) + onPaymentRequestClicked: Global.paymentRequestClicked(receiver, symbol, amount, chainId) Component.onCompleted: { root.messageStore.messageModule.forceLinkPreviewsLocalData(root.messageId) From 04341f0321800f33e357593298a4ac43e0ca0033 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Mon, 25 Nov 2024 11:40:47 +0100 Subject: [PATCH 6/7] feat: Fixes --- .../AppLayouts/Chat/views/ChatColumnView.qml | 1 + .../chat/ChatInputLinksPreviewArea.qml | 4 ++-- .../chat/PaymentRequestMiniCardDelegate.qml | 22 ++++++++++++++----- ui/imports/shared/status/StatusChatInput.qml | 3 +++ .../shared/views/chat/LinksMessageView.qml | 2 +- 5 files changed, 24 insertions(+), 8 deletions(-) diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml index ff76d332391..f966dfd25ba 100644 --- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml @@ -391,6 +391,7 @@ Item { d.activeChatContentModule.inputAreaModule.setLinkPreviewEnabledForCurrentMessage(false) } onDismissLinkPreview: (index) => d.activeChatContentModule.inputAreaModule.removeLinkPreviewData(index) + onRemovePaymentRequest: (index) => d.activeChatContentModule.inputAreaModule.removePaymentRequestPreviewData(index) } ChatPermissionQualificationPanel { diff --git a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml index b287e7e2be1..2d452bbb30e 100644 --- a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml +++ b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml @@ -47,7 +47,7 @@ Control { signal linkReload(string link) signal linkClicked(string link) - signal paymentRequestRemoved(int index) + signal removePaymentRequest(int index) signal enableLinkPreview() signal enableLinkPreviewForThisMessage() @@ -112,7 +112,7 @@ Control { amount: model.amount symbol: model.symbol - onClose: root.paymentRequestRemoved(model.index) + onClose: root.removePaymentRequest(model.index) } } Repeater { diff --git a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml index 15dd28e5535..e226e85bf55 100644 --- a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml +++ b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml @@ -71,13 +71,25 @@ CalloutCard { font.pixelSize: Theme.additionalTextSize font.weight: Font.Medium } - StatusBaseText { + RowLayout { 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) + 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 + } } } diff --git a/ui/imports/shared/status/StatusChatInput.qml b/ui/imports/shared/status/StatusChatInput.qml index 735fbedb236..70b160a0616 100644 --- a/ui/imports/shared/status/StatusChatInput.qml +++ b/ui/imports/shared/status/StatusChatInput.qml @@ -37,6 +37,7 @@ Rectangle { signal disableLinkPreview() signal dismissLinkPreviewSettings() signal dismissLinkPreview(int index) + signal removePaymentRequest(int index) property var usersModel property SharedStores.RootStore sharedStore @@ -1224,6 +1225,7 @@ Rectangle { topPadding: 12 imagePreviewArray: control.fileUrlsAndSources linkPreviewModel: control.linkPreviewModel + paymentRequestModel: control.paymentRequestModel showLinkPreviewSettings: control.askToEnableLinkPreview onImageRemoved: (index) => { //Just do a copy and replace the whole thing because it's a plain JS array and thre's no signal when a single item is removed @@ -1242,6 +1244,7 @@ Rectangle { onDisableLinkPreview: () => control.disableLinkPreview() onDismissLinkPreviewSettings: () => control.dismissLinkPreviewSettings() onDismissLinkPreview: (index) => control.dismissLinkPreview(index) + onRemovePaymentRequest: (index) => control.removePaymentRequest(index) } RowLayout { diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml index a9dfc79d0e1..fbd1590091f 100644 --- a/ui/imports/shared/views/chat/LinksMessageView.qml +++ b/ui/imports/shared/views/chat/LinksMessageView.qml @@ -68,7 +68,7 @@ Flow { model: root.paymentRequestModel delegate: PaymentRequestCardDelegate { required property var model - objectName: "RpaymentRequestDelegate_" + model.index + objectName: "PaymentRequestDelegate_" + model.index amount: model.amount symbol: model.symbol address: model.receiver From 9c3914ab1d25b65eed334a30f67239ff56f96084 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Tue, 26 Nov 2024 22:20:36 +0100 Subject: [PATCH 7/7] feat: Code review remarks --- storybook/pages/StatusMessagePage.qml | 1 - ui/app/AppLayouts/Chat/views/ChatColumnView.qml | 2 +- .../shared/controls/chat/ChatInputLinksPreviewArea.qml | 4 ++-- ui/imports/shared/status/StatusChatInput.qml | 4 ++-- ui/imports/shared/views/chat/LinksMessageView.qml | 4 ++-- ui/imports/shared/views/chat/MessageView.qml | 8 +++++++- 6 files changed, 14 insertions(+), 9 deletions(-) diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml index 41668e7971a..ddf8e452341 100644 --- a/storybook/pages/StatusMessagePage.qml +++ b/storybook/pages/StatusMessagePage.qml @@ -32,7 +32,6 @@ SplitView { isAReply: false trustIndicator: StatusContactVerificationIcons.TrustedType.Verified outgoingStatus: StatusMessage.OutgoingStatus.Delivered - requeestPaymentModel: [] } ListElement { timestamp: 1657937930135 diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml index f966dfd25ba..0272ccab332 100644 --- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml @@ -391,7 +391,7 @@ Item { d.activeChatContentModule.inputAreaModule.setLinkPreviewEnabledForCurrentMessage(false) } onDismissLinkPreview: (index) => d.activeChatContentModule.inputAreaModule.removeLinkPreviewData(index) - onRemovePaymentRequest: (index) => d.activeChatContentModule.inputAreaModule.removePaymentRequestPreviewData(index) + onRemovePaymentRequestPreviewRequested: (index) => d.activeChatContentModule.inputAreaModule.removePaymentRequestPreviewData(index) } ChatPermissionQualificationPanel { diff --git a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml index 2d452bbb30e..27daf19e18f 100644 --- a/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml +++ b/ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml @@ -47,7 +47,7 @@ Control { signal linkReload(string link) signal linkClicked(string link) - signal removePaymentRequest(int index) + signal removePaymentRequestPreviewRequested(int index) signal enableLinkPreview() signal enableLinkPreviewForThisMessage() @@ -112,7 +112,7 @@ Control { amount: model.amount symbol: model.symbol - onClose: root.removePaymentRequest(model.index) + onClose: root.removePaymentRequestPreviewRequested(model.index) } } Repeater { diff --git a/ui/imports/shared/status/StatusChatInput.qml b/ui/imports/shared/status/StatusChatInput.qml index 70b160a0616..a88a51c4b19 100644 --- a/ui/imports/shared/status/StatusChatInput.qml +++ b/ui/imports/shared/status/StatusChatInput.qml @@ -37,7 +37,7 @@ Rectangle { signal disableLinkPreview() signal dismissLinkPreviewSettings() signal dismissLinkPreview(int index) - signal removePaymentRequest(int index) + signal removePaymentRequestPreviewRequested(int index) property var usersModel property SharedStores.RootStore sharedStore @@ -1244,7 +1244,7 @@ Rectangle { onDisableLinkPreview: () => control.disableLinkPreview() onDismissLinkPreviewSettings: () => control.dismissLinkPreviewSettings() onDismissLinkPreview: (index) => control.dismissLinkPreview(index) - onRemovePaymentRequest: (index) => control.removePaymentRequest(index) + onRemovePaymentRequestPreviewRequested: (index) => control.removePaymentRequestPreviewRequested(index) } RowLayout { diff --git a/ui/imports/shared/views/chat/LinksMessageView.qml b/ui/imports/shared/views/chat/LinksMessageView.qml index fbd1590091f..b01c3544f97 100644 --- a/ui/imports/shared/views/chat/LinksMessageView.qml +++ b/ui/imports/shared/views/chat/LinksMessageView.qml @@ -40,7 +40,7 @@ Flow { signal imageClicked(var image, var mouse, string imageSource, string url) signal openContextMenu(var item, string url, string domain) signal setNeverAskAboutUnfurlingAgain(bool neverAskAgain) - signal paymentRequestClicked(var symbol, var amount, var receiver, var chainId) + signal paymentRequestClicked(int index) function resetLocalAskAboutUnfurling() { d.localAskAboutUnfurling = true @@ -75,7 +75,7 @@ Flow { senderName: root.senderName senderThumbnailImage: root.senderThumbnailImage senderColorId: root.senderColorId - onClicked: root.paymentRequestClicked(model.symbol, model.amount, model.receiver, model.chainId) + onClicked: root.paymentRequestClicked(model.index) } } diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 6067588a723..99d3ad63611 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -992,7 +992,13 @@ Loader { gifUnfurlingEnabled: root.sharedRootStore.gifUnfurlingEnabled canAskToUnfurlGifs: !root.sharedRootStore.neverAskAboutUnfurlingAgain onSetNeverAskAboutUnfurlingAgain: root.sharedRootStore.setNeverAskAboutUnfurlingAgain(neverAskAgain) - onPaymentRequestClicked: Global.paymentRequestClicked(receiver, symbol, amount, chainId) + onPaymentRequestClicked: (index) => { + const receiver = StatusQUtils.ModelUtils.get(paymentRequestModel, index, "receiver") + const amount = StatusQUtils.ModelUtils.get(paymentRequestModel, index, "amount") + const symbol = StatusQUtils.ModelUtils.get(paymentRequestModel, index, "symbol") + const chainId = StatusQUtils.ModelUtils.get(paymentRequestModel, index, "chainId") + Global.paymentRequestClicked(receiver, symbol, amount, chainId) + } Component.onCompleted: { root.messageStore.messageModule.forceLinkPreviewsLocalData(root.messageId)