feat: Add external link to download extension plugin

- add a local popup with selection between "Status Connector" (external
link to Chrome Store) or "Wallet Connect" (the old flow involving
inputting the WC URI)
- simplify DAppsListPopup to use StatusDropdown to reduce code
duplication
- adjust SB and QML tests

Fixes #16111

storybook/pages/DAppsWorkflowPage.qml

@@ -8,7 +8,6 @@ import QtQml.Models 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Backpressure 0.1
-import StatusQ.Core.Utils 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
@@ -16,7 +15,7 @@ import StatusQ.Popups.Dialog 0.1
 import StatusQ.Core.Utils 0.1 as SQUtils
 
 import Models 1.0
-import Storybook 1.0
+import Storybook 1.0 as StoryBook
 
 import AppLayouts.Wallet.controls 1.0
 import AppLayouts.Wallet.services.dapps 1.0
@@ -79,7 +78,7 @@ Item {
                 StatusBaseText { text: "projectId" }
                 StatusBaseText {
                     id: projectIdText
-                    readonly property string projectId: SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID")
+                    readonly property string projectId: StoryBook.SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID")
                     text: SQUtils.Utils.elideText(projectId, 3)
                     font.bold: true
                 }
@@ -410,7 +409,7 @@ Item {
             }
         }
 
