feat: make all collectibles work and fix Cryptokitties

src/app/wallet/views/collectibles_list.nim

@@ -6,6 +6,7 @@ type
     Name = UserRole + 1,
     Image = UserRole + 2
     CollectibleId = UserRole + 3
+    CollectibleType = UserRole + 4
 
 QtObject:
   type CollectiblesList* = ref object of QAbstractListModel
@@ -36,11 +37,13 @@ QtObject:
     of CollectiblesRoles.Name: result = newQVariant(collectible.name)
     of CollectiblesRoles.Image: result = newQVariant(collectible.image)
     of CollectiblesRoles.CollectibleId: result = newQVariant(collectible.id)
+    of CollectiblesRoles.CollectibleType: result = newQVariant(collectible.collectibleType)
 
   method roleNames(self: CollectiblesList): Table[int, string] =
     { CollectiblesRoles.Name.int:"name",
     CollectiblesRoles.Image.int:"image",
-    CollectiblesRoles.CollectibleId.int:"collectibleId" }.toTable
+    CollectiblesRoles.CollectibleId.int:"collectibleId",
+    CollectiblesRoles.CollectibleType.int:"collectibleType" }.toTable
 
   proc addCollectibleToList*(self: CollectiblesList, colelctible: Collectible) =
     self.beginInsertRows(newQModelIndex(), self.collectibles.len, self.collectibles.len)

src/status/wallet/account.nim

@@ -2,7 +2,7 @@ from eventemitter import Args
 import ../libstatus/types
 
 type Collectible* = ref object
-    name*, image*, id*: string
+    name*, image*, id*, collectibleType*: string
 
 type CurrencyArgs* = ref object of Args
     currency*: string

src/status/wallet/collectibles.nim

@@ -7,6 +7,10 @@ import eth/common/eth_types
 import ../libstatus/types
 import account
 
+const CRYPTOKITTY = "cryptokitty"
+const KUDO = "kudo"
+const ETHERMON = "ethermon"
+
 proc getTokenUri(contract: Contract, tokenId: Stuint[256]): string =
   try:
     let
@@ -65,11 +69,18 @@ proc getCryptoKitties*(address: EthAddress): seq[Collectible] =
     let response = client.request(url)
     let kitties = parseJson(response.body)["kitties"]
     for kitty in kitties:
+      try:
         var id = kitty["id"]
+        var name = kitty["name"]
         var finalId = ""
+        var finalName = ""
         if (not (id.kind == JNull)):
           finalId = $id
-      result.add(Collectible(id: finalId, name: kitty["name"].str, image: kitty["image_url"].str))
+        if (not (name.kind == JNull)):
+          finalName = $name
+        result.add(Collectible(id: finalId, name: finalName, image: kitty["image_url_png"].str, collectibleType: CRYPTOKITTY))
+      except Exception as e2:
+        error "Error with this individual cat", msg = e2.msg, cat = kitty
   except Exception as e:
     error "Error getting Cryptokitties", msg = e.msg
 
@@ -94,7 +105,7 @@ proc getEthermons*(address: EthAddress): seq[Collectible] =
     var i = 0
     for monsterKey in json.keys(monsters):
       let monster = monsters[monsterKey]
-      result.add(Collectible(id: $tokens[i], name: monster["class_name"].str, image: monster["image"].str))
+      result.add(Collectible(id: $tokens[i], name: monster["class_name"].str, image: monster["image"].str, collectibleType: ETHERMON))
       i = i + 1
   except Exception as e:
     error "Error getting Ethermons", msg = e.msg
@@ -122,7 +133,7 @@ proc getKudos*(address: EthAddress): seq[Collectible] =
       let response = client.request(url)
       let kudo = parseJson(response.body)
 
-      result.add(Collectible(id: $token, name: kudo["name"].str, image: kudo["image"].str))
+      result.add(Collectible(id: $token, name: kudo["name"].str, image: kudo["image"].str, collectibleType: KUDO))
   except Exception as e:
     error "Error getting Kudos", msg = e.msg
 

ui/app/AppLayouts/Wallet/CollectiblesTab.qml

