feat(StatusQ.Controls): introduce `StatusAssetSelector` component

This is used for a more complex amount and asset selector component.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAssetSelector {
    assets: ListModel {
        ListElement {
            address: "0x1234"
            name: "Status Network Token"
            value: "20"
            symbol: "SNT"
            fiatBalance: "9992.01"
            fiatBalanceDisplay: "9992.01"
        }
        ListElement {
            address: "0x1234"
            name: "DAI Token"
            value: "20"
            symbol: "DAI"
            fiatBalance: "20"
            fiatBalanceDisplay: "20"
        }
    }
}
```

Closes #442

sandbox/StatusAssetSelectorPage.qml

@@ -0,0 +1,36 @@
+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
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusAssetSelector {
+        assets: ListModel {
+            ListElement {
+                address: "0x1234"
+                name: "Status Network Token"
+                value: "20"
+                symbol: "SNT"
+                fiatBalance: "9992.01"
+                fiatBalanceDisplay: "9992.01"
+            }
+            ListElement {
+                address: "0x1234"
+                name: "DAI Token"
+                value: "20"
+                symbol: "DAI"
+                fiatBalance: "20"
+                fiatBalanceDisplay: "20"
+            }
+        }
+    }
+}
+

sandbox/main.qml

@@ -163,6 +163,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusAccountSelectorPageComponent
                             onClicked: page.sourceComponent = statusAccountSelectorPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusAssetSelector" 
+                            selected: page.sourceComponent == statusAssetSelectorPageComponent
+                            onClicked: page.sourceComponent = statusAssetSelectorPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -281,6 +286,11 @@ StatusWindow {
         StatusAccountSelectorPage {}
     }
 
+    Component {
+        id: statusAssetSelectorPageComponent
+        StatusAssetSelectorPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -0,0 +1,150 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    property var assets
+    property var selectedAsset
+    property var tokenAssetSourceFn: function (symbol) {
+        return ""
+    }
+    property var assetGetterFn: function (index, field) {
+        // This is merely to make the component work with nim model data
+        // as well as static QML ListModel data
+        if (typeof assets.get === "function") {
+            return assets.get(index)[field]
+        }
+        return assets.rowData(index, field)
+    }
+    implicitWidth: 86
+    implicitHeight: 32
+
+    function resetInternal() {
+        assets = null
+        selectedAsset = null
+    }
+
+    onSelectedAssetChanged: {
+        if (selectedAsset && selectedAsset.symbol) {
+            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
+            selectedTextField.text = selectedAsset.symbol.toUpperCase()
+        }
+    }
+
+    onAssetsChanged: {
+        if (!assets) {
+            return
+        }
+        selectedAsset = {
+            name: assetGetterFn(0, "name"),
+            symbol: assetGetterFn(0, "symbol"),
+            value: assetGetterFn(0, "value"),
+            fiatBalanceDisplay: assetGetterFn(0, "fiatBalanceDisplay"),
+            address: assetGetterFn(0, "address"),
+            fiatBalance: assetGetterFn(0, "fiatBalance")
+        }
+    }
+
+    StatusSelect {
+        id: select
+        width: parent.width
+        bgColor: "transparent"
+        bgColorHover: Theme.palette.directColor8
+        model: root.assets
+        caretRightMargin: 0
+        select.radius: 6
+        select.height: root.height
+        selectMenu.width: 342
+        selectedItemComponent: Item {
+            anchors.fill: parent
+            StatusRoundedImage {
+                id: iconImg
+                anchors.left: parent.left
+                anchors.leftMargin: 4
+                width: 24
+                height: 24
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            StatusBaseText {
+                id: selectedTextField
+                anchors.left: iconImg.right
+                anchors.leftMargin: 4
+                anchors.verticalCenter: parent.verticalCenter
+                font.pixelSize: 15
+                height: 22
+                verticalAlignment: Text.AlignVCenter
+                color: Theme.palette.directColor1
+            }
+        }
+        selectMenu.delegate: menuItem
+    }
+
+    Component {
+        id: menuItem
+        MenuItem {
+            id: itemContainer
+            property bool isFirstItem: index === 0
+            property bool isLastItem: index === assets.rowCount() - 1
+
+            width: parent.width
+            height: 72
+            StatusRoundedImage {
+                id: iconImg
+                anchors.left: parent.left
+                anchors.leftMargin: 16
+                anchors.verticalCenter: parent.verticalCenter
+                image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
+            }
+            Column {
+                anchors.left: iconImg.right
+                anchors.leftMargin: 12
+                anchors.verticalCenter: parent.verticalCenter
+
+                StatusBaseText {
+                    text: symbol.toUpperCase()
+                    font.pixelSize: 15
+                    color: Theme.palette.directColor1
+                }
+
+                StatusBaseText {
+                    text: name
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: 15
+                }
+            }
+            Column {
+                anchors.right: parent.right
+                anchors.rightMargin: 16
+                anchors.verticalCenter: parent.verticalCenter
+                StatusBaseText {
+                    font.pixelSize: 15
+                    text: parseFloat(value).toFixed(4) + " " + symbol
+                }
+                StatusBaseText {
+                    font.pixelSize: 15
+                    anchors.right: parent.right
+                    text: fiatBalanceDisplay.toUpperCase()
+                    color: Theme.palette.baseColor1
+                }
+            }
+            background: Rectangle {
+                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
+            }
+            MouseArea {
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: itemContainer
+                onClicked: {
+                    root.selectedAsset = { address, name, value, symbol, fiatBalance, fiatBalanceDisplay }
+                    select.selectMenu.close()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -1,6 +1,7 @@
 module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
+StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml

statusq.qrc

@@ -39,6 +39,7 @@
         <file>src/StatusQ/Components/StatusLoadingIndicator.qml</file>
         <file>src/StatusQ/Platform/qmldir</file>
         <file>src/StatusQ/Platform/StatusMacTrafficLights.qml</file>
+        <file>src/StatusQ/Controls/StatusAssetSelector.qml</file>
         <file>src/StatusQ/Controls/StatusIconTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusChatInfoButton.qml</file>
         <file>src/StatusQ/Controls/qmldir</file>