status-desktop/ui/imports/shared/views/chat/TransactionBubbleView.qml

import QtQuick 2.3

import StatusQ.Core 0.1

import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.views.chat 1.0
import shared.controls.chat 1.0
import shared.controls 1.0
import shared.stores 1.0

Item {
    id: root
    width: rectangleBubble.width
    height: rectangleBubble.height

    property var store              // expected ui/app/AppLayouts/Chat/stores/RootStore.qml
    property var contactsStore

    property var transactionParams

    property var transactionParamsObject: {
        try {
            return JSON.parse(transactionParams)
        } catch (e) {
            console.error('Error parsing command parameters')
            console.error('JSON:', transactionParams)
            console.error('Error:', e)
            return {
                id: "",
                fromAddress: "",
                address: "",
                contract: "",
                value: "",
                transactionHash: "",
                commandState: 1,
                signature: null
            }
        }
    }

    property var token:{
        try {
            return JSON.parse(transactionParamsObject.contract)
        } catch (e) {
            console.error('Error parsing command parameters')
            console.error('JSON:', transactionParamsObject.contract)
            console.error('Error:', e)
            return ""
        }
    }

    property var selectedRecipient: {
        return {
            address: transactionParamsObject.address,
            name: senderDisplayName,
            type: RecipientSelector.Type.Contact,
            alias: senderDisplayName
        }
    }

    property string tokenAmount: transactionParamsObject.value
    property string tokenSymbol: token.symbol || ""
    property string fiatValue: {
        if (!tokenAmount || !token.symbol) {
            return "0"
        }
        return root.store.getFiatValue(tokenAmount, token.symbol) + " " + defaultFiatSymbol
    }
    property int state: transactionParamsObject.commandState

    // Any transaction where isCurrentUser is true is actually outgoing transaction.
    property bool outgoing: isCurrentUser

    property int innerMargin: 12
    property bool isError: transactionParamsObject.contract === "{}"
    onTokenSymbolChanged: {
        if (!!tokenSymbol) {
            tokenImage.source = Style.png("tokens/"+root.tokenSymbol)
        }
    }

    Rectangle {
        id: rectangleBubble
        width: (bubbleLoader.active ? bubbleLoader.width : valueContainer.width)
               + timeText.width + 3 * root.innerMargin
        height: childrenRect.height + root.innerMargin
        radius: 16
        color: Style.current.background
        border.color: Style.current.border
        border.width: 1

        StyledText {
            id: title
            color: Style.current.secondaryText
            text: {
                if (root.state === Constants.transactionRequested) {
                    let prefix = outgoing? "↑ " : "↓ "
                    return prefix + qsTr("Transaction request")
                }

                return outgoing ?
                    qsTr("↑ Outgoing transaction") :
                    qsTr("↓ Incoming transaction")
            }
            font.weight: Font.Medium
            anchors.top: parent.top
            anchors.topMargin: Style.current.halfPadding
            anchors.left: parent.left
            anchors.leftMargin: root.innerMargin
            font.pixelSize: 13
        }

        Item {
            id: valueContainer
            width: childrenRect.width
            height: tokenText.height + fiatText.height
            anchors.top: title.bottom
            anchors.topMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: root.innerMargin

            StyledText {
                id: txtError
                color: Style.current.danger
                visible: root.isError
                text: qsTr("Token not found on your current network")
            }

            Image {
                id: tokenImage
                visible: !root.isError
                width: 24
                height: 24
                anchors.verticalCenter: parent.verticalCenter
            }

            StyledText {
                id: tokenText
                visible: !root.isError
                color: Style.current.textColor
                text: `${root.tokenAmount} ${root.tokenSymbol}`
                anchors.left: tokenImage.right
                anchors.leftMargin: Style.current.halfPadding
                font.pixelSize: 22
            }

            StyledText {
                id: fiatText
                visible: !root.isError
                color: Style.current.secondaryText
                text: root.fiatValue
                anchors.top: tokenText.bottom
                anchors.left: tokenText.left
                font.pixelSize: 13
            }
        }

        Loader {
            id: bubbleLoader
            active: {
                return !root.isError && (
                    isCurrentUser ||
                    (!isCurrentUser &&
                        !(root.state === Constants.addressRequested ||
                        root.state === Constants.transactionRequested)
                    )
                )
            }
            sourceComponent: stateBubbleComponent
            anchors.top: valueContainer.bottom
            anchors.topMargin: Style.current.halfPadding
            anchors.left: parent.left
            anchors.leftMargin: root.innerMargin
        }

        Component {
            id: stateBubbleComponent

            StateBubble {
                state: root.state
                outgoing: root.outgoing
            }
        }

        Loader {
            id: buttonsLoader
            active: !root.isError && (
                    (root.state === Constants.addressRequested && !root.outgoing) ||
                    (root.state === Constants.addressReceived && root.outgoing) ||
                    (root.state === Constants.transactionRequested && !root.outgoing)
            )
            sourceComponent: root.outgoing ? signAndSendComponent : acceptTransactionComponent
            anchors.top: bubbleLoader.active ? bubbleLoader.bottom : valueContainer.bottom
            anchors.topMargin: bubbleLoader.active ? root.innerMargin : 20
            width: parent.width
        }

        Component {
            id: acceptTransactionComponent

            AcceptTransactionView {
                state: root.state
                store: root.store
                contactsStore: root.contactsStore
                token: root.token
                fiatValue: root.fiatValue
                tokenAmount: root.tokenAmount
                selectedRecipient: root.selectedRecipient
            }
        }

        Component {
            id: signAndSendComponent

            SendTransactionButton {
                selectedAsset: token
                selectedAmount: tokenAmount
                selectedFiatAmount: fiatValue
                fromAddress: transactionParamsObject.fromAddress
                selectedRecipient: root.selectedRecipient
                onSendTransaction: {
                    // TODO: https://github.com/status-im/status-desktop/issues/6778
                    console.log("not implemented")
                }
            }
        }

        StyledText {
            id: timeText
            color: Style.current.secondaryText
            text: LocaleUtils.formatTime(messageTimestamp, Locale.ShortFormat)
            anchors.left: bubbleLoader.active ? bubbleLoader.right : undefined
            anchors.leftMargin: bubbleLoader.active ? 13 : 0
            anchors.right: bubbleLoader.active ? undefined : parent.right
            anchors.rightMargin: bubbleLoader.active ? 0 : root.innerMargin
            anchors.bottom: bubbleLoader.active ? bubbleLoader.bottom : buttonsLoader.top
            anchors.bottomMargin: bubbleLoader.active ? -root.innerMargin : 7
            font.pixelSize: 10
        }
    }
}