feat(@desktop/wallet2): Add network select

src/app/wallet/v2/core.nim

@@ -1,7 +1,7 @@
 import NimQml, strformat, strutils, chronicles, sugar, sequtils
 
 import view
-import views/[account_list, account_item]
+import views/[account_list, account_item, networks]
 
 import status/[status, wallet2, settings]
 import status/wallet2/account as WalletTypes
@@ -32,6 +32,10 @@ proc delete*(self: WalletController) =
 
 proc init*(self: WalletController) =
   self.status.wallet2.init()
+  self.view.networksView.updateNetworks(self.status.wallet2.networks)
+  self.view.setSigningPhrase(self.status.settings.getSetting[:string](Setting.SigningPhrase))
+  self.view.setEtherscanLink(self.status.settings.getCurrentNetworkDetails().etherscanLink)
+
   var accounts = self.status.wallet2.getAccounts()
   for account in accounts:
     self.view.addAccountToList(account)
@@ -44,13 +48,11 @@ proc init*(self: WalletController) =
     self.view.addAccountToList(account.account)
     self.view.updateView()
 
+  self.status.events.on("cryptoServicesFetched") do(e: Args):
+    var args = CryptoServicesArg(e)
+    self.view.onCryptoServicesFetched(args.services)
+
   self.status.events.on(SignalType.Wallet.event) do(e:Args):
     var data = WalletSignal(e)
     debug "TODO: handle wallet signal", signalType=data.eventType
-
-  self.view.setSigningPhrase(self.status.settings.getSetting[:string](Setting.SigningPhrase))
-  self.view.setEtherscanLink(self.status.settings.getCurrentNetworkDetails().etherscanLink)
   
-  self.status.events.on("cryptoServicesFetched") do(e: Args):
-    var args = CryptoServicesArg(e)
-    self.view.onCryptoServicesFetched(args.services)

src/app/wallet/v2/view.nim

@@ -2,7 +2,7 @@ import atomics, strformat, strutils, sequtils, json, std/wrapnils, parseUtils, t
 import NimQml, chronicles, stint
 
 import status/[status, wallet2]
-import views/[accounts, account_list, collectibles, settings]
+import views/[accounts, account_list, collectibles, settings, networks]
 import views/buy_sell_crypto/[service_controller]
 import ../../../app_service/[main]
 
@@ -14,6 +14,7 @@ QtObject:
       accountsView: AccountsView
       collectiblesView: CollectiblesView
       settingsView*: SettingsView
+      networksView*: NetworksView
       cryptoServiceController: CryptoServiceController
 
   proc delete(self: WalletView) =
@@ -22,6 +23,7 @@ QtObject:
     self.cryptoServiceController.delete
     self.QAbstractListModel.delete
     self.settingsView.delete
+    self.networksView.delete
 
   proc setup(self: WalletView) =
     self.QAbstractListModel.setup
@@ -33,24 +35,27 @@ QtObject:
     result.accountsView = newAccountsView(status)
     result.collectiblesView = newCollectiblesView(status, appService)
     result.settingsView = newSettingsView()
+    result.networksView = newNetworksView()
     result.cryptoServiceController = newCryptoServiceController(status, appService)
     result.setup
 
   proc getAccounts(self: WalletView): QVariant {.slot.} = 
     newQVariant(self.accountsView)
-
   QtProperty[QVariant] accountsView:
     read = getAccounts
 
   proc getCollectibles(self: WalletView): QVariant {.slot.} = 
     return newQVariant(self.collectiblesView)
+  QtProperty[QVariant] collectiblesView:
+    read = getCollectibles
 
   proc getSettings(self: WalletView): QVariant {.slot.} = newQVariant(self.settingsView)
   QtProperty[QVariant] settingsView:
     read = getSettings
 
