feat(chat): Open Send modal from payment request (#16945)

* feat(chat): Open Send modal from payment request Closes #16738 * fix(chat): Update preview label issue Fixes #16926
2025-01-20 03:20:24 +00:00 · 2024-12-23 06:32:48 +01:00 · 2024-12-23 06:32:48 +01:00 · 19988fbcee
commit 19988fbcee
parent 3dd5fa9443
14 changed files with 78 additions and 25 deletions
--- a/storybook/pages/StatusChatInputPage.qml
+++ b/storybook/pages/StatusChatInputPage.qml
@ -1,6 +1,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import SortFilterProxyModel 0.2

 import Storybook 1.0
 import Models 1.0
@ -79,6 +80,7 @@ SplitView {

                enabled: enabledCheckBox.checked
                linkPreviewModel: fakeLinksModel
+                paymentRequestModel: d.paymentRequestModel
                urlsList: {
                    urlsModelChangeTracker.revision
                    return SQUtils.ModelUtils.modelToFlatArray(fakeLinksModel, "url")
@ -128,6 +130,9 @@ SplitView {
                    fakeLinksModel.setProperty(index, "unfurled", false)
                    fakeLinksModel.setProperty(index, "immutable", true)
                }
+                onRemovePaymentRequestPreview: (index) => {
+                    d.paymentRequestModel.remove(index)
+                }
            }
        }

@ -151,6 +156,8 @@ SplitView {
                assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
            }

+            property var paymentRequestModel: ListModel {}
+
            property bool linkPreviewsEnabled: linkPreviewSwitch.checked && !askToEnableLinkPreviewSwitch.checked
            onLinkPreviewsEnabledChanged: {
                loadLinkPreviews(chatInputLoader.item ? chatInputLoader.item.unformattedText : "")
@ -199,6 +206,9 @@ SplitView {
                TabButton {
                    text: "Users"
                }
+                TabButton {
+                    text: "payment\nrequest"
+                }
            }

            StackLayout {
@ -271,6 +281,32 @@ SplitView {
                    onRemoveAllClicked: fakeUsersModel.clear()
                    onAddClicked: fakeUsersModel.append(modelEditor.getNewUser(fakeUsersModel.count))
                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    Button {
+                        text: "Add payment request"
+                        enabled: paymentRequestAmount.text !== "" && paymentRequestAsset.text !== ""
+                        onClicked: {
+                            d.paymentRequestModel.append({
+                                "amount": paymentRequestAmount.text,
+                                "symbol": paymentRequestAsset.text
+                            })
+                        }
+                    }
+
+                    Label { text: "Amount:" }
+                    TextField {
+                        id: paymentRequestAmount
+                    }
+
+                    Label { text: "Asset:" }
+                    TextField {
+                        id: paymentRequestAsset
+                    }
+                }
            }
            Label {
                text: "Attachments"
--- a/storybook/src/Storybook/HotReloader.qml
+++ b/storybook/src/Storybook/HotReloader.qml
@ -24,6 +24,10 @@ QtObject {
        d.sourceBlocker.when = false

        reloaded()
+
+        // Log to indicate moement when page was reloaded
+        const fileName = loader.source.toString().split('/').pop();
+        console.log("\n\n== Reloaded", fileName, "==")
    }

    readonly property Connections _d: Connections {
--- a/ui/app/AppLayouts/Chat/ChatLayout.qml
+++ b/ui/app/AppLayouts/Chat/ChatLayout.qml
@ -64,6 +64,7 @@ StackLayout {
    signal profileButtonClicked()
    signal openAppSearch()
    signal buyStickerPackRequested(string packId, int price)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)

    // Community transfer ownership related props/signals:
    property bool isPendingOwnershipRequest: sectionItemModel.isPendingOwnershipRequest
@ -247,6 +248,7 @@ StackLayout {
            }

            onBuyStickerPackRequested: root.buyStickerPackRequested(packId, price)
+            onTokenPaymentRequested: root.tokenPaymentRequested(recipientAddress, symbol, rawAmount, chainId)
        }
    }

--- a/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml
+++ b/ui/app/AppLayouts/Chat/popups/PaymentRequestModal.qml
@ -132,6 +132,7 @@ StatusDialog {
                               amount, root.selectedTokenKey)

            dividerVisible: true
+            selectedSymbol: d.isSelectedHoldingValidAsset ? d.selectedHolding.item.symbol : ""

            AssetSelector {
                id: holdingSelector
--- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
@ -60,6 +60,7 @@ Item {
    property bool paymentRequestFeatureEnabled

    signal openStickerPackPopup(string stickerPackId)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)

    // This function is called once `1:1` or `group` chat is created.
    function checkForCreateChatOptions(chatId) {
@ -209,7 +210,7 @@ Item {
            if (!asset)
                return "0"
            const num = AmountsArithmetic.toNumber(amount, asset.decimals)
-            return root.rootStore.currencyStore.formatCurrencyAmount(num, symbol, {noSynbol: true})
+            return root.rootStore.currencyStore.formatCurrencyAmount(num, symbol, {noSymbol: true})
        }
    }

@ -259,6 +260,7 @@ Item {
                        onOpenStickerPackPopup: {
                            root.openStickerPackPopup(stickerPackId)
                        }
+                        onTokenPaymentRequested: root.tokenPaymentRequested(recipientAddress, symbol, rawAmount, chainId)
                        onShowReplyArea: (messageId) => {
                                            d.showReplyArea(messageId)
                                        }
--- a/ui/app/AppLayouts/Chat/views/ChatContentView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatContentView.qml
@ -50,6 +50,7 @@ ColumnLayout {
    }

    signal openStickerPackPopup(string stickerPackId)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)

    property bool isBlocked: false
    property bool isUserAllowedToSendMessage: root.rootStore.isUserAllowedToSendMessage
@ -114,6 +115,7 @@ ColumnLayout {
            onOpenStickerPackPopup: {
                root.openStickerPackPopup(stickerPackId);
            }
+            onTokenPaymentRequested: root.tokenPaymentRequested(recipientAddress, symbol, rawAmount, chainId)
            onEditModeChanged: {
                if (!editModeOn)
                    root.forceInputFocus()
--- a/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatMessagesView.qml
@ -55,6 +55,7 @@ Item {
    property bool sendViaPersonalChatEnabled

    signal openStickerPackPopup(string stickerPackId)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)
    signal showReplyArea(string messageId, string author)
    signal editModeChanged(bool editModeOn)

@ -377,6 +378,8 @@ Item {
                root.openStickerPackPopup(stickerPackId);
            }

+            onTokenPaymentRequested: root.tokenPaymentRequested(recipientAddress, symbol, rawAmount, chainId)
+
            onShowReplyArea: {
                root.showReplyArea(messageId, author)
            }
--- a/ui/app/AppLayouts/Chat/views/ChatView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatView.qml
@ -120,6 +120,7 @@ StatusSectionLayout {
    signal invitationPendingClicked

    signal buyStickerPackRequested(string packId, int price)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)

    Connections {
        target: root.rootStore.stickersStore.stickersModule
@ -293,6 +294,7 @@ StatusSectionLayout {
            onOpenStickerPackPopup: {
                Global.openPopup(statusStickerPackClickPopup, {packId: stickerPackId, store: root.stickersPopup.store} )
            }
+            onTokenPaymentRequested: root.tokenPaymentRequested(recipientAddress, symbol, rawAmount, chainId)
        }
    }

--- a/ui/app/mainui/AppMain.qml
+++ b/ui/app/mainui/AppMain.qml
@ -735,21 +735,6 @@ Item {
            }
        }

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

                                onBuyStickerPackRequested: sendModalHandler.buyStickerPack(packId, price)
+                                onTokenPaymentRequested: sendModalHandler.openTokenPaymentRequest(recipientAddress, symbol, rawAmount, chainId)
                            }
                        }
                    }
@ -1836,6 +1822,7 @@ Item {
                                }

                                onBuyStickerPackRequested: sendModalHandler.buyStickerPack(packId, price)
+                                onTokenPaymentRequested: sendModalHandler.openTokenPaymentRequest(recipientAddress, symbol, rawAmount, chainId)
                            }
                        }
                    }
