feat(dapps) add DAppsService component and ConnectDAppModal

storybook/CMakeLists.txt

@@ -64,6 +64,9 @@ add_executable(
   ${CORE_JS_FILES}
   ${STORYBOOK_QML_FILES}
   README.md
+   # Require for loading WalletConnect SDK;
+   # TODO #14696: remove this dependency
+   storybook-resources.qrc
 )
 
 target_compile_definitions(${PROJECT_NAME} PRIVATE

storybook/pages/BrowserSettingsPage.qml

@@ -56,8 +56,8 @@ SplitView {
 
             store: ProfileSectionStore {
                 property WalletStore walletStore: WalletStore {
-                    accountSensitiveSettings: mockData.accountSettings
-                    dappList: dappsModel
+                    property var accountSensitiveSettings: mockData.accountSettings
+                    property var dappList: dappsModel
 
                     function disconnect(dappName) {
                         for (let i = 0; i < dappsModel.count; i++) {

storybook/pages/ConnectDAppModalPage.qml

@@ -0,0 +1,126 @@
+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 QtTest 1.15
+
+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 shared.popups.walletconnect 1.0
+
+import SortFilterProxyModel 0.2
+
+import AppLayouts.Wallet.panels 1.0
+
+import utils 1.0
+import shared.stores 1.0
+
+Item {
+    id: root
+
+    function openModal() {
+        modal.openWithFilter([1, 42161], JSON.parse(`{
+            "metadata": {
+                "description": "React App for WalletConnect",
+                "icons": [
+                "https://avatars.githubusercontent.com/u/37784886"
+                ],
+                "name": "React App",
+                "url": "https://react-app.walletconnect.com",
+                "verifyUrl": "https://verify.walletconnect.com"
+            },
+            "publicKey": "300a6a1df4cb0cd73eb652f11845f35a318541eb18ab369860be85c0c2ada54a"
+        }`))
+        if (pairedCheckbox.checked) {
+            pairedResultTimer.restart()
+        }
+    }
+
+    // qml Splitter
+    SplitView {
+        anchors.fill: parent
+
+        ColumnLayout {
+            SplitView.fillWidth: true
+
+            Component.onCompleted: root.openModal()
+
+            StatusButton {
+                id: openButton
+
+                Layout.alignment: Qt.AlignHCenter
+                Layout.margins: 20
+
+                text: "Open ConnectDAppModal"
+
+                onClicked: root.openModal()
+            }
+
+            ConnectDAppModal {
+                id: modal
+
+                anchors.centerIn: parent
+
+                spacing: 8
+
+                accounts: WalletAccountsModel{
+                }
+
+                flatNetworks: SortFilterProxyModel {
+                    sourceModel: NetworksModel.flatNetworks
+                    filters: ValueFilter { roleName: "isTest"; value: false; }
+                }
+            }
+
+            ColumnLayout {}
+        }
+
+        ColumnLayout {
+            id: optionsSpace
+
+            CheckBox {
+                id: pairedCheckbox
+
+                text: "Report Paired"
+
+                checked: true
+            }
+            CheckBox {
+                id: pairedStatusCheckbox
+
+                text: "Paired Successful"
+
+                checked: true
+            }
+            Item { Layout.fillHeight: true }
+        }
+    }
+
+    Timer {
+        id: pairedResultTimer
+
+        interval: 1000
+        running: false
+        repeat: false
+        onTriggered: {
+            if (pairedCheckbox.checked) {
+                if (pairedStatusCheckbox.checked) {
+                    modal.pairSuccessful(null)
+                } else {
+                    modal.pairFailed(null, "Pairing failed")
+                }
+            }
+        }
+    }
+}
+
+// category: Wallet