chore(dapps) foundation for dapps page in storybook

Updates #14317

storybook/pages/ConnectedDappsButtonPage.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
+import Qt.labs.settings 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Popups.Dialog 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+import AppLayouts.Wallet.controls 1.0
+
+import SortFilterProxyModel 0.2
+
+import utils 1.0
+
+Item {
+    id: root
+
+    // qml Splitter
+    SplitView {
+        anchors.fill: parent
+
+        ColumnLayout {
+            SplitView.fillWidth: true
+
+            Rectangle {
+                Layout.alignment: Qt.AlignCenter
+                Layout.preferredWidth: dappsButton.implicitHeight + 20
+                Layout.preferredHeight: dappsButton.implicitHeight + 20
+
+                border.color: "blue"
+                border.width: 1
+
+                ConnectedDappsButton {
+                    id: dappsButton
+
+                    anchors.centerIn: parent
+
+                    spacing: 8
+
+                    onConnectDapp: {
+                        console.warn("TODO: run ConnectDappPopup...")
+                    }
+                }
+            }
+            ColumnLayout {}
+        }
+
+        ColumnLayout {
+            id: optionsSpace
+
+            // spacer
+            ColumnLayout {}
+        }
+    }
+}
+
+// category: Popups

storybook/pages/WalletConnectPage.qml

@@ -1,206 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQml 2.15
-import Qt.labs.settings 1.0
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Utils 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Popups.Dialog 0.1
-
-import Models 1.0
-import Storybook 1.0
-
-import AppLayouts.Wallet.views.walletconnect 1.0
-
-import SortFilterProxyModel 0.2
-
-import utils 1.0
-
-import nim 1.0
-
-Item {
-    id: root
-
-    WalletConnect {
-        id: wc
-
-        anchors.top: parent.bottom
-        anchors.left: parent.left
-        url: `${pagesFolder}/../stubs/AppLayouts/Wallet/views/walletconnect/src/index.html`
-
-        controller: WalletConnectController {
-            sessionProposal: function(sessionProposalJson) {
-                respondSessionProposal(sessionProposalJson, `{"eip155":{"methods":["eth_sendTransaction","eth_sendRawTransaction","personal_sign","eth_sign","eth_signTransaction","eth_signTypedData","wallet_switchEthereumChain"],"chains":["eip155:5"],"events":["accountsChanged","chainChanged"],"accounts":["eip155:5:0xE2d622C817878dA5143bBE06866ca8E35273Ba8a"]}}`, "")
-            }
-
-            recordSuccessfulPairing: function(sessionProposalJson) {
-                const sessionProposal = JSON.parse(sessionProposalJson)
-
-                pairingsModel.append({
-                    topic: sessionProposal.params.pairingTopic,
-                    expiry: sessionProposal.params.expiry,
-                    active: true,
-                    peerMetadata: {
-                        name: sessionProposal.params.proposer.metadata.name,
-                        url: sessionProposal.params.proposer.metadata.url,
-                        icons: sessionProposal.params.proposer.metadata.icons,
-                    }
-                })
-                root.saveListModel(pairingsModel)
-            }
-            deletePairing: function(pairingTopic) {
-                var found = false
-                for (var i = 0; i < pairingsModel.count; i++) {
-                    if (pairingsModel.get(i).topic === pairingTopic) {
-                        pairingsModel.get(i).active = false
-                        found = true
-                        break;
-                    }
-                }
-                if (!found) {
-                    console.error("Mock Controller: pairing not found", pairingTopic)
-                }
-                root.saveListModel(pairingsModel)
-            }
-            sessionRequest: function(sessionRequestJson, password) {
-                const signedJson = "0x1234567890"
-                this.respondSessionRequest(sessionRequestJson, signedJson, respondError.checked)
-            }
-
-            hasActivePairings: settings.hasActivePairings
-            projectId: "87815d72a81d739d2a7ce15c2cfdefb3"
-        }
-
-        clip: true
-    }
-
-    // qml Splitter
-    SplitView {
-        anchors.fill: parent
-
-        ColumnLayout {
-            SplitView.fillWidth: true
-
-            StatusButton {
-                id: openModalButton
-                text: "OpenModal"
-                onClicked: {
-                    wc.modal.open()
-                }
-            }
-            ColumnLayout {}
-        }
-
-        ColumnLayout {
-            id: optionsSpace
-
-            StatusRadioButton {
-                text: "WebEngine running"
-                checked: wc.sdk.webEngineLoader.active
-                enabled: false
-            }
-
-            RowLayout {
-                id: optionsHeader
-
-                Text { text: "projectId" }
-                Text {
-                    readonly property string projectId: wc.controller.projectId
-                    text: projectId.substring(0, 3) + "..." + projectId.substring(projectId.length - 3)
-                    font.bold: true
-                }
-            }
-            StatusCheckBox {
-                id: hasActivePairingsCheckBox
-                text: "Has active pairings"
-                checked: settings.hasActivePairings
-            }
-            StatusCheckBox {
-                id: respondError
-                text: "Respond Error"
-                checked: false
-            }
-
-            StatusBaseText { text: "Pairings History"; font.bold: true }
-            StatusButton {
-                text: "Clear"
-                onClicked: { pairingsModel.clear(); root.saveListModel(pairingsModel); }
-            }
-            Pairings {
-                id: pairingsView
-
-                Layout.fillWidth: true
-                Layout.minimumWidth: count > 0 ? 400 : 0
-                Layout.preferredHeight: contentHeight
-                Layout.maximumHeight: 300
-
-                onDisconnect: function(pairingTopic) {
-                    wc.sdk.disconnectPairing(pairingTopic)
-                }
-
-                model: ListModel {
-                    id: pairingsModel
-                }
-                clip: true
-            }
-
-            RowLayout {
-                StatusButton {
-                    text: "Trigger Deep-Link"
-                    onClicked: {
-                        wc.controller.requestOpenWalletConnectPopup(deepLinkInput.text)
-                    }
-                }
-
-                StatusInput {
-                    id: deepLinkInput
-
-                    Layout.preferredWidth: 300
-
-                    placeholderText: "wc:a4f32854428af0f5b66...."
-                }
-            }
-
-            // spacer
-            ColumnLayout {}
-        }
-    }
-
-
-
-    Settings {
-        id: settings
-
-        property bool hasActivePairings: hasActivePairingsCheckBox.checked
-        property string pairingsHistory: ""
-    }
-
-    Component.onCompleted: {
-        loadListModel(pairingsModel)
-    }
-
-    function saveListModel(model) {
-        var listArray = [];
-        for (var i = 0; i < model.count; i++) {
-            listArray.push(model.get(i));
-        }
-        settings.pairingsHistory = JSON.stringify(listArray);
-    }
-
-    function loadListModel(model) {
-        pairingsModel.clear();
-        if (!settings.pairingsHistory) {
-            return;
-        }
-        var listArray = JSON.parse(settings.pairingsHistory);
-        listArray.forEach(function(entry) {
-            pairingsModel.append(entry);
-        });
-    }
-}
-
-// category: Popups

