feat: change other components to use Address where needed

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

@@ -185,11 +185,12 @@ ModalPopup {
             anchors.topMargin: Style.current.padding
         }
 
-        StyledText {
+        Address {
             id: valueChatKey
             text: fromAuthor
             width: 160
-            elide: Text.ElideMiddle
+            maxWidth: parent.width - (3 * Style.current.smallPadding) - copyBtn.width
+            color: Style.current.textColor
             font.pixelSize: 14
             anchors.left: parent.left
             anchors.leftMargin: Style.current.smallPadding
@@ -198,6 +199,7 @@ ModalPopup {
         }
 
         CopyToClipBoardButton {
+            id: copyBtn
             anchors.top: labelChatKey.bottom
             anchors.left: valueChatKey.right
             anchors.leftMargin: Style.current.smallPadding

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

@@ -57,16 +57,13 @@ Item {
             font.pixelSize: 15
         }
 
-        StyledText {
+        Address {
             id: pubkeyText
             text: ensName !== "" ? username : pubkey
             anchors.bottom: profileImg.bottom
             anchors.left: profileName.left
-            font.family: Style.current.fontHexRegular.name
-            elide: Text.ElideMiddle
             width: 200
             font.pixelSize: 15
-            color: Style.current.darkGrey
         }
 
         SVGImage {

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -52,19 +52,17 @@ Item {
         font.pixelSize: 22
     }
 
-    StyledText {
+    Address {
         id: walletAddress
         text: currentAccount.address
-        font.family: Style.current.fontHexRegular.name
-        elide: Text.ElideMiddle
+        font.pixelSize: 13
         anchors.right: title.right
         anchors.rightMargin: 0
         anchors.top: title.bottom
         anchors.topMargin: 0
         anchors.left: title.left
         anchors.leftMargin: 0
-        font.pixelSize: 13
-        color: Style.current.darkGrey
+        color: Style.current.secondaryText
     }
 
     SendModal{

ui/app/AppLayouts/Wallet/components/TransactionModal.qml

@@ -20,6 +20,7 @@ ModalPopup {
 
     StyledText {
       id: confirmationsCount
+      // TODO get the right value
       //% "9999 Confirmations"
       text: qsTrId("9999-confirmations")
       font.pixelSize: 14
@@ -29,11 +30,13 @@ ModalPopup {
       id: confirmationsInfo
       //% "When the transaction has 12 confirmations you can consider it settled."
       text: qsTrId("confirmations-helper-text")
+      wrapMode: Text.WordWrap
       font.pixelSize: 14
       font.weight: Font.Medium
       color: Style.current.darkGrey
       anchors.top: confirmationsCount.bottom
       anchors.topMargin: Style.current.smallPadding
+      width:parent.width
     }
   }
 
@@ -79,6 +82,8 @@ ModalPopup {
     anchors.topMargin: Style.current.padding
     anchors.left: parent.left
     anchors.leftMargin: Style.current.smallPadding
+    anchors.right: parent.right
+    anchors.rightMargin: Style.current.smallPadding
     height: children[0].height
 
     StyledText {
@@ -90,12 +95,12 @@ ModalPopup {
       color: Style.current.darkGrey
     }
 
-    StyledText {
+    Address {
       id: valueHash
       text: blockHash
-      font.family: Style.current.fontHexRegular.name
       width: 160
-      elide: Text.ElideMiddle
+      maxWidth: parent.width - labelHash.width - Style.current.padding
+      color: Style.current.textColor
       font.pixelSize: 14
       anchors.left: labelHash.right
       anchors.leftMargin: Style.current.padding
@@ -119,12 +124,11 @@ ModalPopup {
       color: Style.current.darkGrey
     }
 
-    StyledText {
+    Address {
       id: valueFrom
       text: fromAddress
-      font.family: Style.current.fontHexRegular.name
+      color: Style.current.textColor
       width: 160
-      elide: Text.ElideMiddle
       font.pixelSize: 14
       anchors.left: labelFrom.right
       anchors.leftMargin: Style.current.padding
@@ -148,11 +152,11 @@ ModalPopup {
       color: Style.current.darkGrey
     }
 
-    StyledText {
+    Address {
       id: valueTo
       text: to
+      color: Style.current.textColor
       width: 160
-      elide: Text.ElideMiddle
       font.pixelSize: 14
       anchors.left: labelTo.right
       anchors.leftMargin: Style.current.padding

ui/onboarding/Login.qml

@@ -115,13 +115,10 @@ Item {
             }
         }
 
-        StyledText {
+        Address {
             id: addressText
             width: 90
-            color: Style.current.darkGrey
             text: loginModel.currentAccount.address
-            font.family: Style.current.fontHexRegular.name
-            elide: Text.ElideMiddle
             font.pixelSize: 15
             anchors.top: usernameText.bottom
             anchors.topMargin: 4

ui/shared/Address.qml

@@ -4,28 +4,29 @@ import "../imports"
 
 StyledText {
     property bool expanded: false
+    property int maxWidth: 0
     property int oldWidth
     id: addressComponent
     text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
     font.pixelSize: 13
     font.family: Style.current.fontHexRegular.name
-    elide: expanded ? Text.ElideNone : Text.ElideMiddle
-    color: Style.current.darkGrey
+    elide: Text.ElideMiddle
+    color: Style.current.secondaryText
 
     MouseArea {
         width: parent.width
         height: parent.height
         cursorShape: Qt.PointingHandCursor
         onClicked: {
-
             if (addressComponent.expanded) {
                 addressComponent.width = addressComponent.oldWidth
                 this.width = addressComponent.width
             } else {
-
-                this.width = addressComponent.implicitWidth
                 addressComponent.oldWidth = addressComponent.width
-                addressComponent.width = addressComponent.implicitWidth
+                addressComponent.width = addressComponent.maxWidth > 0 && addressComponent.implicitWidth > addressComponent.maxWidth ?
+                            addressComponent.maxWidth :
+                            addressComponent.implicitWidth
+                this.width = addressComponent.width
             }
             addressComponent.expanded = !addressComponent.expanded
         }