feat(storybook): add browser settings in the storybook

storybook/CMakeLists.txt

@@ -17,7 +17,7 @@ endif()
 
 find_package(
   Qt5
-  COMPONENTS Core Quick QuickControls2
+  COMPONENTS Core Quick QuickControls2 WebEngine
   REQUIRED)
 
 file(GLOB_RECURSE QML_FILES "stubs/*.qml" "mocks/*.qml" "pages/*.qml" "src/*.qml" "src/qmldir" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
@@ -35,7 +35,7 @@ add_executable(
 target_compile_definitions(${PROJECT_NAME}
                            PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
 target_link_libraries(
-  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2 Qt5::WebEngine
                           SortFilterProxyModel)
 
 set(QML_IMPORT_PATH "${CMAKE_SOURCE_DIR}/src" CACHE STRING "" FORCE)

storybook/main.cpp

@@ -1,5 +1,6 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
+#include <QtWebEngine>
 
 #include <cachecleaner.h>
 #include <directorieswatcher.h>
@@ -9,6 +10,9 @@ int main(int argc, char *argv[])
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    QtWebEngine::initialize();
     QGuiApplication app(argc, argv);
     QGuiApplication::setOrganizationName(QStringLiteral("Status"));
     QGuiApplication::setOrganizationDomain(QStringLiteral("status.im"));

storybook/main.qml

@@ -56,6 +56,9 @@ ApplicationWindow {
         ListElement {
             title: "InviteFriendsToCommunityPopup"
         }
+        ListElement {
+             title: "BrowserSettings"
+        }
     }
 
     SplitView {

storybook/pages/BrowserSettingsPage.qml

@@ -0,0 +1,154 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import AppLayouts.Profile.views 1.0
+import AppLayouts.Profile.stores 1.0
+
+import Storybook 1.0
+
+import utils 1.0
+
+SplitView {
+    Logs { id: logs }
+
+    ListModel {
+        id: dappsModel
+
+        ListElement {
+            name: "http://simpledapp.eth"
+            accounts: [
+                ListElement {
+                    name: "Main Account"
+                    address: "0x2B748A02e06B159C7C3E98F5064577B96E55A7b4"
+                    color: "#4360DF"
+                    emoji: "😎"
+                },
+                ListElement {
+                    name: "Account 2"
+                    address: "0x5aD88F52b5cb0E4120c0Dd32CFeE782436F492E5"
+                    color: "#887AF9"
+                    emoji: "😋"
+                }
+            ]
+        }
+    }
+
+    property QtObject mockData: QtObject {
+        property QtObject accountSettings: QtObject {
+            property string browserHomepage: "https://status.im/"
+            property int shouldShowBrowserSearchEngine: 3
+            property bool shouldShowFavoritesBar: true
+            property int useBrowserEthereumExplorer: 1
+        }
+    }
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        BrowserView {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            contentWidth: parent.width
+            sectionTitle: "Browser section"
+            
+            accountSettings: mockData.accountSettings
+
+            store: ProfileSectionStore {
+                property WalletStore walletStore: WalletStore {
+                    accountSensitiveSettings: mockData.accountSettings
+                    dappList: dappsModel
+
+                    function disconnect(dappName) {
+                        for (let i = 0; i < dappsModel.count; i++) {
+                            if (dappsModel.get(i).name === dappName) {
+                                dappsModel.remove(i)
+                                return
+                            }
+                        }
+                    }
+                    function disconnectAddress(dappName, address) {
+                        for (let i = 0; i < dappsModel.count; i++) {
+                            const dapp = dappsModel.get(i)
+                            if (dapp.name === dappName) {
+                                for (let i = 0; i < dapp.accounts.count; i++) {
+                                    if (dapp.accounts.get(i).address === address) {
+                                        dapp.accounts.remove(i)
+                                        return
+                                    }
+                                }
+                                return
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        font.pixelSize: 13
+
+        ColumnLayout {
+            spacing: 6
+            
+            Label {
+                text: "Browser Homepage"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.browserHomepage
+                onTextChanged: mockData.accountSettings.browserHomepage = text
+            }
+
+            Label {
+                text: "Browser Search Engine ID"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.shouldShowBrowserSearchEngine
+                onTextChanged: {
+                    if (text !== "") {
+                        mockData.accountSettings.shouldShowBrowserSearchEngine = parseInt(text)
+                    }
+                }
+            }
+
+            Label {
+                text: "Browser Ethereum Explorer ID"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.useBrowserEthereumExplorer
+                onTextChanged: {
+                    if (text !== "") {
+                        mockData.accountSettings.useBrowserEthereumExplorer = parseInt(text)
+                    }
+                }
+            }
+
+            CheckBox {
+                text: "Should show Favorites bar"
+                checked: mockData.accountSettings.shouldShowFavoritesBar
+                onToggled: mockData.accountSettings.shouldShowFavoritesBar = !mockData.accountSettings.shouldShowFavoritesBar
+            }
+        }
+    }
+}
+
+

storybook/stubs/AppLayouts/Profile/stores/LanguageStore.qml

@@ -0,0 +1,3 @@
+import QtQuick 2.14
+
+QtObject {}

storybook/stubs/AppLayouts/Profile/stores/ProfileSectionStore.qml

@@ -0,0 +1,3 @@
+import QtQuick 2.14
+
+QtObject {}

storybook/stubs/AppLayouts/Profile/stores/WalletStore.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.14
+
+QtObject {
+    property var accountSensitiveSettings: {}
+    property var dappList: []
+}

storybook/stubs/AppLayouts/Profile/stores/qmldir

@@ -0,0 +1,3 @@
+LanguageStore 1.0 LanguageStore.qml
+ProfileSectionStore 1.0 ProfileSectionStore.qml
+WalletStore 1.0 WalletStore.qml

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -196,6 +196,7 @@ StatusSectionLayout {
                 implicitHeight: parent.height
 
                 store: root.store
+                accountSettings: localAccountSensitiveSettings
                 sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.browserSettings)
                 contentWidth: d.contentWidth
             }

ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml

@@ -9,6 +9,8 @@ import shared.controls 1.0
 ModalPopup {
     id: popup
 
+    property var accountSettings
+
     title: qsTr("Search engine")
 
     onClosed: {
@@ -30,10 +32,10 @@ ModalPopup {
         RadioButtonSelector {
             title: qsTr("None")
             buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineNone
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineNone
             onCheckedChanged: {
                 if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineNone
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineNone
                 }
             }
         }
@@ -41,10 +43,10 @@ ModalPopup {
         RadioButtonSelector {
             title: "Google"
             buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineGoogle
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineGoogle
             onCheckedChanged: {
                 if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineGoogle
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineGoogle
                 }
             }
         }
@@ -52,10 +54,10 @@ ModalPopup {
         RadioButtonSelector {
             title: "Yahoo!"
             buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineYahoo
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineYahoo
             onCheckedChanged: {
                 if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineYahoo
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineYahoo
                 }
             }
         }
@@ -63,10 +65,10 @@ ModalPopup {
         RadioButtonSelector {
             title: "DuckDuckGo"
             buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineDuckDuckGo
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineDuckDuckGo
             onCheckedChanged: {
                 if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineDuckDuckGo
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineDuckDuckGo
                 }
             }
         }

ui/app/AppLayouts/Profile/stores/qmldir

@@ -1 +1,7 @@
 LanguageStore 1.0 LanguageStore.qml
+AppearanceStore 1.0 AppearanceStore.qml
+ProfileStore 1.0 ProfileStore.qml
+NotificationsStore 1.0 NotificationsStore.qml
+DevicesStore 1.0 DevicesStore.qml
+ProfileSectionStore 1.0 ProfileSectionStore.qml
+WalletStore 1.0 WalletStore.qml

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

@@ -12,8 +12,9 @@ import shared 1.0
 import shared.panels 1.0
 import shared.status 1.0
 
+import AppLayouts.Profile.stores 1.0
+
 import "../popups"
-import "../stores"
 import "browser"
 import "wallet"
 
@@ -21,8 +22,11 @@ SettingsContentBase {
     id: root
 
     property ProfileSectionStore store
+    property var accountSettings
 
-    property Component searchEngineModal: SearchEngineModal {}
+    property Component searchEngineModal: SearchEngineModal {
+        accountSettings: root.accountSettings
+    }
 
     Item {
         id: rootItem
@@ -38,7 +42,7 @@ SettingsContentBase {
 
             HomePageView {
                 id: homePageView
-                homepage: localAccountSensitiveSettings.browserHomepage
+                accountSettings: root.accountSettings
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: Style.current.padding
@@ -51,7 +55,7 @@ SettingsContentBase {
                 anchors.rightMargin: 0
                 text: qsTr("Search engine used in the address bar")
                 currentValue: {
-                    switch (localAccountSensitiveSettings.shouldShowBrowserSearchEngine) {
+                    switch (accountSettings.shouldShowBrowserSearchEngine) {
                     case Constants.browserSearchEngineGoogle: return "Google"
                     case Constants.browserSearchEngineYahoo: return "Yahoo!"
                     case Constants.browserSearchEngineDuckDuckGo: return "DuckDuckGo"
@@ -64,6 +68,7 @@ SettingsContentBase {
 
             DefaultDAppExplorerView {
                 id: dAppExplorerView
+                accountSettings: root.accountSettings
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.leftMargin: Style.current.padding
@@ -76,12 +81,8 @@ SettingsContentBase {
                 title: qsTr("Show Favorites Bar")
                 components: [
                     StatusSwitch {
-                        checked: localAccountSensitiveSettings.shouldShowFavoritesBar
+                        checked: accountSettings.shouldShowFavoritesBar
-                        onCheckedChanged: {
+                        onToggled: { accountSettings.shouldShowFavoritesBar = checked }
-                            if (localAccountSensitiveSettings.shouldShowFavoritesBar !== checked) {
-                                localAccountSensitiveSettings.shouldShowFavoritesBar = checked
-                            }
-                        }
                     }
                 ]
             }

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

@@ -12,8 +12,9 @@ import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
+import AppLayouts.Profile.stores 1.0
+
 import "../popups"
-import "../stores"
 
 import SortFilterProxyModel 0.2
 

ui/app/AppLayouts/Profile/views/browser/DefaultDAppExplorerView.qml

@@ -12,6 +12,8 @@ import StatusQ.Core.Theme 0.1
 ColumnLayout {
     id: root
 
+    property var accountSettings
+
     StatusBaseText {
         text: qsTr("Default DApp explorer")
         font.pixelSize: 15
@@ -33,11 +35,11 @@ ColumnLayout {
         id: noneRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
-        text: qsTr("none")
+        text: qsTr("None")
         onCheckedChanged: {
             if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
             }
         }
     }
@@ -46,11 +48,11 @@ ColumnLayout {
         id: etherscanRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
         text: "etherscan.io"
         onCheckedChanged: {
-            if (checked && localAccountSensitiveSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerEtherscan) {
+            if (checked && accountSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerEtherscan) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
             }
         }
     }
@@ -59,11 +61,11 @@ ColumnLayout {
         id: ethplorerRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
         text: "ethplorer.io"
         onCheckedChanged: {
             if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
             }
         }
     }
@@ -72,11 +74,11 @@ ColumnLayout {
         id: blockchairRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
         text: "blockchair.com"
         onCheckedChanged: {
             if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
             }
         }
     }

ui/app/AppLayouts/Profile/views/browser/HomePageView.qml

@@ -10,12 +10,12 @@ import StatusQ.Core.Theme 0.1
 ColumnLayout {
     id: root
 
-    property string homepage: ""
+    property var accountSettings
 
     spacing: 0
 
     StatusBaseText {
-        text: qsTr("homepage")
+        text: qsTr("Homepage")
         font.pixelSize: 15
         color: Theme.palette.directColor1
     }
@@ -30,7 +30,7 @@ ColumnLayout {
         id: defaultRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: root.homepage == ""
+        checked: root.accountSettings.browserHomepage === ""
         text: qsTr("System default")
     }
 
@@ -38,7 +38,7 @@ ColumnLayout {
         id: customRadioButton
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: 10
-        checked: root.homepage !== ""
+        checked: root.accountSettings.browserHomepage !== ""
         text: qsTr("Other")
     }
 
@@ -48,9 +48,9 @@ ColumnLayout {
         Layout.topMargin: 10
         visible: customRadioButton.checked
         placeholderText: qsTr("Example: duckduckgo.com")
-        text: root.homepage
+        text: root.accountSettings.browserHomepage
         onTextChanged: {
-            root.homepage = text
+            root.accountSettings.browserHomepage = text
         }
     }
 

ui/app/AppLayouts/Profile/views/qmldir

@@ -1,2 +1,6 @@
 AboutView 1.0 AboutView.qml
 LanguageView 1.0 LanguageView.qml
+AppearanceView 1.0 AppearanceView.qml
+NotificationsView 1.0 NotificationsView.qml
+CommunitiesView 1.0 CommunitiesView.qml
+BrowserView 1.0 BrowserView.qml

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

@@ -7,7 +7,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import utils 1.0
 
-import "../../stores"
+import AppLayouts.Profile.stores 1.0
 
 Column {
     id: root
@@ -18,18 +18,19 @@ Column {
         id: permissionsList
         model: walletStore.dappList
         delegate: Item {
+            property string dappName: model.name
             width: parent.width
             height: listItem.height + spacer.height
             WebEngineView {
                 id: webView
-                url: model.name.startsWith("http")? model.name : "http://%1".arg(model.name)
+                url: dappName.startsWith("http") ? dappName : `http://${dappName}`
                 visible: false
             }
             StatusListItem {
                 id: listItem
-                title: webView.title !== ""? webView.title : model.name
+                title: webView.title !== "" ? webView.title : dappName
-                subTitle: model.name
+                subTitle: dappName
-                asset.name: webView.icon != ""? webView.icon : Style.svg("compassActive")
+                asset.name: webView.icon != "" ? webView.icon : Style.svg("compassActive")
                 asset.isImage: true
                 width: parent.width
                 highlighted: true
@@ -40,13 +41,13 @@ Column {
                         size: StatusBaseButton.Size.Small
                         type: StatusBaseButton.Type.Danger
                         onClicked: {
-                            walletStore.disconnect(model.name)
+                            walletStore.disconnect(dappName)
                         }
                     }
                 ]
                 bottomModel: model.accounts
                 bottomDelegate: StatusListItemTag {
-                    property int outerIndex: listItem.index
+                    property int outerIndex: listItem.index || 0
 
                     title: model.name
 
@@ -57,7 +58,6 @@ Column {
                     asset.isLetterIdenticon: !!model.emoji
                     asset.bgColor: Theme.palette.indirectColor1
                     onClicked: {
-                        const dappName = walletStore.dappList.rowData(outerIndex, 'name')
                         walletStore.disconnectAddress(dappName, model.address)
                     }
                 }