-  QtProperty[QVariant] collectiblesView:
+  proc getNetworks(self: WalletView): QVariant {.slot.} = newQVariant(self.networksView)
-    read = getCollectibles
+  QtProperty[QVariant] networksView:
+    read = getNetworks
 
   proc updateView*(self: WalletView) =
     # TODO:

src/app/wallet/v2/views/network_list.nim

@@ -0,0 +1,68 @@
+import NimQml, Tables, chronicles
+from status/wallet2/network import Network
+
+logScope:
+  topics = "networks-view"
+
+type
+  NetworkRoles {.pure.} = enum
+    ChainId = UserRole + 1,
+    ChainName = UserRole + 2,
+    Enabled = UserRole + 3,
+
+QtObject:
+  type NetworkList* = ref object of QAbstractListModel
+    networks*: seq[Network]
+
+  proc setup(self: NetworkList) = self.QAbstractListModel.setup
+
+  proc delete(self: NetworkList) =
+    self.networks = @[]
+    self.QAbstractListModel.delete
+
+  proc newNetworkList*(): NetworkList =
+    new(result, delete)
+    result.networks = @[]
+    result.setup
+
+  proc networksChanged*(self: NetworkList) {.signal.}
+  
+  proc getNetwork*(self: NetworkList, index: int): Network = self.networks[index]
+
+  proc rowData(self: NetworkList, index: int, column: string): string {.slot.} =
+    if (index >= self.networks.len):
+      return
+    
+    let network = self.networks[index]
+    case column:
+      of "chainId": result = $network.chainId
+      of "chainName": result = network.chainName
+      of "enabled": result = $network.enabled
+
+  method rowCount*(self: NetworkList, index: QModelIndex = nil): int =
+    return self.networks.len
+
+  method data(self: NetworkList, index: QModelIndex, role: int): QVariant =
+    if not index.isValid:
+      return
+
+    if index.row < 0 or index.row >= self.networks.len:
+      return
+    
+    let network = self.networks[index.row]
+    let networkRole = role.NetworkRoles
+    case networkRole:
+    of NetworkRoles.ChainId: result = newQVariant(network.chainId)
+    of NetworkRoles.ChainName: result = newQVariant(network.chainName)
+    of NetworkRoles.Enabled: result = newQVariant(network.enabled)
+
+  method roleNames(self: NetworkList): Table[int, string] =
+    { NetworkRoles.ChainId.int:"chainId",
+    NetworkRoles.ChainName.int:"chainName",
+    NetworkRoles.Enabled.int:"enabled"}.toTable
+
+  proc setData*(self: NetworkList, networks: seq[Network]) =
+    self.beginResetModel()
+    self.networks = networks
+    self.endResetModel()
+    self.networksChanged()

src/app/wallet/v2/views/networks.nim

@@ -0,0 +1,37 @@
+import NimQml, chronicles, sequtils, sugar
+from status/wallet2/network import Network, `$`
+
+import ./network_list
+
+logScope:
+  topics = "networks-view"
+
+QtObject:
+  type NetworksView* = ref object of QObject
+    allNetworks: NetworkList
+    enabledNetworks: NetworkList
+
+  proc setup(self: NetworksView) = self.QObject.setup
+  proc delete(self: NetworksView) = self.QObject.delete
+
+  proc newNetworksView*(): NetworksView =
+    new(result, delete)
+    result.allNetworks = newNetworkList()
+    result.enabledNetworks = newNetworkList()
+    result.setup
+
+  proc updateNetworks*(self: NetworksView, networks: seq[Network]) =
+    self.allNetworks.setData(networks)
+    self.enabledNetworks.setData(networks.filter(network => network.enabled))
+
+  proc getAllNetworks(self: NetworksView): QVariant {.slot.} =
+    return newQVariant(self.allNetworks)
+
+  QtProperty[QVariant] allNetworks:
+    read = getAllNetworks
+
+  proc getEnabledNetworks(self: NetworksView): QVariant {.slot.} =
+    return newQVariant(self.enabledNetworks)
+
+  QtProperty[QVariant] enabledNetworks:
+    read = getEnabledNetworks