--- a/ui/app/mainui/SendModalHandler.qml
+++ b/ui/app/mainui/SendModalHandler.qml
@ -140,6 +140,17 @@ QtObject {
        openSend(params)
    }

+    function openTokenPaymentRequest(recipientAddress, symbol, rawAmount, chainId) {
+        const params = {
+            preSelectedHoldingID: symbol,
+            preSelectedHoldingType: Constants.TokenType.ERC20,
+            preDefinedRawAmountToSend: rawAmount,
+            preSelectedChainId: chainId,
+            preSelectedRecipient: recipientAddress
+        }
+        openSend(params)
+    }
+
    readonly property Component sendModalComponent: Component {
        SendModal {
            loginType: root.loginType
--- a/ui/imports/shared/controls/ShapeRectangle.qml
+++ b/ui/imports/shared/controls/ShapeRectangle.qml
@ -42,8 +42,6 @@ Shape {
    property int rightBottomRadius: radius
    readonly property alias path: path

-    asynchronous: true
-
    // design values; Shape doesn't have an implicit size
    implicitWidth: 448
    implicitHeight: 44
--- a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
+++ b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
@ -66,17 +66,19 @@ CalloutCard {

                StatusBaseText {
                    Layout.fillWidth: true
-                    Layout.fillHeight: true
                    text: qsTr("Payment request")
                    font.pixelSize: Theme.additionalTextSize
                    font.weight: Font.Medium
                }
-                RowLayout {
+                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    StatusBaseText {
-                        Layout.maximumWidth: parent.width * 0.8
-                        Layout.fillHeight: true
+                        id: amountText
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.rightMargin: symbolText.paintedWidth
                        font.pixelSize: Theme.tertiaryTextFontSize
                        color: Theme.palette.baseColor1
                        verticalAlignment: Text.AlignVCenter
@ -84,7 +86,10 @@ CalloutCard {
                        text: root.amount
                    }
                    StatusBaseText {
-                        Layout.fillHeight: true
+                        id: symbolText
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.leftMargin: amountText.paintedWidth + Theme.halfPadding
                        font.pixelSize: Theme.tertiaryTextFontSize
                        color: Theme.palette.baseColor1
                        verticalAlignment: Text.AlignVCenter
--- a/ui/imports/shared/views/chat/MessageView.qml
+++ b/ui/imports/shared/views/chat/MessageView.qml
@ -246,6 +246,7 @@ Loader {

    signal openStickerPackPopup(string stickerPackId)
    signal sendViaPersonalChatRequested(string recipientAddress)
+    signal tokenPaymentRequested(string recipientAddress, string symbol, string rawAmount, int chainId)

    z: (typeof chatLogView === "undefined") ? 1 : (chatLogView.count - index)

@ -989,7 +990,7 @@ Loader {
                        onSetNeverAskAboutUnfurlingAgain: root.sharedRootStore.setNeverAskAboutUnfurlingAgain(neverAskAgain)
                        onPaymentRequestClicked: (index) => {
                            const request = StatusQUtils.ModelUtils.get(paymentRequestModel, index)
-                            Global.paymentRequestClicked(request.receiver, request.symbol, request.amount, request.chainId)
+                            root.tokenPaymentRequested(request.receiver, request.symbol, request.amount, request.chainId)
                        }

                        Component.onCompleted: {
--- a/ui/imports/utils/Global.qml
+++ b/ui/imports/utils/Global.qml
@ -68,7 +68,6 @@ QtObject {
    signal setNthEnabledSectionActive(int nthSection)
    signal appSectionBySectionTypeChanged(int sectionType, int subsection, int subSubsection, var data)

-    signal paymentRequestClicked(string receiverAddress, string symbol, string amount, int chainId)
    signal switchToCommunity(string communityId)
    signal switchToCommunitySettings(string communityId)
    signal switchToCommunityChannelsView(string communityId)