storybook/qmlTests/tests/tst_ConnectedDappsButton.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtTest 1.15
+
+import QtQuick.Controls 2.15
+
+import Storybook 1.0
+
+import AppLayouts.Wallet.controls 1.0
+
+Item {
+    id: root
+    width: 600
+    height: 400
+
+    Component {
+        id: componentUnderTest
+        ConnectedDappsButton {
+            id: control
+        }
+    }
+
+    TestCase {
+        name: "ConnectedDappsButton"
+        when: windowShown
+
+        property ConnectedDappsButton controlUnderTest: null
+
+        function init() {
+            controlUnderTest = createTemporaryObject(componentUnderTest, root)
+        }
+
+        function test_ClickToOpenAndClosePopup() {
+            verify(!!controlUnderTest)
+            waitForRendering(controlUnderTest)
+
+            mouseClick(controlUnderTest, Qt.LeftButton)
+            waitForRendering(controlUnderTest)
+
+            let popup = findChild(controlUnderTest, "dappsPopup")
+            verify(!!popup)
+            verify(popup.opened)
+
+            mouseClick(Overlay.overlay, Qt.LeftButton)
+            waitForRendering(controlUnderTest)
+
+            verify(!popup.opened)
+        }
+    }
+}

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

@@ -15,6 +15,10 @@ StatusButton {
 
     signal connectDapp()
 
+    implicitHeight: 38
+
+    size: StatusBaseButton.Size.Small
+
     borderColor: Theme.palette.directColor7
     normalColor: Theme.palette.transparent
     hoverColor: Theme.palette.baseColor2
@@ -40,6 +44,9 @@ StatusButton {
 
     Popup {
         id: popup
+
+        objectName: "dappsPopup"
+
         contentWidth: root.menuWidth
         contentHeight: list.height
         modal: false

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

@@ -75,11 +75,9 @@ Item {
             Layout.topMargin: 5
 
             ConnectedDappsButton {
-                Layout.preferredHeight: 38
                 Layout.alignment: Qt.AlignTop
 
                 spacing: 8
-                size: StatusBaseButton.Size.Small
                 visible: !root.walletStore.showSavedAddresses
 
                 onConnectDapp: {

ui/imports/shared/popups/walletconnect/sdk/README.md

@@ -1,10 +1,6 @@
 # Wallet Connect Integration
 
-## TODO
+## Questions
-
-- [ ] test namespaces implementation https://se-sdk-dapp.vercel.app/
-
-### Design questions
 
 - [ ] Do we report **disabled chains**? **Update session** in case of enabled/disabled chains?
 - [ ] User error workflow: retry?