@@ -10,7 +10,7 @@ Item {
 
     Loader {
         active: true
-        sourceComponent: true || root.isLoading || walletModel.collectibles.rowCount() > 0 ? collectiblesListComponent
+        sourceComponent: root.isLoading || walletModel.collectibles.rowCount() > 0 ? collectiblesListComponent
                                                                                    : noCollectiblesComponent
         width: parent.width
     }
@@ -42,6 +42,7 @@ Item {
 
             CollectiblesContainer {
                 collectibleName: "CryptoKitties"
+                collectibleType: Constants.cryptokitty
                 collectibleIconSource: "../../img/collectibles/CryptoKitties.png"
                 isLoading: root.isLoading
                 collectiblesModal: collectiblesModalComponent
@@ -53,6 +54,7 @@ Item {
 
             CollectiblesContainer {
                 collectibleName: "Ethermons"
+                collectibleType: Constants.ethermon
                 collectibleIconSource: "../../img/collectibles/ethermons.png"
                 isLoading: root.isLoading
                 collectiblesModal: collectiblesModalComponent
@@ -64,6 +66,7 @@ Item {
 
             CollectiblesContainer {
                 collectibleName: "Kudos"
+                collectibleType: Constants.kudo
                 collectibleIconSource: "../../img/collectibles/kudos.png"
                 isLoading: root.isLoading
                 collectiblesModal: collectiblesModalComponent
@@ -81,68 +84,6 @@ Item {
             root.isLoading= isLoading
         }
     }
-
-    Component {
-        id: collectiblesViewDelegate
-
-        Item {
-            id: element
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            height: 132
-
-            SVGImage {
-                id: collectibleImage
-                width: 128
-                height: 128
-                source: image
-                anchors.left: parent.left
-                anchors.leftMargin: 0
-                anchors.verticalCenter: parent.verticalCenter
-            }
-
-            StyledText {
-                id: collectibleName
-                text: name
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: collectibleImage.right
-                anchors.leftMargin: Style.current.padding
-                font.pixelSize: 15
-            }
-
-            StyledText {
-                id: collectibleIdText
-                text: collectibleId
-                anchors.leftMargin: Style.current.padding
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: collectibleName.right
-                color: Style.current.darkGrey
-                font.pixelSize: 15
-            }
-        }
-    }
-
-    ListModel {
-        id: exampleModel
-
-        ListElement {
-            name: "Kitty cat"
-            image: "../../img/token-icons/eth.svg"
-            collectibleId: "1337"
-        }
-    }
-
-//    ListView {
-//        id: assetListView
-//        spacing: Style.current.smallPadding
-//        anchors.topMargin: Style.current.bigPadding
-//        anchors.fill: parent
-////        model: exampleModel
-//        model: walletModel.collectibles
-//        delegate: collectiblesViewDelegate
-//    }
 }
 
 /*##^##

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml

@@ -6,6 +6,7 @@ import "../../../../../shared"
 Item {
     property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
     property string collectibleName: "CryptoKitties"
+    property string collectibleType: "cryptokitty"
     property bool isLoading: true
     property bool collectiblesOpened: false
     property var collectiblesModal
@@ -13,35 +14,30 @@ Item {
     property var getLink: function () {}
 
     id: root
+    visible: isLoading || collectiblesContent.collectiblesQty > 0
     width: parent.width
-    height: childrenRect.height
+    height: visible ? collectiblesHeader.height + collectiblesContent.height : 0
 
     CollectiblesHeader {
         id: collectiblesHeader
         collectibleName: root.collectibleName
         collectibleIconSource: root.collectibleIconSource
+        collectiblesQty: collectiblesContent.collectiblesQty
         isLoading: root.isLoading
         toggleCollectible: function () {
             root.collectiblesOpened = !root.collectiblesOpened
         }
     }
 
-    Loader {
-        active: root.collectiblesOpened
-        sourceComponent: contentComponent
-        anchors.top: collectiblesHeader.bottom
-        anchors.topMargin: Style.current.halfPadding
-        width: parent.width
-    }
-
-    Component {
-        id: contentComponent
-
     CollectiblesContent {
+        id: collectiblesContent
+        visible: root.collectiblesOpened
         collectiblesModal: root.collectiblesModal
+        collectibleType: root.collectibleType
         buttonText: root.buttonText
         getLink: root.getLink
-        }
+        anchors.top: collectiblesHeader.bottom
+        anchors.topMargin: Style.current.halfPadding
     }
 }
 

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
+import QtQml.Models 2.13
 import "../../../../../imports"
 import "../../../../../shared"
 
@@ -24,12 +25,14 @@ ScrollView {
             description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
         }]
     readonly property int imageSize: 164
+    property string collectibleType: "cryptokitty"
     property var collectiblesModal
     property string buttonText: "View in Cryptokitties"
     property var getLink: function () {}
+    property alias collectiblesQty: collectibleModel.count
 
     id: root
-    height: contentRow.height
+    height: visible ? contentRow.height : 0
     width: parent.width
     ScrollBar.vertical.policy: ScrollBar.AlwaysOff
     ScrollBar.horizontal.policy: ScrollBar.AsNeeded
@@ -41,9 +44,40 @@ ScrollView {
         spacing: Style.current.padding
 
         Repeater {
-            model: collectibles
+            model: collectibleModel
+        }
 
-            Rectangle {
+        DelegateModel {
+            id: collectibleModel
+            model: walletModel.collectibles
+            items.includeByDefault: false
+
+            groups: [
+                DelegateModelGroup {
+                    id: uncheckedItems
+                    name: "unchecked"
+                    includeByDefault: true
+                    onChanged: {
+                        while (uncheckedItems.count > 0) {
+                            var currentItem = uncheckedItems.get(0)
+                            if (currentItem.model.collectibleType === root.collectibleType) {
+                               currentItem.groups = "items"
+                            } else {
+                                currentItem.groups = "bad"
+                            }
+                        }
+
+                    }
+                },
+                DelegateModelGroup {
+                    id: badCollectibleGroup
+                    name: "bad"
+                    includeByDefault: true
+                }
+
+            ]
+
+            delegate: Rectangle {
                 radius: 16
                 border.width: 1
                 border.color: Style.current.border
@@ -55,7 +89,7 @@ ScrollView {
                     id: collectibleImage
                     width: root.imageSize
                     height: root.imageSize
-                    source: modelData.image
+                    source: image
                     fillMode: Image.PreserveAspectCrop
                 }
 
@@ -64,12 +98,13 @@ ScrollView {
                     anchors.fill: parent
                     onClicked: {
                         collectiblesModal.openModal({
-                                                   name: modelData.name,
+                                                   name: name,
-                                                   id: modelData.collectibleId,
+                                                   id: collectibleId,
-                                                   description: modelData.description,
+                                                   // TODO do we even have a description?
+                                                   description: "",
                                                    buttonText: root.buttonText,
-                                                   link: root.getLink(modelData.collectibleId),
+                                                   link: root.getLink(collectibleId),
-                                                   image: modelData.image
+                                                   image: image
                                                })
                     }
                 }

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml

@@ -9,6 +9,7 @@ Rectangle {
     property bool isLoading: true
     property bool hovered: false
     property var toggleCollectible: function () {}
+    property int collectiblesQty: 6
 
     id: collectibleHeader
     height: 64
@@ -59,8 +60,7 @@ Rectangle {
             StyledText {
                 id: numberCollectibleText
                 color: Style.current.secondaryText
-                // TODO change with number of current collectible
+                text: collectibleHeader.collectiblesQty
-                text: "6"
                 font.pixelSize: 15
                 anchors.verticalCenter: parent.verticalCenter
             }

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml

@@ -21,7 +21,7 @@ ModalPopup {
     }
 
     id: popup
-    title: collectibleName
+    title: collectibleName || qsTr("Unnamed")
 
     CollectiblesModalContent {
         collectibleName: popup.collectibleName

ui/imports/Constants.qml

@@ -23,6 +23,10 @@ QtObject {
     readonly property string seedWalletType: "seed"
     readonly property string generatedWalletType: "generated"
 
+    readonly property string cryptokitty: "cryptokitty"
+    readonly property string kudo: "kudo"
+    readonly property string ethermon: "ethermon"
+
     readonly property var accountColors: [
         "#9B832F",
         "#D37EF4",