feat: add Address component that expands on click

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

@@ -99,19 +99,20 @@ Item {
     }
 
     RowLayout {
-        id: uiCatalong
+        id: uiCatalog
         anchors.top: networkTabSettings.bottom
         anchors.topMargin: 20
         anchors.left: parent.left
         anchors.leftMargin: 24
         Component.onCompleted: {
-            uiComponentBtn.enabled = false
+            uiComponentBtn.enabled = true
         }
 
         StyledText {
             //% "UI Components"
             text: qsTrId("ui-components")
         }
+
         Switch {
             checked: uiComponentBtn.enabled
             onCheckedChanged: function(value) {

ui/app/AppLayouts/UIComponents/UIComponents.qml

@@ -14,6 +14,7 @@ Item {
     ColumnLayout {
         id: buttons
         spacing: 6
+        width: parent.width
 
         RowLayout {
             Text {
@@ -134,5 +135,42 @@ Item {
                 state: "pending"
             }
         }
+
+        RowLayout {
+            width: parent.width
+            Layout.fillWidth: true
+            Item {
+                width: parent.width
+                height: addressComponent.height
+                Layout.fillWidth: true
+                Address {
+                    id: addressComponent
+                    text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+                    width: 100
+                }
+            }
+        }
+        RowLayout {
+            width: parent.width
+            Layout.fillWidth: true
+            Item {
+                width: parent.width
+                height: addressComponent.height
+                Layout.fillWidth: true
+                Address {
+                    id: addressComponentWidthAnchors
+                    text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.rightMargin: parent.width - 100
+                }
+            }
+        }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.75;height:480;width:1000}
+}
+##^##*/

ui/nim-status-client.pro

@@ -157,6 +157,7 @@ DISTFILES += \
     app/AppLayouts/Profile/Sections/BackupSeedModal.qml \
     app/AppLayouts/Profile/Sections/MyProfileContainer.qml \
     app/AppLayouts/Profile/Sections/SoundsContainer.qml \
+    app/AppLayouts/UIComponents/UIComponents.qml \
     app/AppLayouts/Wallet/ReceiveModal.qml \
     app/AppLayouts/Wallet/components/HeaderButton.qml \
     app/AppLayouts/Profile/Sections/Data/locales.js \
@@ -329,6 +330,7 @@ DISTFILES += \
     onboarding/qmldir \
     shared/AccountSelector.qml \
     shared/AddButton.qml \
+    shared/Address.qml \
     shared/IconButton.qml \
     shared/Input.qml \
     shared/LabelValueRow.qml \

ui/shared/Address.qml

@@ -0,0 +1,39 @@
+import QtQuick 2.13
+import "../imports"
+
+
+StyledText {
+    property bool expanded: false
+    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
+
+    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.expanded = !addressComponent.expanded
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff"}
+}
+##^##*/