fix: Add additional information to the Beta tags

- display additional beta information as a tooltip
- don't overlap the Beta badge with the unread msg indicator
- some minor cleanups & fixes

Fixes #15795
Fixes #15929

storybook/pages/StatusBetaTagPage.qml

@@ -17,8 +17,8 @@ SplitView {
         SplitView.fillHeight: true
 
         StatusBetaTag {
-            id: tag
             anchors.centerIn: parent
+            tooltipText: ctrlTooltip.text
         }
     }
 
@@ -27,6 +27,16 @@ SplitView {
         SplitView.preferredWidth: 400
 
         SplitView.fillHeight: true
+
+        RowLayout {
+            Label {
+                text: "Tooltip:"
+            }
+            TextField {
+                id: ctrlTooltip
+                text: "Hic sunt leones!!!"
+            }
+        }
     }
 }
 

ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml

@@ -1,10 +1,14 @@
-import QtQuick 2.13
+import QtQuick 2.15
+
 import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Core.Theme 0.1
 
 Rectangle {
     id: root
 
+    property alias tooltipText: tip.text
+
     implicitHeight: 20
     implicitWidth: 36
     radius: 4
@@ -20,4 +24,13 @@ Rectangle {
         anchors.centerIn: parent
         text: "Beta"
     }
+
+    StatusToolTip {
+        id: tip
+        visible: hoverHandler.hovered && !!text
+    }
+
+    HoverHandler {
+        id: hoverHandler
+    }
 }

ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.13
+import QtQuick 2.15
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -29,14 +30,6 @@ StatusListItem {
           Theme.palette.baseColor4
     }
 
-    MouseArea {
-        id: sensor
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor 
-        hoverEnabled: true
-        onClicked: statusNavigationListItem.clicked(statusNavigationListItem.itemId, mouse)
-    }
-
     components: [
         StatusBadge {
             id: statusBadge

ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -1,9 +1,9 @@
-import QtQuick 2.13
+import QtQuick 2.15
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
-
 Loader {
     id: root
 

ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml

@@ -1,5 +1,6 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 

ui/app/AppLayouts/Profile/panels/MenuPanel.qml

@@ -28,6 +28,7 @@ Column {
     Repeater {
         id: mainMenuItems
         delegate: StatusNavigationListItem {
+            id: navigationItem
             objectName: itemId + "-MainMenuItem"
             width: root.width
             itemId: model.subsection
@@ -41,7 +42,7 @@ Column {
                         return !root.privacyStore.mnemonicBackedUp
                     case Constants.settingsSubsection.syncingSettings:
                         return root.devicesStore.devicesModel.count - root.devicesStore.devicesModel.pairedCount
-                    default: return "";
+                    default: return 0
                 }
             }
             visible: {
@@ -55,12 +56,16 @@ Column {
             }
 
             Loader {
+                id: betaTagLoader
+                readonly property string experimentalTooltip: model.experimentalTooltip
                 active: model.isExperimental
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: parent.right
-                anchors.rightMargin: 15
+                anchors.rightMargin: Style.current.padding + (navigationItem.badge.visible ? navigationItem.badge.width + Style.current.halfPadding : 0)
 
-                sourceComponent: StatusBetaTag {}
+                sourceComponent: StatusBetaTag {
+                    tooltipText: betaTagLoader.experimentalTooltip
+                }
             }
         }
     }

ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml

@@ -108,11 +108,15 @@ QtObject {
             append({subsection: Constants.settingsSubsection.ensUsernames,
                        text: qsTr("ENS usernames"),
                        icon: "username",
-                       isExperimental: true})
+                       isExperimental: true,
+                       experimentalTooltip: qsTr("This section is going through a redesign.")
+                   })
             append({subsection: Constants.settingsSubsection.syncingSettings,
                        text: qsTr("Syncing"),
                        icon: "rotate",
-                       isExperimental: true})
+                       isExperimental: true,
+                       experimentalTooltip: qsTr("Connection problems can happen.<br>If they do, please use the Enter a Seed Phrase feature instead.")
+                   })
         }
     }
 

ui/app/AppLayouts/Profile/views/SyncingView.qml

@@ -188,6 +188,7 @@ SettingsContentBase {
                             anchors.left: parent.right
                             anchors.leftMargin: 8
                             anchors.verticalCenter: parent.verticalCenter
+                            tooltipText: qsTr("Connection problems can happen.<br>If they do, please use the Enter a Seed Phrase feature instead.")
                         }
                     }
                 }

ui/app/AppLayouts/Profile/views/WalletView.qml

@@ -388,7 +388,9 @@ SettingsContentBase {
 
         Component {
             id: experimentalTagComponent
-            StatusBetaTag {}
+            StatusBetaTag {
+                tooltipText: qsTr("Under construction, you might experience some minor issues")
+            }
         }
 
         Component {

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

@@ -146,6 +146,7 @@ Column {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.leftMargin: 125
+            tooltipText: qsTr("Under construction, you might experience some minor issues")
         }
     }
 
@@ -168,6 +169,7 @@ Column {
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.leftMargin: 135
+            tooltipText: qsTr("Under construction, you might experience some minor issues")
         }
     }
 

