diff --git a/storybook/pages/ChatInputLinksPreviewAreaPage.qml b/storybook/pages/ChatInputLinksPreviewAreaPage.qml index adde059d23..0a0dd78487 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 0000000000..2e6128ae19 --- /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 04d623fc7e..0aa9e39459 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 index d1a100d5af..0b9c09840c 100644 --- a/storybook/stubs/shared/stores/RequestPaymentStore.qml +++ b/storybook/stubs/shared/stores/RequestPaymentStore.qml @@ -5,4 +5,19 @@ QtObject { 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 9da7811cd7..5d42b059f6 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 0000000000..15dd28e553 --- /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 3acd3d2689..60106adacf 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 index d1a100d5af..c4bd78fa80 100644 --- a/ui/imports/shared/stores/RequestPaymentStore.qml +++ b/ui/imports/shared/stores/RequestPaymentStore.qml @@ -5,4 +5,6 @@ QtObject { required property var flatNetworksModel required property var processedAssetsModel required property var accountsModel + + property var requestPaymentModel: null }