status-desktop/ui/app/AppLayouts/Chat/views/ChatColumnView.qml

import QtQuick 2.13
import Qt.labs.platform 1.1
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.0

import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1

import utils 1.0
import shared 1.0
import shared.popups 1.0
import shared.status 1.0
import shared.controls 1.0
import shared.views.chat 1.0

import "../helpers"
import "../controls"
import "../popups"
import "../panels"
import "../../Wallet"

Item {
    id: root
    anchors.fill: parent
    property var rootStore
    property alias pinnedMessagesPopupComponent: pinnedMessagesPopupComponent
    property int chatGroupsListViewCount: 0
    property bool isReply: false
    property bool isImage: false
    property bool isExtendedInput: isReply || isImage
    property bool isConnected: false
    property string contactToRemove: ""
    property string activeChatId: root.rootStore.chatsModelInst.channelView.activeChannel.id
    property bool isBlocked: root.rootStore.contactsModuleInst.model.isContactBlocked(activeChatId)
    property bool isContact: root.rootStore.isContactAdded(activeChatId)
//    property bool contactRequestReceived: root.rootStore.contactsModuleInst.model.contactRequestReceived(activeChatId)
    property string currentNotificationChatId
    property string currentNotificationCommunityId
    property var currentTime: 0
    property var idMap: ({})
    property Timer timer: Timer { }
    property var userList
    property var onActivated: function () {
        if(stackLayoutChatMessages.currentIndex >= 0 && stackLayoutChatMessages.currentIndex < stackLayoutChatMessages.children.length)
            stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
    }

    function hideChatInputExtendedArea () {
        if(stackLayoutChatMessages.currentIndex >= 0 && stackLayoutChatMessages.currentIndex < stackLayoutChatMessages.children.length)
            stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].chatInput.hideExtendedArea()
    }

    function showReplyArea() {
        isReply = true;
        isImage = false;
        let replyMessageIndex = root.rootStore.chatsModelInst.messageView.messageList.getMessageIndex(SelectedMessage.messageId);
        if (replyMessageIndex === -1) return;
        let userName = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "userName")
        let message = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "message")
        let identicon = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "identicon")
        let image = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "image")
        let sticker = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "sticker")
        let contentType = root.rootStore.chatsModelInst.messageView.messageList.getMessageData(replyMessageIndex, "contentType")

        if(stackLayoutChatMessages.currentIndex >= 0 && stackLayoutChatMessages.currentIndex < stackLayoutChatMessages.children.length)
            stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].chatInput.showReplyArea(userName, message, identicon, contentType, image, sticker)
    }

    function requestAddressForTransaction(address, amount, tokenAddress, tokenDecimals = 18) {
        amount =  root.rootStore.utilsModelInst.eth2Wei(amount.toString(), tokenDecimals)
        root.rootStore.chatsModelInst.transactions.requestAddress(activeChatId,
                                               address,
                                               amount,
                                               tokenAddress)
        txModalLoader.close()
    }
    function requestTransaction(address, amount, tokenAddress, tokenDecimals = 18) {
        amount =  root.rootStore.utilsModelInst.eth2Wei(amount.toString(), tokenDecimals)
        root.rootStore.chatsModelInst.transactions.request(activeChatId,
                                        address,
                                        amount,
                                        tokenAddress)
        txModalLoader.close()
    }

    function clickOnNotification() {
        // So far we're just showing this app as the top most window. Once we decide about the way
        // how to notify the app what channle should be displayed within the app when user clicks
        // notificaiton bubble this part should be updated accordingly.
        //
        // I removed part of this function which caused app crash.
        applicationWindow.show()
        applicationWindow.raise()
        applicationWindow.requestActivate()
    }

    function positionAtMessage(messageId, isSearch = false) {
        stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].message.scrollToMessage(messageId, isSearch);
    }

    Timer {
        interval: 60000; // 1 min
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            root.currentTime = Date.now()
        }
    }

    MessageContextMenuView {
        id: contextmenu
        store: root.rootStore
        reactionModel: root.rootStore.emojiReactionsModel
    }

    StackLayout {
        anchors.fill: parent
        currentIndex:  root.rootStore.chatsModelInst.channelView.activeChannelIndex > -1
                       && chatGroupsListViewCount > 0 ? 0 : 1

        StatusImageModal {
            id: imagePopup
            onClicked: {
                if (button === Qt.LeftButton) {
                    imagePopup.close()
                }
                else if(button === Qt.RightButton) {
                    contextmenu.imageSource = imagePopup.imageSource
                    contextmenu.hideEmojiPicker = true
                    contextmenu.isRightClickOnImage = true;
                    contextmenu.show()
                }
            }
        }

        ColumnLayout {
            spacing: 0

            StatusChatToolBar {
                id: topBar
                Layout.fillWidth: true

                property string chatId: root.rootStore.chatsModelInst.channelView.activeChannel.id
                property string profileImage: appMain.getProfileImage(chatId) || ""

                chatInfoButton.title: Utils.removeStatusEns(root.rootStore.chatsModelInst.channelView.activeChannel.name)
                chatInfoButton.subTitle: {
                    switch (root.rootStore.chatsModelInst.channelView.activeChannel.chatType) {
                    case Constants.chatTypeOneToOne:
                        return (root.isContact ?
                                    //% "Contact"
                                    qsTrId("chat-is-a-contact") :
                                    //% "Not a contact"
                                    qsTrId("chat-is-not-a-contact"))
                    case Constants.chatTypePublic:
                        //% "Public chat"
                        return qsTrId("public-chat")
                    case Constants.chatTypePrivateGroupChat:
                        let cnt = root.rootStore.chatsModelInst.channelView.activeChannel.members.rowCount();
                        //% "%1 members"
                        if(cnt > 1) return qsTrId("-1-members").arg(cnt);
                        //% "1 member"
                        return qsTrId("1-member");
                    case Constants.chatTypeCommunity:
                        return Utils.linkifyAndXSS(root.rootStore.chatsModelInst.channelView.activeChannel.description).trim()
                    default:
                        return ""
                    }
                }
                chatInfoButton.image.source: profileImage || root.rootStore.chatsModelInst.channelView.activeChannel.identicon
                chatInfoButton.image.isIdenticon: !!!profileImage && root.rootStore.chatsModelInst.channelView.activeChannel.identicon
                chatInfoButton.icon.color: root.rootStore.chatsModelInst.channelView.activeChannel.color
                chatInfoButton.type: root.rootStore.chatsModelInst.channelView.activeChannel.chatType
                chatInfoButton.pinnedMessagesCount: root.rootStore.chatsModelInst.messageView.pinnedMessagesList.count
                chatInfoButton.muted: root.rootStore.chatsModelInst.channelView.activeChannel.muted

                chatInfoButton.onPinnedMessagesCountClicked: openPopup(pinnedMessagesPopupComponent)
                chatInfoButton.onUnmute: root.rootStore.chatsModelInst.channelView.unmuteChatItem(chatsModel.channelView.activeChannel.id)

                chatInfoButton.sensor.enabled: root.rootStore.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypePublic &&
                                               root.rootStore.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeCommunity
                chatInfoButton.onClicked: {
                    switch (root.rootStore.chatsModelInst.channelView.activeChannel.chatType) {
                    case Constants.chatTypePrivateGroupChat:
                        openPopup(groupInfoPopupComponent, {
                            channelType: GroupInfoPopup.ChannelType.ActiveChannel,
                            channel: root.rootStore.chatsModelInst.channelView.activeChannel
                        })
                        break;
                    case Constants.chatTypeOneToOne:
                        openProfilePopup(root.rootStore.chatsModelInst.userNameOrAlias(chatsModel.channelView.activeChannel.id),
                                         root.rootStore.chatsModelInst.channelView.activeChannel.id, profileImage
                                         || root.rootStore.chatsModelInst.channelView.activeChannel.identicon,
                                         "", root.rootStore.chatsModelInst.channelView.activeChannel.nickname)
                        break;
                    }
                }

                membersButton.visible: (localAccountSensitiveSettings.showOnlineUsers || root.rootStore.chatsModelInst.communities.activeCommunity.active)
                                       && root.rootStore.chatsModelInst.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne
                membersButton.highlighted: localAccountSensitiveSettings.expandUsersList
                notificationButton.visible: localAccountSensitiveSettings.isActivityCenterEnabled
                notificationButton.tooltip.offset: localAccountSensitiveSettings.expandUsersList ? 0 : 14
                notificationCount: root.rootStore.chatsModelInst.activityNotificationList.unreadCount

                onSearchButtonClicked: searchPopup.open()

                onMembersButtonClicked: localAccountSensitiveSettings.expandUsersList = !localAccountSensitiveSettings.expandUsersList
                onNotificationButtonClicked: activityCenter.open()

                popupMenu: ChatContextMenuView {
                    store: root.rootStore
                    onOpened: {
                        chatItem = root.rootStore.chatsModelInst.channelView.activeChannel
                    }
                }
            }

            Rectangle {
                id: connectedStatusRect
                Layout.fillWidth: true
                height: 40
                Layout.alignment: Qt.AlignHCenter
                z: 60
                visible: false
                color: isConnected ? Style.current.green : Style.current.darkGrey
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    color: Style.current.white
                    id: connectedStatusLbl
                    text: isConnected ?
                              //% "Connected"
                              qsTrId("connected") :
                              //% "Disconnected"
                              qsTrId("disconnected")
                }

                Connections {
                    target: root.rootStore.chatsModelInst
                    onOnlineStatusChanged: {
                        if (connected == isConnected) return;
                        isConnected = connected;
                        if(isConnected){
                            timer.setTimeout(function(){
                                connectedStatusRect.visible = false;
                            }, 5000);
                        } else {
                            connectedStatusRect.visible = true;
                        }
                    }
                }
                Component.onCompleted: {
                    isConnected = root.rootStore.chatsModelInst.isOnline
                    if(!isConnected){
                        connectedStatusRect.visible = true
                    }
                }
            }

            // Blocked User Status Bar
            StatusBanner {
                id: blockedUsrBar
                width: parent.width
                visible: isBlocked
                type: StatusBanner.Type.Danger
                statusText: qsTr("Blocked")
            }

            StackLayout {
                id: stackLayoutChatMessages
                Layout.fillWidth: true
                Layout.fillHeight: true
                clip: true
                currentIndex: root.rootStore.chatsModelInst.messageView.getMessageListIndex(root.rootStore.chatsModelInst.channelView.activeChannelIndex)
                Repeater {
                    model: root.rootStore.chatsModelInst.messageView
                    ColumnLayout {
                        property alias chatInput: chatInput
                        property alias message: messageLoader.item
                        Loader {
                            id: messageLoader
                            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.preferredWidth: parent.width

                            active: stackLayoutChatMessages.currentIndex === index
                            sourceComponent: ChatMessagesView {
                                id: chatMessages
                                store: root.rootStore
                                messageList: messages
                                messageContextMenuInst: contextmenu
                                Component.onCompleted: {
                                    root.userList = chatMessages.messageList.userList;
                                }
                            }
                        }
                        Item {
                            id: inputArea
                            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                            Layout.fillWidth: true
                            Layout.preferredWidth: parent.width
                            height: chatInput.height
                            Layout.preferredHeight: height

                            Connections {
                                target: root.rootStore.chatsModelInst.messageView
                                onLoadingMessagesChanged:
                                    if(value){
                                        loadingMessagesIndicator.active = true
                                    } else {
                                        timer.setTimeout(function(){
                                            loadingMessagesIndicator.active = false;
                                        }, 5000);
                                    }
                            }

                            Loader {
                                id: loadingMessagesIndicator
                                active: root.rootStore.chatsModelInst.messageView.loadingMessages
                                sourceComponent: loadingIndicator
                                anchors.right: parent.right
                                anchors.bottom: chatInput.top
                                anchors.rightMargin: Style.current.padding
                                anchors.bottomMargin: Style.current.padding
                            }

                            Component {
                                id: loadingIndicator
                                LoadingAnimation { }
                            }

                            StatusChatInput {
                                id: chatInput
                                visible: {
                                    if (root.rootStore.chatsModelInst.channelView.activeChannel.chatType === Constants.chatTypePrivateGroupChat) {
                                        return root.rootStore.chatsModelInst.channelView.activeChannel.isMember
                                    }
                                    if (root.rootStore.chatsModelInst.channelView.activeChannel.chatType === Constants.chatTypeOneToOne) {
                                        return isContact
                                    }
                                    const community = root.rootStore.chatsModelInst.communities.activeCommunity
                                    return !community.active ||
                                            community.access === Constants.communityChatPublicAccess ||
                                            community.admin ||
                                            root.rootStore.chatsModelInst.channelView.activeChannel.canPost
                                }
                                isContactBlocked: isBlocked
                                chatInputPlaceholder: isBlocked ?
                                                          //% "This user has been blocked."
                                                          qsTrId("this-user-has-been-blocked-") :
                                                          //% "Type a message."
                                                          qsTrId("type-a-message-")
                                anchors.bottom: parent.bottom
                                recentStickers: root.rootStore.chatsModelInst.stickers.recent
                                stickerPackList: root.rootStore.chatsModelInst.stickers.stickerPacks
                                chatType: root.rootStore.chatsModelInst.channelView.activeChannel.chatType
                                onSendTransactionCommandButtonClicked: {
                                    if (root.rootStore.chatsModelInst.channelView.activeChannel.ensVerified) {
                                        txModalLoader.sourceComponent = cmpSendTransactionWithEns
                                    } else {
                                        txModalLoader.sourceComponent = cmpSendTransactionNoEns
                                    }
                                    txModalLoader.item.open()
                                }
                                onReceiveTransactionCommandButtonClicked: {
                                    txModalLoader.sourceComponent = cmpReceiveTransaction
                                    txModalLoader.item.open()
                                }
                                onStickerSelected: {
                                    root.rootStore.chatsModelInst.stickers.send(hashId, chatInput.isReply ? SelectedMessage.messageId : "", packId)
                                }
                                onSendMessage: {
                                    if (chatInput.fileUrls.length > 0){
                                        root.rootStore.chatsModelInst.sendImages(JSON.stringify(fileUrls));
                                    }
                                    let msg = root.rootStore.chatsModelInst.plainText(Emoji.deparse(chatInput.textInput.text))
                                    if (msg.length > 0){
                                        msg = chatInput.interpretMessage(msg)
                                        root.rootStore.chatsModelInst.messageView.sendMessage(msg, chatInput.isReply ? SelectedMessage.messageId : "", Utils.isOnlyEmoji(msg) ? Constants.emojiType : Constants.messageType, false);
                                        if(event) event.accepted = true
                                        sendMessageSound.stop();
                                        Qt.callLater(sendMessageSound.play);

                                        chatInput.textInput.clear();
                                        chatInput.textInput.textFormat = TextEdit.PlainText;
                                        chatInput.textInput.textFormat = TextEdit.RichText;
                                    }
                                }
                            }
                        }
                        Connections {
                            target: root.rootStore.chatsModelInst.channelView
                            onActiveChannelChanged: {
                                isBlocked = root.rootStore.contactsModuleInst.model.isContactBlocked(activeChatId);
                                chatInput.suggestions.hide();
                                if(stackLayoutChatMessages.currentIndex >= 0 && stackLayoutChatMessages.currentIndex < stackLayoutChatMessages.children.length)
                                    stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
                            }
                        }
                    }
                }
            }

            ChatRequestMessagePanel {
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                Layout.fillWidth: true
                Layout.bottomMargin: Style.current.bigPadding
                isContact: root.isContact
                visible: root.rootStore.chatsModelInst.channelView.activeChannel.chatType === Constants.chatTypeOneToOne
                    && (!root.isContact /*|| !contactRequestReceived*/)
                onAddContactClicked: {
                    root.rootStore.addContact(activeChatId);
                }
            }
        }

        EmptyChatPanel {
            onShareChatKeyClicked: openProfilePopup(userProfile.username, userProfile.pubKey, userProfile.thumbnailImage);
        }

        Loader {
            id: txModalLoader
            function close() {
                if (!this.item) {
                    return
                }
                this.item.close()
                this.closed()
            }
            function closed() {
                this.sourceComponent = undefined
            }
        }

        Component {
            id: cmpSendTransactionNoEns
            ChatCommandModal {
                id: sendTransactionNoEns
                store: root.rootStore
                onClosed: {
                    txModalLoader.closed()
                }
                sendChatCommand: root.requestAddressForTransaction
                isRequested: false
                //% "Send"
                commandTitle: qsTrId("command-button-send")
                header.title: commandTitle
                //% "Request Address"
                finalButtonLabel: qsTrId("request-address")
                selectRecipient.selectedRecipient: {
                    return {
                        address: Constants.zeroAddress, // Setting as zero address since we don't have the address yet
                        alias: root.rootStore.chatsModelInst.channelView.activeChannel.alias,
                        identicon: root.rootStore.chatsModelInst.channelView.activeChannel.identicon,
                        name: root.rootStore.chatsModelInst.channelView.activeChannel.name,
                        type: RecipientSelector.Type.Contact
                    }
                }
                selectRecipient.selectedType: RecipientSelector.Type.Contact
                selectRecipient.readOnly: true
            }
        }

        Component {
            id: cmpReceiveTransaction
            ChatCommandModal {
                id: receiveTransaction
                store: root.rootStore
                onClosed: {
                    txModalLoader.closed()
                }
                sendChatCommand: root.requestTransaction
                isRequested: true
                //% "Request"
                commandTitle: qsTrId("wallet-request")
                header.title: commandTitle
                //% "Request"
                finalButtonLabel: qsTrId("wallet-request")
                selectRecipient.selectedRecipient: {
                    return {
                        address: Constants.zeroAddress, // Setting as zero address since we don't have the address yet
                        alias: root.rootStore.chatsModelInst.channelView.activeChannel.alias,
                        identicon: root.rootStore.chatsModelInst.channelView.activeChannel.identicon,
                        name: root.rootStore.chatsModelInst.channelView.activeChannel.name,
                        type: RecipientSelector.Type.Contact
                    }
                }
                selectRecipient.selectedType: RecipientSelector.Type.Contact
                selectRecipient.readOnly: true
            }
        }

        Component {
            id: cmpSendTransactionWithEns
            SendModal {
                id: sendTransactionWithEns
                onOpened: {
                    root.rootStore.walletModelInst.gasView.getGasPrice()
                }
                onClosed: {
                    txModalLoader.closed()
                }
                selectRecipient.readOnly: true
                selectRecipient.selectedRecipient: {
                    return {
                        address: "",
                        alias: root.rootStore.chatsModelInst.channelView.activeChannel.alias,
                        identicon: root.rootStore.chatsModelInst.channelView.activeChannel.identicon,
                        name: root.rootStore.chatsModelInst.channelView.activeChannel.name,
                        type: RecipientSelector.Type.Contact,
                        ensVerified: true
                    }
                }
                selectRecipient.selectedType: RecipientSelector.Type.Contact
            }
        }

        ActivityCenterPopup {
            id: activityCenter
            height: root.height - (topBar.height * 2) // TODO get screen size
            y: topBar.height
            store: root.rootStore
        }

        Connections {
            target: root.rootStore.contactsModuleInst.model
            onContactListChanged: {
                root.isBlocked = root.rootStore.contactsModuleInst.model.isContactBlocked(activeChatId);
                root.isContact = root.rootStore.contactsModuleInst.model.isAdded(activeChatId);
            }
        }

        Connections {
            target: root.rootStore.chatsModelInst.channelView
            onActiveChannelChanged: {
                root.rootStore.chatsModelInst.messageView.hideLoadingIndicator()
                SelectedMessage.reset();
                chatColumn.isReply = false;
            }
        }

        Connections {
            target: systemTray
            onMessageClicked: function () {
                clickOnNotification()
            }
        }

        Component {
            id: pinnedMessagesPopupComponent
            PinnedMessagesPopup {
                id: pinnedMessagesPopup
                rootStore: root.rootStore
                messageStore: root.rootStore.messageStore
                onClosed: destroy()
            }
        }

        Connections {
            target: root.rootStore.chatsModelInst.messageView

            onSearchedMessageLoaded: {
                positionAtMessage(messageId, true);
            }

            onMessageNotificationPushed: function(messageId, communityId, chatId, msg, contentType, chatType, timestamp, identicon, username, hasMention, isAddedContact, channelName) {
                if (localAccountSensitiveSettings.notificationSetting == Constants.notifyAllMessages ||
                        (localAccountSensitiveSettings.notificationSetting == Constants.notifyJustMentions && hasMention)) {
                    if (chatId === root.rootStore.chatsModelInst.channelView.activeChannel.id && applicationWindow.active === true) {
                        // Do not show the notif if we are in the channel already and the window is active and focused
                        return
                    }

                    root.currentNotificationChatId = chatId
                    root.currentNotificationCommunityId = null

                    let name;
                    if (localAccountSensitiveSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous) {
                        name = "Status"
                    } else if (chatType === Constants.chatTypePublic) {
                        name = chatId
                    } else {
                        name = chatType === Constants.chatTypePrivateGroupChat ? Utils.filterXSS(channelName) : Utils.removeStatusEns(username)
                    }

                    let message;
                    if (localAccountSensitiveSettings.notificationMessagePreviewSetting > Constants.notificationPreviewNameOnly) {
                        switch(contentType){
                            //% "Image"
                        case Constants.imageType: message = qsTrId("image"); break
                            //% "Sticker"
                        case Constants.stickerType: message = qsTrId("sticker"); break
                        default: message = msg // don't parse emojis here as it emits HTML
                        }
                    } else {
                        //% "You have a new message"
                        message = qsTrId("you-have-a-new-message")
                    }

                    currentlyHasANotification = true

                    if (Qt.platform.os === "linux") {
                        // Linux Notifications are not implemented in Nim/C++ yet
                        return systemTray.showMessage(name, message, systemTray.icon.source, 4000)
                    }

                    // Note:
                    // Show notification should be moved to the nim side.
                    // Left here only cause we don't have a way to deal with translations on the nim side.
                    root.rootStore.chatsModelInst.showOSNotification(name,
                                                  message,
                                                  Constants.osNotificationType.newMessage,
                                                  communityId,
                                                  chatId,
                                                  messageId,
                                                  localAccountSensitiveSettings.useOSNotifications)
                }
            }
        }

        Component.onCompleted: {
            if(stackLayoutChatMessages.currentIndex >= 0 && stackLayoutChatMessages.currentIndex < stackLayoutChatMessages.children.length)
                stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
        }

        Connections {
            target: root.rootStore.chatsModelInst.stickers
            onTransactionWasSent: {
                //% "Transaction pending..."
                toastMessage.title = qsTr("Transaction pending...")
                toastMessage.source = Style.svg("loading")
                toastMessage.iconColor = Style.current.primary
                toastMessage.iconRotates = true
                toastMessage.link = `${walletModel.utilsView.etherscanLink}/${txResult}`
                toastMessage.open()
            }
            onTransactionCompleted: {
                toastMessage.title = !success ?
                                     //% "Could not buy Stickerpack"
                                     qsTrId("could-not-buy-stickerpack")
                                     :
                                     //% "Stickerpack bought successfully"
                                     qsTrId("stickerpack-bought-successfully");
                if (success) {
                    toastMessage.source = Style.svg("check-circle")
                    toastMessage.iconColor = Style.current.success
                } else {
                    toastMessage.source = Style.svg("block-icon")
                    toastMessage.iconColor = Style.current.danger
                }

                toastMessage.link = `${walletModel.utilsView.etherscanLink}/${txHash}`
                toastMessage.open()
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;formeditorColor:"#ffffff";height:770;width:800}
}
##^##*/