ui/app/AppLayouts/WalletV2/WalletHeader.qml

@@ -5,6 +5,7 @@ import "../../../imports"
 import "../../../shared"
 import "../../../shared/status"
 import "./components"
+import "./components/network"
 
 Item {
     property var currentAccount: walletV2Model.accountsView.currentAccount
@@ -24,7 +25,7 @@ Item {
     Row {
         id: accountRow
         anchors.top: parent.top
-        anchors.topMargin: 56
+        anchors.topMargin: 24
         anchors.left: parent.left
         anchors.leftMargin: 24
 
@@ -54,6 +55,7 @@ Item {
             text: currentAccount.balance.toUpperCase()
             font.pixelSize: 22
         }
+        
     }
 
     MouseArea {
@@ -74,82 +76,12 @@ Item {
         anchors.topMargin: 0
     }
 
-    Item {
+    NetworkSelect {
-        property int btnMargin: 8
+        id: networkSelect
-        property int btnOuterMargin: Style.current.bigPadding
-        id: walletMenu
-        width: sendBtn.width + receiveBtn.width + settingsBtn.width
-               + walletMenu.btnOuterMargin * 2
         anchors.top: parent.top
-        anchors.topMargin: 16
+        anchors.topMargin: 30
         anchors.right: parent.right
-        anchors.rightMargin: 16
+        anchors.rightMargin: 90
-
-        HeaderButton {
-            id: sendBtn
-            imageSource: "../../img/send.svg"
-            //% "Send"
-            text: qsTrId("command-button-send")
-            onClicked: () => console.log("TODO");
-        }
-
-        HeaderButton {
-            id: receiveBtn
-            imageSource: "../../img/send.svg"
-            flipImage: true
-            //% "Receive"
-            text: qsTrId("receive")
-            onClicked: () => console.log("TODO")
-            anchors.left: sendBtn.right
-            anchors.leftMargin: walletMenu.btnOuterMargin
-        }
-
-        HeaderButton {
-            id: settingsBtn
-            imageSource: "../../img/settings.svg"
-            flipImage: true
-            text: ""
-            onClicked: function () {
-                if (newSettingsMenu.opened) {
-                    newSettingsMenu.close()
-                } else {
-                    let x = settingsBtn.x + settingsBtn.width / 2 - newSettingsMenu.width / 2
-                    newSettingsMenu.popup(x, settingsBtn.height)
-                }
-            }
-            anchors.left: receiveBtn.right
-            anchors.leftMargin: walletMenu.btnOuterMargin
-
-            PopupMenu {
-                id: newSettingsMenu
-                closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
-                width: 176
-                Action {
-                    //% "Account Settings"
-                    text: qsTrId("account-settings")
-                    icon.source: "../../img/manage-wallet.svg"
-                    icon.width: 16
-                    icon.height: 16
-                    onTriggered: console.log("TODO")
-                }
-                Action {
-                    //% "Manage Assets"
-                    text: qsTrId("manage-assets")
-                    icon.source: "../../img/add_remove_token.svg"
-                    icon.width: 16
-                    icon.height: 16
-                    onTriggered: console.log("TODO")
-                }
-                Action {
-                    //% "Set Currency"
-                    text: qsTrId("set-currency")
-                    icon.source: "../../img/currency.svg"
-                    icon.width: 16
-                    icon.height: 16
-                    onTriggered: console.log("TODO")
-                }
-            }
-        }
     }
 
     Component {

ui/app/AppLayouts/WalletV2/components/network/NetworkFilter.qml

@@ -0,0 +1,32 @@
+import QtQuick 2.13
+import "../../../../../shared"
+import "../../../../../imports"
+
+Grid {
+    id: root
+    columns: 2
+    spacing: 2
+
+    Repeater {
+        id: chainRepeater
+        model: walletV2Model.networksView.enabledNetworks
+        width: parent.width
+        height: parent.height
+
+        Rectangle {
+            color: Utils.setColorAlpha(Style.current.blue, 0.1)
+            width: text.width + Style.current.halfPadding
+            height: text.height + Style.current.halfPadding
+            radius: Style.current.radius
+
+            StyledText {
+                id: text
+                text: model.chainName
+                color: Style.current.blue
+                font.pixelSize: Style.current.secondaryTextFontSize
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
+        }
+    }
+}

ui/app/AppLayouts/WalletV2/components/network/NetworkSelect.qml

@@ -0,0 +1,62 @@
+import QtQuick 2.13
+import "../../../../../shared"
+import "../../../../../imports"
+
+Item {
+    id: root
+
+    width: selectRectangle.width + Style.current.padding
+
+    Rectangle {
+        id: selectRectangle
+        border.width: 1
+        border.color: Style.current.border
+        radius: Style.current.radius
+        width: text.width + Style.current.padding * 4
+        height: text.height + Style.current.padding
+
+        StyledText {
+            id: text
+            text: qsTr("All networks")
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.padding
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: Style.current.primaryTextFontSize
+        }
+
+        SVGImage {
+            id: caretImg
+            width: 10
+            height: 6
+            source: "../../../../../app/img/caret.svg"
+            anchors.right: parent.right
+            anchors.rightMargin: Style.current.padding
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+        }
+    }
+
+    MouseArea {
+        anchors.fill: selectRectangle
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            if (selectPopup.opened) {
+                selectPopup.close()
+                return
+            }
+            selectPopup.open()
+        }
+    }
+
+    NetworkFilter {
+        anchors.topMargin: Style.current.halfPadding
+        anchors.top: selectRectangle.bottom
+        width: root.width
+    }
+
+    NetworkSelectPopup {
+        id: selectPopup
+        y: root.height + root.anchors.topMargin + Style.current.padding
+        x: parent.width - width - Style.current.padding
+    }
+}

ui/app/AppLayouts/WalletV2/components/network/NetworkSelectPopup.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import "../../../../../imports"
+import "../../../../../shared"
+
+Popup {
+    id: popup
+    modal: false
+    width: 360
+    height: 432
+    closePolicy: Popup.CloseOnEscape
+
+    background: Rectangle {
+        radius: Style.current.radius
+        color: Style.current.background
+        border.color: Style.current.border
+        layer.enabled: true
+        layer.effect: DropShadow{
+            verticalOffset: 3
+            radius: 8
+            samples: 15
+            fast: true
+            cached: true
+            color: "#22000000"
+        }
+    }
+
+    contentItem: ScrollView {
+        id: scrollView
+        contentHeight: content.height
+        width: popup.width
+        height: popup.height
+
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        clip: true
+
+        Column {
+            id: content
+            width: popup.width
+            spacing: Style.current.padding
+
+             Repeater {
+                id: chainRepeater
+                model: walletV2Model.networksView.allNetworks
+            
+                Item {
+                    width: content.width
+                    height: 40
+                    StyledText {
+                        anchors.left: parent.left
+                        anchors.leftMargin: Style.current.bigPadding
+                        anchors.verticalCenter: parent.verticalCenter
+                        font.pixelSize: Style.current.primaryTextFontSize
+                        text: model.chainName
+                    }
+
+                    StatusCheckBox {
+                        anchors.right: parent.right
+                        anchors.rightMargin: Style.current.bigPadding
+                        anchors.verticalCenter: parent.verticalCenter
+                        checked: model.enabled
+                        onCheckedChanged: {
+                            console.log("TODO: Not yet implemented")
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

ui/app/AppLayouts/WalletV2/components/network/qmldir

@@ -0,0 +1 @@
+NetworkSelect 1.0 NetworkSelect.qml