feat: select preferred ENS username

src/app/profile/views/ens_manager.nim

@@ -70,6 +70,20 @@ QtObject:
     self.usernames.add(username)
     self.endInsertRows()
 
+  proc getPreferredUsername(self: EnsManager): string {.slot.} =
+    result = status_settings.getSetting[string](Setting.PreferredUsername, "")
+
+  proc preferredUsernameChanged(self: EnsManager) {.signal.}
+
+  proc setPreferredUsername(self: EnsManager, newENS: string) {.slot.} =
+    discard status_settings.saveSetting(Setting.PreferredUsername, newENS)
+    self.preferredUsernameChanged()
+
+  QtProperty[string] preferredUsername:
+    read = getPreferredUsername
+    notify = preferredUsernameChanged
+    write = setPreferredUsername
+  
   proc connect(self: EnsManager, username: string, isStatus: bool) {.slot.} =
     var ensUsername = username 
     if isStatus: 
@@ -78,12 +92,9 @@ QtObject:
     usernames.add ensUsername
     discard status_settings.saveSetting(Setting.Usernames, %*usernames)
     if usernames.len == 1:
-      discard status_settings.saveSetting(Setting.PreferredUsername, ensUsername)
+      self.setPreferredUsername(ensUsername)
     self.add ensUsername
 
-  proc preferredUsername(self: EnsManager): string {.slot.} =
-    result = status_settings.getSetting[string](Setting.PreferredUsername, "")
-
   method rowCount(self: EnsManager, index: QModelIndex = nil): int =
     return self.usernames.len
 

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -41,9 +41,9 @@ SplitView {
         // Would be better if we could make them match automatically
         MyProfileContainer {
            username: profileModel.profile.username
+           ensName: profileModel.ens.preferredUsername
            identicon: profileModel.profile.identicon
            pubkey: profileModel.profile.pubKey
-           address: profileModel.profile.address
         }
 
         onCurrentIndexChanged: {

ui/app/AppLayouts/Profile/Sections/Ens/ENSPopup.qml

@@ -0,0 +1,123 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import QtQml.Models 2.3
+import "../../../../../imports"
+import "../../../../../shared"
+
+ModalPopup {
+    id: popup
+
+    title: qsTr("Primary username")
+
+    property string newUsername: ""
+
+    onOpened: {
+        for(var i in ensNames.contentItem.children){
+            ensNames.contentItem.children[i].checked = ensNames.contentItem.children[i].text === profileModel.ens.preferredUsername
+        }
+    }
+
+    StyledText {
+        id: lbl1
+        text: qsTr("Your messages are displayed to others with this username:")
+        font.pixelSize: 15
+    }
+
+    StyledText {
+        id: lbl2
+        anchors.top: lbl1.bottom
+        anchors.topMargin: Style.current.padding
+        text: profileModel.ens.preferredUsername
+        font.pixelSize: 17
+        font.weight: Font.Bold
+    }
+    
+    ScrollView {
+        anchors.fill: parent
+        anchors.top: lbl2.bottom
+        anchors.topMargin: 70
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ensNames.contentHeight > ensNames.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+
+        ListView {
+            anchors.fill: parent
+            model: profileModel.ens
+            spacing: 0
+            clip: true
+            id: ensNames
+            delegate: RadioDelegate {
+                id: radioDelegate
+                text: username
+                checked: profileModel.ens.preferredUsername === username
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        parent.checked = true
+                        newUsername = username;
+                    }
+                }
+            }
+        }
+    }
+
+    onNewUsernameChanged: {
+        btnSelectPreferred.state = newUsername === profileModel.ens.preferredUsername ? "inactive" : "active"
+    }
+    
+    footer: Item {
+        anchors.top: parent.bottom
+        anchors.right: parent.right
+        anchors.bottom: popup.bottom
+        anchors.left: parent.left
+
+        Button {
+            id: btnSelectPreferred
+            width: 44
+            height: 44
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            state: "inactive"
+            states: [
+                State {
+                    name: "inactive"
+                    PropertyChanges {
+                        target: btnContinue
+                        source: "../../../../img/arrow-right-btn-inactive.svg"
+                    }
+                },
+                State {
+                    name: "active"
+                    PropertyChanges {
+                        target: btnContinue
+                        source: "../../../../img/arrow-right-btn-active.svg"
+                    }
+                }
+            ]
+
+            SVGImage {
+                id: btnContinue
+                width: 50
+                height: 50
+            }
+            background: Rectangle {
+                color: "transparent"
+            }
+            MouseArea {
+                cursorShape: btnSelectPreferred.state === "active" ? Qt.PointingHandCursor : Qt.ArrowCursor
+                anchors.fill: parent
+                onClicked : {
+                    if(btnSelectPreferred.state === "active"){
+                        profileModel.ens.preferredUsername = newUsername;
+                        newUsername = ""; 
+                        popup.close();  
+                    }
+                }
+            }
+        }
+    }
+}
+

