fix(@desktop/onboarding): show identicon ring and colors for profiles

issue: #5358

src/app/modules/main/chat_section/base_item.nim

@@ -1,5 +1,6 @@
 import sequtils, sugar
-import color_hash_item, color_hash_model
+
+import ../../shared_models/[color_hash_item, color_hash_model]
 
 type
   ColorHashSegment* = tuple[len, colorIdx: int]

src/app/modules/startup/login/item.nim

@@ -1,25 +1,49 @@
+import NimQml
+
+import sequtils, sugar
+import ../../shared_models/[color_hash_item, color_hash_model]
+
+type
+  ColorHashSegment* = tuple[len, colorIdx: int]
+
 type
   Item* = object
     name: string
     thumbnailImage: string
     largeImage: string
     keyUid: string
+    colorHash: color_hash_model.Model
+    colorHashVariant: QVariant
+    colorId: int
 
-proc initItem*(name, thumbnailImage, largeImage, keyUid: string):
+proc initItem*(name, thumbnailImage, largeImage, keyUid: string, colorHash: seq[ColorHashSegment], colorId: int):
   Item =
   result.name = name
   result.thumbnailImage = thumbnailImage
   result.largeImage = largeImage
   result.keyUid = keyUid
+  result.colorHash = color_hash_model.newModel()
+  result.colorHash.setItems(map(colorHash, x => color_hash_item.initItem(x.len, x.colorIdx)))
+  result.colorHashVariant = newQVariant(result.colorHash)
+  result.colorId = colorId
 
 proc getName*(self: Item): string =
   return self.name
 
 proc getThumbnailImage*(self: Item): string =
-    result = self.thumbnailImage
+  return self.thumbnailImage
 
 proc getLargeImage*(self: Item): string =
-    result = self.largeImage
+  return self.largeImage
 
 proc getKeyUid*(self: Item): string =
   return self.keyUid
+
+proc getColorHash*(self: Item): color_hash_model.Model =
+  return self.colorHash
+
+proc getColorHashVariant*(self: Item): QVariant =
+  return self.colorHashVariant
+
+proc getColorId*(self: Item): int =
+  return self.colorId

src/app/modules/startup/login/model.nim

@@ -8,6 +8,8 @@ type
     ThumbnailImage
     LargeImage
     KeyUid
+    ColorHash
+    ColorId
 
 QtObject:
   type
@@ -33,7 +35,9 @@ QtObject:
       ModelRole.Name.int:"username",
       ModelRole.ThumbnailImage.int:"thumbnailImage",
       ModelRole.LargeImage.int:"largeImage",
-      ModelRole.KeyUid.int:"keyUid"
+      ModelRole.KeyUid.int:"keyUid",
+      ModelRole.ColorHash.int:"colorHash",
+      ModelRole.ColorId.int:"colorId"
     }.toTable
 
   method data(self: Model, index: QModelIndex, role: int): QVariant =
@@ -55,6 +59,10 @@ QtObject:
       result = newQVariant(item.getLargeImage())
     of ModelRole.KeyUid:
       result = newQVariant(item.getKeyUid())
+    of ModelRole.ColorHash:
+      result = newQVariant(item.getColorHash())
+    of ModelRole.ColorId:
+      result = newQVariant(item.getColorId())
 
   proc setItems*(self: Model, items: seq[Item]) =
     self.beginResetModel()

src/app/modules/startup/login/module.nim

@@ -56,7 +56,7 @@ method load*(self: Module) =
       var largeImage: string
       self.extractImages(acc, thumbnailImage, largeImage)
       items.add(initItem(acc.name, thumbnailImage, largeImage,
-      acc.keyUid))
+      acc.keyUid, acc.colorHash, acc.colorId))
 
     self.view.setModelItems(items)
 

src/app/modules/startup/login/selected_account.nim

@@ -30,6 +30,18 @@ QtObject:
   QtProperty[string] keyUid:
     read = getKeyUid
 
+  proc getColorHash(self: SelectedAccount): QVariant {.slot.} =
+    return self.item.getColorHashVariant()
+
+  QtProperty[QVariant] colorHash:
+    read = getColorHash
+
+  proc getColorId(self: SelectedAccount): int {.slot.} =
+    return self.item.getColorId()
+
+  QtProperty[int] colorId:
+    read = getColorId
+
   proc getThumbnailImage(self: SelectedAccount): string {.slot.} =
     return self.item.getThumbnailImage()
 

