feat: show ENS username details

src/app/profile/views/ens_manager.nim

@@ -95,6 +95,26 @@ QtObject:
       self.setPreferredUsername(ensUsername)
     self.add ensUsername
 
+  proc loading(self: EnsManager, isLoading: bool) {.signal.}
+
+  proc details(self: EnsManager, username: string) {.slot.} =
+    self.loading(true)
+    spawnAndSend(self, "setDetails") do:
+      let address = status_ens.address(username)
+      let pubkey = status_ens.pubkey(username)
+      $(%* {
+        "ensName": username,
+        "address": address,
+        "pubkey": pubkey
+      })
+
+  proc detailsObtained(self: EnsManager, ensName: string, address: string, pubkey: string) {.signal.}
+
+  proc setDetails(self: EnsManager, details: string): string {.slot.} =
+    self.loading(false)
+    let detailsJson = details.parseJson
+    self.detailsObtained(detailsJson["ensName"].getStr, detailsJson["address"].getStr, detailsJson["pubkey"].getStr)
+
   method rowCount(self: EnsManager, index: QModelIndex = nil): int =
     return self.usernames.len
 

src/status/ens.nim

@@ -81,7 +81,6 @@ proc pubkey*(username: string): string =
   var userNameHash = namehash(addDomain(username))
   userNameHash.removePrefix("0x")
   let ensResolver = resolver(userNameHash)
-  echo ensResolver
   let payload = %* [{
     "to": ensResolver,
     "from": "0x0000000000000000000000000000000000000000",
@@ -94,4 +93,21 @@ proc pubkey*(username: string): string =
     result = ""
   else:
     pubkey.removePrefix("0x")
-    result = "0x04" & pubkey
+    result = "0x04" & pubkey
+
+const address_signature = "0x3b3b57de" # addr(bytes32 node)
+proc address*(username: string): string = 
+  var userNameHash = namehash(addDomain(username))
+  userNameHash.removePrefix("0x")
+  let ensResolver = resolver(userNameHash)
+  let payload = %* [{
+    "to": ensResolver,
+    "from": "0x0000000000000000000000000000000000000000",
+    "data": fmt"{address_signature}{userNameHash}"
+  }, "latest"]
+  let response = callPrivateRPC("eth_call", payload)
+  # TODO: error handling
+  let address = response.parseJson["result"].getStr;
+  if address == "0x0000000000000000000000000000000000000000000000000000000000000000":
+    return ""
+  result = "0x" & address.substr(26)

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

@@ -0,0 +1,90 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.14
+import "../../../../../imports"
+import "../../../../../shared"
+
+Item {
+    property var onClick: function(){}
+    property string username: ""
+    property string walletAddress: "-"
+    property string key: "-"
+
+    StyledText {
+        id: sectionTitle
+        text: username
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        anchors.top: parent.top
+        anchors.topMargin: 24
+        font.weight: Font.Bold
+        font.pixelSize: 20
+    }
+
+    Component {
+        id: loadingImageComponent
+        LoadingImage {}
+    }
+
+    Loader {
+        id: loadingImg
+        active: false
+        sourceComponent: loadingImageComponent
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        anchors.top: parent.top
+        anchors.topMargin: Style.currentPadding
+    }
+
+    Connections {
+        target: profileModel.ens
+        onDetailsObtained: {
+            if(username != ensName) return;
+                walletAddressLbl.text = address;
+                walletAddressLbl.textToCopy = address;
+                keyLbl.text = pubkey.substring(0, 20) + "..." + pubkey.substring(pubkey.length - 20);
+                keyLbl.textToCopy = pubkey;
+                walletAddressLbl.visible = true;
+                keyLbl.visible = true;
+        }
+        onLoading: {
+            console.log("ABC")
+            loadingImg.active = isLoading
+            if(!isLoading) return;
+            walletAddressLbl.visible = false;
+            keyLbl.visible = false;
+        }
+    }
+
+    TextWithLabel {
+        id: walletAddressLbl
+        label: qsTr("Wallet address")
+        visible: false
+        text:  ""
+        textToCopy: ""
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        anchors.top: sectionTitle.bottom
+        anchors.topMargin: 24
+    }
+
+    TextWithLabel {
+        id: keyLbl
+        visible: false
+        label: qsTr("Key")
+        text: ""
+        textToCopy: ""
+        anchors.left: parent.left
+        anchors.leftMargin: 24
+        anchors.top: walletAddressLbl.bottom
+        anchors.topMargin: 24
+    }
+
+    StyledButton {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Style.current.padding
+        anchors.horizontalCenter: parent.horizontalCenter
+        label: qsTr("Back")
+        onClicked: onClick()
+    }
+}

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

@@ -7,6 +7,7 @@ import "../../../Chat/ChatColumn/MessageComponents"
 
 Item {
     property var onClick: function(){}
+    property var onSelectENS: function(){}
 
     // Defaults to show message
     property bool isMessage: true
@@ -57,6 +58,14 @@ Item {
         id: ensDelegate
         Item {
             height: 45
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: onSelectENS(model.username)
+            }
 
             Rectangle {
                 id: circle
@@ -75,18 +84,15 @@ Item {
                     verticalAlignment: Text.AlignVCenter
                     anchors.verticalCenter: parent.verticalCenter
                 }
-
-                Loader {
-                    sourceComponent: model.username.endsWith(".stateofus.eth") ? statusENS : normalENS
-                    property string username: model.username
-                    active: true
-                    anchors.left: circle.right
-                    anchors.leftMargin: Style.current.smallPadding
-                }
             }
             
-           
-            
+            Loader {
+                sourceComponent: model.username.endsWith(".stateofus.eth") ? statusENS : normalENS
+                property string username: model.username
+                active: true
+                anchors.left: circle.right
+                anchors.leftMargin: Style.current.smallPadding
+            }
         }
     }
 

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

@@ -13,8 +13,10 @@ Item {
 
     property bool showSearchScreen: false
     property string addedUsername: ""
+    property string selectedUsername: ""
 
     signal next(output: string)
+    signal back()
     signal connect(ensUsername: string)
 
     signal goToWelcome();
@@ -96,6 +98,31 @@ Item {
             DSM.SignalTransition {
                 targetState: searchState
                 signal: next
+                guard: output === "search"
+            }
+            DSM.SignalTransition {
+                targetState: detailsState
+                signal: next
+                guard: output === "details"
+            }
+            DSM.SignalTransition {
+                targetState: listState
+                signal: goToList
+            }
+            DSM.SignalTransition {
+                targetState: welcomeState
+                signal: goToWelcome
+            }
+        }
+
+        DSM.State {
+            id: detailsState
+            onEntered: {
+                loader.sourceComponent = details;
+            }
+            DSM.SignalTransition {
+                targetState: listState
+                signal: back
             }
             DSM.SignalTransition {
                 targetState: listState
@@ -170,7 +197,22 @@ Item {
         id: list
         List {
             onClick: function(){
-                next(null);
+                next("search");
+            }
+            onSelectENS: function(username){
+                profileModel.ens.details(username)
+                selectedUsername = username;
+                next("details")
+            }
+        }
+    }
+
+    Component {
+        id: details
+        ENSDetails {
+            username: selectedUsername
+            onClick: function(){
+                back()
             }
         }
     }