ui/app/AppLayouts/Wallet/WalletLayout.qml

@@ -204,7 +204,7 @@ Item {
             sendModal: root.sendModalPopup
             networkConnectionStore: root.networkConnectionStore
 
-            headerButton.text: RootStore.overview.ens || StatusQUtils.Utils.elideText(RootStore.overview.mixedcaseAddress, 6, 4)
+            headerButton.text: RootStore.overview.ens || StatusQUtils.Utils.elideAndFormatWalletAddress(RootStore.overview.mixedcaseAddress)
             headerButton.visible: !RootStore.overview.isAllAccounts
             onLaunchShareAddressModal: Global.openShowQRPopup({
                                                                   switchingAccounsEnabled: true,

ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml

@@ -188,6 +188,7 @@ Control {
     }
 
     MouseArea {
+        cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
         anchors.fill: parent
         onClicked: dropdown.opened ? dropdown.close() : dropdown.open()
     }

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

@@ -144,9 +144,9 @@ Rectangle {
         StatusFlatButton {
             id: swap
 
-            interactive: !d.isCollectibleSoulbound && networkConnectionStore.sendBuyBridgeEnabled
+            interactive: !d.isCollectibleViewed && networkConnectionStore.sendBuyBridgeEnabled
             visible: d.swapActionAvailable
-            tooltip.text: d.isCollectibleSoulbound ? qsTr("Soulbound collectibles cannot be swapped") :  networkConnectionStore.sendBuyBridgeToolTipText
+            tooltip.text: d.isCollectibleViewed ? qsTr("Collectibles cannot be swapped") : networkConnectionStore.sendBuyBridgeToolTipText
             icon.name: "swap"
             text: qsTr("Swap")
             onClicked: root.launchSwapModal()

ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml

@@ -76,7 +76,9 @@ Item {
             }
         }
 
-        StatusBetaTag {}
+        StatusBetaTag {
+            tooltipText: qsTr("Under construction.<br>More notification types to be coming soon.")
+        }
 
         StatusFlatRoundButton {
             id: markAllReadBtn

ui/imports/shared/views/HistoryView.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1 as SQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core.Theme 0.1
@@ -105,6 +106,39 @@ ColumnLayout {
         }
     }
 
+    InformationTag {
+        id: betaTag
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: root.firstItemOffset
+        Layout.preferredHeight: 56
+        visible: root.firstItemOffset === 0 // visible only in the main wallet view
+        spacing: Style.current.halfPadding
+        backgroundColor: Theme.palette.primaryColor3
+        bgRadius: Style.current.radius
+        bgBorderColor: Theme.palette.primaryColor2
+        tagPrimaryLabel.textFormat: Text.RichText
+        tagPrimaryLabel.font.pixelSize: Style.current.additionalTextSize
+        tagPrimaryLabel.text: qsTr("Activity is in beta. If transactions are missing, check %1, %2, or %3.")
+            .arg(Utils.getStyledLink("Etherscan", "https://etherscan.io/", tagPrimaryLabel.hoveredLink))
+            .arg(Utils.getStyledLink("OP Explorer", "https://optimistic.etherscan.io/", tagPrimaryLabel.hoveredLink))
+            .arg(Utils.getStyledLink("Arbiscan", "https://arbiscan.io/", tagPrimaryLabel.hoveredLink))
+        tagPrimaryLabel.onLinkActivated: (link) => {
+            const explorerUrl = WalletStores.RootStore.showAllAccounts ? link
+                                                                       : "%1/%2/%3".arg(link).arg(Constants.networkExplorerLinks.addressPath).arg(WalletStores.RootStore.selectedAddress)
+            Global.openLinkWithConfirmation(explorerUrl, SQUtils.StringUtils.extractDomainFromLink(explorerUrl))
+        }
+        asset {
+            name: "warning"
+            width: 20
+            height: 20
+            color: Theme.palette.primaryColor1
+        }
+        HoverHandler {
+            cursorShape: hovered && !!parent.tagPrimaryLabel.hoveredLink ? Qt.PointingHandCursor : undefined
+        }
+    }
+
     StyledText {
         id: nonArchivalNodeError
         Layout.fillWidth: true

ui/imports/utils/Utils.qml

@@ -137,11 +137,22 @@ QtObject {
                 `<a href="${link}">${link}</a>`
     }
 
+    function getStyledLink(linkText, linkUrl, hoveredLink, textColor = Theme.palette.directColor1, linkColor = Theme.palette.primaryColor1) {
+        return `<style type="text/css">` +
+                `a {` +
+                `color: ${textColor};` +
+                `text-decoration: underline;` +
+                `}` +
+                (hoveredLink === linkUrl ? `a[href="${linkUrl}"] { text-decoration: underline; color: ${linkColor} }` : "") +
+                `</style>` +
+                `<a href="${linkUrl}">${linkText}</a>`
+    }
+
     function isMnemonic(value) {
         if(!value.match(/^([a-z\s]+)$/)){
             return false;
         }
-        return  Utils.seedPhraseValidWordCount(value);
+        return seedPhraseValidWordCount(value);
     }
 
     function compactAddress(addr, numberOfChars) {