ui/app/AppLayouts/Onboarding/controls/AccountViewDelegate.qml

@@ -6,6 +6,7 @@ import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.status 1.0
+import shared.controls.chat 1.0
 
 import StatusQ.Controls 0.1 as StatusQControls
 import StatusQ.Components 0.1
@@ -16,6 +17,8 @@ Rectangle {
     property string username: "Jotaro Kujo"
     property string keyUid: "0x123345677890987654321123456"
     property string address: ""
+    property var colorHash
+    property int colorId
     property url image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
     property var onAccountSelect: function() {}
     property var isSelected: function() {}
@@ -37,14 +40,17 @@ Rectangle {
         return Style.current.transparent
     }
 
-    StatusSmartIdenticon {
+    UserImage {
         id: accountImage
+
         anchors.left: parent.left
         anchors.leftMargin: Style.current.padding
         anchors.verticalCenter: parent.verticalCenter
+
         name: root.username
-        image.source: root.image
-        icon.charactersLen: 2
+        image: root.image
+        colorId: root.colorId
+        colorHash: root.colorHash
     }
 
     StyledText {

ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml

@@ -20,6 +20,8 @@ ListView {
         image: model.thumbnailImage
         keyUid: model.keyUid
         address: model.address || ''
+        colorHash: model.colorHash
+        colorId: model.colorId
         isSelected: function (index, keyUid) {
             return accountsView.isSelected(index, keyUid)
         }

ui/app/AppLayouts/Onboarding/views/LoginView.qml

@@ -10,6 +10,7 @@ import shared.panels 1.0
 import shared.popups 1.0
 import shared.status 1.0
 import shared.controls 1.0
+import shared.controls.chat 1.0
 import "../popups"
 import "../stores"
 
@@ -87,12 +88,15 @@ Item {
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
 
-        StatusSmartIdenticon {
+        UserImage {
             id: userImage
+
             anchors.horizontalCenter: parent.horizontalCenter
-            image.source: LoginStore.currentAccount.thumbnailImage
+
+            image: LoginStore.currentAccount.thumbnailImage
             name: LoginStore.currentAccount.username
-            icon.charactersLen: 2
+            colorId: LoginStore.currentAccount.colorId
+            colorHash: LoginStore.currentAccount.colorHash
         }
 
         StyledText {

ui/imports/shared/controls/chat/UserImage.qml

@@ -5,6 +5,7 @@ import shared.panels 1.0
 import utils 1.0
 
 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
 
 Loader {
     id: root
@@ -16,9 +17,12 @@ Loader {
     property string name
     property string pubkey
     property string image
-    property bool showRing: false
+    property bool showRing: true
     property bool interactive: true
 
+    property int colorId: Utils.colorIdForPubkey(pubkey)
+    property var colorHash: Utils.getColorHashAsJson(pubkey)
+
     signal clicked()
 
     height: active ? item.height : 0
@@ -33,12 +37,11 @@ Loader {
         icon {
             width: root.imageWidth
             height: root.imageHeight
-            color: Style.current.background
-            textColor: Style.current.secondaryText
+            color: Theme.palette.userCustomizationColors[root.colorId]
             charactersLen: 2
         }
         ringSettings {
-            ringSpecModel: root.showRing ? Utils.getColorHashAsJson(root.pubkey) : undefined
+            ringSpecModel: root.showRing ? root.colorHash : undefined
         }
 
         Loader {

ui/imports/utils/Utils.qml

@@ -1,7 +1,9 @@
 pragma Singleton
 
 import QtQuick 2.13
+
 import shared 1.0
+import StatusQ.Core.Theme 0.1
 
 QtObject {
     function isHex(value) {
@@ -619,6 +621,17 @@ QtObject {
         return JSON.parse(jsonObj)
     }
 
+    function colorIdForPubkey(publicKey) {
+        if (publicKey === "") {
+            return 0
+        }
+        return globalUtils.getColorId(publicKey)
+    }
+
+    function colorForPubkey(publicKey) {
+        return Theme.palette.userCustomizationColors[colorIdForPubkey(publicKey)]
+    }
+
     function getCompressedPk(publicKey) {
         if (publicKey === "") {
             return ""