feat(@wallet): delete account new design

fixes #12538

ui/app/AppLayouts/Profile/views/wallet/AccountView.qml

@@ -41,6 +41,7 @@ ColumnLayout {
         id: d
         readonly property bool watchOnlyAccount: !!root.keyPair? root.keyPair.pairType === Constants.keypair.type.watchOnly: false
         readonly property bool privateKeyAccount: !!root.keyPair? root.keyPair.pairType === Constants.keypair.type.privateKeyImport: false
+        readonly property bool seedImport: !!root.keyPair? root.keyPair.pairType === Constants.keypair.type.seedImport: false
         readonly property string preferredSharingNetworks: !!root.account? root.account.preferredSharingChainIds: ""
         property var preferredSharingNetworksArray: preferredSharingNetworks.split(":").filter(Boolean)
         property string preferredSharingNetworkShortNames: walletStore.getNetworkShortNames(preferredSharingNetworks)
@@ -300,18 +301,29 @@ ColumnLayout {
         type: StatusBaseButton.Type.Danger
         onClicked: confirmationPopup.open()
 
-        ConfirmationDialog {
+        RemoveAccountConfirmationPopup {
             id: confirmationPopup
-            objectName: "deleteAccountConfirmationPopup"
+            accountType: {
-            confirmButtonObjectName: "confirmDeleteAccountButton"
+                if (d.watchOnlyAccount) {
-            headerSettings.title: qsTr("Confirm %1 Removal").arg(!!root.account? root.account.name : "")
+                    return Constants.watchWalletType
-            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.")
+                } else if (d.privateKeyAccount) {
-            confirmButtonLabel: qsTr("Remove Account")
+                    return Constants.keyWalletType
-            onConfirmButtonClicked: {
+                } else if (d.seedImport){
-                if (!!root.account) {
+                    return Constants.seedWalletType
-                    root.walletStore.deleteAccount(root.account.address)
+                } else {
+                    return Constants.generatedWalletType
                 }
-                confirmationPopup.close()
+            }
+            accountName: !!root.account ? root.account.name : ""
+            accountAddress: !!root.account ? root.account.address : ""
+            accountDerivationPath: !!root.account ? root.account.path : ""
+            preferredSharingNetworkShortNames: d.preferredSharingNetworkShortNames
+            emoji: !!root.account ? root.account.emoji : ""
+            color: !!root.account ? Utils.getColorForId(root.account.colorId) : ""
+
+            onRemoveAccount: {
+                root.walletStore.deleteAccount(root.account.address)
+                close()
                 root.goBack()
             }
         }

ui/app/AppLayouts/Wallet/views/LeftTabView.qml

@@ -109,10 +109,13 @@ Rectangle {
             onDeleteAccountClicked: {
                 if (!account)
                     return
-                removeAccountConfirmation.simple = account.walletType === Constants.watchWalletType || account.walletType === Constants.keyWalletType
+                removeAccountConfirmation.accountType = account.walletType
                 removeAccountConfirmation.accountName = account.name
                 removeAccountConfirmation.accountAddress = account.address
                 removeAccountConfirmation.accountDerivationPath = account.path
+                removeAccountConfirmation.preferredSharingChainIds = account.preferredSharingChainIds
+                removeAccountConfirmation.emoji = account.emoji
+                removeAccountConfirmation.colorId = account.colorId
                 removeAccountConfirmation.active = true
             }
 
@@ -124,17 +127,23 @@ Rectangle {
         id: removeAccountConfirmation
         active: false
 
-        property bool simple
+        property string accountType
         property string accountKeyUid
         property string accountName
         property string accountAddress
         property string accountDerivationPath
+        property string preferredSharingChainIds
+        property string emoji
+        property string colorId
 
         sourceComponent: RemoveAccountConfirmationPopup {
-            simple: removeAccountConfirmation.simple
+            accountType: removeAccountConfirmation.accountType
             accountName: removeAccountConfirmation.accountName
             accountAddress: removeAccountConfirmation.accountAddress
             accountDerivationPath: removeAccountConfirmation.accountDerivationPath
+            preferredSharingNetworkShortNames: RootStore.getNetworkShortNames(removeAccountConfirmation.preferredSharingChainIds)
+            emoji: removeAccountConfirmation.emoji
+            color: Utils.getColorForId(removeAccountConfirmation.colorId)
 
             onClosed: {
                 removeAccountConfirmation.active = false

ui/imports/shared/popups/RemoveAccountConfirmationPopup.qml

@@ -1,26 +1,34 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQml.Models 2.15
 import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
+import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
+import StatusQ.Popups.Dialog 0.1
+
+import AppLayouts.Wallet 1.0
 
 import utils 1.0
 import shared.controls 1.0
 
-StatusModal {
+StatusDialog {
     id: root
 
-    required property bool simple
+    required property string accountType
     required property string accountName
     required property string accountAddress
     required property string accountDerivationPath
+    required property string preferredSharingNetworkShortNames
+    required property string emoji
+    required property string color
 
     signal removeAccount(string address)
 
-    headerSettings.title: qsTr("Remove %1").arg(root.accountName)
+    width: 521
     focus: visible
     padding: Style.current.padding
 
@@ -30,13 +38,23 @@ StatusModal {
         readonly property real lineHeight: 1.2
 
         function confirm() {
-            if (!root.simple && !derivationPathWritten.checked) {
+            if (root.accountType !== Constants.watchWalletType && !derivationPathWritten.checked) {
                 return
             }
             root.removeAccount(root.accountAddress)
         }
     }
 
+     header: StatusDialogHeader {
+        headline.title: qsTr("Remove %1").arg(root.accountName)
+        headline.subtitle: WalletUtils.colorizedChainPrefix(root.preferredSharingNetworkShortNames) + StatusQUtils.Utils.elideText(root.accountAddress, 6, 4)
+        actions.closeButton.onClicked: root.close()
+        leftComponent: StatusSmartIdenticon {
+            asset.emoji: root.emoji
+            asset.color: root.color
+        }
+    }
+
     contentItem: ColumnLayout {
         spacing: Style.current.halfPadding
 
@@ -47,21 +65,20 @@ StatusModal {
             textFormat: Text.RichText
             font.pixelSize: Style.current.primaryTextFontSize
             lineHeight: d.lineHeight
-            text: root.simple?
+            text: {
-                      qsTr("Are you sure you want to remove %1?
+                switch(root.accountType) {
-The account will be removed from all of your synced devices.").arg("<b>%1</b>".arg(root.accountName))
+                    case Constants.generatedWalletType: return qsTr("Are you sure you want to remove %1? The account will be removed from all of your synced devices. Make sure you have a backup of your keys or recovery phrase before proceeding. %2 Copying the derivation path to this account now will enable you to import it again at a later date should you wish to do so:").arg("<b>%1</b>".arg(root.accountName)).arg("<br/><br/>")
-                    : qsTr("Are you sure you want to remove %1?
+                    case Constants.watchWalletType: return  qsTr("Are you sure you want to remove %1? The address will be removed from all of your synced devices.").arg("<b>%1</b>".arg(root.accountName))
-The account will be removed from all of your synced devices.
+                    case Constants.keyWalletType: return qsTr("Are you sure you want to remove %1 and it's associated private key? The account and private key will be removed from all of your synced devices.").arg("<b>%1</b>".arg(root.accountName))
-Make sure you have a backup of your keys or recovery phrase before proceeding.
+                    case Constants.seedWalletType: return qsTr("Are you sure you want to remove %1? The account will be removed from all of your synced devices. Copying the derivation path to this account now will enable you to import it again at a later date should you with to do so:").arg("<b>%1</b>".arg(root.accountName))
-%2
+                }
-Copying the derivation path to this account now will enable you to import it again
+            }
-at a later date should you wish to do so:").arg("<b>%1</b>".arg(root.accountName)).arg("<br/><br/>")
         }
 
         StatusBaseText {
             Layout.preferredWidth: parent.width
             Layout.topMargin: Style.current.padding
-            visible: !root.simple
+            visible: root.accountType === Constants.generatedWalletType || root.accountType === Constants.seedWalletType
             text: qsTr("Derivation path for %1").arg(root.accountName)
             font.pixelSize: Style.current.primaryTextFontSize
             lineHeight: d.lineHeight
@@ -70,7 +87,7 @@ at a later date should you wish to do so:").arg("<b>%1</b>".arg(root.accountName
         StatusInput {
             objectName: "RemoveAccountPopup-DerivationPath"
             Layout.preferredWidth: parent.width
-            visible: !root.simple
+            visible: root.accountType === Constants.generatedWalletType || root.accountType === Constants.seedWalletType
             input.edit.enabled: false
             text: root.accountDerivationPath
             input.background.color: "transparent"
@@ -86,34 +103,42 @@ at a later date should you wish to do so:").arg("<b>%1</b>".arg(root.accountName
             Layout.preferredWidth: parent.width
             Layout.preferredHeight: d.checkboxHeight
             Layout.topMargin: Style.current.padding
-            visible: !root.simple
+            visible: root.accountType !== Constants.watchWalletType
             spacing: Style.current.padding
             font.pixelSize: Style.current.primaryTextFontSize
-            text: qsTr("I have a pen and paper")
+            text: {
+                if (root.accountType === Constants.keyWalletType) {
+                    return qsTr("I have a copy of the private key")
+                }
+                return qsTr("I have taken note of the derivation path")
+            }
         }
     }
 
-    rightButtons: [
+    footer: StatusDialogFooter {
-        StatusFlatButton {
+        spacing: Style.current.padding
-            objectName: "RemoveAccountPopup-CancelButton"
+        rightButtons: ObjectModel {
-            text: qsTr("Cancel")
+            StatusFlatButton {
-            type: StatusBaseButton.Type.Normal
+                objectName: "RemoveAccountPopup-CancelButton"
-            onClicked: {
+                text: qsTr("Cancel")
-                root.close()
+                type: StatusBaseButton.Type.Normal
+                onClicked: {
+                    root.close()
+                }
             }
-        },
+            StatusButton {
-        StatusButton {
+                objectName: "RemoveAccountPopup-ConfirmButton"
-            objectName: "RemoveAccountPopup-ConfirmButton"
+                text: qsTr("Remove %1").arg(root.accountName)
-            text: qsTr("Remove")
+                type: StatusBaseButton.Type.Danger
-            type: StatusBaseButton.Type.Danger
+                enabled: root.accountType === Constants.watchWalletType || derivationPathWritten.checked
-            enabled: root.simple || derivationPathWritten.checked
+                focus: true
-            focus: true
+                Keys.onReturnPressed: function(event) {
-            Keys.onReturnPressed: function(event) {
+                    d.confirm()
-                d.confirm()
+                }
-            }
+                onClicked: {
-            onClicked: {
+                    d.confirm()
-                d.confirm()
+                }
             }
         }
-    ]
+    }
 }