ui(Wallet): render asset icons in transaction list items

Closes #405

src/app/wallet/views/transaction_list.nim

@@ -16,6 +16,7 @@ type
     Value = UserRole + 11,
     From = UserRole + 12,
     To = UserRole + 13
+    Contract = UserRole + 14
 
 QtObject:
   type TransactionList* = ref object of QAbstractListModel
@@ -56,6 +57,7 @@ QtObject:
     of TransactionRoles.Value: result = newQVariant(transaction.value)
     of TransactionRoles.From: result = newQVariant(transaction.fromAddress)
     of TransactionRoles.To: result = newQVariant(transaction.to)
+    of TransactionRoles.Contract: result = newQVariant(transaction.contract)
 
   method roleNames(self: TransactionList): Table[int, string] =
     { TransactionRoles.Type.int:"typeValue",
@@ -70,7 +72,8 @@ QtObject:
     TransactionRoles.TxStatus.int:"txStatus",
     TransactionRoles.Value.int:"value",
     TransactionRoles.From.int:"fromAddress",
-    TransactionRoles.To.int:"to" }.toTable
+    TransactionRoles.To.int:"to",
+    TransactionRoles.Contract.int:"contract"}.toTable
 
   proc addTransactionToList*(self: TransactionList, transaction: Transaction) =
     self.beginInsertRows(newQModelIndex(), self.transactions.len, self.transactions.len)

src/status/libstatus/types.nim

@@ -88,6 +88,7 @@ type
     address*: string
     blockNumber*: string
     blockHash*: string
+    contract*: string
     timestamp*: string
     gasPrice*: string
     gasLimit*: string

src/status/libstatus/wallet.nim

@@ -39,6 +39,7 @@ proc getTransfersByAddress*(address: string): seq[Transaction] =
       accountTransactions.add(Transaction(
         typeValue: transaction["type"].getStr,
         address: transaction["address"].getStr,
+        contract: transaction["contract"].getStr,
         blockNumber: transaction["blockNumber"].getStr,
         blockHash: transaction["blockhash"].getStr,
         timestamp: transaction["timestamp"].getStr,

ui/app/AppLayouts/Wallet/HistoryTab.qml

@@ -1,20 +1,36 @@
 import QtQuick 2.13
 import "./components"
+import "./data"
 import "../../../imports"
 import "../../../shared"
 
 Item {
+    Tokens {
+      id: tokenList
+    }
+
     Component {
       id: transactionListItemCmp
 
       Rectangle {
         id: transactionListItem
         property bool isHovered: false
+        property string symbol: ""
         anchors.right: parent.right
         anchors.left: parent.left
         height: 64
         color: isHovered ? "#f0f0f0" : "white"
 
+        Component.onCompleted: {
+          for (let i = 0; i < tokenList.count; i++) {
+            let token = tokenList.get(i)
+            if (token.address == contract) {
+              transactionListItem.symbol = token.symbol
+              break;
+            }
+          }
+        }
+
         MouseArea {
             anchors.fill: parent
             onClicked: transactionModal.open()
@@ -28,22 +44,24 @@ Item {
             }
         }
 
-
         TransactionModal{
           id: transactionModal
         }
 
         Item {
-
-          Rectangle {
-            id: assetIcon
-            color: "gray"
-            width: 40
-            height: 40
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.topMargin: 12
-            radius: 50
+          Image {
+              id: assetIcon
+              width: 40
+              height: 40
+              source: "../../img/tokens/" + (transactionListItem.symbol != "" ? transactionListItem.symbol : "ETH") + ".png"
+              anchors.left: parent.left
+              anchors.top: parent.top
+              anchors.topMargin: 12
+              onStatusChanged: {
+                  if (assetIcon.status == Image.Error) {
+                      assetIcon.source = "../../img/tokens/0-native.png"
+                  }
+              }
           }
 
           StyledText {
@@ -65,7 +83,7 @@ Item {
             anchors.top: parent.top
             anchors.topMargin: Theme.bigPadding
             font.pixelSize: 15
-            text: value + " TOKEN"
+            text: value + " " + transactionListItem.symbol
           }
         }