feat: show collectibles in the Collectibles tab

src/app/wallet/view.nim

@@ -6,6 +6,7 @@ import views/asset_list
 import views/account_list
 import views/account_item
 import views/transaction_list
+import views/collectibles_list
 import ../../status/wallet
 import ../../status/status
 import chronicles
@@ -15,6 +16,7 @@ QtObject:
     WalletView* = ref object of QAbstractListModel
       accounts*: AccountList
       currentAssetList*: AssetList
+      currentCollectiblesList*: CollectiblesList
       currentAccount: AccountItemView
       currentTransactions: TransactionList
       status: Status
@@ -33,6 +35,7 @@ QtObject:
     result.currentAccount = newAccountItemView()
     result.currentAssetList = newAssetList()
     result.currentTransactions = newTransactionList()
+    result.currentCollectiblesList = newCollectiblesList()
     result.totalFiatBalance = ""
     result.setup
 
@@ -85,6 +88,20 @@ QtObject:
     write = setCurrentTransactions
     notify = currentTransactionsChanged
   
+  proc currentCollectiblesListChanged*(self: WalletView) {.signal.}
+
+  proc getCurrentCollectiblesList(self: WalletView): QVariant {.slot.} =
+    return newQVariant(self.currentCollectiblesList)
+
+  proc setCurrentCollectiblesList*(self: WalletView, collectibles: seq[Collectible]) =
+    self.currentCollectiblesList.setNewData(collectibles)
+    self.currentCollectiblesListChanged()
+
+  QtProperty[QVariant] collectibles:
+    read = getCurrentCollectiblesList
+    write = setCurrentCollectiblesList
+    notify = currentCollectiblesListChanged
+
   proc totalFiatBalanceChanged*(self: WalletView) {.signal.}
 
   proc getTotalFiatBalance(self: WalletView): string {.slot.} =
@@ -103,9 +120,10 @@ QtObject:
 
   proc addAccountToList*(self: WalletView, account: WalletAccount) =
     self.accounts.addAccountToList(account)
-    # If it's the first account we ever get, use its assetList as our currentAssetList
+    # If it's the first account we ever get, use its list as our first lists
     if (self.accounts.rowCount == 1):
       self.setCurrentAssetList(account.assetList)
+      self.setCurrentCollectiblesList(account.collectibles)
       self.setCurrentAccountByIndex(0)
     self.accountListChanged()
 
@@ -177,6 +195,7 @@ QtObject:
     self.accountListChanged()
     self.accounts.forceUpdate()
     self.setCurrentAssetList(self.currentAccount.account.assetList)
+    self.setCurrentCollectiblesList(self.currentAccount.account.collectibles)
 
   proc addCustomToken*(self: WalletView, address: string, name: string, symbol: string, decimals: string) {.slot.} =
     self.status.wallet.toggleAsset(symbol, true, address, name, parseInt(decimals), "")

src/app/wallet/views/collectibles_list.nim

@@ -0,0 +1,55 @@
+import NimQml
+import tables
+import ../../../status/wallet
+
+type
+  CollectiblesRoles {.pure.} = enum
+    Name = UserRole + 1,
+    Image = UserRole + 2
+
+QtObject:
+  type CollectiblesList* = ref object of QAbstractListModel
+    collectibles*: seq[Collectible]
+
+  proc setup(self: CollectiblesList) = self.QAbstractListModel.setup
+
+  proc delete(self: CollectiblesList) =
+    self.QAbstractListModel.delete
+    self.collectibles = @[]
+
+  proc newCollectiblesList*(): CollectiblesList =
+    new(result, delete)
+    result.collectibles = @[]
+    result.setup
+
+  method rowCount(self: CollectiblesList, index: QModelIndex = nil): int =
+    return self.collectibles.len
+
+  method data(self: CollectiblesList, index: QModelIndex, role: int): QVariant =
+    if not index.isValid:
+      return
+    if index.row < 0 or index.row >= self.collectibles.len:
+      return
+    let collectible = self.collectibles[index.row]
+    let collectibleRole = role.CollectiblesRoles
+    case collectibleRole:
+    of CollectiblesRoles.Name: result = newQVariant(collectible.name)
+    of CollectiblesRoles.Image: result = newQVariant(collectible.image)
+
+  method roleNames(self: CollectiblesList): Table[int, string] =
+    { CollectiblesRoles.Name.int:"name",
+    CollectiblesRoles.Image.int:"image" }.toTable
+
+  proc addCollectibleToList*(self: CollectiblesList, colelctible: Collectible) =
+    self.beginInsertRows(newQModelIndex(), self.collectibles.len, self.collectibles.len)
+    self.collectibles.add(colelctible)
+    self.endInsertRows()
+
+  proc setNewData*(self: CollectiblesList, collectibles: seq[Collectible]) =
+    self.beginResetModel()
+    self.collectibles = collectibles
+    self.endResetModel()
+
+  proc forceUpdate*(self: CollectiblesList) =
+    self.beginResetModel()
+    self.endResetModel()

