feat(Settings): Add new UI for Browser settings

Closes: #4933

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

@@ -1,78 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-
-import utils 1.0
-
-import shared.popups 1.0
-import shared.controls 1.0
-
-// TODO: replace with StatusModal
-ModalPopup {
-    id: popup
-
-    //% "Ethereum explorer"
-    title: qsTrId("ethereum-explorer")
-
-    onClosed: {
-        destroy()
-    }
-
-    Column {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.leftMargin: Style.current.padding
-
-        spacing: 0
-
-        ButtonGroup {
-            id: searchEnginGroup
-        }
-
-        RadioButtonSelector {
-            //% "None"
-            title: qsTrId("none")
-            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
-            onCheckedChanged: {
-                if (checked) {
-                    localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
-                }
-            }
-        }
-
-        RadioButtonSelector {
-            title: "etherscan.io"
-            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
-            onCheckedChanged: {
-                if (checked) {
-                    localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
-                }
-            }
-        }
-
-        RadioButtonSelector {
-            title: "ethplorer.io"
-            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
-            onCheckedChanged: {
-                if (checked) {
-                    localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
-                }
-            }
-        }
-
-        RadioButtonSelector {
-            title: "blockchair.com"
-            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
-            onCheckedChanged: {
-                if (checked) {
-                    localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
-                }
-            }
-        }
-    }
-}
-

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

@@ -1,74 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-
-import utils 1.0
-
-import shared.popups 1.0
-import shared.controls 1.0
-
-// TODO: replace with StatusModal
-ModalPopup {
-    id: popup
-
-    //% "Homepage"
-    title: qsTrId("homepage")
-
-    onClosed: {
-        destroy()
-    }
-
-    Column {
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.leftMargin: Style.current.padding
-
-        spacing: Style.current.padding
-
-        ButtonGroup {
-            id: homepageGroup
-        }
-
-        RadioButtonSelector {
-            //% "Default"
-            title: qsTrId("default")
-            buttonGroup: homepageGroup
-            checked: localAccountSensitiveSettings.browserHomepage === ""
-            onCheckedChanged: {
-                if (checked) {
-                    localAccountSensitiveSettings.browserHomepage = ""
-                    customUrl.visible = false
-                }
-            }
-        }
-
-        RadioButtonSelector {
-            //% "Custom..."
-            title: qsTrId("custom---")
-            buttonGroup: homepageGroup
-            checked: localAccountSensitiveSettings.browserHomepage !== "" || customUrl.visible
-            onCheckedChanged: {
-                if (checked) {
-                    customUrl.visible = true
-                }
-            }
-        }
-
-        Input {
-            id: customUrl
-            visible: localAccountSensitiveSettings.browserHomepage !== ""
-            //% "Paste URL"
-            placeholderText: qsTrId("paste-url")
-            text: localAccountSensitiveSettings.browserHomepage
-            pasteFromClipboard: true
-            textField.onTextChanged: {
-                localAccountSensitiveSettings.browserHomepage = customUrl.text
-            }
-            anchors.leftMargin: 0
-            anchors.rightMargin: 0
-        }
-    }
-}
-

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

@@ -1,5 +1,6 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.13
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -12,56 +13,52 @@ import shared.panels 1.0
 import shared.status 1.0
 
 import "../popups"
+import "../stores"
+import "browser"
+import "wallet"
 
