feat: Manage tokens panel UI component & model

- implements the UI component to manage regular & community tokens (drag'n'drop or context menu to reorder, show/hide, group by community) - implements a custom C++ QAIM model which acts as a fake proxy model for the above QML panel (internally it does all the sorting/grouping/hiding and preserves the custom sort order) - adds and corrects support for cascading submenus in StatusAction, and StatusMenu[Item] - adds support for mirrored (horizontally flipped) StatusSwitch - adds a new SortOrderComboBox.qml (this was being used in the first Figma version, can be ignored now, will be used by the main wallet view later) - some minor fixes and cleanups in the used components Iterates #12377 Closes #12587
status-im · Nov 9, 2023 · 7183621 · 7183621
1 parent d73c51d
commit 7183621
Show file tree

Hide file tree

Showing 28 changed files with 2,012 additions and 51 deletions.
diff --git a/storybook/CMakeLists.txt b/storybook/CMakeLists.txt
@@ -76,7 +76,7 @@ target_link_libraries(
     ${PROJECT_LIB} PUBLIC Qt5::Core Qt5::Gui Qt5::Quick Qt5::QuickControls2 Qt5::WebView)
 
 target_link_libraries(
-        ${PROJECT_NAME} PRIVATE ${PROJECT_LIB})
+    ${PROJECT_NAME} PRIVATE ${PROJECT_LIB})
 
 add_dependencies(${PROJECT_NAME} StatusQ)
 
@@ -123,6 +123,7 @@ add_test(NAME QmlTests COMMAND QmlTests -platform offscreen)
 
 list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/../ui/app")
 list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/../ui/imports")
+list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/../ui/StatusQ/src")
 list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/src")
 list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/pages")
 list(APPEND QML_DIRS "${CMAKE_SOURCE_DIR}/stubs")

