refactor(@wallet/collectibles): Updated `CollectibleView` api

- Updated `CollectibleView.qml` api to be more generic.
- Updated `CollectiblesView.qml` according to new api.

ui/app/AppLayouts/Wallet/views/CollectiblesView.qml

@@ -54,10 +54,13 @@ Item {
             delegate: CollectibleView {
                 height: gridView.cellHeight
                 width: gridView.cellWidth
-                collectibleModel: model
+                title: model.name ? model.name : "..."
-                onCollectibleClicked: {
+                subTitle: model.collectionName ? model.collectionName : ""
-                    root.collectibleClicked(address, tokenId);
+                imageUrl: model.imageUrl ? model.imageUrl : ""
-                }
+                backgroundColor: model.backgroundColor ? model.backgroundColor : "transparent"
+                isLoading: model.isLoading
+
+                onClicked: root.collectibleClicked(model.address, model.tokenId)
             }
 
             ScrollBar.vertical: StatusScrollBar {}

ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml

@@ -7,96 +7,110 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
-import shared.panels 1.0
-
 import utils 1.0
 
-Item {
+Control {
     id: root
 
-    property var collectibleModel
+    property string title: ""
+    property string subTitle: ""
+    property string backgroundColor: "transparent"
+    property url imageUrl : ""
+    property bool isLoading: false
+    property bool navigationIconVisible: false
 
-    signal collectibleClicked(string address, string tokenId)
+    signal clicked
-
-    QtObject {
-        id: d
-        readonly property bool modeDataValid: !!root.collectibleModel && root.collectibleModel !== undefined && root.collectibleModel.id >= 0
-    }
 
     implicitHeight: 225
     implicitWidth: 176
 
-    ColumnLayout {
+    background: Rectangle {
-        width: parent.width
+        radius: 18
-        anchors.horizontalCenter: parent.horizontalCenter
+        border.width: 1
+        border.color: Theme.palette.primaryColor1
+        color: Theme.palette.indirectColor3
+        visible: !root.isLoading && mouse.containsMouse
+    }
+
+    contentItem: ColumnLayout {
         spacing: 0
 
         StatusRoundedImage {
             id: image
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
-            Layout.topMargin: 8
+            Layout.alignment: Qt.AlignHCenter
-            Layout.bottomMargin: 0
+            Layout.margins: Style.current.halfPadding
-            implicitWidth: 160
+            Layout.fillWidth: true
-            implicitHeight: 160
+            Layout.preferredHeight: width
             radius: 12
-            image.source: d.modeDataValid ? root.collectibleModel.imageUrl : ""
+            image.source: root.imageUrl
             border.color: Theme.palette.baseColor2
             border.width: 1
             showLoadingIndicator: true
-            color: d.modeDataValid ? root.collectibleModel.backgroundColor : "transparent"
+            color: root.backgroundColor
+
             Loader {
                 anchors.fill: parent
-                active: root.collectibleModel.isLoading
+                active: root.isLoading
                 sourceComponent: LoadingComponent {radius: image.radius}
             }
         }
-        StatusTextWithLoadingState {
+
-            id: collectibleLabel
+        RowLayout {
-            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.leftMargin: Style.current.halfPadding
-            Layout.leftMargin: 8
+            Layout.rightMargin: Layout.leftMargin
-            Layout.topMargin: 9
+            Layout.fillWidth: !root.isLoading
-            Layout.preferredWidth: root.collectibleModel.isLoading ? 134 : 144
+            Layout.preferredWidth: root.isLoading ? 134 : width
-            Layout.preferredHeight: 21
+
-            horizontalAlignment: Text.AlignLeft
+            StatusTextWithLoadingState {
-            verticalAlignment: Text.AlignVCenter
+                Layout.alignment: Qt.AlignLeft
-            font.pixelSize: 15
+                Layout.fillWidth: true
-            customColor: Theme.palette.directColor1
+                horizontalAlignment: Text.AlignLeft
-            font.weight: Font.DemiBold
+                verticalAlignment: Text.AlignVCenter
-            elide: Text.ElideRight
+                font.pixelSize: 15
-            text: root.collectibleModel.isLoading ? Constants.dummyText : d.modeDataValid ? root.collectibleModel.name : "..."
+                customColor: Theme.palette.directColor1
-            loading: root.collectibleModel.isLoading
+                font.weight: Font.DemiBold
+                elide: Text.ElideRight
+                text: root.isLoading ? Constants.dummyText : root.title
+                loading: root.isLoading
+            }
+
+            StatusIcon {
+                Layout.alignment: Qt.AlignVCenter
+                visible: root.navigationIconVisible
+                icon: "next"
+                color: Theme.palette.baseColor1
+            }
         }
+
         StatusTextWithLoadingState {
-            id: collectionLabel
+            Layout.alignment: Qt.AlignLeft
-            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.leftMargin: Style.current.halfPadding
-            Layout.leftMargin: 8
+            Layout.rightMargin: Layout.leftMargin
-            Layout.preferredWidth: root.collectibleModel.isLoading ? 88 : 144
+            Layout.fillWidth: !root.isLoading
-            Layout.preferredHeight: 18
+            Layout.preferredWidth: root.isLoading ? 88 : width
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: 13
             customColor: Theme.palette.baseColor1
             elide: Text.ElideRight
-            text: root.collectibleModel.isLoading ? Constants.dummyText : d.modeDataValid ? root.collectibleModel.collectionName : "..."
+            text: root.isLoading? Constants.dummyText : root.subTitle
-            loading: root.collectibleModel.isLoading
+            loading: root.isLoading
+        }
+
+        // Filler
+        Item {
+            Layout.fillHeight: true
         }
     }
 
-    Rectangle {
-        anchors.fill: parent
-        radius: 18
-        border.width: 1
-        border.color: Theme.palette.primaryColor1
-        color: Theme.palette.indirectColor3
-        visible: !root.collectibleModel.isLoading && mouse.containsMouse
-    }
     MouseArea {
         id: mouse
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
-            if (d.modeDataValid && !root.collectibleModel.isLoading) {
+            if (!root.isLoading) {
-                root.collectibleClicked(root.collectibleModel.address, root.collectibleModel.tokenId);
+                root.clicked()
             }
         }
     }