feat(@wallet): Display ens name in account view

fixes #8607

src/app/modules/main/wallet_section/current_account/view.nim

@@ -28,6 +28,7 @@ QtObject:
       emoji: string
       derivedfrom: string
       relatedAccounts: compact_model.Model
+      ens: string
 
   proc setup(self: View) =
     self.QObject.setup
@@ -142,6 +143,15 @@ QtObject:
     read = getEmoji
     notify = emojiChanged
 
+  proc getEns(self: View): QVariant {.slot.} =
+    return newQVariant(self.ens)
+
+  proc ensChanged(self: View) {.signal.}
+
+  QtProperty[QVariant] ens:
+    read = getEns
+    notify = ensChanged
+
   proc getDerivedfrom(self: View): QVariant {.slot.} =
     return newQVariant(self.derivedfrom)
 
@@ -202,6 +212,9 @@ QtObject:
     if(self.derivedfrom != dto.derivedfrom):
       self.derivedfrom = dto.derivedfrom
       self.derivedfromChanged()
+    if(self.ens != dto.ens):
+      self.ens = dto.ens
+      self.ensChanged()
     # Set related accounts
     let relatedAccounts = compact_model.newModel()
     relatedAccounts.setItems(

src/app_service/service/wallet_account/dto.nim

@@ -57,6 +57,7 @@ type
     emoji*: string
     derivedfrom*: string
     relatedAccounts*: seq[WalletAccountDto]
+    ens*: string
 
 proc newDto*(
   name: string,

src/app_service/service/wallet_account/service.nim

@@ -174,12 +174,23 @@ QtObject:
   proc getAddresses(self: Service): seq[string] =
     return toSeq(self.walletAccounts.keys())
 
+  proc setEnsName(self: Service, account: WalletAccountDto) =
+    let chainId = self.networkService.getNetworkForEns().chainId
+    try:
+      let nameResponse = backend.getName(chainId, account.address)
+      account.ens = nameResponse.result.getStr
+    except Exception as e:
+      let errDesription = e.msg
+      error "error: ", errDesription
+      return
+
   proc init*(self: Service) =
     signalConnect(singletonInstance.localAccountSensitiveSettings, "isWalletEnabledChanged()", self, "onIsWalletEnabledChanged()", 2)
     
     try:
       let accounts = self.fetchAccounts()
       for account in accounts:
+        self.setEnsName(account)
         account.relatedAccounts = accounts.filter(x => not account.derivedFrom.isEmptyOrWhitespace and (cmpIgnoreCase(x.derivedFrom, account.derivedFrom) == 0))
         self.walletAccounts[account.address] = account
 
@@ -250,6 +261,7 @@ QtObject:
     for account in accounts:
       if not self.walletAccounts.haskey(account.address):
         newAccount = account
+        self.setEnsName(newAccount)
         newAccount.relatedAccounts = accounts.filter(x => cmpIgnoreCase(x.derivedFrom, account.derivedFrom) == 0)
         break
     self.walletAccounts[newAccount.address] = newAccount

ui/StatusQ/sandbox/pages/StatusAddressPage.qml

@@ -39,7 +39,7 @@ Item {
 
         StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`}
         StatusAddressPanel {
-            address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
+            value: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
 
             font.pixelSize: 13
             font.weight: Font.Normal
@@ -52,7 +52,7 @@ Item {
         StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`}
         StatusAddressPanel {
             id: simpleAddressPanel
-            address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
+            value: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
             showCopy: false
             expanded: false
             onDoCopy: copyAction.text = address
@@ -61,20 +61,20 @@ Item {
 
         StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" }
         StatusAddressPanel {
-            address: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
+            value: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
             onDoCopy: copyAction.text = address
         }
 
         StatusBaseText { text: "StatusAddressPanel\ncopy hiden" }
         StatusAddressPanel {
-            address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
+            value: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
             autHideCopyIcon: true
             onDoCopy: copyAction.text = address
             expandable: true
         }
         StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" }
         StatusAddressPanel {
-            address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
+            value: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
             autHideCopyIcon: true
             expanded: false
             onDoCopy: copyAction.text = address

ui/StatusQ/src/StatusQ/Components/StatusAddressPanel.qml

@@ -11,7 +11,7 @@ import StatusQ.Controls 0.1
     \inherits Item
     \inqmlmodule StatusQ.Components
     \since StatusQ.Components 0.1
-    \brief Show an address as defined efined in design https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=4222%3A178403 and https://www.figma.com/file/h2Ab3k4wy1Y7SFHEvbcZZx/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop-(Copy)?node-id=1009%3A106451
+    \brief Show an address/ens as defined in design https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=4222%3A178403 and https://www.figma.com/file/h2Ab3k4wy1Y7SFHEvbcZZx/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop-(Copy)?node-id=1009%3A106451
 
     Panel's components:
       - Address: displays the rquired \c address property
@@ -34,7 +34,7 @@ import StatusQ.Controls 0.1
     Usage example:
     \qml
         StatusAddressPanel {
-            address: currentAccount.mixedcaseAddress
+            value: currentAccount.mixedcaseAddress
 
             autHideCopyIcon: true
             expanded: false
@@ -47,16 +47,17 @@ import StatusQ.Controls 0.1
 Item {
     id: root
 
-    /*required*/ property string address: ""
+    /*required*/ property string value: ""
     property bool showCopy: true
     property bool autHideCopyIcon: false
     property alias showFrame: frameRect.visible
     property bool expandable: false
     property bool expanded: true
+    property bool ens: false
 
     property alias font: statusAddress.font
 
-    signal doCopy(string address)
+    signal doCopy(string value)
 
     implicitWidth: frameLayout.implicitWidth
     implicitHeight: frameLayout.implicitHeight
@@ -97,6 +98,7 @@ Item {
                 StatusBaseText {
                     text: "0x"
 
+                    visible: !root.ens
                     Layout.alignment: Qt.AlignVCenter
 
                     font: statusAddress.font
@@ -106,9 +108,9 @@ Item {
                 StatusBaseText {
                     id: statusAddress
 
-                    text: root.address.replace("0x", "").replace("0X", "")
+                    text: root.value.replace("0x", "").replace("0X", "")
 
-                    Layout.preferredWidth: expanded ? implicitWidth : (implicitWidth * 0.25).toFixed()
+                    Layout.preferredWidth: root.expanded || root.ens ? implicitWidth : (implicitWidth * 0.25).toFixed()
                     Layout.alignment: Qt.AlignVCenter
 
                     font.family: Theme.palette.monoFont.name
@@ -140,7 +142,7 @@ Item {
                     cursorShape: Qt.ArrowCursor
                     preventStealing: true
 
-                    onClicked: root.doCopy(root.address)
+                    onClicked: root.doCopy(root.value)
                     z: frameRect.z + 1
                 }
 

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

@@ -76,7 +76,7 @@ Item {
                     }
                 }
                 StatusAddressPanel {
-                    address: walletStore.currentAccount.address
+                    value: walletStore.currentAccount.address
 
                     font.weight: Font.Normal
 

ui/app/AppLayouts/Wallet/panels/WalletHeader.qml

@@ -60,12 +60,12 @@ Item {
 
         StatusAddressPanel {
             objectName: "addressPanel"
-            address: currentAccount.mixedcaseAddress
-
+            value: currentAccount.ens || currentAccount.mixedcaseAddress
+            ens: !!currentAccount.ens
             autHideCopyIcon: true
             expanded: false
 
-            onDoCopy: (address) => root.store.copyToClipboard(address)
+            onDoCopy: () => root.store.copyToClipboard(currentAccount.mixedcaseAddress)
         }
     }
 }