feat(@settings): Add network list

ui/app/AppLayouts/Profile/ProfileLayout.qml

@@ -64,7 +64,6 @@ StatusAppTwoPanelLayout {
         WalletView {
             id: walletView
             walletStore: profileView.store.walletStore
-            profileContentWidth: _internal.profileContentWidth
         }
 
         PrivacyView {

ui/app/AppLayouts/Profile/controls/WalletNetworkDelegate.qml

@@ -0,0 +1,20 @@
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+
+
+StatusListItem {
+    property var network
+    title: network.chainName
+    icon.isLetterIdenticon: true
+    width: parent.width
+    leftPadding: 0
+    rightPadding: 0
+    components: [
+        StatusIcon {
+            icon: "chevron-down"
+            rotation: 270
+            color: Theme.palette.baseColor1
+        }
+    ]
+
+}

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

@@ -18,10 +18,7 @@ import "./wallet"
 ScrollView {
     id: root
 
-    property int profileContentWidth
-
-    height: parent.height
-    width: parent.width
+    anchors.fill: parent
     contentHeight: advancedContainer.height + 100
     clip: true
 
@@ -29,15 +26,14 @@ ScrollView {
 
     Item {
         id: advancedContainer
-        width: profileContentWidth
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: stackContainer.height
-        
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+
         StackLayout {
             id: stackContainer
 
             anchors.fill: parent
-
             currentIndex: 0
 
             onCurrentIndexChanged: {
@@ -48,6 +44,12 @@ ScrollView {
 
             MainView {
                 walletStore: root.walletStore
+                anchors.topMargin: 64
+                anchors.top: parent.top
+                anchors.leftMargin: 64
+                anchors.left: parent.left
+                width: 560
+
                 onGoToNetworksView: {
                     stackContainer.currentIndex = 1
                 }

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

@@ -12,10 +12,6 @@ import "../../controls"
 
 Column {
     id: root
-    anchors.top: parent.top
-    anchors.topMargin: 64
-    anchors.left: parent.left
-    anchors.right: parent.right
 
     property WalletStore walletStore
 

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

@@ -1,48 +1,103 @@
 import QtQuick 2.13
 
 import shared.status 1.0
-
-import "../../stores"
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import utils 1.0
 
-Column {
+import "../../stores"
+import "../../controls"
+
+Item {
     id: root
-    anchors.top: parent.top
-    anchors.topMargin: 64
-    anchors.left: parent.left
-    anchors.right: parent.right
+    signal goBack
 
     property WalletStore walletStore
 
-    signal goBack
-
-    ListView {
-        id: layer1List
-        model: walletStore.layer1Networks
-        width: parent.width
-        height: layer1List.childrenRect.height
-        delegate: StatusSettingsLineButton {
-            text: model.chainName
+    StatusFlatButton {
+        id: backButton
+        anchors.top: parent.top
+        anchors.topMargin: Style.current.bigPadding
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.bigPadding
+        icon.name: "arrow-left"
+        icon.height: 13.5
+        icon.width: 17.5
+        text: qsTr("Wallet")
+        onClicked: {
+            root.goBack()
         }
     }
 
-    ListView {
-        id: layer2List
-        model: walletStore.layer2Networks
-        width: parent.width
-        height: layer2List.childrenRect.height
-        delegate: StatusSettingsLineButton {
-            text: model.chainName
-        }
-    }
+    Column {
+        id: column
+        anchors.topMargin: Style.current.xlPadding
+        anchors.top: backButton.bottom
+        anchors.leftMargin: Style.current.xlPadding * 2
+        anchors.left: root.left
+        width: 560
 
-    ListView {
-        id: testList
-        model: walletStore.testNetworks
-        width: parent.width
-        height: testList.childrenRect.height
-        delegate: StatusSettingsLineButton {
-            text: model.chainName
+        Row {
+            spacing: 250
+            StatusBaseText {
+                id: titleText
+                text: qsTr("Networks")
+                font.weight: Font.Bold
+                font.pixelSize: 28
+                color: Theme.palette.directColor1
+            }
+
+            StatusButton {
+                id: addCustomNetworkButton
+                type: StatusFlatRoundButton.Type.Primary
+                text: qsTr("Add Custom Network")
+                onClicked: {
+                    root.goBack()
+                }
+            }
+        }
+        
+
+        Item {
+            height: Style.current.bigPadding
+            width: parent.width
+        }
+
+        Repeater {
+            id: layer1List
+            model: walletStore.layer1Networks
+            delegate: WalletNetworkDelegate {
+                network: model
+            }
+        }
+
+        StatusSectionHeadline {
+            text: qsTr("Layer 2")
+            topPadding: Style.current.bigPadding
+            bottomPadding: Style.current.padding
+        }
+
+        Repeater {
+            id: layer2List
+            model: walletStore.layer2Networks
+            delegate: WalletNetworkDelegate {
+                network: model
+            }
+        }
+
+        StatusSectionHeadline {
+            text: qsTr("Testnets")
+            topPadding: Style.current.bigPadding
+            bottomPadding: Style.current.padding
+        }
+
+        Repeater {
+            id: testList
+            model: walletStore.testNetworks
+            delegate: WalletNetworkDelegate {
+                network: model
+            }
         }
     }
 }