-Item {
+ScrollView {
     id: root
     Layout.fillHeight: true
     Layout.fillWidth: true
     clip: true
 
-    property var store
-    property int profileContentWidth
+    property ProfileSectionStore store
+    property real profileContentWidth
 
-    property Component homePagePopup: HomepageModal {}
     property Component searchEngineModal: SearchEngineModal {}
-    property Component ethereumExplorerModal: EthereumExplorerModal {}
+
+    contentHeight: rootItem.height
 
     Item {
-        anchors.top: parent.top
-        anchors.topMargin: 64
-        anchors.bottom: parent.bottom
-        width: profileContentWidth
-
-        anchors.horizontalCenter: parent.horizontalCenter
+        id: rootItem
+        width: parent.width
+        height: childrenRect.height
 
         Column {
-            id: generalColumn
-            width: parent.width
-
-            StatusSectionHeadline {
-                //% "General"
-                text: qsTrId("general")
-                bottomPadding: Style.current.bigPadding
+            id: layout
+            anchors.top: parent.top
+            anchors.topMargin: 24
+            anchors.left: parent.left
+            anchors.leftMargin: 48
+            width: profileContentWidth
+            spacing: 10
+            StatusBaseText {
+                id: titleText
+                text: qsTr("Browser")
+                font.weight: Font.Bold
+                font.pixelSize: 28
+                color: Theme.palette.directColor1
             }
 
-            // TODO: Replace with StatusQ StatusListItem component
-            StatusSettingsLineButton {
-                //% "Homepage"
-                text: qsTrId("homepage")
-                //% "Default"
-                currentValue: localAccountSensitiveSettings.browserHomepage === "" ? qsTrId("default") : localAccountSensitiveSettings.browserHomepage
-                onClicked: homePagePopup.createObject(root).open()
+            Item {
+                height: 25
+                width: 1
             }
 
-            // TODO: Replace with StatusQ StatusListItem component
-            StatusSettingsLineButton {
-                //% "Show favorites bar"
-                text: qsTrId("show-favorites-bar")
-                isSwitch: true
-                switchChecked: localAccountSensitiveSettings.shouldShowFavoritesBar
-                onClicked: function (checked) {
-                    localAccountSensitiveSettings.shouldShowFavoritesBar = checked
-                }
+            HomePageView {
+                id: homePageView
+                homepage: localAccountSensitiveSettings.browserHomepage
             }
 
             // TODO: Replace with StatusQ StatusListItem component
@@ -81,48 +78,44 @@ Item {
                 onClicked: searchEngineModal.createObject(root).open()
             }
 
-            // TODO: Replace with StatusQ StatusListItem component
-            StatusSettingsLineButton {
-                id: ethereumExplorerBtn
-                //% "Ethereum explorer used in the address bar"
-                text: qsTrId("ethereum-explorer-used-in-the-address-bar")
-                currentValue: {
-                    switch (localAccountSensitiveSettings.useBrowserEthereumExplorer) {
-                    case Constants.browserEthereumExplorerEtherscan: return "etherscan.io"
-                    case Constants.browserEthereumExplorerEthplorer: return "ethplorer.io"
-                    case Constants.browserEthereumExplorerBlockchair: return "blockchair.com"
-                    case Constants.browserSearchEngineNone:
-                    //% "None"
-                    default: return qsTrId("none")
+            DefaultDAppExplorerView {
+                id: dAppExplorerView
+            }
+
+            StatusListItem {
+                id: showFavouritesItem
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width + Style.current.padding * 2
+                title: qsTr("Show Favorites Bar")
+                components: [
+                    StatusSwitch {
+                        checked: localAccountSensitiveSettings.shouldShowFavoritesBar
+                        onCheckedChanged: {
+                            localAccountSensitiveSettings.shouldShowFavoritesBar = checked
                         }
                     }
-                onClicked: ethereumExplorerModal.createObject(root).open()
-            }
-            StatusBaseText {
-                //% "Open an ethereum explorer after a transaction hash or an address is entered"
-                text: qsTrId("open-an-ethereum-explorer-after-a-transaction-hash-or-an-address-is-entered")
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-                width: parent.width - 150
-                wrapMode: Text.WordWrap
-                bottomPadding: Style.current.bigPadding
+                ]
             }
 
             Separator {
                 id: separator1
-                anchors.topMargin: Style.current.bigPadding
                 anchors.left: parent.left
                 anchors.leftMargin: -Style.current.padding
                 anchors.right: parent.right
                 anchors.rightMargin: -Style.current.padding
             }
 
-            StatusSectionHeadline {
-                //% "Privacy"
-                text: qsTrId("privacy")
-                topPadding: Style.current.bigPadding
-                bottomPadding: Style.current.padding
+            StatusBaseText {
+                text: qsTr("Connected DApps")
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
             }
+
+            PermissionsListView {
+                id: permissionListView
+                width: parent.width
+                walletStore: root.store.walletStore
             }
-    }
-}
+        } // Column
+    } // Item
+} // ScrollView

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

@@ -0,0 +1,84 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import utils 1.0
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    id: root
+
+    StatusBaseText {
+        text: qsTr("Default DApp explorer")
+        font.pixelSize: 15
+        color: Theme.palette.directColor1
+    }
+
+    ButtonGroup {
+        id: explorerGroup
+        buttons: [
+            noneRadioButton,
+            etherscanRadioButton,
+            ethplorerRadioButton,
+            blockchairRadioButton
+        ]
+        exclusive: true
+    }
+
+    StatusRadioButton {
+        id: noneRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
+        text: qsTrId("none")
+        onCheckedChanged: {
+            if (checked) {
+                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
+            }
+        }
+    }
+
+    StatusRadioButton {
+        id: etherscanRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
+        text: "etherscan.io"
+        onCheckedChanged: {
+            if (checked) {
+                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
+            }
+        }
+    }
+
+    StatusRadioButton {
+        id: ethplorerRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
+        text: "ethplorer.io"
+        onCheckedChanged: {
+            if (checked) {
+                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
+            }
+        }
+    }
+
+    StatusRadioButton {
+        id: blockchairRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
+        text: "blockchair.com"
+        onCheckedChanged: {
+            if (checked) {
+                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
+            }
+        }
+    }
+
+} // Column

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

@@ -0,0 +1,57 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    id: root
+
+    property string homepage: ""
+
+    spacing: 0
+
+    StatusBaseText {
+        text: qsTrId("homepage")
+        font.pixelSize: 15
+        color: Theme.palette.directColor1
+    }
+
+    ButtonGroup {
+        id: homepageGroup
+        buttons: [defaultRadioButton, customRadioButton]
+        exclusive: true
+    }
+
+    StatusRadioButton {
+        id: defaultRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: root.homepage == ""
+        text: qsTr("System default")
+    }
+
+    StatusRadioButton {
+        id: customRadioButton
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        checked: root.homepage !== ""
+        text: qsTr("Other")
+    }
+
+    StatusBaseInput {
+        id: customUrlInput
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+        visible: customRadioButton.checked
+        placeholderText: qsTr("Example: duckduckgo.com")
+        text: root.homepage
+        onTextChanged: {
+            root.homepage = text
+        }
+    }
+
+} // Column

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

@@ -52,52 +52,10 @@ Item {
             height: Style.current.bigPadding
             width: parent.width
         }
-
-
-        Repeater {
+        PermissionsListView {
             id: permissionsList
-            model: walletStore.dappList
-            delegate: Item {
             width: parent.width
-                height: listItem.height + spacer.height
-                StatusListItem {
-                    id: listItem
-                    title: model.name
-                    icon.isLetterIdenticon: true
-                    width: parent.width
-                    highlighted: true
-                    sensor.enabled: false
-                    components: [
-                        StatusButton {
-                            text: model.accounts.count > 1 ? qsTr("Disconnect All") : qsTr("Disconnect")
-                            size: StatusBaseButton.Size.Small
-                            type: StatusBaseButton.Type.Danger
-                            onClicked: {
-                                walletStore.disconnect(model.name)
-                            }
-                        }
-                    ]
-                    bottomModel: model.accounts
-                    bottomDelegate: StatusListItemTag {
-                        property int outerIndex: listItem.index
-
-                        title: model.name
-                        icon.isLetterIdenticon: true
-                        icon.color: model.color
-                        onClicked: {
-                            const dappName = walletStore.dappList.rowData(outerIndex, 'name')
-                            walletStore.disconnectAddress(dappName, model.address)
-                        }
-                    }
-                }
-
-                Item {
-                    id: spacer
-                    height: Style.current.bigPadding
-                    width: parent.width
-                }
-
-            }
+            walletStore: root.walletStore
         }
     }
 }

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

@@ -0,0 +1,62 @@
+import QtQuick 2.14
+import shared.status 1.0
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import utils 1.0
+
+import "../../stores"
+
+Column {
+    id: root
+
+    property WalletStore walletStore
+
+    width: 560
+
+    Repeater {
+        id: permissionsList
+        model: walletStore.dappList
+        delegate: Item {
+            width: parent.width
+            height: listItem.height + spacer.height
+            StatusListItem {
+                id: listItem
+                title: model.name
+                icon.isLetterIdenticon: true
+                width: parent.width
+                highlighted: true
+                sensor.enabled: false
+                components: [
+                    StatusButton {
+                        text: model.accounts.count > 1 ? qsTr("Disconnect All") : qsTr("Disconnect")
+                        size: StatusBaseButton.Size.Small
+                        type: StatusBaseButton.Type.Danger
+                        onClicked: {
+                            walletStore.disconnect(model.name)
+                        }
+                    }
+                ]
+                bottomModel: model.accounts
+                bottomDelegate: StatusListItemTag {
+                    property int outerIndex: listItem.index
+
+                    title: model.name
+                    icon.isLetterIdenticon: true
+                    icon.color: model.color
+                    onClicked: {
+                        const dappName = walletStore.dappList.rowData(outerIndex, 'name')
+                        walletStore.disconnectAddress(dappName, model.address)
+                    }
+                }
+            }
+
+            Item {
+                id: spacer
+                height: Style.current.bigPadding
+                width: parent.width
+            }
+        } // Item
+    } // Repeater
+} // Column