diff --git a/storybook/pages/ManageTokensPanelPage.qml b/storybook/pages/ManageTokensPanelPage.qml
@@ -0,0 +1,87 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+
+import AppLayouts.Wallet.panels 1.0
+
+import utils 1.0
+
+import Storybook 1.0
+import Models 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    orientation: Qt.Horizontal
+
+    ManageTokensModel {
+        id: assetsModel
+    }
+
+    StatusScrollView { // wrapped in a ScrollView on purpose; to simulate SettingsContentBase.qml
+        SplitView.fillWidth: true
+        SplitView.preferredHeight: 500
+        ManageTokensPanel {
+            id: showcasePanel
+            width: 500
+            baseModel: ctrlEmptyModel.checked ? null : assetsModel
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumWidth: 150
+        SplitView.preferredWidth: 250
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            Label {
+                Layout.fillWidth: true
+                text: "Dirty: %1".arg(showcasePanel.dirty ? "true" : "false")
+            }
+
+            Button {
+                text: "Save"
+                onClicked: showcasePanel.saveSettings()
+            }
+
+            Button {
+                enabled: showcasePanel.dirty
+                text: "Revert"
+                onClicked: showcasePanel.revert()
+            }
+
+            Button {
+                text: "Random data"
+                onClicked: {
+                    assetsModel.clear()
+                    assetsModel.randomizeData()
+                }
+            }
+
+            Button {
+                text: "Clear settings"
+                onClicked: showcasePanel.clearSettings()
+            }
+
+            Switch {
+                id: ctrlEmptyModel
+                text: "Empty model"
+            }
+        }
+    }
+}
+
+// category: Panels
+
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=18139-95033&mode=design&t=nqFScWLfusXBNQA5-0
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=17674-273051&mode=design&t=nqFScWLfusXBNQA5-0
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=17636-249780&mode=design&t=nqFScWLfusXBNQA5-0
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=17674-276833&mode=design&t=nqFScWLfusXBNQA5-0
+// https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?type=design&node-id=17675-283206&mode=design&t=nqFScWLfusXBNQA5-0
diff --git a/storybook/src/Models/ManageTokensModel.qml b/storybook/src/Models/ManageTokensModel.qml
@@ -0,0 +1,237 @@
+import QtQuick 2.15
+import QtQml.Models 2.15
+
+import Models 1.0
+
+ListModel {
+    function randomizeData() {
+        var data = []
+        for (let i = 0; i < 100; i++) {
+            const communityId = i % 2 == 0 ? "" : "communityId%1".arg(Math.round(i))
+            const enabledNetworkBalance = !!communityId ? Math.round(i)
+                                                        : {
+                                                              amount: 1,
+                                                              symbol: "ZRX"
+                                                          }
+            var obj = {
+                name: "Item %1".arg(i),
+                symbol: "SYM %1".arg(i),
+                enabledNetworkBalance: enabledNetworkBalance,
+                enabledNetworkCurrencyBalance: {
+                    amount: 10.37,
+                    symbol: "EUR",
+                    displayDecimals: 2
+                },
+                communityId: communityId,
+                communityName: "COM %1".arg(i),
+                communityImage: ""
+            }
+            data.push(obj)
+        }
+        append(data)
+    }
+
+    readonly property var data: [
+        {
+            name: "0x",
+            symbol: "ZRX",
+            enabledNetworkBalance: {
+                amount: 1,
+                symbol: "ZRX"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 10.37,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            communityId: "ddls",
+            communityName: "Doodles",
+            communityImage: ModelsData.collectibles.doodles // FIXME backend
+        },
+        {
+            name: "Omg",
+            symbol: "OMG",
+            enabledNetworkBalance: {
+                amount: 2,
+                symbol: "OMG"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 13.37,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            communityId: "sox",
+            communityName: "Socks",
+            communityImage: ModelsData.icons.socks
+        },
+        {
+            name: "Decentraland",
+            symbol: "MANA",
+            enabledNetworkBalance: {
+                amount: 301,
+                symbol: "MANA"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 75.256,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: -2.1,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Ave Maria",
+            symbol: "AAVE",
+            enabledNetworkBalance: {
+                amount: 23.3,
+                symbol: "AAVE",
+                displayDecimals: 2
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 2.335,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: 4.56,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Polymorphism",
+            symbol: "POLY",
+            enabledNetworkBalance: {
+                amount: 3590,
+                symbol: "POLY"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 2.7,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: -11.6789,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Dai",
+            symbol: "DAI",
+            enabledNetworkBalance: {
+                amount: 634.22,
+                symbol: "DAI",
+                displayDecimals: 2
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 594.72,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: 0,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Makers' choice",
+            symbol: "MKR",
+            enabledNetworkBalance: {
+                amount: 1.3,
+                symbol: "MKR",
+                displayDecimals: 2
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 100.37,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: -1,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Ethereum",
+            symbol: "ETH",
+            enabledNetworkBalance: {
+                amount: 0.12345,
+                symbol: "ETH",
+                displayDecimals: 8,
+                stripTrailingZeroes: true
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 182.72,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            changePct24hour: -3.51,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "GetOuttaHere",
+            symbol: "InvisibleSYM",
+            enabledNetworkBalance: {},
+            enabledNetworkCurrencyBalance: {},
+            changePct24hour: NaN,
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            enabledNetworkBalance: ({
+                                        displayDecimals: true,
+                                        stripTrailingZeroes: true,
+                                        amount: 324343.3,
+                                        symbol: "SNT"
+                                    }),
+            enabledNetworkCurrencyBalance: ({
+                                                displayDecimals: 4,
+                                                stripTrailingZeroes: true,
+                                                amount: 2.333321323400,
+                                                symbol: "EUR"
+                                            }),
+            symbol: "SNT",
+            name: "Status",
+            communityId: "",
+            communityName: "",
+            communityImage: ""
+        },
+        {
+            name: "Meth",
+            symbol: "MET",
+            enabledNetworkBalance: {
+                amount: 666,
+                symbol: "MET"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 1000.37,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            communityId: "ddls",
+            communityName: "Doodles",
+            communityImage: ModelsData.collectibles.doodles
+        },
+        {
+            name: "Ast",
+            symbol: "AST",
+            enabledNetworkBalance: {
+                amount: 1,
+                symbol: "AST"
+            },
+            enabledNetworkCurrencyBalance: {
+                amount: 0.374,
+                symbol: "EUR",
+                displayDecimals: 2
+            },
+            communityId: "ast",
+            communityName: "Astafarians",
+            communityImage: ModelsData.icons.dribble
+        }
+    ]
+    Component.onCompleted: append(data)
+}
diff --git a/storybook/src/Models/qmldir b/storybook/src/Models/qmldir
@@ -9,6 +9,7 @@ FlatTokensModel 1.0 FlatTokensModel.qml
 IconModel 1.0 IconModel.qml
 LinkPreviewModel 1.0 LinkPreviewModel.qml
 MintedTokensModel 1.0 MintedTokensModel.qml
+ManageTokensModel 1.0 ManageTokensModel.qml
 RecipientModel 1.0 RecipientModel.qml
 SourceOfTokensModel 1.0 SourceOfTokensModel.qml
 TokenHoldersModel 1.0 TokenHoldersModel.qml

diff --git a/ui/StatusQ/CMakeLists.txt b/ui/StatusQ/CMakeLists.txt
@@ -109,6 +109,12 @@ add_library(StatusQ SHARED
         src/statuswindow.cpp
         src/stringutilsinternal.cpp
         src/submodelproxymodel.cpp
+
+        # wallet
+        src/wallet/managetokenscontroller.cpp
+        src/wallet/managetokenscontroller.h
+        src/wallet/managetokensmodel.cpp
+        src/wallet/managetokensmodel.h
         )
 
 set_target_properties(StatusQ PROPERTIES