status-desktop/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml

import QtQuick 2.13

import shared.status 1.0
import shared.popups 1.0
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0

import "../../stores"
import "../../controls"

Item {
    id: root
    signal goBack

    property WalletStore walletStore

    StatusFlatButton {
        id: backButton
        anchors.top: parent.top
        anchors.topMargin: Style.current.bigPadding
        anchors.left: parent.left
        anchors.leftMargin: Style.current.bigPadding
        icon.name: "arrow-left"
        icon.height: 13.5
        icon.width: 17.5
        text: qsTr("Wallet")
        onClicked: {
            root.goBack()
        }
    }

    Column {
        id: column
        anchors.topMargin: Style.current.xlPadding
        anchors.top: backButton.bottom
        anchors.leftMargin: Style.current.xlPadding * 2
        anchors.left: root.left
        width: 560

        Item {
            id: header
            height: 60
            width: parent.width
            StatusSmartIdenticon {
                id: accountImage
                anchors.left: parent.left
                anchors.topMargin: Style.current.halfPadding
                anchors.top: parent.top
                image.isIdenticon: true
                icon: StatusIconSettings {
                    width: 40
                    height: 40
                    letterSize: 21
                    color: walletStore.currentAccount.color
                }
                name: walletStore.currentAccount.name
            } 


            Item {
                id: accountNameAndAddress
                anchors.left: accountImage.right
                anchors.leftMargin: Style.current.padding
                anchors.top: parent.top

                StatusBaseText {
                    id: accountName
                    text: walletStore.currentAccount.name
                    font.weight: Font.Bold
                    font.pixelSize: 28
                    color: Theme.palette.directColor1
                    anchors.left: parent.left
                }

                StatusAddress {
                    text: walletStore.currentAccount.address
                    anchors.top: accountName.bottom
                    anchors.topMargin: Style.current.halfPadding
                    anchors.left: parent.left
                }

            }
        }

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

        Item {
            height: 50
            width: parent.width
            
            Rectangle {
                id: typeRectangle
                border.width: 1
                border.color: Theme.palette.directColor7
                radius: Style.current.radius
                width: typeText.width + Style.current.xlPadding
                height: parent.height
                StatusBaseText {
                    id: labelType
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.smallPadding
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("Type")
                    font.pixelSize: 13
                    color: Theme.palette.directColor5
                }
                StatusBaseText {
                    id: typeText
                    anchors.top: labelType.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: {
                        const walletType = walletStore.currentAccount.walletType
                        if (walletType === "watch") {
                            return qsTr("Watch-Only Account")
                        } else if (walletType === "generated" || walletType === "") {
                            return qsTr("Generated by your Status seed phrase profile")
                        } else if (walletType === "imported") {
                            return qsTr("Imported Account")
                        }
                    }
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                }
            }

            Rectangle {
                id: storageRectangle
                anchors.left: typeRectangle.right
                anchors.leftMargin: Style.current.padding
                border.width: 1
                border.color: Theme.palette.directColor7
                radius: Style.current.radius
                width: storageText.width + Style.current.xlPadding
                height: parent.height
                StatusBaseText {
                    id: labelStorage
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.smallPadding
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("Storage")
                    font.pixelSize: 13
                    color: Theme.palette.directColor5
                }
                StatusBaseText {
                    id: storageText
                    anchors.top: labelStorage.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: Style.current.smallPadding
                    text: qsTr("On Device")
                    font.pixelSize: 15
                    color: Theme.palette.directColor1
                }
            }
        }

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

        Rectangle {
            visible: walletStore.currentAccount.path !== ""
            border.width: 1
            border.color: Theme.palette.directColor7
            radius: Style.current.radius
            width: Math.max(path.width, labelPath.width) + Style.current.xlPadding
            height: 50
            StatusBaseText {
                id: labelPath
                anchors.top: parent.top
                anchors.topMargin: Style.current.smallPadding
                anchors.left: parent.left
                anchors.leftMargin: Style.current.smallPadding
                text: qsTr("Derivation Path")
                font.weight: Font.Medium
                font.pixelSize: 13
                color: Theme.palette.directColor5
            }
            StatusBaseText {
                id: path
                anchors.top: labelPath.bottom
                anchors.left: parent.left
                anchors.leftMargin: Style.current.smallPadding
                text: walletStore.currentAccount.path
                font.pixelSize: 15
                color: Theme.palette.directColor1
            }
        }

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

        StatusButton {
            visible: walletStore.currentAccount.walletType !== ""
            text: qsTr("Remove from your profile")
            type: StatusBaseButton.Type.Danger

            ConfirmationDialog {
                id: confirmationPopup
                header.title: qsTr("Confirm %1 Removal").arg(walletStore.currentAccount.name)
                confirmationText: qsTr("You will not be able to restore viewing access to this account in the future unless you enter this account’s address again.")
                confirmButtonLabel: qsTr("Remove Account")
                onConfirmButtonClicked: {
                    confirmationPopup.close();
                    root.goBack();
                    root.walletStore.deleteAccount(walletStore.currentAccount.address);
                }

            }

            onClicked : {
                confirmationPopup.open()
            }
        }
    }
}