feat: introduce confirmation dialog for blocking contacts actions

Closes #632

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -121,8 +121,21 @@ StackLayout {
 
         ProfilePopup {
             id: profilePopup
+            onBlockButtonClicked: {
+                blockContactConfirmationDialog.contactName = name
+                blockContactConfirmationDialog.contactAddress = address
+                blockContactConfirmationDialog.open()
+            }
         }
 
+        BlockContactConfirmationDialog {
+            id: blockContactConfirmationDialog
+            onBlockButtonClicked: {
+                chatsModel.blockContact(blockContactConfirmationDialog.contactAddress)
+                blockContactConfirmationDialog.close()
+                profilePopup.close()
+            }
+        }
 
         EmojiReactions {
             id: reactionModel

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -211,10 +211,6 @@ ScrollView {
         }
         model: messageList
 
-        ProfilePopup {
-          id: profilePopup
-        }
-
         delegate: Message {
             id: msgDelegate
             fromAuthor: model.fromAuthor

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -17,6 +17,8 @@ ModalPopup {
     property bool isEnsVerified: false
     property bool noFooter: false
 
+    signal blockButtonClicked(name: string, address: string)
+
     function setPopupData(userNameParam, fromAuthorParam, identiconParam, textParam){
         this.showQR = false
         this.userName = userNameParam
@@ -266,19 +268,14 @@ ModalPopup {
         StyledButton {
             anchors.right: parent.right
             anchors.rightMargin: addToContactsButton.width + 32
-            btnColor: "white"
+            btnColor: Style.current.lightRed
             btnBorderWidth: 1
             btnBorderColor: Style.current.grey
             textColor: Style.current.red
             //% "Block User"
             label: qsTrId("block-user")
             anchors.bottom: parent.bottom
-            onClicked: {
-                chatsModel.blockContact(fromAuthor)
-                // TODO(pascal): Change block user button state based
-                // on :contact/blocked state
-                profilePopup.close()
-            }
+            onClicked: popup.blockButtonClicked(userName, fromAuthor)
         }
 
         StyledButton {

ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml

@@ -13,6 +13,7 @@ Rectangle {
     property bool isContact: true
     property bool isBlocked: false
     property string searchStr: ""
+    signal blockContactActionTriggered(name: string, address: string)
     id: container
 
     visible: isContact && (searchStr == "" || name.includes(searchStr))
@@ -110,7 +111,7 @@ Rectangle {
                     text: qsTrId("block-user")
                     enabled: !container.isBlocked
                     onTriggered: {
-                      profileModel.blockContact(address)
+                      container.blockContactActionTriggered(name, address)
                     }
                 }
                 Action {

ui/app/AppLayouts/Profile/Sections/Contacts/ContactList.qml

@@ -30,16 +30,33 @@ ListView {
         visible: searchString === "" ||
                  model.name.toLowerCase().includes(lowerCaseSearchString) ||
                  model.address.toLowerCase().includes(lowerCaseSearchString)
+        onBlockContactActionTriggered: {
+            blockContactConfirmationDialog.contactName = name
+            blockContactConfirmationDialog.contactAddress = address
+            blockContactConfirmationDialog.open()
+        }
     }
 
     ProfilePopup {
       id: profilePopup
+      onBlockButtonClicked: {
+          blockContactConfirmationDialog.contactName = name
+          blockContactConfirmationDialog.contactAddress = address
+          blockContactConfirmationDialog.open()
+      }
     }
 
     ButtonGroup {
         id: contactGroup
     }
 
+    BlockContactConfirmationDialog {
+        id: blockContactConfirmationDialog
+        onBlockButtonClicked: {
+            profileModel.blockContact(blockContactConfirmationDialog.contactAddress)
+            blockContactConfirmationDialog.close()
+        }
+    }
 }
 /*##^##
 Designer {

ui/shared/BlockContactConfirmationDialog.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import "../imports"
+import "./"
+
+ModalPopup {
+    id: blockContactConfirmationDialog
+    height: 237
+    width: 400
+    property string contactAddress: ""
+    property string contactName: ""
+    signal blockButtonClicked()
+    title: qsTrId("block-user")
+
+    Text {
+        text: qsTr("Blocking will remove any messages you received from " + blockContactConfirmationDialog.contactName + " and stop new messages from reaching you.")
+        font.pixelSize: 15
+        anchors.left: parent.left
+        anchors.right: parent.right
+        wrapMode: Text.WordWrap
+    }
+    
+
+    footer: Item {
+        id: footerContainer
+        width: parent.width
+        height: children[0].height
+
+        StyledButton {
+            anchors.right: parent.right
+            anchors.rightMargin: Style.current.smallPadding
+            btnColor: Style.current.lightRed
+            btnBorderWidth: 1
+            btnBorderColor: Style.current.grey
+            textColor: Style.current.red
+            //% "Block User"
+            label: qsTrId("block-user")
+            anchors.bottom: parent.bottom
+            onClicked: blockContactConfirmationDialog.blockButtonClicked()
+        }
+    }
+}
+

ui/shared/qmldir

@@ -17,3 +17,4 @@ RoundedImage 1.0 RoundedImage.qml
 SplitViewHandle 1.0 SplitViewHandle.qml
 CopyToClipBoardButton 1.0 CopyToClipBoardButton.qml
 NotificationWindow 1.0 NotificationWindow.qml
+BlockContactConfirmationDialog 1.0 BlockContactConfirmationDialog.qml