fix: Add additional information to the Beta tags (#15988)

- 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
2024-08-05 20:15:27 +02:00 · 2024-08-05 20:15:27 +02:00 · 85a88a77ed
parent 1b15a1f12e
commit 85a88a77ed
16 changed files with 106 additions and 27 deletions
--- a/storybook/pages/StatusExperimentalTagPage.qml
+++ b/storybook/pages/StatusExperimentalTagPage.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!!!"
+            }
+        }
    }
 }

--- a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
+++ b/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
+    }
 }
--- a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml
+++ b/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
--- a/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
+++ b/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

--- a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
@ -1,5 +1,6 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

--- a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml
+++ b/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,17 +56,21 @@ 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
+                }
            }
        }
    }

-    StatusListSectionHeadline { 
+    StatusListSectionHeadline {
        text: qsTr("Apps")
        width: root.width
    }
--- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
+++ b/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.")
+                   })
        }
    }

--- a/ui/app/AppLayouts/Profile/views/SyncingView.qml
+++ b/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.")
                        }
                    }
                }
--- a/ui/app/AppLayouts/Profile/views/WalletView.qml
+++ b/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 {
--- a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
+++ b/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")
        }
    }

--- a/ui/app/AppLayouts/Wallet/WalletLayout.qml
+++ b/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,
--- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml
+++ b/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()
    }
--- a/ui/app/AppLayouts/Wallet/panels/WalletFooter.qml
+++ b/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()
--- a/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml
+++ b/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
--- a/ui/imports/shared/views/HistoryView.qml
+++ b/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
--- a/ui/imports/utils/Utils.qml
+++ b/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) {