src/status/wallet.nim

@@ -9,7 +9,7 @@ import wallet/balance_manager
 import wallet/account
 import wallet/collectibles
 from eth/common/utils import parseAddress
-export account
+export account, collectibles
 export Transaction
 
 type WalletModel* = ref object
@@ -73,7 +73,7 @@ proc populateAccount*(self: WalletModel, walletAccount: var WalletAccount, balan
   walletAccount.realFiatBalance = 0.0
   # Get NFTs
   # TODO(jrainville): make this async because otherwise it can block the thread for a long time
-  var collectibles = getAllCollectibles(parseAddress(walletAccount.address))
+  walletAccount.collectibles = getAllCollectibles(parseAddress(walletAccount.address))
   updateBalance(walletAccount, self.getDefaultCurrency())
 
 proc newAccount*(self: WalletModel, name: string, address: string, iconColor: string, balance: string, publicKey: string): WalletAccount =

src/status/wallet/account.nim

@@ -1,5 +1,8 @@
 import eventemitter
 
+type Collectible* = ref object
+    name*, image*: string
+
 type CurrencyArgs* = ref object of Args
     currency*: string
 
@@ -11,6 +14,7 @@ type WalletAccount* = ref object
     realFiatBalance*: float
     assetList*: seq[Asset]
     wallet*, chat*: bool
+    collectibles*: seq[Collectible]
 
 type AccountArgs* = ref object of Args
     account*: WalletAccount

src/status/wallet/collectibles.nim

@@ -2,9 +2,7 @@ import strformat, httpclient, json, chronicles, sequtils, strutils, tables
 import ../libstatus/core as status
 import ../libstatus/contracts as contracts
 import eth/common/eth_types
-
-type Collectible* = ref object
-    name*, image*: string
+import account
 
 proc getTokenUri(contract: Contract, tokenId: int): string =
   try:

ui/app/AppLayouts/Wallet/CollectiblesTab.qml

@@ -1,14 +1,67 @@
 import QtQuick 2.13
+import "../../../imports"
 
 Item {
     Text {
-        id: name2
-        text: "Collectibles"
+        visible: walletModel.collectibles.rowCount() === 0
+        text: qsTr("No collectibles in this account")
+    }
+
+    Component {
+        id: collectiblesViewDelegate
+
+        Item {
+            id: element
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            height: 40
+
+            Image {
+                id: collectibleImage
+                width: 36
+                height: 36
+                source: image
+                anchors.left: parent.left
+                anchors.leftMargin: 0
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Text {
+                id: collectibleName
+                text: name
+                anchors.leftMargin: Theme.padding
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: collectibleImage.right
+                color: Theme.darkGrey
+                font.pixelSize: 15
+            }
+        }
+    }
+
+    ListModel {
+        id: exampleModel
+
+        ListElement {
+            name: "Kitty cat"
+            image: "../../img/token-icons/eth.svg"
+        }
+    }
+
+    ListView {
+        id: assetListView
+        spacing: Theme.smallPadding
+        anchors.topMargin: Theme.bigPadding
+        anchors.fill: parent
+//        model: exampleModel
+        model: walletModel.collectibles
+        delegate: collectiblesViewDelegate
     }
 }
 
 /*##^##
 Designer {
-    D{i:0;autoSize:true;height:480;width:640}
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
 }
 ##^##*/