status-desktop/ui/app/AppLayouts/Wallet/addaccount/panels/DerivationPath.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

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

import utils 1.0

import "../stores"

GridLayout {
    id: root

    property AddAccountStore store

    columns: 3
    columnSpacing: Style.current.padding
    rowSpacing: Style.current.halfPadding

    QtObject {
        id: d

        readonly property int oneHalfWidth: (root.width - root.columnSpacing) * 0.5
    }

    StatusBaseText {
        Layout.fillWidth: true
        font.pixelSize: Constants.addAccountPopup.labelFontSize1
        text: qsTr("Derivation Path")
    }

    StatusLinkText {
        enabled: root.store.addAccountModule.suggestedDerivationPath !== root.store.addAccountModule.derivationPath
        font.pixelSize: Constants.addAccountPopup.labelFontSize1
        text: qsTr("Reset")
        color: enabled? Theme.palette.primaryColor1 : Theme.palette.baseColor1

        onClicked: {
            root.store.resetDerivationPath()
        }
    }

    StatusBaseText {
        Layout.preferredWidth: d.oneHalfWidth
        font.pixelSize: Constants.addAccountPopup.labelFontSize1
        text: qsTr("Account")
    }

    RowLayout {
        Layout.preferredWidth: d.oneHalfWidth
        Layout.columnSpan: 2

        DerivationPathInput {
            id: derivationPathInput

            Layout.fillWidth: true

            initialDerivationPath: root.store.addAccountModule.derivationPath
            initialBasePath: root.store.selectedRootPath

            levelsLimit: 4  // Allow only 5 separators in the derivation path

            onDerivationPathChanged: {
                let t = derivationPath
                if(t.length > 0) {
                    if(root.store.derivationPathRegEx.test(t)) {
                        root.store.changeDerivationPathPostponed(t)
                    } else {
                        root.store.addAccountModule.derivationPath = t
                    }
                }
            }

            onEditingFinished: {
                root.store.submitAddAccount(null)
            }

            input.rightComponent: StatusIcon {
                icon: "chevron-down"
                color: Theme.palette.baseColor1

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        derivationPathSelection.popup(0, derivationPathInput.height + Style.current.halfPadding)
                    }
                }
            }

            DerivationPathSelection {
                id: derivationPathSelection

                roots: root.store.roots
                translation: root.store.translation
                selectedRootPath: root.store.selectedRootPath

                onSelected: {
                    root.store.changeRootDerivationPath(rootPath)
                }
            }
        }

        Connections {
            target: root.store
            function onSelectedRootPathChanged() {
                derivationPathInput.resetDerivationPath(root.store.selectedRootPath, root.store.addAccountModule.derivationPath)
            }
        }

        Connections {
            target: root.store.addAccountModule
            function onDerivationPathChanged() {
                derivationPathInput.resetDerivationPath(root.store.selectedRootPath, root.store.addAccountModule.derivationPath)
            }
        }

        // Propagate the error state to the store
        Binding {
            target: root.store
            property: "derivationPathEditingNotValid"
            value: derivationPathInput.errorMessage !== ""
        }
    }

    StatusListItem {
        id: generatedAddress
        Layout.preferredWidth: d.oneHalfWidth
        Layout.preferredHeight: derivationPathInput.height
        color: "transparent"
        border.width: 1
        border.color: Theme.palette.baseColor2
        enabled: root.store.derivedAddressModel.count > 1
        statusListItemTitle.elide: Qt.ElideMiddle
        loading: root.store.derivedAddressModel.count === 0

        title: {
            if (!!root.store.selectedDerivedAddress && root.store.selectedDerivedAddress.address !== "") {
                return root.store.selectedDerivedAddress.address
            }
            else if (root.store.derivedAddressModel.count > 1) {
                return qsTr("Select address")
            }

            return "0x0000000000000000000000000000000000000000"
        }

        components: [
            StatusIcon {
                visible: root.store.derivedAddressModel.count > 1
                icon: "chevron-down"
                color: Theme.palette.baseColor1
            }
        ]

        onClicked: {
            accountAddressSelection.popup(-generatedAddress.x, generatedAddress.y + generatedAddress.height + Style.current.halfPadding)
        }

        AccountAddressSelection {
            id: accountAddressSelection
            width: root.width
            store: root.store

            onSelected: {
                accountAddressSelection.close()
                root.store.changeSelectedDerivedAddress(address)
            }
        }
    }

    RowLayout {
        Layout.preferredWidth: d.oneHalfWidth
        Layout.columnSpan: 2

        StatusBaseText {
            id: basePathName

            Layout.fillWidth: true
            visible: !errorMessageText.visible

            font.pixelSize: Constants.addAccountPopup.labelFontSize2
            color: Theme.palette.baseColor1
            text: root.store.translation(root.store.selectedRootPath, true)
        }
        StatusBaseText {
            id: errorMessageText

            Layout.fillWidth: true
            visible: !!derivationPathInput.errorMessage

            font.pixelSize: basePathName.font.pixelSize
            color: Theme.palette.dangerColor1

            text: derivationPathInput.errorMessage
        }
    }

    AddressDetails {
        Layout.preferredWidth: d.oneHalfWidth
        addressDetailsItem: root.store.selectedDerivedAddress
        defaultMessage: ""
        defaultMessageCondition: !root.store.selectedDerivedAddress || root.store.selectedDerivedAddress.address === ""
    }

    StatusCheckBox {
        visible: root.store.derivationPathOutOfTheDefaultStatusDerivationTree
        Layout.fillWidth: true
        Layout.columnSpan: 3
        font.pixelSize: Constants.addAccountPopup.labelFontSize1
        text: qsTr("I understand that this non-Ethereum derivation path is incompatible with Keycard")
        onToggled: {
            root.store.derivationPathOutOfTheDefaultStatusDerivationTreeConfirmed = checked
        }
    }
}