feat(WalletSettings): Add `Manage tokens` entry in wallet settings

Closes #12376

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

@@ -1,5 +1,5 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
@@ -17,7 +17,8 @@ import shared.status 1.0
 import "../controls"
 import "../popups"
 import "../panels"
-import "./wallet"
+
+import AppLayouts.Profile.views.wallet 1.0
 
 SettingsContentBase {
     id: root
@@ -31,10 +32,10 @@ SettingsContentBase {
     readonly property int editNetworksViewIndex: 2;
     readonly property int accountOrderViewIndex: 3;
     readonly property int accountViewIndex: 4;
+    readonly property int manageTokensViewIndex: 5
 
-    Component.onCompleted: {
-        root.titleRowComponentLoader.sourceComponent = addNewAccountButtonComponent
-    }
+    readonly property string walletSectionTitle: qsTr("Wallet")
+    readonly property string networksSectionTitle: qsTr("Networks")
 
     function resetStack() {
         if(stackContainer.currentIndex === root.editNetworksViewIndex) {
@@ -57,7 +58,7 @@ SettingsContentBase {
 
         onCurrentIndexChanged: {
             root.rootStore.backButtonName = ""
-            root.sectionTitle = qsTr("Wallet")
+            root.sectionTitle = root.walletSectionTitle
             root.titleRowComponentLoader.sourceComponent = undefined
             root.titleRowLeftComponentLoader.sourceComponent = undefined
             root.titleRowLeftComponentLoader.visible = false
@@ -68,23 +69,30 @@ SettingsContentBase {
             }
 
             if(currentIndex == root.networksViewIndex) {
-                root.rootStore.backButtonName = qsTr("Wallet")
-                root.sectionTitle = qsTr("Networks")
+                root.rootStore.backButtonName = root.walletSectionTitle
+                root.sectionTitle = root.networksSectionTitle
             }
+
             if(currentIndex == root.editNetworksViewIndex) {
-                root.rootStore.backButtonName = qsTr("Networks")
-                root.sectionTitle = qsTr("Edit %1").arg(!!editNetwork.combinedNetwork.prod && !!editNetwork.combinedNetwork.prod.chainName ? editNetwork.combinedNetwork.prod.chainName: "")
+                root.rootStore.backButtonName = root.networksSectionTitle
+                root.sectionTitle = qsTr("Edit %1").arg(!!editNetwork.combinedNetwork.prod &&
+                                                        !!editNetwork.combinedNetwork.prod.chainName ? editNetwork.combinedNetwork.prod.chainName: "")
                 root.titleRowLeftComponentLoader.visible = true
                 root.titleRowLeftComponentLoader.sourceComponent = networkIcon
                 root.titleLayout.spacing = 12
-            }
-            else if(currentIndex == root.accountViewIndex) {
-                root.rootStore.backButtonName = qsTr("Wallet")
+
+            } else if(currentIndex == root.accountViewIndex) {
+                root.rootStore.backButtonName = root.walletSectionTitle
                 root.sectionTitle = ""
-            }
-            else if(currentIndex == root.accountOrderViewIndex) {
-                root.rootStore.backButtonName = qsTr("Wallet")
+
+            } else if(currentIndex == root.accountOrderViewIndex) {
+                root.rootStore.backButtonName = root.walletSectionTitle
                 root.sectionTitle = qsTr("Edit account order")
+
+            } else if(currentIndex == root.manageTokensViewIndex) {
+                root.rootStore.backButtonName = root.walletSectionTitle
+                root.titleRowLeftComponentLoader.visible = false
+                root.sectionTitle = qsTr("Manage tokens")
             }
         }
 
@@ -128,6 +136,9 @@ SettingsContentBase {
             onRunStopUsingKeycardFlow: {
                 root.rootStore.keycardStore.runStopUsingKeycardPopup(model.keyPair.keyUid)
             }
+            onGoToManageTokensView: {
+                stackContainer.currentIndex = manageTokensViewIndex
+            }
         }
 
         NetworksView {
@@ -204,6 +215,12 @@ SettingsContentBase {
             }
         }
 
+        ManageTokensView {
+            Layout.fillWidth: true
+            Layout.leftMargin: Style.current.padding
+            Layout.rightMargin: Style.current.padding
+        }
+
         DappPermissionsView {
             walletStore: root.walletStore
         }
@@ -298,4 +315,8 @@ SettingsContentBase {
             }
         }
     }
+
+    Component.onCompleted: {
+        root.titleRowComponentLoader.sourceComponent = addNewAccountButtonComponent
+    }
 }

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

@@ -30,6 +30,7 @@ Column {
     signal runRemoveKeypairFlow(var model)
     signal runMoveKeypairToKeycardFlow(var model)
     signal runStopUsingKeycardFlow(var model)
+    signal goToManageTokensView()
 
     spacing: 8
 
@@ -140,6 +141,21 @@ Column {
 
     Separator {}
 
+    StatusListItem {
+        title: qsTr("Manage Tokens")
+        height: 64
+        width: parent.width
+        onClicked: goToManageTokensView()
+        components: [
+            StatusIcon {
+                icon: "next"
+                color: Theme.palette.baseColor1
+            }
+        ]
+    }
+
+    Separator {}
+
     Spacer {
         visible: root.walletStore.walletModule.hasPairedDevices
         width: parent.width

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

@@ -0,0 +1,65 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Controls 0.1
+
+import shared.controls 1.0
+
+ColumnLayout {
+    id: root
+
+    StatusTabBar {
+        id: tabBar
+
+        Layout.fillWidth: true
+        Layout.topMargin: 5
+
+        StatusTabButton {
+            id: assetsTab
+            width: implicitWidth
+            text: qsTr("Assets")
+        }
+
+        StatusTabButton {
+            id: collectiblesTab
+            width: implicitWidth
+            text: qsTr("Collectibles ")
+        }
+
+        StatusTabButton {
+            id: tokensListTab
+            width: implicitWidth
+            text: qsTr("Token lists")
+        }
+    }
+
+    StackLayout {
+        id: stackLayout
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        currentIndex: tabBar.currentIndex
+
+        ShapeRectangle {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
+            Layout.maximumHeight: 44
+            text: qsTr("You’ll be able to manage the display of your assets here")
+        }
+
+        ShapeRectangle {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
+            Layout.maximumHeight: 44
+            text: qsTr("You’ll be able to manage the display of your collectibles here")
+        }
+
+        // TO BE REPLACED: Empty placeholder when no token lists; dashed rounded rectangle
+        ShapeRectangle {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
+            Layout.preferredHeight: 44
+            text: qsTr("Token List (coming soon)")
+        }
+    }
+}

ui/app/AppLayouts/Profile/views/wallet/qmldir

@@ -1,3 +1,9 @@
+AccountOrderView 1.0 AccountOrderView.qml
+AccountView 1.0 AccountView.qml
+DappPermissionsView 1.0 DappPermissionsView.qml
 EditNetworkView 1.0 EditNetworkView.qml
 EditNetworkForm 1.0 EditNetworkForm.qml
-AccountView 1.0 AccountView.qml
+MainView 1.0 MainView.qml
+ManageTokensView 1.0 ManageTokensView.qml
+NetworksView 1.0 NetworksView.qml
+PermissionsListView 1.0 PermissionsListView.qml