-        walletRootStore: QObject {
+        walletRootStore: SQUtils.QObject {
             property var filteredFlatModel: SortFilterProxyModel {
                 sourceModel: NetworksModel.flatNetworks
                 filters: ValueFilter { roleName: "isTest"; value: settings.testNetworks; }
@@ -442,7 +441,7 @@ Item {
     }
 
 
-    QObject {
+    SQUtils.QObject {
         id: d
 
         property int activeTestCase: noTestCase

storybook/pages/DappsComboBoxPage.qml

@@ -19,6 +19,8 @@ SplitView {
             anchors.horizontalCenter: parent.horizontalCenter
             model: emptyModelCheckbox.checked ? emptyModel : smallModelCheckbox.checked ? smallModel: dappsModel
             popup.visible: true
+
+            onPairDapp: console.log("onPairDapp")
         }
 
         ListModel {
@@ -100,16 +102,19 @@ SplitView {
         SplitView.fillHeight: true
 
         ColumnLayout {
-            CheckBox {
+            RadioButton {
-                id: emptyModelCheckbox
+                text: "Default model"
-                text: "Empty model"
+                checked: true
-                checked: false
             }
 
-            CheckBox {
+            RadioButton {
+                id: emptyModelCheckbox
+                text: "Empty model"
+            }
+
+            RadioButton {
                 id: smallModelCheckbox
                 text: "Small model"
-                checked: false
             }
         }
     }
@@ -118,3 +123,4 @@ SplitView {
 // category: Controls
 
 // https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=130-31949&t=hnzB58fTnEnx2z84-0
+// https://www.figma.com/design/1OYKMzU6KTQHQAqDhojk0r/Status-connector?node-id=3216-5618&node-type=FRAME&t=CqsuoQHp1p5MOUt9-0

storybook/qmlTests/tests/tst_DAppsWorkflow.qml

@@ -807,6 +807,11 @@ Item {
             verify(pairWCReadySpy.count === 0, "expected NO pairWCReady signal to be emitted")
             mouseClick(connectButton)
             waitForRendering(controlUnderTest)
+
+            const btnWalletConnect = findChild(controlUnderTest, "btnWalletConnect")
+            verify(!!btnWalletConnect)
+            mouseClick(btnWalletConnect)
+
             verify(pairWCReadySpy.count === 1, "expected pairWCReady signal to be emitted")
 
             let pairWCModal = findChild(controlUnderTest, "pairWCModal")

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

@@ -1,8 +1,9 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
+import QtQml.Models 2.15
 
+import utils 1.0
 import shared.controls 1.0
 import shared.popups.walletconnect 1.0
 import shared.popups.walletconnect.controls 1.0
@@ -11,9 +12,9 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
+import StatusQ.Popups.Dialog 0.1
 import StatusQ.Components.private 0.1 as SQP
 
-
 ComboBox {
     id: root
 
@@ -71,8 +72,8 @@ ComboBox {
 
         delegateModel: root.delegateModel
 
-        onPairWCDapp: {
+        onConnectDapp: {
-            root.pairDapp()
+            dappConnectSelectComponent.createObject(root).open()
             this.close()
         }
 
@@ -81,6 +82,69 @@ ComboBox {
         }
     }
 
+    Component {
+        id: dappConnectSelectComponent
+        StatusDialog {
+            id: dappConnectSelect
+            width: 480
+            topPadding: Style.current.bigPadding
+            leftPadding: Style.current.padding
+            rightPadding: Style.current.padding
+            bottomPadding: 4
+            destroyOnClose: true
+
+            title: qsTr("Connect a dApp")
+            footer: StatusDialogFooter {
+                rightButtons: ObjectModel {
+                    StatusButton {
+                        text: qsTr("Cancel")
+                        onClicked: dappConnectSelect.close()
+                    }
+                }
+            }
+
+            contentItem: ColumnLayout {
+                StatusBaseText {
+                    Layout.fillWidth: true
+                    Layout.leftMargin: Style.current.padding
+                    color: Theme.palette.baseColor1
+                    text: qsTr("How would you like to connect?")
+                }
+                StatusListItem {
+                    title: "Status Connector"
+                    asset.name: Style.png("status-logo")
+                    asset.isImage: true
+                    components: [
+                        StatusIcon {
+                            icon: "external-link"
+                            color: Theme.palette.baseColor1
+                        }
+                    ]
+                    onClicked: {
+                        dappConnectSelect.close()
+                        Global.openLink("https://chromewebstore.google.com/detail/a-wallet-connector-by-sta/kahehnbpamjplefhpkhafinaodkkenpg")
+                    }
+                }
+                StatusListItem {
+                    objectName: "btnWalletConnect"
+                    title: "Wallet Connect"
+                    asset.name: Style.svg("walletconnect")
+                    asset.isImage: true
+                    components: [
+                        StatusIcon {
+                            icon: "next"
+                            color: Theme.palette.baseColor1
+                        }
+                    ]
+                    onClicked: {
+                        dappConnectSelect.close()
+                        root.pairDapp()
+                    }
+                }
+            }
+        }
+    }
+
     StatusToolTip {
         id: tooltip
         objectName: "dappTooltip"

ui/imports/assets/icons/walletconnect.svg

@@ -0,0 +1 @@
+<svg fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h400v400h-400z"/></clipPath><g clip-path="url(#a)"><circle cx="200" cy="200" fill="#3396ff" r="199.5" stroke="#66b1ff"/><path d="m122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022c2.14 2.086 2.14 5.469 0 7.555l-17.617 17.18c-1.07 1.043-2.804 1.043-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401c-1.07 1.043-2.804 1.043-3.874 0l-17.617-17.18c-2.14-2.086-2.14-5.469 0-7.555zm191.397 35.529 15.679 15.29c2.14 2.086 2.14 5.469 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931c-.535-.522-1.402-.522-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.7015-68.945c-2.1396-2.086-2.1396-5.469 0-7.555l15.6795-15.29c2.1396-2.086 5.6085-2.086 7.7481 0l50.1789 48.932c.535.522 1.402.522 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932c.535.522 1.402.522 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0z" fill="#fff"/></g></svg>

ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml

@@ -157,7 +157,7 @@ StatusDialog {
     footer: StatusDialogFooter {
         id: footer
         rightButtons: ObjectModel {
-            StatusButton {
+            StatusFlatButton {
                 objectName: "rejectButton"
                 height: 44
                 text: qsTr("Reject")

ui/imports/shared/popups/walletconnect/DAppsListPopup.qml

@@ -1,9 +1,7 @@
 import QtQuick 2.15
-import QtQml 2.15
 import QtQuick.Controls 2.15
 import QtQml.Models 2.15
 import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -14,52 +12,19 @@ import shared.controls 1.0
 
 import utils 1.0
 
-Popup {
+StatusDropdown {
     id: root
 
     objectName: "dappsPopup"
 
     required property DelegateModel delegateModel
 
-    signal pairWCDapp()
+    signal connectDapp()
 
     width: 312
     padding: 0
 
     modal: false
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside
-
-    background: Rectangle {
-        id: backgroundContent
-
-        color: Theme.palette.statusMenu.backgroundColor
-        radius: 8
-        layer.enabled: true
-        layer.effect: DropShadow {
-            anchors.fill: parent
-            source: backgroundContent
-            horizontalOffset: 0
-            verticalOffset: 4
-            radius: 12
-            samples: 25
-            spread: 0.2
-            color: Theme.palette.dropShadow
-        }
-    }
-
-    // workaround for https://bugreports.qt.io/browse/QTBUG-87804
-    Binding on margins {
-        id: workaroundBinding
-
-        when: false
-        restoreMode: Binding.RestoreBindingOrValue
-    }
-
-    onImplicitContentHeightChanged: {
-        workaroundBinding.value = root.margins + 1
-        workaroundBinding.when = true
-        workaroundBinding.when = false
-    }
 
     contentItem: ColumnLayout {
         id: mainLayout
@@ -152,10 +117,8 @@ Popup {
 
             size: StatusButton.Size.Small
 
-            text: qsTr("Connect a dApp via WalletConnect")
+            text: qsTr("Connect a dApp")
-            onClicked: {
+            onClicked: root.connectDapp()
-                root.pairWCDapp()
-            }
         }
     }
 }