feat: introduce StatusExpandableAddress component

This introduces a new component to render Addresses that can be
expanded as well as copied using `CopyToClipBoardButton`.
While there's already an `Address` component that allows for expansion,
it doesn't give us control over it's look and feel and, should rather
be a `Button` anyways.

There's also cases in the application where we render a collapsed address
and don't allow for expanding it. In such cases, we might not want/need
a button at all.

Might make sense to introduce a separate address component that just shows
a collapsed address without any behaviour, which can then be used inside
`StatusExapandableAddress`.

Closes #1633

ui/app/AppLayouts/Wallet/WalletHeader.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../imports"
 import "../../../shared"
+import "../../../shared/status"
 import "./components"
 
 Item {
@@ -52,17 +53,14 @@ Item {
         font.pixelSize: 22
     }
 
-    Address {
+    StatusExpandableAddress {
         id: walletAddress
-        text: currentAccount.address
-        font.pixelSize: 13
-        anchors.right: title.right
-        anchors.rightMargin: 0
+        address: currentAccount.address
         anchors.top: title.bottom
-        anchors.topMargin: 0
         anchors.left: title.left
+        addressWidth: 180
         anchors.leftMargin: 0
-        color: Style.current.secondaryText
+        anchors.topMargin: 0
     }
 
     ReceiveModal{

ui/shared/status/StatusExpandableAddress.qml

@@ -0,0 +1,98 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../imports"
+import "../../shared"
+
+Item {
+    id: root
+    height: control.height
+    width: control.width + copyToClipBoardBtn.width + Style.current.smallPadding
+    property bool hovered: false
+    property string address: ""
+    property bool expanded: false
+    property int addressWidth
+    property int originalButtonWidth
+
+    Button {
+        id: control
+        width: root.addressWidth
+        leftPadding: 8
+        rightPadding: 8
+        contentItem: StyledText {
+            id: addressText
+            text: root.address
+            font.pixelSize: 13
+            font.family: Style.current.fontHexRegular.name
+            color: Style.current.secondaryText
+            elide: Text.ElideMiddle
+            horizontalAlignment: Text.AlignHCenter
+        }
+
+        background: Rectangle {
+            color: root.hovered ? Style.current.backgroundHover : "transparent"
+            radius: Style.current.radius
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                if (root.expanded) {
+                    control.width = root.originalButtonWidth
+                    this.width = control.width
+                } else {
+                    root.originalButtonWidth = root.addressWidth
+                    control.width = control.maxWidth > 0 ?
+                        Math.min(addressText.implicitWidth, control.maxWidth) :
+                        addressText.implicitWidth + control.leftPadding + control.rightPadding
+                }
+                this.width = control.width
+                root.expanded = !root.expanded
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        propagateComposedEvents: true
+        onPressed: mouse.accepted = false
+        onEntered: {
+            if (!root.hovered) {
+                root.hovered = true
+            }
+        }
+        onExited: {
+            if (root.hovered) {
+                root.hovered = false
+            }
+        }
+    }
+
+    CopyToClipBoardButton {
+        id: copyToClipBoardBtn
+        visible: root.hovered
+        anchors.left: control.right
+        anchors.leftMargin: Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
+        textToCopy: root.address
+        MouseArea {
+            anchors.fill: parent
+            propagateComposedEvents: true
+            onPressed: mouse.accepted = false
+            cursorShape: Qt.PointingHandCursor
+            hoverEnabled: true
+            onEntered: {
+                if (!root.hovered) {
+                    root.hovered = true
+                }
+            }
+            onExited: {
+                if (root.hovered) {
+                    root.hovered = false
+                }
+            }
+        }
+    }
+}