ui/app/AppLayouts/Profile/Sections/Ens/List.qml

@@ -90,6 +90,10 @@ Item {
         }
     }
 
+    ENSPopup {
+        id: ensPopup
+    }
+
     StyledText {
         id: sectionTitle
         //% "ENS usernames"
@@ -187,30 +191,41 @@ Item {
         font.pixelSize: 16
     }
 
-    StyledText {
+    Item {
-        id: usernameLabel
+        width: childrenRect.width
-        visible: chatSettingsLabel.visible
+        height: childrenRect.height
-        text: qsTr("Primary Username")
+
+        id: preferredUsername
         anchors.left: parent.left
         anchors.top: chatSettingsLabel.bottom
         anchors.topMargin: 24
-        font.pixelSize: 14
-        font.weight: Font.Bold
-    }
 
-    StyledText {
+        StyledText {
-        id: usernameLabel2
+            id: usernameLabel
-        visible: chatSettingsLabel.visible
+            visible: chatSettingsLabel.visible
-        text: profileModel.ens.preferredUsername()
+            text: qsTr("Primary Username")
-        anchors.left: usernameLabel.right
+            font.pixelSize: 14
-        anchors.leftMargin: Style.current.padding
+            font.weight: Font.Bold
-        anchors.top: chatSettingsLabel.bottom
+        }
-        anchors.topMargin: 24
+
-        font.pixelSize: 14
+        StyledText {
+            id: usernameLabel2
+            visible: chatSettingsLabel.visible
+            text: profileModel.ens.preferredUsername
+            anchors.left: usernameLabel.right
+            anchors.leftMargin: Style.current.padding
+            font.pixelSize: 14
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: ensPopup.open()
+        }
     }
 
     Item {
-        anchors.top: profileModel.ens.rowCount() == 1 ? separator.bottom : usernameLabel.bottom
+        anchors.top: profileModel.ens.rowCount() == 1 ? separator.bottom : preferredUsername.bottom
         anchors.topMargin: Style.current.padding * 2
 
         UserImage {
@@ -223,7 +238,7 @@ Item {
 
         UsernameLabel {
             id: chatName
-            text: profileModel.ens.preferredUsername()
+            text: profileModel.ens.preferredUsername
             anchors.leftMargin: 20
             anchors.top: parent.top
             anchors.topMargin: 0

ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml

@@ -8,7 +8,7 @@ Item {
     property string username: "Jotaro Kujo"
     property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAhklEQVR4nOzWwQ1AQBgFYUQvelKHMtShJ9VwFyvrsExe5jvKXiYv+WPoQhhCYwiNITSG0MSEjLUPt3097r7P09L/8f4qZhFDaAyhqboIT76+TiUxixhCYwhN9b/WW6Xr1ErMIobQGEJjCI0hNIbQGEJjCI0haiRmEUNoDKExhMYQmjMAAP//B2kXcP2uDV8AAAAASUVORK5CYII="
     property string pubkey: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b"
-    property string address: "0x13Ed66d9Ffcd4dC1fB86B9414b8c60677E5Ae1cE"
+    property string ensName: "joestar.eth"
 
     id: profileHeaderContent
     height: parent.height
@@ -48,7 +48,7 @@ Item {
 
         StyledText {
             id: profileName
-            text: username
+            text: ensName !== "" ? ensName : username
             anchors.left: profileImg.right
             anchors.leftMargin: 8
             anchors.top: profileImg.top
@@ -58,12 +58,12 @@ Item {
 
         StyledText {
             id: pubkeyText
-            text: address
+            text: ensName !== "" ? username : pubkey
             anchors.bottom: profileImg.bottom
             anchors.left: profileName.left
             font.family: Style.current.fontHexRegular.name
             elide: Text.ElideMiddle
-            width: 140
+            width: 200
             font.pixelSize: 15
             color: Style.current.darkGrey
         }

ui/shared/TextWithLabel.qml

@@ -8,6 +8,7 @@ Item {
     property string label: "My Label"
     property string fontFamily: Style.current.fontRegular.name
     property string textToCopy: ""
+    property alias value: textItem
 
     id: infoText
     height: this.childrenRect.height
@@ -25,7 +26,6 @@ Item {
         id: textItem
         text: infoText.text
         font.family: fontFamily
-        selectByMouse: true
         readOnly: true
         anchors.top: inputLabel.bottom
         anchors.topMargin: 7