status-desktop/ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml

import QtQuick 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls 2.14
import QtQuick.Window 2.12
import QtGraphicalEffects 1.15

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

import shared.controls 1.0
import shared.panels 1.0
import shared.stores 1.0
import utils 1.0
import shared.popups.send 1.0

import AppLayouts.Communities.stores 1.0
import AppLayouts.Profile.stores 1.0 as ProfileStores

import "../controls"
import "../popups"
import "../stores" as WalletStores
import ".."
import "../panels"

Item {
    id: root

    property var overview: WalletStores.RootStore.overview
    property ProfileStores.ContactsStore contactsStore
    property CommunitiesStore communitiesStore
    property NetworkConnectionStore networkConnectionStore
    property var controller
    property var sendModal
    property bool showAllAccounts: false

    readonly property alias transaction: d.transaction

    Component.onCompleted: d.updateTransactionDetails()

    QtObject {
        id: d

        readonly property var transaction: root.controller.activityEntry
        readonly property bool isTransactionValid: transaction !== undefined && !!transaction

        onTransactionChanged: {
            d.reEvaluateSender = !d.reEvaluateSender
            d.reEvaluateRecipient = !d.reEvaluateRecipient
            d.reEvaluateSender = !d.reEvaluateSender
            d.reEvaluateRecipient = !d.reEvaluateRecipient

            d.updateTransactionDetails()
        }

        property bool reEvaluateSender: true
        property bool reEvaluateRecipient: true

        property var details: root.controller.activityDetails
        readonly property bool isDetailsValid: details !== undefined && !!details

        onDetailsChanged: {
            if (!!d.details && !!d.details.input && d.details.input !== "0x") {
                d.loadingInputDate = true
                RootStore.fetchDecodedTxData(d.details.txHashOut, d.details.input)
            }
        }

        readonly property bool isIncoming: transactionType === Constants.TransactionType.Received || transactionType === Constants.TransactionType.ContractDeployment
        readonly property string networkShortName: d.isTransactionValid ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainId, "shortName") : ""
        readonly property string networkIcon: isTransactionValid ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainId, "iconUrl") : "network/Network=Custom"
        readonly property int blockNumber: isDetailsValid ? details.blockNumber : 0
        readonly property int blockNumberIn: isDetailsValid ? details.blockNumberIn : 0
        readonly property int blockNumberOut: isDetailsValid ? details.blockNumberOut : 0
        readonly property string networkShortNameOut: networkShortName
        readonly property string networkShortNameIn: transactionHeader.isMultiTransaction ? ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transaction.chainIdIn, "shortName") : ""
        readonly property string symbol: isTransactionValid ? transaction.symbol : ""
        readonly property string inSymbol: isTransactionValid ? transaction.inSymbol : ""
        readonly property string outSymbol: isTransactionValid ? transaction.outSymbol : ""
        readonly property var multichainNetworks: [] // TODO fill icon for networks for multichain
        readonly property string fiatValueFormatted: {
            if (!d.isTransactionValid || transactionHeader.isMultiTransaction || !symbol)
                return ""
            return RootStore.formatCurrencyAmount(transactionHeader.fiatValue, RootStore.currentCurrency)
        }
        readonly property string cryptoValueFormatted: {
            if (!d.isTransactionValid || transactionHeader.isMultiTransaction)
                return ""
            const formatted = RootStore.formatCurrencyAmount(transaction.amount, transaction.symbol)
            return symbol || (!d.isDetailsValid || !d.details.contract) ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenAddress, 4))
        }
        readonly property string outFiatValueFormatted: {
            if (!d.isTransactionValid || !transactionHeader.isMultiTransaction || !outSymbol)
                return ""
            return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue, RootStore.currentCurrency)
        }
        readonly property string outCryptoValueFormatted: {
            if (!d.isTransactionValid || !transactionHeader.isMultiTransaction)
                return ""
            const formatted = RootStore.formatCurrencyAmount(transaction.outAmount, transaction.outSymbol)
            return outSymbol || !transaction.tokenOutAddress ? formatted : "%1 (%2)".arg(formatted).arg(Utils.compactAddress(transaction.tokenOutAddress, 4))
        }
        readonly property real feeEthValue: d.details ? RootStore.getFeeEthValue(d.details.totalFees) : 0
        readonly property real feeFiatValue: RootStore.getFiatValue(d.feeEthValue, Constants.ethToken)
        readonly property int transactionType: d.isTransactionValid ? WalletStores.RootStore.transactionType(transaction) : Constants.TransactionType.Send
        readonly property bool isBridge: d.transactionType === Constants.TransactionType.Bridge

        property string decodedInputData: ""
        property bool loadingInputDate: false

        function retryTransaction() {
            // TODO handle failed transaction retry
        }

        function updateTransactionDetails() {
            d.decodedInputData = ""
            if (!d.transaction)
                return

            root.controller.fetchExtraTxDetails()
        }
    }

    Connections {
        target: RootStore.walletSectionInst
        function onTxDecoded(txHash: string, dataDecoded: string) {
            if (!d.isTransactionValid || (d.isDetailsValid && txHash !== d.details.txHashOut))
                return
            if (!dataDecoded) {
                d.loadingInputDate = false
                return
            }

            try {
                const decodedObject = JSON.parse(dataDecoded)
                let text = qsTr("Function: %1").arg(decodedObject.signature)
                text += "\n" + qsTr("MethodID: %1").arg(decodedObject.id)
                for (const [key, value] of Object.entries(decodedObject.inputs)) {
                    text += "\n[%1]: %2".arg(key).arg(value)
                }
                d.decodedInputData = text
            } catch(e) {
                console.error("Failed to parse decoded tx data. Data:", dataDecoded)
            }
            d.loadingInputDate = false
        }
    }

    StatusScrollView {
        id: scrollView
        anchors.fill: parent
        contentWidth: availableWidth

        Column {
            id: column
            width: scrollView.availableWidth
            spacing: Style.current.xlPadding + Style.current.halfPadding

            Column {
                width: parent.width
                spacing: Style.current.bigPadding

                TransactionDelegate {
                    id: transactionHeader
                    objectName: "transactionDetailHeader"
                    width: parent.width
                    leftPadding: 0
                    sensor.enabled: false
                    color: Theme.palette.transparent
                    state: "header"

                    showAllAccounts: root.showAllAccounts
                    modelData: transaction
                    timeStampText: d.isTransactionValid ? qsTr("Signed at %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)): ""
                    rootStore: RootStore
                    walletRootStore: WalletStores.RootStore
                    community: isModelDataValid && communityId && communitiesStore ? communitiesStore.getCommunityDetailsAsJson(communityId) : null

                    onRetryClicked: d.retryTransaction()
                }

                Separator { }
            }

            WalletTxProgressBlock {
                id: progressBlock
                width: Math.min(513, root.width)
                readonly property int latestBlockNumber: d.isTransactionValid && !pending && !error ? WalletStores.RootStore.getEstimatedLatestBlockNumber(d.transaction.chainId) : 0
                readonly property int latestBlockNumberIn: d.isTransactionValid && !pending && !error && transactionHeader.isMultiTransaction && d.isBridge ? WalletStores.RootStore.getEstimatedLatestBlockNumber(d.transaction.chainIdIn) : 0
                error: transactionHeader.transactionStatus === Constants.TransactionStatus.Failed
                pending: transactionHeader.transactionStatus === Constants.TransactionStatus.Pending
                outNetworkLayer: d.isTransactionValid ? Number(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", transactionHeader.isMultiTransaction ? d.transaction.chainIdOut : d.transaction.chainId, "layer")) : 0
                inNetworkLayer: d.isTransactionValid && transactionHeader.isMultiTransaction && d.isBridge ?
                                    ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "layer") : 0
                outNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0
                inNetworkTimestamp: d.isTransactionValid ? d.transaction.timestamp : 0
                outChainName: transactionHeader.isMultiTransaction ? transactionHeader.networkNameOut : transactionHeader.networkName
                inChainName: transactionHeader.isMultiTransaction && d.isBridge ? transactionHeader.networkNameIn : ""
                outNetworkConfirmations: d.isTransactionValid && latestBlockNumber > 0 ? latestBlockNumber - d.blockNumberOut : 0
                inNetworkConfirmations: d.isTransactionValid && latestBlockNumberIn > 0 ? latestBlockNumberIn - d.blockNumberIn : 0
            }

            Separator {
                width: progressBlock.width
            }

            WalletNftPreview {
                visible: d.isTransactionValid && transactionHeader.isNFT && !!transaction.nftImageUrl
                width: Math.min(304, progressBlock.width)
                nftName: d.isTransactionValid ? transaction.nftName : ""
                nftUrl: d.isTransactionValid && !!transaction.nftImageUrl ? transaction.nftImageUrl : ""
                strikethrough: d.transactionType === Constants.TransactionType.Destroy
                tokenId: d.isTransactionValid ? transaction.tokenID : ""
                tokenAddress: d.isTransactionValid ? transaction.tokenAddress : ""
                areTestNetworksEnabled: WalletStores.RootStore.areTestNetworksEnabled
                isGoerliEnabled: WalletStores.RootStore.isGoerliEnabled
            }

            Column {
                width: progressBlock.width
                spacing: 0

                StatusBaseText {
                    width: parent.width
                    font.pixelSize: 15
                    color: Theme.palette.directColor5
                    text: qsTr("Transaction summary")
                    elide: Text.ElideRight
                }

                Item {
                    width: parent.width
                    height: Style.current.smallPadding
                }

                DetailsPanel {
                    RowLayout {
                        spacing: 0
                        width: parent.width
                        height: fromNetworkTile.visible || toNetworkTile.visible ? 85 : 0
                        TransactionDataTile {
                            id: fromNetworkTile
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            title: qsTr("From")
                            subTitle: {
                                if (!d.isTransactionValid)
                                    return ""
                                switch(d.transactionType) {
                                case Constants.TransactionType.Swap:
                                    return !!d.outSymbol ? d.outSymbol : " "
                                case Constants.TransactionType.Bridge:
                                    return transactionHeader.networkNameOut
                                default:
                                    return ""
                                }
                            }
                            asset.name: {
                                if (!d.isTransactionValid)
                                    return ""
                                switch(d.transactionType) {
                                case Constants.TransactionType.Swap:
                                    return Constants.tokenIcon(d.outSymbol)
                                case Constants.TransactionType.Bridge:
                                    return Style.svg(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdOut, "iconUrl")) ?? Style.svg("network/Network=Custom")
                                default:
                                    return ""
                                }
                            }
                            visible: !!subTitle
                        }
                        TransactionDataTile {
                            id: toNetworkTile
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            title: qsTr("To")
                            subTitle: {
                                switch(d.transactionType) {
                                case Constants.TransactionType.Swap:
                                    return !!d.inSymbol ? d.inSymbol : " "
                                case Constants.TransactionType.Bridge:
                                    return transactionHeader.networkNameIn ?? " "
                                default:
                                    return ""
                                }
                            }
                            asset.name: {
                                switch(d.transactionType) {
                                case Constants.TransactionType.Swap:
                                    return Constants.tokenIcon(d.inSymbol)
                                case Constants.TransactionType.Bridge:
                                    return Style.svg(ModelUtils.getByKey(RootStore.flatNetworks, "chainId", d.transaction.chainIdIn, "iconUrl")) ?? Style.svg("network/Network=Custom")
                                default:
                                    return ""
                                }
                            }
                            visible: !!subTitle
                        }
                    }
                    TransactionAddressTile {
                        width: parent.width
                        title: d.transactionType === Constants.TransactionType.Swap || d.transactionType === Constants.TransactionType.Bridge ?
                                   qsTr("In") : qsTr("From")
                        addresses: d.isTransactionValid && d.reEvaluateSender? [d.transaction.sender] : []
                        contactsStore: root.contactsStore
                        rootStore: WalletStores.RootStore
                        onButtonClicked: {
                            if (d.transactionType === Constants.TransactionType.Swap || d.transactionType === Constants.TransactionType.Bridge) {
                                addressMenu.openEthAddressMenu(this, addresses[0], [d.networkShortNameIn, d.networkShortNameOut])
                            } else {
                                addressMenu.openSenderMenu(this, addresses[0], [d.networkShortName])
                            }
                        }
                    }
                    TransactionDataTile {
                        id: contractDeploymentTile
                        readonly property bool hasValue: d.isDetailsValid && !!d.details.contractOut
                                                         && transactionHeader.transactionStatus !== Constants.TransactionStatus.Pending
                                                         && transactionHeader.transactionStatus !== Constants.TransactionStatus.Failed
                        width: parent.width
                        title: qsTr("To")
                        visible: d.transactionType === Constants.TransactionType.ContractDeployment
                        subTitle: {
                            if (transactionHeader.transactionStatus === Constants.TransactionStatus.Failed) {
                                return qsTr("Contract address not created")
                            } else if (!hasValue) {
                                return qsTr("Awaiting contract address...")
                            }
                            return qsTr("Contract created") + "\n" + d.details.contract
                        }
                        buttonIconName: hasValue ? "more" : ""
                        statusListItemSubTitle.customColor: hasValue ? Theme.palette.directColor1 : Theme.palette.directColor5
                        onButtonClicked: addressMenu.openContractMenu(this, d.details.contract, [d.networkShortName], d.symbol)
                        components: [
                            Loader {
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.verticalCenterOffset: Style.current.halfPadding
                                active: transactionHeader.transactionStatus === Constants.TransactionStatus.Pending
                                width: active ? implicitWidth : 0
                                sourceComponent: StatusLoadingIndicator { }
                            }
                        ]
                    }
                    TransactionAddressTile {
                        width: parent.width
                        title: qsTr("To")
                        addresses: d.isTransactionValid && visible && d.reEvaluateRecipient? [d.transaction.recipient] : []
                        contactsStore: root.contactsStore
                        rootStore: WalletStores.RootStore
                        onButtonClicked: addressMenu.openReceiverMenu(this, addresses[0], [d.networkShortName])
                        visible: d.transactionType !== Constants.TransactionType.ContractDeployment && d.transactionType !== Constants.TransactionType.Swap && d.transactionType !== Constants.TransactionType.Bridge && d.transactionType !== Constants.TransactionType.Destroy
                    }
                    TransactionDataTile {
                        width: parent.width
                        title: qsTr("Using")
                        subTitle: d.isDetailsValid ? d.details.protocol : ""
                        asset.name: d.isDetailsValid && d.details.protocol ? Style.svg("protocol/Protocol=%1".arg(d.details.protocol)) : Style.svg("network/Network=Custom")
                        iconSettings.bgRadius: iconSettings.bgWidth / 2
//                        buttonIconName: "external" // TODO handle external link #11982
                        visible: !!subTitle
                    }
                    TransactionDataTile {
                        width: parent.width
                        title: qsTr("%1 Tx hash").arg(transactionHeader.networkName)
                        subTitle: d.isDetailsValid ? d.details.txHash : ""
                        visible: !!subTitle && !transactionHeader.isMultiTransaction
                        buttonIconName: "more"
                        onButtonClicked: addressMenu.openTxMenu(this, subTitle, [d.networkShortName])
                    }
                    TransactionDataTile {
                        width: parent.width
                        title: qsTr("%1 Tx hash").arg(transactionHeader.networkNameOut)
                        subTitle: d.isDetailsValid ? d.details.txHashOut : ""
                        visible: !!subTitle && transactionHeader.isMultiTransaction
                        buttonIconName: "more"
                        onButtonClicked: addressMenu.openTxMenu(this, subTitle, [d.networkShortNameOut])
                    }
                    TransactionDataTile {
                        width: parent.width
                        title: qsTr("%1 Tx hash").arg(transactionHeader.networkNameIn)
                        subTitle: d.isDetailsValid ? d.details.txHashIn : ""
                        visible: !!subTitle && transactionHeader.isMultiTransaction
                        buttonIconName: "more"
                        onButtonClicked: addressMenu.openTxMenu(this, subTitle, [d.networkShortNameIn])
                    }
//                    TransactionContractTile {
//                        // Used for Bridge and Swap to display 'From' network Protocol contract address
//                        address: "" // TODO fill protocol contract address for 'from' network for Bridge and Swap
//                        symbol: "" // TODO fill protocol name for Bridge and Swap
//                        networkName: transactionHeader.networkName
//                        shortNetworkName: d.networkShortName
//                        visible: !!subTitle && (d.transactionType === Constants.TransactionType.Bridge || d.transactionType === Constants.TransactionType.Swap)
//                    }
                    TransactionContractTile {
                        // Used to display contract address for any network
                        address: d.isDetailsValid ? d.details.contractIn : ""
                        symbol: {
                            if (!d.isTransactionValid)
                                return ""
                            return d.symbol ? d.symbol : "(%1)".arg(Utils.compactAddress(transaction.tokenAddress, 4))
                        }
                        networkName: transactionHeader.networkName
                        shortNetworkName: d.networkShortName
                        visible: !!subTitle && d.transactionType !== Constants.TransactionType.ContractDeployment
                    }
//                    TransactionContractTile {
//                        // Used for Bridge to display 'To' network Protocol contract address
//                        address: "" // TODO fill protocol contract address for 'to' network for Bridge
//                        symbol: "" // TODO fill protocol name for Bridge
//                        networkName: transactionHeader.networkNameOut
//                        shortNetworkName: d.networkShortNameOut
//                        visible: !!subTitle && d.transactionType === Constants.TransactionType.Bridge
//                    }
                    TransactionContractTile {
                        // Used for Bridge and Swap to display 'To' network token contract address
                        address: {
                            if (!d.isTransactionValid)
                                return ""
                            switch(d.transactionType) {
                            case Constants.TransactionType.Swap:
                            case Constants.TransactionType.Bridge:
                                return d.isDetailsValid ? d.details.contractOut : ""
                            default:
                                return ""
                            }
                        }
                        symbol: {
                            if (!d.isTransactionValid)
                                return ""
                            switch(d.transactionType) {
                            case Constants.TransactionType.Swap:
                                return d.inSymbol
                            case Constants.TransactionType.Bridge:
                                return d.outSymbol
                            default:
                                return ""
                            }
                        }
                        networkName: transactionHeader.networkNameIn
                        shortNetworkName: d.networkShortNameIn
                        visible: d.isTransactionValid && !!subTitle
                    }
                }

                Item {
                    width: parent.width
                    height: Style.current.bigPadding
                }

                DetailsPanel {
                    width: progressBlock.width
                    RowLayout {
                        width: parent.width
                        height: networkNameTile.statusListItemSubTitle.lineCount > 1 ? 85 : 70
                        spacing: 0
                        TransactionDataTile {
                            id: multichainNetworksTile
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                            title: qsTr("Networks")
                            visible: d.multichainNetworks.length > 0
                            Row {
                                anchors {
                                    top: parent.top
                                    topMargin: multichainNetworksTile.statusListItemTitleArea.height + multichainNetworksTile.topPadding
                                    left: parent.left
                                    leftMargin: multichainNetworksTile.leftPadding
                                }
                                spacing: -4
                                Repeater {
                                    model: d.multichainNetworks
                                    delegate: StatusRoundedImage {
                                        width: 20
                                        height: 20
                                        visible: image.source !== ""
                                        border.width: index === 0 ? 0 : 1
                                        border.color: Theme.palette.white
                                        image.source: Style.svg("tiny/" + modelData)
                                        z: index + 1
                                    }
                                }
                            }
                        }
                        TransactionDataTile {
                            id: networkNameTile
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                            title: qsTr("Network")
                            subTitle: transactionHeader.networkName
                            asset.name: !!d.networkIcon ? Style.svg(d.networkIcon) : ""
                            subTitleBadgeLoaderAlignment: Qt.AlignTop
                            smallIcon: true
                            visible: !!subTitle && d.transactionType !== Constants.TransactionType.Bridge
                        }
                        TransactionDataTile {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                            title: qsTr("Token format")
                            subTitle: d.isDetailsValid ? d.details.tokenType.toUpperCase() : ""
                            visible: !!subTitle
                        }
                        TransactionDataTile {
                            Layout.fillHeight: true
                            Layout.fillWidth: true
                            title: qsTr("Nonce")
                            subTitle: d.isDetailsValid ? d.details.nonce : ""
                            visible: !!subTitle
                        }
                    }
                    TransactionDataTile {
                        width: parent.width
                        height: d.loadingInputDate ? 112 : Math.min(implicitHeight + bottomPadding, 112)
                        title: qsTr("Input data")
                        // Input string can be really long. Getting substring just for 3+ lines to speedup formatting.
                        subTitle: {
                            if (d.loadingInputDate) {
                                return ""
                            } else if (!!d.decodedInputData) {
                                return d.decodedInputData.substring(0, 200)
                            } else if (d.isDetailsValid) {
                                return String(d.details.input).substring(0, 200)
                            }
                            return ""
                        }
                        visible: !!subTitle || d.loadingInputDate
                        buttonIconName: d.loadingInputDate ? "" : "more"
                        statusListItemSubTitle.maximumLineCount: 4
                        statusListItemSubTitle.lineHeight: 1.21
                        statusListItemSubTitle.layer.enabled: statusListItemSubTitle.lineCount > 3
                        statusListItemSubTitle.layer.effect: OpacityMask {
                            maskSource: Rectangle {
                                width: 10
                                height: 10
                                gradient: Gradient {
                                    GradientStop { position: 0.0; color: "#f00" }
                                    GradientStop { position: 0.4; color: "#a0ff0000" }
                                    GradientStop { position: 0.75; color: "#00ff0000" }
                                }
                            }
                        }
                        tertiaryTitle: !d.loadingInputDate && !d.decodedInputData ? qsTr("Data could not be decoded") : ""
                        statusListItemTertiaryTitle.anchors.top: undefined
                        statusListItemTertiaryTitle.anchors.baseline: statusListItemTitle.baseline
                        statusListItemTertiaryTitle.font: statusListItemTitle.font
                        onButtonClicked: addressMenu.openInputDataMenu(this, !!d.decodedInputData ? d.decodedInputData : d.details.input)

                        Loader {
                            anchors {
                                left: parent.left
                                bottom: parent.bottom
                                right: parent.right
                                margins: 12
                            }
                            active: d.loadingInputDate
                            sourceComponent: Column {
                                spacing: 10
                                Repeater {
                                    model: 3
                                    LoadingComponent {
                                        anchors {
                                            left: parent.left
                                            right: index === 2 ? parent.horizontalCenter : parent.right
                                        }
                                        height: 11
                                        radius: 4
                                        enabled: false
                                    }
                                }
                            }
                        }
                    }
                    TransactionDataTile {
                        // Tile used only for multiTx
                        width: parent.width
                        title: !!transactionHeader.networkNameOut ? qsTr("Included in Block on %1").arg(transactionHeader.networkNameOut) : qsTr("Included on Block")
                        subTitle: d.blockNumberOut
                        tertiaryTitle: d.isTransactionValid ? LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat) : ""
                        visible: d.blockNumberOut > 0 && transactionHeader.isMultiTransaction
                    }
                    TransactionDataTile {
                        // Tile used for multiTx and normal tx
                        width: parent.width
                        readonly property int blockNumber: transactionHeader.isMultiTransaction ? d.blockNumberIn : d.blockNumber
                        readonly property string networkName: transactionHeader.isMultiTransaction ? transactionHeader.networkNameIn : transactionHeader.networkName
                        title: !!networkName ? qsTr("Included in Block on %1").arg(networkName) : qsTr("Included on Block")
                        subTitle: blockNumber
                        tertiaryTitle: d.isTransactionValid ? LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat) : ""
                        visible: blockNumber > 0
                    }
                }
            }

            Column {
                width: progressBlock.width
                spacing: Style.current.smallPadding
                visible: !(transactionHeader.isNFT && d.isIncoming)

                RowLayout {
                    width: parent.width
                    visible: amountSentTile.visible || amountReceiveTile.visible || feesTile.visible || totalTile.visible
                    StatusBaseText {
                        Layout.alignment: Qt.AlignLeft
                        font.pixelSize: 15
                        color: Theme.palette.directColor5
                        text: qsTr("Values")
                        elide: Text.ElideRight
                    }

                    StatusBaseText {
                        Layout.alignment: Qt.AlignRight
                        font.pixelSize: 15
                        color: Theme.palette.directColor5
                        text: d.isTransactionValid ? qsTr("as of %1").arg(LocaleUtils.formatDateTime(transaction.timestamp * 1000, Locale.LongFormat)) : ""
                        elide: Text.ElideRight
                    }
                }

                DetailsPanel {
                    TransactionDataTile {
                        id: amountSentTile
                        width: parent.width
                        title: qsTr("Amount sent")
                        subTitle: transactionHeader.isMultiTransaction ? d.outCryptoValueFormatted : d.cryptoValueFormatted
                        tertiaryTitle: transactionHeader.isMultiTransaction ? d.outFiatValueFormatted : d.fiatValueFormatted
                        visible: {
                            if (transactionHeader.isNFT)
                                return false
                            switch(d.transactionType) {
                            case Constants.TransactionType.Send:
                            case Constants.TransactionType.Swap:
                            case Constants.TransactionType.Bridge:
                                return true
                            default:
                                return false
                            }
                        }
                    }
                    TransactionDataTile {
                        id: amountReceiveTile
                        width: parent.width
                        title: transactionHeader.transactionStatus === Constants.TransactionStatus.Pending ? qsTr("Amount to receive") : qsTr("Amount received")
                        subTitle: {
                            if (!d.isTransactionValid || transactionHeader.isNFT)
                                return ""
                            const type = d.transactionType
                            if (type === Constants.TransactionType.Swap) {
                                return RootStore.formatCurrencyAmount(transactionHeader.inCryptoValue, d.inSymbol)
                            } else if (type === Constants.TransactionType.Bridge) {
                                // Reduce crypto value by fee value
                                const valueInCrypto = RootStore.getCryptoValue(transactionHeader.outFiatValue - d.feeFiatValue, d.inSymbol)
                                return RootStore.formatCurrencyAmount(valueInCrypto, d.inSymbol)
                            }
                            return ""
                        }
                        tertiaryTitle: {
                            const type = d.transactionType
                            if (type === Constants.TransactionType.Swap) {
                                return RootStore.formatCurrencyAmount(transactionHeader.inFiatValue, RootStore.currentCurrency)
                            } else if (type === Constants.TransactionType.Bridge) {
                                return RootStore.formatCurrencyAmount(transactionHeader.outFiatValue - d.feeFiatValue, RootStore.currentCurrency)
                            }
                            return ""
                        }
                        visible: !!subTitle
                    }
                    TransactionDataTile {
                        id: feesTile
                        width: parent.width
                        title: d.symbol ? qsTr("Fees") : qsTr("Estimated max fee")
                        subTitle: {
                            if (!d.isTransactionValid || transactionHeader.isNFT || !d.isDetailsValid)
                                return ""
                            if (!d.symbol) {
                                const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees)
                                return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken)
                            }

                            switch(d.transactionType) {
                            case Constants.TransactionType.Send:
                            case Constants.TransactionType.Swap:
                            case Constants.TransactionType.Bridge:
                                return LocaleUtils.currencyAmountToLocaleString(d.details.totalFees)
                            default:
                                return ""
                            }
                        }
                        tertiaryTitle: {
                            if (!subTitle)
                                return ""
                            let fiatValue
                            if (!d.symbol) {
                                const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees)
                                fiatValue = RootStore.getFiatValue(maxFeeEth, Constants.ethToken)
                            } else {
                                fiatValue = d.feeFiatValue
                            }
                            return RootStore.formatCurrencyAmount(fiatValue, RootStore.currentCurrency)
                        }
                        visible: !!subTitle
                    }
                    TransactionDataTile {
                        id: totalTile
                        width: parent.width
                        readonly property bool fieldIsHidden: (transactionHeader.isNFT && d.isIncoming) || !d.symbol
                        readonly property bool showMaxFee: d.transactionType === Constants.TransactionType.ContractDeployment && transactionHeader.transactionStatus === Constants.TransactionStatus.Pending
                        readonly property bool showFee: d.transactionType === Constants.TransactionType.Destroy || transactionHeader.isNFT || d.transactionType === Constants.TransactionType.ContractDeployment
                        readonly property bool showValue: d.transactionType === Constants.TransactionType.Receive || (d.transactionType === Constants.TransactionType.Buy && progressBlock.isLayer1)
                        // NOTE Using fees in this tile because of same higlight and color settings as Total
                        title: {
                            if (showMaxFee) {
                                return qsTr("Estimated max fee")
                            } else if (showFee) {
                                return qsTr("Fees")
                            }
                            return qsTr("Total")
                        }
                        subTitle: {
                            if (fieldIsHidden)
                                return ""
                            if (showMaxFee) {
                                const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees)
                                return RootStore.formatCurrencyAmount(maxFeeEth, Constants.ethToken)
                            } else if (showFee) {
                                return RootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken)
                            } else if (showValue) {
                                return d.cryptoValueFormatted
                            }
                            const cryptoValue = transactionHeader.isMultiTransaction ? d.outCryptoValueFormatted : d.cryptoValueFormatted
                            return "%1 + %2".arg(cryptoValue).arg(RootStore.formatCurrencyAmount(d.feeEthValue, Constants.ethToken))
                        }
                        tertiaryTitle: {
                            if (fieldIsHidden)
                                return ""
                            if (showMaxFee) {
                                const maxFeeEth = RootStore.getFeeEthValue(d.details.maxTotalFees)
                                const maxFeeFiat = RootStore.getFiatValue(d.feeEthValue, Constants.ethToken)
                                return RootStore.formatCurrencyAmount(maxFeeFiat, RootStore.currentCurrency)
                            } else if (showFee) {
                                return RootStore.formatCurrencyAmount(d.feeFiatValue, RootStore.currentCurrency)
                            } else if (showValue) {
                                return d.fiatValueFormatted
                            }
                            const fiatValue = transactionHeader.isMultiTransaction ? transactionHeader.outFiatValue : transactionHeader.fiatValue
                            return RootStore.formatCurrencyAmount(fiatValue + d.feeFiatValue, RootStore.currentCurrency)
                        }
                        visible: !!subTitle
                        highlighted: true
                        statusListItemTertiaryTitle.customColor: Theme.palette.directColor1
                    }
                }
            }

            Separator {
                width: progressBlock.width
            }

            RowLayout {
                width: progressBlock.width
                visible: d.isTransactionValid
                spacing: 8
                StatusButton {
                    Layout.fillWidth: true
                    Layout.preferredHeight: copyDetailsButton.height
                    text: qsTr("Repeat transaction")
                    size: StatusButton.Small

                    property alias tx: d.transaction

                    visible: {
                        if (!d.isTransactionValid || root.overview.isWatchOnlyAccount || root.overview.isAllAccounts)
                            return false

                        return WalletStores.RootStore.isTxRepeatable(tx)
                    }
                    onClicked: {
                        let asset = WalletStores.RootStore.getAssetForSendTx(tx)
                        const req = Helpers.lookupAddressesForSendModal(WalletStores.RootStore.accounts,
                                                                      WalletStores.RootStore.savedAddresses,
                                                                      tx.sender,
                                                                      tx.recipient,
                                                                      asset,
                                                                      tx.isNFT,
                                                                      tx.amount,
                                                                      tx.chainId)

                        root.sendModal.preSelectedAccountAddress = req.preSelectedAccount.address
                        root.sendModal.preSelectedRecipient = req.preSelectedRecipient
                        root.sendModal.preSelectedRecipientType = req.preSelectedRecipientType
                        root.sendModal.preSelectedHoldingID = req.preSelectedHoldingID
                        root.sendModal.preSelectedHoldingType = req.preSelectedHoldingType
                        root.sendModal.preSelectedSendType = req.preSelectedSendType
                        root.sendModal.preDefinedAmountToSend = req.preDefinedAmountToSend
                        root.sendModal.preSelectedChainId = req.preSelectedChainId
                        root.sendModal.onlyAssets = false
                        root.sendModal.open()
                    }
                }
                StatusButton {
                    id: copyDetailsButton
                    Layout.fillWidth: true
                    text: qsTr("Copy details")
                    icon.name: "copy"
                    icon.width: 20
                    icon.height: 20
                    size: StatusButton.Small
                    onClicked: ClipboardUtils.setText(transactionHeader.getDetailsString(d.details))
                }
            }
        }
    }

    TransactionAddressMenu {
        id: addressMenu

        areTestNetworksEnabled: WalletStores.RootStore.areTestNetworksEnabled
        isGoerliEnabled: WalletStores.RootStore.isGoerliEnabled
        contactsStore: root.contactsStore
        networkConnectionStore: root.networkConnectionStore
        onOpenSendModal: (address) => root.sendModal.open(address)
    }

    component DetailsPanel: Item {
        width: parent.width
        height: {
            // Using childrenRect and transactionvalid properties to refresh this binding
            if (!d.isTransactionValid || detailsColumn.childrenRect.height === 0)
                return 0

            // Height is calculated from visible children because Column doesn't handle
            // visibility change properly and childrenRect.height gives different values
            // comparing to manual check
            var visibleHeight = 0
            for (var i = 0 ; i < detailsColumn.children.length ; i++) {
                if (detailsColumn.children[i].visible)
                    visibleHeight += detailsColumn.children[i].height
            }
            return visibleHeight
        }

        default property alias content: detailsColumn.children

        Rectangle {
            id: tileBackground
            anchors.fill: parent
            color: Style.current.transparent
            radius: 8
            border.width: 1
            border.color: Style.current.separator
        }

        Column {
            id: detailsColumn
            anchors.fill: parent
            anchors.margins: 1
            spacing: 0
            layer.enabled: true
            layer.effect: OpacityMask {
                // Separate rectangle is used as mask because background rectangle must be transaprent
                maskSource: Rectangle {
                    width: tileBackground.width
                    height: tileBackground.height
                    radius: tileBackground.radius
                }
            }
        }
    }

    component TransactionContractTile: TransactionDataTile {
        property string networkName: ""
        property string symbol: ""
        property string address: ""
        property string shortNetworkName: ""
        width: parent.width
        title: visible ? qsTr("%1 %2 contract address").arg(networkName).arg(symbol) : ""
        subTitle: !!address && !/0x0+$/.test(address) ? address : ""
        buttonIconName: "more"
        visible: !!subTitle
        onButtonClicked: addressMenu.openContractMenu(this, address, shortNetworkName, symbol)
    }
}