\chore(@desktop/wallet): Change customisation colours on desktop to match those used on mobile

fixes #10637

src/app/modules/main/browser_section/current_account/view.nim

@@ -13,7 +13,7 @@ QtObject:
       name: string
       address: string
       path: string
-      color: string
+      colorId: string
       walletType: string
       currencyBalance: CurrencyAmount
       assets: token_model.Model
@@ -62,14 +62,14 @@ QtObject:
     read = getPath
     notify = pathChanged
 
-  proc getColor(self: View): QVariant {.slot.} =
+  proc getColorId(self: View): QVariant {.slot.} =
-    return newQVariant(self.color)
+    return newQVariant(self.colorId)
 
-  proc colorChanged(self: View) {.signal.}
+  proc colorIdChanged(self: View) {.signal.}
 
-  QtProperty[QVariant] color:
+  QtProperty[QVariant] colorId:
-    read = getColor
+    read = getColorId
-    notify = colorChanged
+    notify = colorIdChanged
 
   proc getWalletType(self: View): QVariant {.slot.} =
     return newQVariant(self.walletType)
@@ -127,8 +127,8 @@ proc setData*(self: View, item: account_item.Item) =
     self.addressChanged()
     self.path = item.path()
     self.pathChanged()
-    self.color = item.color()
+    self.colorId = item.colorId()
-    self.colorChanged()
+    self.colorIdChanged()
     self.walletType = item.walletType()
     self.walletTypeChanged()
     self.currencyBalance = item.currencyBalance()

src/app/modules/main/browser_section/dapps/accounts.nim

@@ -5,7 +5,7 @@ type
   ModelRole {.pure.} = enum
     Name = UserRole + 1
     Address
-    Color
+    ColorId
     Emoji
 
 QtObject:
@@ -47,7 +47,7 @@ QtObject:
     {
       ModelRole.Name.int:"name",
       ModelRole.Address.int:"address",
-      ModelRole.Color.int:"color",
+      ModelRole.ColorId.int:"colorId",
       ModelRole.Emoji.int:"emoji"
     }.toTable
 
@@ -66,8 +66,8 @@ QtObject:
       result = newQVariant(item.name)
     of ModelRole.Address:
       result = newQVariant(item.address)
-    of ModelRole.Color:
+    of ModelRole.ColorId:
-      result = newQVariant(item.color)
+      result = newQVariant(item.colorId)
     of ModelRole.Emoji:
       result = newQVariant(item.emoji)
 

src/app/modules/main/profile_section/keycard/module.nim

@@ -251,13 +251,13 @@ proc buildKeycardItem(self: Module, keypairs: seq[KeypairDto], keycard: KeycardD
     if ka.walletType == WalletTypeKey:
       item.setPairType(KeyPairType.PrivateKeyImport.int)
       item.setIcon("keycard")
-    item.addAccount(newKeyPairAccountItem(ka.name, ka.path, ka.address, ka.publicKey, ka.emoji, ka.color, icon = icon, balance = 0.0))
+    item.addAccount(newKeyPairAccountItem(ka.name, ka.path, ka.address, ka.publicKey, ka.emoji, ka.colorId, icon = icon, balance = 0.0))
   if reason == BuildItemReason.DetailsView:
     var i = 0
     for ua in unknownAccountsAddresses:
       i.inc
       let name = atc.KEYCARD_ACCOUNT_NAME_OF_UNKNOWN_WALLET_ACCOUNT & $i
-      item.addAccount(newKeyPairAccountItem(name, path = "", ua, pubKey = "", emoji = "", color = "#939BA1", icon = "wallet", balance = 0.0))
+      item.addAccount(newKeyPairAccountItem(name, path = "", ua, pubKey = "", emoji = "", colorId = "", icon = "wallet", balance = 0.0))
   return item
 
 proc areAllKnownKeycardsLockedForKeypair(self: Module, keyUid: string): bool =
@@ -307,7 +307,7 @@ method onNewKeycardSet*(self: Module, keyPair: KeycardDto) =
         ## we should never be here cause all keypairs are firstly added to wallet
         continue
       mainViewItem.addAccount(newKeyPairAccountItem(account.name, account.path, account.address, account.publicKey, 
-        account.emoji, account.color, icon = "", balance = 0.0))
+        account.emoji, account.colorId, icon = "", balance = 0.0))
   if self.view.keycardDetailsModel().isNil:
     return
   var detailsViewItem = self.view.keycardDetailsModel().getItemForKeycardUid(keyPair.keycardUid)
@@ -324,7 +324,7 @@ method onNewKeycardSet*(self: Module, keyPair: KeycardDto) =
         ## we should never be here cause all keypairs are firstly added to wallet
         continue
       detailsViewItem.addAccount(newKeyPairAccountItem(account.name, account.path, account.address, account.publicKey, 
-        account.emoji, account.color, icon = "", balance = 0.0))
+        account.emoji, account.colorId, icon = "", balance = 0.0))
 
 method onKeycardLocked*(self: Module, keyUid: string, keycardUid: string) =
   self.view.keycardModel().setLockedForKeycardsWithKeyUid(keyUid, true)
@@ -357,11 +357,11 @@ method onKeycardAccountsRemoved*(self: Module, keyUid: string, keycardUid: strin
 
 method onWalletAccountUpdated*(self: Module, account: WalletAccountDto) = 
   self.view.keycardModel().updateDetailsForAddressForKeyPairsWithKeyUid(account.keyUid, account.address, account.name, 
-    account.color, account.emoji)
+    account.colorId, account.emoji)
   if self.view.keycardDetailsModel().isNil:
     return
   self.view.keycardDetailsModel().updateDetailsForAddressForKeyPairsWithKeyUid(account.keyUid, account.address, account.name, 
-    account.color, account.emoji)
+    account.colorId, account.emoji)
 
 method prepareKeycardDetailsModel*(self: Module, keyUid: string) =
   let keypairs = self.controller.getKeypairs()

src/app/modules/main/profile_section/wallet/accounts/controller.nim

@@ -25,8 +25,8 @@ proc init*(self: Controller) =
 proc getWalletAccounts*(self: Controller): seq[wallet_account_service.WalletAccountDto] =
   return self.walletAccountService.getWalletAccounts()
 
-proc updateAccount*(self: Controller, address: string, accountName: string, color: string, emoji: string) =
+proc updateAccount*(self: Controller, address: string, accountName: string, colorId: string, emoji: string) =
-  discard self.walletAccountService.updateWalletAccount(address, accountName, color, emoji)
+  discard self.walletAccountService.updateWalletAccount(address, accountName, colorId, emoji)
 
 proc deleteAccount*(self: Controller, address: string) =
   self.walletAccountService.deleteAccount(address)
@@ -38,4 +38,4 @@ proc isKeycardAccount*(self: Controller, account: WalletAccountDto): bool =
   return self.walletAccountService.isKeycardAccount(account)
 
 proc getWalletAccount*(self: Controller, address: string): WalletAccountDto =
-  return self.walletAccountService.getAccountByAddress(address)
+  return self.walletAccountService.getAccountByAddress(address)

src/app/modules/main/profile_section/wallet/accounts/io_interface.nim

@@ -22,7 +22,7 @@ method deleteAccount*(self: AccessInterface, address: string) {.base.} =
 method refreshWalletAccounts*(self: AccessInterface) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method updateAccount*(self: AccessInterface, address: string, accountName: string, color: string, emoji: string) {.base.} =
+method updateAccount*(self: AccessInterface, address: string, accountName: string, colorId: string, emoji: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 # View Delegate Interface
@@ -32,4 +32,4 @@ method viewDidLoad*(self: AccessInterface) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 method getModuleAsVariant*(self: AccessInterface): QVariant {.base.} =
-  raise newException(ValueError, "No implementation available")
+  raise newException(ValueError, "No implementation available")

src/app/modules/main/profile_section/wallet/accounts/item.nim

@@ -12,7 +12,7 @@ proc initItem*(
   name: string = "",
   address: string = "",
   path: string = "",
-  color: string = "",
+  colorId: string = "",
   walletType: string = "",
   emoji: string = "",
   relatedAccounts: related_accounts_model.Model = nil,
@@ -22,7 +22,7 @@ proc initItem*(
   result = Item()
   result.WalletAccountItem.setup(name,
     address,
-    color,
+    colorId,
     emoji,
     walletType,
     path,
@@ -37,4 +37,4 @@ proc `$`*(self: Item): string =
   result = result & ")"
 
 proc relatedAccounts*(self: Item): related_accounts_model.Model =
-  return self.relatedAccounts
+  return self.relatedAccounts

src/app/modules/main/profile_section/wallet/accounts/model.nim

@@ -6,7 +6,7 @@ type
     Name = UserRole + 1,
     Address,
     Path,
-    Color,
+    ColorId,
     WalletType,
     Emoji,
     RelatedAccounts,
@@ -49,7 +49,7 @@ QtObject:
       ModelRole.Name.int:"name",
       ModelRole.Address.int:"address",
       ModelRole.Path.int:"path",
-      ModelRole.Color.int:"color",
+      ModelRole.ColorId.int:"colorId",
       ModelRole.WalletType.int:"walletType",
       ModelRole.Emoji.int: "emoji",
       ModelRole.RelatedAccounts.int: "relatedAccounts",
@@ -68,11 +68,11 @@ QtObject:
     for item in self.items.mitems:
       if account.address == item.address:
         item.name = account.name
-        item.color = account.color
+        item.colorId = account.colorId
         item.emoji = account.emoji
         let index = self.createIndex(i, 0, nil)
         self.dataChanged(index, index, @[ModelRole.Name.int])
-        self.dataChanged(index, index, @[ModelRole.Color.int])
+        self.dataChanged(index, index, @[ModelRole.ColorId.int])
         self.dataChanged(index, index, @[ModelRole.Emoji.int])
         break
       i.inc
@@ -94,8 +94,8 @@ QtObject:
       result = newQVariant(item.address())
     of ModelRole.Path:
       result = newQVariant(item.path())
-    of ModelRole.Color:
+    of ModelRole.ColorId:
-      result = newQVariant(item.color())
+      result = newQVariant(item.colorId())
     of ModelRole.WalletType:
       result = newQVariant(item.walletType())
     of ModelRole.Emoji:
@@ -103,4 +103,4 @@ QtObject:
     of ModelRole.RelatedAccounts:
       result = newQVariant(item.relatedAccounts())
     of ModelRole.KeyUid:
-      result = newQVariant(item.keyUid())
+      result = newQVariant(item.keyUid())

src/app/modules/main/profile_section/wallet/accounts/module.nim

@@ -89,8 +89,8 @@ method viewDidLoad*(self: Module) =
   self.moduleLoaded = true
   self.delegate.accountsModuleDidLoad()
 
-method updateAccount*(self: Module, address: string, accountName: string, color: string, emoji: string) =
+method updateAccount*(self: Module, address: string, accountName: string, colorId: string, emoji: string) =
-  self.controller.updateAccount(address, accountName, color, emoji)
+  self.controller.updateAccount(address, accountName, colorId, emoji)
 
 method deleteAccount*(self: Module, address: string) =
-  self.controller.deleteAccount(address)
+  self.controller.deleteAccount(address)

src/app/modules/main/profile_section/wallet/accounts/related_account_item.nim

@@ -3,22 +3,22 @@ import strformat
 type
   Item* = object
     name: string
-    color: string
+    colorId: string
     emoji: string
 
 proc initItem*(
   name: string = "",
-  color: string = "",
+  colorId: string = "",
   emoji: string = "",
 ): Item =
   result.name = name
-  result.color = color
+  result.colorId = colorId
   result.emoji = emoji
 
 proc `$`*(self: Item): string =
   result = fmt"""WalletAccountItem(
     name: {self.name},
-    color: {self.color},
+    colorId: {self.colorId},
     emoji: {self.emoji},
     ]"""
 
@@ -28,5 +28,5 @@ proc getName*(self: Item): string =
 proc getEmoji*(self: Item): string =
   return self.emoji
 
-proc getColor*(self: Item): string =
+proc getColorId*(self: Item): string =
-  return self.color
+  return self.colorId

src/app/modules/main/profile_section/wallet/accounts/related_accounts_model.nim

@@ -5,7 +5,7 @@ import ./related_account_item
 type
   ModelRole {.pure.} = enum
     Name = UserRole + 1,
-    Color,
+    ColorId,
     Emoji,
 
 QtObject:
@@ -43,7 +43,7 @@ QtObject:
   method roleNames(self: Model): Table[int, string] =
     {
       ModelRole.Name.int:"name",
-      ModelRole.Color.int:"color",
+      ModelRole.ColorId.int:"colorId",
       ModelRole.Emoji.int: "emoji",
     }.toTable
 
@@ -67,7 +67,7 @@ QtObject:
     case enumRole:
     of ModelRole.Name:
       result = newQVariant(item.getName())
-    of ModelRole.Color:
+    of ModelRole.ColorId:
-      result = newQVariant(item.getColor())
+      result = newQVariant(item.getColorId())
     of ModelRole.Emoji:
-      result = newQVariant(item.getEmoji())
+      result = newQVariant(item.getEmoji())

src/app/modules/main/profile_section/wallet/accounts/view.nim

@@ -38,11 +38,11 @@ QtObject:
   proc setItems*(self: View, items: seq[Item]) =
     self.accounts.setItems(items)
 
-  proc updateAccount(self: View, address: string, accountName: string, color: string, emoji: string) {.slot.} =
+  proc updateAccount(self: View, address: string, accountName: string, colorId: string, emoji: string) {.slot.} =
-    self.delegate.updateAccount(address, accountName, color, emoji)
+    self.delegate.updateAccount(address, accountName, colorId, emoji)
 
   proc onUpdatedAccount*(self: View, account: Item) =
     self.accounts.onUpdatedAccount(account)
     
   proc deleteAccount*(self: View, address: string) {.slot.} =
-    self.delegate.deleteAccount(address)
+    self.delegate.deleteAccount(address)

src/app/modules/main/wallet_section/accounts/controller.nim

@@ -56,5 +56,5 @@ proc getKeycardByKeyUid*(self: Controller, keyUid: string): seq[KeycardDto] =
 proc getWalletAccount*(self: Controller, address: string): WalletAccountDto =
   return self.walletAccountService.getAccountByAddress(address)
 
-proc updateAccount*(self: Controller, address: string, accountName: string, color: string, emoji: string) =
+proc updateAccount*(self: Controller, address: string, accountName: string, colorId: string, emoji: string) =
-  discard self.walletAccountService.updateWalletAccount(address, accountName, color, emoji)
+  discard self.walletAccountService.updateWalletAccount(address, accountName, colorId, emoji)

src/app/modules/main/wallet_section/accounts/io_interface.nim

@@ -19,11 +19,11 @@ method deleteAccount*(self: AccessInterface, address: string) {.base.} =
 method refreshWalletAccounts*(self: AccessInterface) {.base.} =
   raise newException(ValueError, "No implementation available")
 
-method updateAccount*(self: AccessInterface, address: string, accountName: string, color: string, emoji: string) {.base.} =
+method updateAccount*(self: AccessInterface, address: string, accountName: string, colorId: string, emoji: string) {.base.} =
   raise newException(ValueError, "No implementation available")
 
 # View Delegate Interface
 # Delegate for the view must be declared here due to use of QtObject and multi
 # inheritance, which is not well supported in Nim.
 method viewDidLoad*(self: AccessInterface) {.base.} =
-  raise newException(ValueError, "No implementation available")
+  raise newException(ValueError, "No implementation available")

src/app/modules/main/wallet_section/accounts/item.nim

@@ -13,7 +13,7 @@ proc initItem*(
   name: string = "",
   address: string = "",
   path: string = "",
-  color: string = "",
+  colorId: string = "",
   walletType: string = "",
   currencyBalance: CurrencyAmount = nil,
   emoji: string = "",
@@ -24,7 +24,7 @@ proc initItem*(
   result = Item()
   result.WalletAccountItem.setup(name,
     address,
-    color,
+    colorId,
     emoji,
     walletType,
     path,

src/app/modules/main/wallet_section/accounts/model.nim

@@ -9,7 +9,7 @@ type
     Name = UserRole + 1,
     Address,
     Path,
-    Color,
+    ColorId,
     WalletType,
     CurrencyBalance,
     Emoji,
@@ -55,7 +55,7 @@ QtObject:
       ModelRole.Name.int:"name",
       ModelRole.Address.int:"address",
       ModelRole.Path.int:"path",
-      ModelRole.Color.int:"color",
+      ModelRole.ColorId.int:"colorId",
       ModelRole.WalletType.int:"walletType",
       ModelRole.CurrencyBalance.int:"currencyBalance",
       ModelRole.Emoji.int: "emoji",
@@ -91,8 +91,8 @@ QtObject:
       result = newQVariant(item.address())
     of ModelRole.Path:
       result = newQVariant(item.path())
-    of ModelRole.Color:
+    of ModelRole.ColorId:
-      result = newQVariant(item.color())
+      result = newQVariant(item.colorId())
     of ModelRole.WalletType:
       result = newQVariant(item.walletType())
     of ModelRole.CurrencyBalance:
@@ -121,5 +121,5 @@ QtObject:
   proc getColorByAddress*(self: Model, address: string): string =
     for item in self.items:
       if(cmpIgnoreCase(item.address(), address) == 0):
-        return item.color()
+        return item.colorId()
     return ""

src/app/modules/main/wallet_section/accounts/module.nim

@@ -109,5 +109,5 @@ method viewDidLoad*(self: Module) =
 method deleteAccount*(self: Module, address: string) =
   self.controller.deleteAccount(address)
 
-method updateAccount*(self: Module, address: string, accountName: string, color: string, emoji: string) =
+method updateAccount*(self: Module, address: string, accountName: string, colorId: string, emoji: string) =
-  self.controller.updateAccount(address, accountName, color, emoji)
+  self.controller.updateAccount(address, accountName, colorId, emoji)

src/app/modules/main/wallet_section/accounts/view.nim

@@ -43,8 +43,8 @@ QtObject:
   proc deleteAccount*(self: View, address: string) {.slot.} =
     self.delegate.deleteAccount(address)
 
-  proc updateAccount(self: View, address: string, accountName: string, color: string, emoji: string) {.slot.} =
+  proc updateAccount(self: View, address: string, accountName: string, colorId: string, emoji: string) {.slot.} =
-    self.delegate.updateAccount(address, accountName, color, emoji)
+    self.delegate.updateAccount(address, accountName, colorId, emoji)
 
   proc getNameByAddress(self: View, address: string): string {.slot.}=
     return self.accounts.getNameByAddress(address)

src/app/modules/main/wallet_section/add_account/controller.nim

@@ -148,7 +148,7 @@ proc fetchDetailsForAddresses*(self: Controller, addresses: seq[string]) =
   self.walletAccountService.fetchDetailsForAddresses(self.uniqueFetchingDetailsId, addresses)
 
 proc addWalletAccount*(self: Controller, createKeystoreFile, doPasswordHashing: bool, name, address, path, publicKey, 
-  keyUid, accountType, color, emoji: string): bool =
+  keyUid, accountType, colorId, emoji: string): bool =
   var password: string
   if createKeystoreFile:
     password = self.getPassword()
@@ -156,7 +156,7 @@ proc addWalletAccount*(self: Controller, createKeystoreFile, doPasswordHashing:
       info "cannot create keystore file if provided password is empty", name=name, address=address
       return false
   let err = self.walletAccountService.addWalletAccount(password, doPasswordHashing, name, address, path, publicKey, 
-    keyUid, accountType, color, emoji)
+    keyUid, accountType, colorId, emoji)
   if err.len > 0:
     info "adding wallet account failed", name=name, address=address
     return false
@@ -188,8 +188,8 @@ proc addNewSeedPhraseKeypair*(self: Controller, seedPhrase: string, doPasswordHa
     return false
   return true
 
-proc updateAccount*(self: Controller, address: string, accountName: string, color: string, emoji: string): bool =
+proc updateAccount*(self: Controller, address: string, accountName: string, colorId: string, emoji: string): bool =
-  return self.walletAccountService.updateWalletAccount(address, accountName, color, emoji)
+  return self.walletAccountService.updateWalletAccount(address, accountName, colorId, emoji)
 
 proc getKeyUidForSeedPhrase*(self: Controller, seedPhrase: string): string =
   let acc = self.accountsService.createAccountFromMnemonic(seedPhrase)
@@ -235,4 +235,4 @@ proc fetchAddressesFromKeycard*(self: Controller, bip44Paths: seq[string]) =
   self.cancelCurrentFlow()
   self.connectKeycardReponseSignal()
   self.tmpPaths = bip44Paths
-  self.keycardService.startExportPublicFlow(bip44Paths, exportMasterAddr=true, exportPrivateAddr=false, pin=self.getPin())
+  self.keycardService.startExportPublicFlow(bip44Paths, exportMasterAddr=true, exportPrivateAddr=false, pin=self.getPin())

src/app/modules/main/wallet_section/add_account/module.nim

@@ -122,10 +122,10 @@ method loadForEditingAccount*[T](self: Module[T], address: string) =
 
   self.view.setDisablePopup(false)
   self.view.setStoredAccountName(accountDto.name)
-  self.view.setStoredSelectedColor(accountDto.color)
+  self.view.setStoredSelectedColorId(accountDto.colorId)
   self.view.setStoredSelectedEmoji(accountDto.emoji)
   self.view.setAccountName(accountDto.name) 
-  self.view.setSelectedColor(accountDto.color) 
+  self.view.setSelectedColorId(accountDto.colorId)
   self.view.setSelectedEmoji(accountDto.emoji)
 
   if accountDto.walletType == WalletTypeWatch:
@@ -637,7 +637,7 @@ proc doAddAccount[T](self: Module[T]) =
             walletType: accountType, 
             path: path, 
             name: self.view.getAccountName(),
-            color: self.view.getSelectedColor(), 
+            colorId: self.view.getSelectedColorId(), 
             emoji: self.view.getSelectedEmoji()
           )
         )
@@ -657,7 +657,7 @@ proc doAddAccount[T](self: Module[T]) =
             walletType: accountType, 
             path: path, 
             name: self.view.getAccountName(),
-            color: self.view.getSelectedColor(), 
+            colorId: self.view.getSelectedColorId(), 
             emoji: self.view.getSelectedEmoji()
           )]
         )
@@ -673,7 +673,7 @@ proc doAddAccount[T](self: Module[T]) =
       publicKey = publicKey, 
       keyUid = keyUid, 
       accountType = accountType, 
-      color = self.view.getSelectedColor(), 
+      colorId = self.view.getSelectedColorId(),
       emoji = self.view.getSelectedEmoji())
     if not success:
       error "failed to store account", address=selectedAddrItem.getAddress()
@@ -696,7 +696,7 @@ proc doEditAccount[T](self: Module[T]) =
   if self.controller.updateAccount(
     address = address,
     accountName = self.view.getAccountName(),
-    color = self.view.getSelectedColor(),
+    colorId = self.view.getSelectedColorId(),
     emoji = self.view.getSelectedEmoji()):
       self.closeAddAccountPopup()
   else:

src/app/modules/main/wallet_section/add_account/view.nim

@@ -25,10 +25,10 @@ QtObject:
       accountName: string
       newKeyPairName: string
       selectedEmoji: string
-      selectedColor: string
+      selectedColorId: string
       storedAccountName: string # used only in edit mode
       storedSelectedEmoji: string # used only in edit mode
-      storedSelectedColor: string # used only in edit mode
+      storedSelectedColorId: string # used only in edit mode
       derivationPath: string
       suggestedDerivationPath: string
       actionAuthenticated: bool
@@ -273,18 +273,18 @@ QtObject:
     write = setSelectedEmoji
     notify = selectedEmojiChanged
 
-  proc selectedColorChanged*(self: View) {.signal.}
+  proc selectedColorIdChanged*(self: View) {.signal.}
-  proc setSelectedColor*(self: View, value: string) {.slot.} =
+  proc setSelectedColorId*(self: View, value: string) {.slot.} =
-    if self.selectedColor == value:
+    if self.selectedColorId == value:
       return
-    self.selectedColor = value
+    self.selectedColorId = value
-    self.selectedColorChanged()
+    self.selectedColorIdChanged()
-  proc getSelectedColor*(self: View): string {.slot.} =
+  proc getSelectedColorId*(self: View): string {.slot.} =
-    return self.selectedColor
+    return self.selectedColorId
-  QtProperty[string] selectedColor:
+  QtProperty[string] selectedColorId:
-    read = getSelectedColor
+    read = getSelectedColorId
-    write = setSelectedColor
+    write = setSelectedColorId
-    notify = selectedColorChanged 
+    notify = selectedColorIdChanged
 
   proc getStoredAccountName*(self: View): string {.slot.} =
     return self.storedAccountName
@@ -296,10 +296,10 @@ QtObject:
   proc setStoredSelectedEmoji*(self: View, value: string) =
     self.storedSelectedEmoji = value
 
-  proc getStoredSelectedColor*(self: View): string {.slot.} =
+  proc getStoredSelectedColorId*(self: View): string {.slot.} =
-    return self.storedSelectedColor
+    return self.storedSelectedColorId
-  proc setStoredSelectedColor*(self: View, value: string) =
+  proc setStoredSelectedColorId*(self: View, value: string) =
-    self.storedSelectedColor = value
+    self.storedSelectedColorId = value
 
   proc derivationPathChanged*(self: View) {.signal.}
   proc getDerivationPath*(self: View): string {.slot.} =
@@ -354,4 +354,4 @@ QtObject:
 
   proc startScanningForActivity*(self: View) {.slot.} =
     self.delegate.startScanningForActivity()
-    
+    

src/app/modules/main/wallet_section/overview/item.nim

@@ -6,34 +6,34 @@ type
     mixedCaseAddress: string
     ens: string
     balanceLoading: bool
-    color: string
+    colorId: string
     emoji: string
     isWatchOnlyAccount: bool
     isAllAccounts: bool
     hideWatchAccounts: bool
-    colors: seq[string]
+    colorIds: seq[string]
 
 proc initItem*(
   name: string = "",
   mixedCaseAddress: string = "",
   ens: string = "",
   balanceLoading: bool  = true,
-  color: string,
+  colorId: string,
   emoji: string,
   isWatchOnlyAccount: bool=false,
   isAllAccounts: bool = false,
   hideWatchAccounts: bool = false,
-  colors: seq[string] = @[]
+  colorIds: seq[string] = @[]
 ): Item =
   result.name = name
   result.mixedCaseAddress = mixedCaseAddress
   result.ens = ens
   result.balanceLoading = balanceLoading
-  result.color = color
+  result.colorId = colorId
   result.emoji = emoji
   result.isAllAccounts = isAllAccounts
   result.hideWatchAccounts = hideWatchAccounts
-  result.colors = colors
+  result.colorIds = colorIds
   result.isWatchOnlyAccount = isWatchOnlyAccount
 
 proc `$`*(self: Item): string =
@@ -42,12 +42,12 @@ proc `$`*(self: Item): string =
     mixedCaseAddress: {self.mixedCaseAddress},
     ens: {self.ens},
     balanceLoading: {self.balanceLoading},
-    color: {self.color},
+    colorId: {self.colorId},
     emoji: {self.emoji},
     isWatchOnlyAccount: {self.isWatchOnlyAccount},
     isAllAccounts: {self.isAllAccounts},
     hideWatchAccounts: {self.hideWatchAccounts},
-    colors: {self.colors}
+    colorIds: {self.colorIds}
     ]"""
 
 proc getName*(self: Item): string =
@@ -62,8 +62,8 @@ proc getEns*(self: Item): string =
 proc getBalanceLoading*(self: Item): bool =
   return self.balanceLoading
 
-proc getColor*(self: Item): string =
+proc getColorId*(self: Item): string =
-  return self.color
+  return self.colorId
 
 proc getEmoji*(self: Item): string =
   return self.emoji
@@ -74,13 +74,8 @@ proc getIsAllAccounts*(self: Item): bool =
 proc getHideWatchAccounts*(self: Item): bool =
   return self.hideWatchAccounts
 
-proc getColors*(self: Item): string =
+proc getColorIds*(self: Item): string =
-  for color in self.colors:
+  return self.colorIds.join(";")
-    if result.isEmptyOrWhitespace:
-      result = color
-    else:
-      result = result & ";" & color
-  return result
 
 proc getIsWatchOnlyAccount*(self: Item): bool =
   return self.isWatchOnlyAccount

src/app/modules/main/wallet_section/overview/module.nim

@@ -62,7 +62,7 @@ proc setBalance(self: Module, tokens: seq[WalletTokenDto], chainIds: seq[int]) =
 proc getWalletAccoutColors(self: Module, walletAccounts: seq[WalletAccountDto]) : seq[string] =
   var colors: seq[string] = @[]
   for account in walletAccounts:
-    colors.add(account.color)
+    colors.add(account.colorId)
   return colors
 
 method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int], excludeWatchOnly: bool) =
@@ -88,7 +88,7 @@ method filterChanged*(self: Module, addresses: seq[string], chainIds: seq[int],
       walletAccount.mixedCaseAddress,
       walletAccount.ens,
       walletAccount.assetsLoading,
-      walletAccount.color,
+      walletAccount.colorId,
       walletAccount.emoji,
       isWatchOnlyAccount=walletAccount.walletType == "watch"
     )

src/app/modules/main/wallet_section/overview/view.nim

@@ -14,11 +14,11 @@ QtObject:
       currencyBalance: CurrencyAmount
       ens: string
       balanceLoading: bool
-      color: string
+      colorId: string
       emoji: string
       isAllAccounts: bool
       hideWatchAccounts: bool
-      colors: string
+      colorIds: string
       isWatchOnlyAccount: bool
 
   proc setup(self: View) =
@@ -78,12 +78,12 @@ QtObject:
       self.balanceLoading = balanceLoading
       self.balanceLoadingChanged()
 
-  proc getColor(self: View): QVariant {.slot.} =
+  proc getColorId(self: View): QVariant {.slot.} =
-    return newQVariant(self.color)
+    return newQVariant(self.colorId)
-  proc colorChanged(self: View) {.signal.}
+  proc colorIdChanged(self: View) {.signal.}
-  QtProperty[QVariant] color:
+  QtProperty[QVariant] colorId:
-    read = getColor
+    read = getColorId
-    notify = colorChanged
+    notify = colorIdChanged
 
   proc getEmoji(self: View): QVariant {.slot.} =
     return newQVariant(self.emoji)
@@ -106,12 +106,12 @@ QtObject:
     read = getHideWatchAccounts
     notify = hideWatchAccountsChanged
 
-  proc getColors(self: View): QVariant {.slot.} =
+  proc getColorIds(self: View): QVariant {.slot.} =
-    return newQVariant(self.colors)
+    return newQVariant(self.colorIds)
-  proc colorsChanged(self: View) {.signal.}
+  proc colorIdsChanged(self: View) {.signal.}
-  QtProperty[QVariant] colors:
+  QtProperty[QVariant] colorIds:
-    read = getColors
+    read = getColorIds
-    notify = colorsChanged
+    notify = colorIdsChanged
 
   proc getIsWatchOnlyAccount(self: View): QVariant {.slot.} =
     return newQVariant(self.isWatchOnlyAccount)
@@ -131,9 +131,13 @@ QtObject:
       self.ens = item.getEns()
       self.ensChanged()
     self.setBalanceLoading(item.getBalanceLoading())  
-    if(self.color != item.getColor()):
+    if(self.colorId != item.getColorId()):
-      self.color = item.getColor()
+      self.colorId = item.getColorId()
-      self.colorChanged()
+      self.colorIdChanged()
+    # set this on top of isAllAccounts so that the data is set correctly on the UI side
+    if(self.colorIds != item.getColorIds()):
+      self.colorIds = item.getColorIds()
+      self.colorIdsChanged()
     if(self.emoji != item.getEmoji()):
       self.emoji = item.getEmoji()
       self.emojiChanged()
@@ -146,6 +150,3 @@ QtObject:
     if(self.hideWatchAccounts != item.getHideWatchAccounts()):
       self.hideWatchAccounts = item.getHideWatchAccounts()
       self.hideWatchAccountsChanged()
-    if(self.colors != item.getColors()):
-      self.colors = item.getColors()
-      self.colorsChanged()

src/app/modules/main/wallet_section/send/account_item.nim

@@ -13,7 +13,7 @@ QtObject:
   proc setup*(self: AccountItem,
     name: string,
     address: string,
-    color: string,
+    colorId: string,
     emoji: string,
     walletType: string,
     assets: token_model.Model,
@@ -22,7 +22,7 @@ QtObject:
     self.QObject.setup
     self.WalletAccountItem.setup(name,
       address,
-      color,
+      colorId,
       emoji,
       walletType,
       path = "",
@@ -37,14 +37,14 @@ QtObject:
   proc newAccountItem*(
     name: string = "",
     address: string = "",
-    color: string = "",
+    colorId: string = "",
     emoji: string = "",
     walletType: string = "",
     assets: token_model.Model = nil,
     currencyBalance: CurrencyAmount = nil,
     ): AccountItem =
       new(result, delete)
-      result.setup(name, address, color, emoji, walletType, assets, currencyBalance)
+      result.setup(name, address, colorId, emoji, walletType, assets, currencyBalance)
 
   proc `$`*(self: AccountItem): string =
     result = "WalletSection-Send-Item("

src/app/modules/main/wallet_section/send/accounts_model.nim

@@ -7,7 +7,7 @@ type
   ModelRole {.pure.} = enum
     Name = UserRole + 1,
     Address,
-    Color,
+    ColorId,
     WalletType,
     Emoji,
     Assets,
@@ -49,7 +49,7 @@ QtObject:
     {
       ModelRole.Name.int:"name",
       ModelRole.Address.int:"address",
-      ModelRole.Color.int:"color",
+      ModelRole.ColorId.int:"colorId",
       ModelRole.WalletType.int:"walletType",
       ModelRole.Emoji.int: "emoji",
       ModelRole.Assets.int: "assets",
@@ -77,8 +77,8 @@ QtObject:
       result = newQVariant(item.name())
     of ModelRole.Address:
       result = newQVariant(item.address())
-    of ModelRole.Color:
+    of ModelRole.ColorId:
-      result = newQVariant(item.color())
+      result = newQVariant(item.colorId())
     of ModelRole.WalletType:
       result = newQVariant(item.walletType())
     of ModelRole.Emoji:

src/app/modules/shared/keypairs.nim

@@ -45,7 +45,7 @@ proc buildKeyPairsList*(keypairs: seq[KeypairDto], allMigratedKeypairs: seq[Keyc
         var icon = ""
         if acc.emoji.len == 0:
           icon = "wallet"
-        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.color, icon, balance = 0.0))
+        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.colorId, icon, balance = 0.0))
       items.insert(item, 0) # Status Account must be at first place
       continue
     if kp.keypairType == KeypairTypeSeed:
@@ -63,7 +63,7 @@ proc buildKeyPairsList*(keypairs: seq[KeypairDto], allMigratedKeypairs: seq[Keyc
         var icon = ""
         if acc.emoji.len == 0:
           icon = "wallet"
-        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.color, icon, balance = 0.0))
+        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.colorId, icon, balance = 0.0))
       items.add(item)
       continue
     if kp.keypairType == KeypairTypeKey:
@@ -83,9 +83,9 @@ proc buildKeyPairsList*(keypairs: seq[KeypairDto], allMigratedKeypairs: seq[Keyc
         var icon = ""
         if acc.emoji.len == 0:
           icon = "wallet"
-        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.color, icon, balance = 0.0))
+        item.addAccount(newKeyPairAccountItem(acc.name, acc.path, acc.address, acc.publicKey, acc.emoji, acc.colorId, icon, balance = 0.0))
       items.add(item)
       continue
   if items.len == 0:
     debug "sm_there is no any key pair for the logged in user that is not already migrated to a keycard"
-  return items
+  return items

src/app/modules/shared/wallet_utils.nim

@@ -29,7 +29,7 @@ proc balanceToItemBalanceItem*(b: BalanceDto, format: CurrencyFormatDto) : balan
 proc walletAccountToRelatedAccountItem*(w: WalletAccountDto) : related_account_item.Item =
   return related_account_item.initItem(
     w.name,
-    w.color,
+    w.colorId,
     w.emoji,
   )
 
@@ -45,7 +45,7 @@ proc walletAccountToWalletSettingsAccountsItem*(w: WalletAccountDto, keycardAcco
     w.name,
     w.address,
     w.path,
-    w.color,
+    w.colorId,
     w.walletType,
     w.emoji,
     relatedAccounts,
@@ -59,7 +59,7 @@ proc walletAccountToWalletAccountsItem*(w: WalletAccountDto, keycardAccount: boo
     w.name,
     w.address,
     w.path,
-    w.color,
+    w.colorId,
     w.walletType,
     currencyAmountToItem(w.getCurrencyBalance(enabledChainIds, currency), currencyFormat),
     w.emoji,
@@ -113,7 +113,7 @@ proc walletAccountToWalletSendAccountItem*(w: WalletAccountDto, chainIds: seq[in
   return wallet_send_account_item.newAccountItem(
     w.name,
     w.address,
-    w.color,
+    w.colorId,
     w.emoji,
     w.walletType,
     assets,

src/app/modules/shared_models/keypair_account_item.nim

@@ -7,7 +7,7 @@ QtObject:
     address: string
     pubKey: string
     emoji: string
-    color: string
+    colorId: string
     icon: string
     balance: float
     balanceFetched: bool
@@ -15,7 +15,7 @@ QtObject:
   proc delete*(self: KeyPairAccountItem) =
     self.QObject.delete
 
-  proc newKeyPairAccountItem*(name = "", path = "", address = "", pubKey = "", emoji = "", color = "", icon = "", 
+  proc newKeyPairAccountItem*(name = "", path = "", address = "", pubKey = "", emoji = "", colorId = "", icon = "",
     balance = 0.0, balanceFetched = true): KeyPairAccountItem =
     new(result, delete)
     result.QObject.setup
@@ -24,7 +24,7 @@ QtObject:
     result.address = address
     result.pubKey = pubKey
     result.emoji = emoji
-    result.color = color
+    result.colorId = colorId
     result.icon = icon
     result.balance = balance
     result.balanceFetched = balanceFetched
@@ -36,7 +36,7 @@ QtObject:
       address: {self.address},
       pubKey: {self.pubKey},
       emoji: {self.emoji},
-      color: {self.color},
+      colorId: {self.colorId},
       icon: {self.icon},
       balance: {self.balance},
       balanceFetched: {self.balanceFetched}
@@ -97,16 +97,16 @@ QtObject:
     write = setEmoji
     notify = emojiChanged
 
-  proc colorChanged*(self: KeyPairAccountItem) {.signal.}
+  proc colorIdChanged*(self: KeyPairAccountItem) {.signal.}
-  proc getColor*(self: KeyPairAccountItem): string {.slot.} =
+  proc getColorId*(self: KeyPairAccountItem): string {.slot.} =
-    return self.color
+    return self.colorId
-  proc setColor*(self: KeyPairAccountItem, value: string) {.slot.} =
+  proc setColorId*(self: KeyPairAccountItem, value: string) {.slot.} =
-    self.color = value
+    self.colorId = value
-    self.colorChanged()
+    self.colorIdChanged()
-  QtProperty[string] color:
+  QtProperty[string] colorId:
-    read = getColor
+    read = getColorId
-    write = setColor
+    write = setColorId
-    notify = colorChanged
+    notify = colorIdChanged
 
   proc iconChanged*(self: KeyPairAccountItem) {.signal.}
   proc getIcon*(self: KeyPairAccountItem): string {.slot.} =
@@ -135,4 +135,4 @@ QtObject:
     return self.balanceFetched
   QtProperty[bool] balanceFetched:
     read = getBalanceFetched
-    notify = balanceChanged
+    notify = balanceChanged

src/app/modules/shared_models/keypair_account_model.nim

@@ -113,13 +113,13 @@ QtObject:
         self.removeItemAtIndex(i)
         return
 
-  proc updateDetailsForAddressIfTheyAreSet*(self: KeyPairAccountModel, address, name, color, emoji: string) =
+  proc updateDetailsForAddressIfTheyAreSet*(self: KeyPairAccountModel, address, name, colorId, emoji: string) =
     for i in 0 ..< self.items.len:
       if cmpIgnoreCase(self.items[i].getAddress(), address) == 0:
         if name.len > 0:
           self.items[i].setName(name)
-        if color.len > 0:
+        if colorId.len > 0:
-          self.items[i].setColor(color)
+          self.items[i].setColorId(colorId)
         if emoji.len > 0:
           self.items[i].setEmoji(emoji)
         return
@@ -128,4 +128,4 @@ QtObject:
     for i in 0 ..< self.items.len:
       if cmpIgnoreCase(self.items[i].getAddress(), address) == 0:
         self.items[i].setBalance(balance)
-      
+      

src/app/modules/shared_models/keypair_item.nim

@@ -228,8 +228,8 @@ QtObject:
     return self.accounts.containsAccountPath(path)
   proc containsPathOutOfTheDefaultStatusDerivationTree*(self: KeyPairItem): bool {.slot.} =
     return self.accounts.containsPathOutOfTheDefaultStatusDerivationTree()
-  proc updateDetailsForAccountWithAddressIfTheyAreSet*(self: KeyPairItem, address, name, color, emoji: string) =
+  proc updateDetailsForAccountWithAddressIfTheyAreSet*(self: KeyPairItem, address, name, colorId, emoji: string) =
-    self.accounts.updateDetailsForAddressIfTheyAreSet(address, name, color, emoji)
+    self.accounts.updateDetailsForAddressIfTheyAreSet(address, name, colorId, emoji)
   proc setBalanceForAddress*(self: KeyPairItem, address: string, balance: float) =
     self.accounts.setBalanceForAddress(address, balance)
 
@@ -245,4 +245,4 @@ QtObject:
     self.setMigratedToKeycard(item.getMigratedToKeycard())
     self.setLastUsedDerivationIndex(item.getLastUsedDerivationIndex())
     self.setAccounts(item.getAccountsModel().getItems())
-    self.setLastAccountAsObservedAccount()
+    self.setLastAccountAsObservedAccount()

src/app/modules/shared_models/wallet_account_item.nim

@@ -4,7 +4,7 @@ QtObject:
   type WalletAccountItem* = ref object of QObject
     name: string
     address: string
-    color: string
+    colorId: string
     emoji: string
     walletType: string
     path: string
@@ -14,7 +14,7 @@ QtObject:
   proc setup*(self: WalletAccountItem,
     name: string = "",
     address: string = "",
-    color: string = "",
+    colorId: string = "",
     emoji: string = "",
     walletType: string = "",
     path: string = "",
@@ -24,7 +24,7 @@ QtObject:
       self.QObject.setup
       self.name = name
       self.address = address
-      self.color = color
+      self.colorId = colorId
       self.emoji = emoji
       self.walletType = walletType
       self.path = path
@@ -38,7 +38,7 @@ QtObject:
     result = fmt"""WalletAccountItem(
       name: {self.name},
       address: {self.address},
-      color: {self.color},
+      colorId: {self.colorId},
       emoji: {self.emoji},
       walletType: {self.walletType},
       path: {self.path},
@@ -66,15 +66,15 @@ QtObject:
     read = address
     notify = addressChanged
 
-  proc colorChanged*(self: WalletAccountItem) {.signal.}
+  proc colorIdChanged*(self: WalletAccountItem) {.signal.}
-  proc color*(self: WalletAccountItem): string {.slot.} =
+  proc colorId*(self: WalletAccountItem): string {.slot.} =
-    return self.color
+    return self.colorId
-  proc `color=`*(self: WalletAccountItem, value: string) {.inline.} =
+  proc `colorId=`*(self: WalletAccountItem, value: string) {.inline.} =
-    self.color = value
+    self.colorId = value
-    self.colorChanged()
+    self.colorIdChanged()
-  QtProperty[string] color:
+  QtProperty[string] colorId:
-    read = color
+    read = colorId
-    notify = colorChanged
+    notify = colorIdChanged
 
   proc emojiChanged*(self: WalletAccountItem) {.signal.}
   proc emoji*(self: WalletAccountItem): string {.slot.} =

src/app/modules/shared_modules/keycard_popup/controller.nim

@@ -692,11 +692,11 @@ proc updateKeycardUid*(self: Controller, keyUid: string, keycardUid: string) =
       self.tmpKeycardUid = keycardUid
       info "update keycard uid failed", oldKeycardUid=self.tmpKeycardUid, newKeycardUid=keycardUid
 
-proc addWalletAccount*(self: Controller, name, address, path, publicKey, keyUid, accountType, color, emoji: string): bool =
+proc addWalletAccount*(self: Controller, name, address, path, publicKey, keyUid, accountType, colorId, emoji: string): bool =
   if not serviceApplicable(self.walletAccountService):
     return false
   let err = self.walletAccountService.addWalletAccount(password = "", doPasswordHashing = false, name, address, path, 
-    publicKey, keyUid, accountType, color, emoji)
+    publicKey, keyUid, accountType, colorId, emoji)
   if err.len > 0:
     info "adding wallet account failed", name=name, path=path
     return false
@@ -788,4 +788,4 @@ proc tryToStoreDataToKeychain*(self: Controller, password: string) =
   if not serviceApplicable(self.keychainService):
     return
   let loggedInAccount = self.getLoggedInAccount()
-  self.keychainService.storeData(loggedInAccount.keyUid, password)
+  self.keychainService.storeData(loggedInAccount.keyUid, password)

src/app/modules/shared_modules/keycard_popup/internal/creating_account_new_seed_phrase_state.nim

@@ -52,7 +52,7 @@ proc addAccountsToWallet(self: CreatingAccountNewSeedPhraseState, controller: Co
       walletType: SEED, 
       path: account.getPath(), 
       name: account.getName(),
-      color: account.getColor(), 
+      colorId: account.getColorId(), 
       emoji: account.getEmoji()
     ))
   return controller.addNewSeedPhraseKeypair(
@@ -111,4 +111,4 @@ method resolveKeycardNextState*(self: CreatingAccountNewSeedPhraseState, keycard
       if keycardFlowType == ResponseTypeValueKeycardFlowResult and 
         keycardEvent.error.len == 0:
           return createState(StateType.CreatingAccountNewSeedPhraseSuccess, self.flowType, nil)
-      return createState(StateType.CreatingAccountNewSeedPhraseFailure, self.flowType, nil)
+      return createState(StateType.CreatingAccountNewSeedPhraseFailure, self.flowType, nil)

src/app/modules/shared_modules/keycard_popup/internal/creating_account_old_seed_phrase_state.nim

@@ -52,7 +52,7 @@ proc addAccountsToWallet(self: CreatingAccountOldSeedPhraseState, controller: Co
       walletType: SEED, 
       path: account.getPath(), 
       name: account.getName(),
-      color: account.getColor(), 
+      colorId: account.getColorId(), 
       emoji: account.getEmoji()
     ))
   return controller.addNewSeedPhraseKeypair(
@@ -111,4 +111,4 @@ method resolveKeycardNextState*(self: CreatingAccountOldSeedPhraseState, keycard
       if keycardFlowType == ResponseTypeValueKeycardFlowResult and 
         keycardEvent.error.len == 0:
           return createState(StateType.CreatingAccountOldSeedPhraseSuccess, self.flowType, nil)
-      return createState(StateType.CreatingAccountOldSeedPhraseFailure, self.flowType, nil)
+      return createState(StateType.CreatingAccountOldSeedPhraseFailure, self.flowType, nil)

src/app/modules/shared_modules/keycard_popup/internal/importing_from_keycard_state.nim

@@ -22,7 +22,7 @@ proc addAccountsToWallet(self: ImportingFromKeycardState, controller: Controller
       walletType: SEED, 
       path: account.getPath(), 
       name: account.getName(),
-      color: account.getColor(), 
+      colorId: account.getColorId(), 
       emoji: account.getEmoji()
     ))
   return controller.addNewSeedPhraseKeypair(
@@ -53,4 +53,4 @@ method getNextSecondaryState*(self: ImportingFromKeycardState, controller: Contr
   if self.flowType == FlowType.ImportFromKeycard:
     if controller.getAddingMigratedKeypairSuccess():
       return createState(StateType.ImportingFromKeycardSuccess, self.flowType, nil)
-    return createState(StateType.ImportingFromKeycardFailure, self.flowType, nil)
+    return createState(StateType.ImportingFromKeycardFailure, self.flowType, nil)

src/app/modules/shared_modules/keycard_popup/module.nim

@@ -544,7 +544,7 @@ proc updateKeyPairItemIfDataAreKnown[T](self: Module[T], address: string, item:
     if a.walletType == WalletTypeDefaultStatusAccount:
       icon = "wallet"
     item.setKeyUid(a.keyUid)
-    item.addAccount(newKeyPairAccountItem(a.name, a.path, a.address, a.publicKey, a.emoji, a.color, icon, balance = 0.0, balanceFetched = true))
+    item.addAccount(newKeyPairAccountItem(a.name, a.path, a.address, a.publicKey, a.emoji, a.colorId, icon, balance = 0.0, balanceFetched = true))
     return true
   return false
 
@@ -579,7 +579,7 @@ proc buildKeyPairItemBasedOnCardMetadata[T](self: Module[T], cardMetadata: CardM
     unknonwAccountNumber.inc
     let name = atc.KEYCARD_ACCOUNT_NAME_OF_UNKNOWN_WALLET_ACCOUNT & $unknonwAccountNumber
     result.item.addAccount(newKeyPairAccountItem(name, wa.path, wa.address, pubKey = wa.publicKey, emoji = "", 
-      color = "#939BA1", icon = "wallet", balance, balanceFetched))
+      colorId = "", icon = "undefined", balance, balanceFetched))
 
 method updateKeyPairForProcessing*[T](self: Module[T], cardMetadata: CardMetadata) =
   let(item, knownKeyPair) = self.buildKeyPairItemBasedOnCardMetadata(cardMetadata)
@@ -631,4 +631,4 @@ method keychainObtainedDataSuccess*[T](self: Module[T], data: string) =
       self.controller.setPin(data)
       self.controller.enterKeycardPin(data)
     else:
-      self.view.setCurrentState(newBiometricsPinInvalidState(FlowType.Authentication, nil))
+      self.view.setCurrentState(newBiometricsPinInvalidState(FlowType.Authentication, nil))

src/app_service/service/accounts/service.nim

@@ -29,7 +29,7 @@ const PATHS = @[PATH_WALLET_ROOT, PATH_EIP_1581, PATH_WHISPER, PATH_DEFAULT_WALL
 const ACCOUNT_ALREADY_EXISTS_ERROR* =  "account already exists"
 const output_csv {.booldefine.} = false
 const KDF_ITERATIONS* {.intdefine.} = 256_000
-const DEFAULT_COLOR_FOR_DEFAULT_WALLET_ACCOUNT = "#2946C4" # to match `preDefinedWalletAccountColors` on the qml side
+const DEFAULT_COLORID_FOR_DEFAULT_WALLET_ACCOUNT = "primary" # to match `CustomizationColor` on the go side
 
 # allow runtime override via environment variable. core contributors can set a
 # specific peer to set for testing messaging and mailserver functionality with squish.
@@ -240,7 +240,7 @@ QtObject:
       {
         "public-key": account.derivedAccounts.defaultWallet.publicKey,
         "address": account.derivedAccounts.defaultWallet.address,
-        "color": DEFAULT_COLOR_FOR_DEFAULT_WALLET_ACCOUNT,
+        "colorId": DEFAULT_COLORID_FOR_DEFAULT_WALLET_ACCOUNT,
         "wallet": true,
         "path": PATH_DEFAULT_WALLET,
         "name": "Status account",
@@ -438,7 +438,7 @@ QtObject:
         {
           "public-key": walletPublicKey,
           "address": walletAddress,
-          "color": DEFAULT_COLOR_FOR_DEFAULT_WALLET_ACCOUNT,
+          "colorId": DEFAULT_COLORID_FOR_DEFAULT_WALLET_ACCOUNT,
           "wallet": true,
           "path": PATH_DEFAULT_WALLET,
           "name": "Status account",

src/app_service/service/wallet_account/dto.nim

@@ -93,7 +93,7 @@ type
     mixedcaseAddress*: string
     keyUid*: string
     path*: string
-    color*: string
+    colorId*: string
     publicKey*: string
     walletType*: string
     isWallet*: bool
@@ -115,8 +115,8 @@ proc toWalletAccountDto*(jsonObj: JsonNode): WalletAccountDto =
   discard jsonObj.getProp("mixedcase-address", result.mixedcaseAddress)
   discard jsonObj.getProp("key-uid", result.keyUid)
   discard jsonObj.getProp("path", result.path)
-  discard jsonObj.getProp("color", result.color)
+  discard jsonObj.getProp("colorId", result.colorId)
-  result.color = result.color.toUpper() # to match `preDefinedWalletAccountColors` on the qml side
+  result.colorId = result.colorId.toUpper() # to match `preDefinedWalletAccountColors` on the qml side
   discard jsonObj.getProp("wallet", result.isWallet)
   discard jsonObj.getProp("chat", result.isChat)
   discard jsonObj.getProp("public-key", result.publicKey)
@@ -135,7 +135,7 @@ proc `$`*(self: WalletAccountDto): string =
     mixedcaseAddress: {self.mixedcaseAddress},
     keyUid: {self.keyUid},
     path: {self.path},
-    color: {self.color},
+    colorId: {self.colorId},
     publicKey: {self.publicKey},
     walletType: {self.walletType},
     isChat: {self.isChat},

src/app_service/service/wallet_account/service.nim

@@ -414,30 +414,30 @@ QtObject:
     self.setRelatedAccountsForAllAccounts(removedAcc.keyUid)
     self.events.emit(SIGNAL_WALLET_ACCOUNT_DELETED, AccountDeleted(address: address))
 
-  proc updateAccountFromLocalStoreAndNotify(self: Service, address, name, color, emoji: string) =
+  proc updateAccountFromLocalStoreAndNotify(self: Service, address, name, colorId, emoji: string) =
     if not self.walletAccountsContainsAddress(address):
       return
     var account = self.getAccountByAddress(address)
     account.name = name
-    account.color = color
+    account.colorId = colorId
     account.emoji = emoji
     self.storeAccount(account, updateRelatedAccounts = false)
     self.events.emit(SIGNAL_WALLET_ACCOUNT_UPDATED, WalletAccountUpdated(account: account))
 
   ## if password is not provided local keystore file won't be created
   proc addWalletAccount*(self: Service, password: string, doPasswordHashing: bool, name, address, path, publicKey,
-    keyUid, accountType, color, emoji: string): string =
+    keyUid, accountType, colorId, emoji: string): string =
     try:
       var response: RpcResponse[JsonNode]
       if password.len == 0:
         response = status_go_accounts.addAccountWithoutKeystoreFileCreation(name, address, path, publicKey, keyUid,
-          accountType, color, emoji)
+          accountType, colorId, emoji)
       else:
         var finalPassword = password
         if doPasswordHashing:
           finalPassword = utils.hashPassword(password)
         response = status_go_accounts.addAccount(finalPassword, name, address, path, publicKey, keyUid, accountType,
-          color, emoji)
+          colorId, emoji)
       if not response.error.isNil:
         error "status-go error", procName="addWalletAccount", errCode=response.error.code, errDesription=response.error.message
         return response.error.message
@@ -447,7 +447,7 @@ QtObject:
       error "error: ", procName="addWalletAccount", errName=e.name, errDesription=e.msg
       return e.msg
 
-  ## Mandatory fields for account: `address`, `keyUid`, `walletType`, `path`, `publicKey`, `name`, `emoji`, `color`
+  ## Mandatory fields for account: `address`, `keyUid`, `walletType`, `path`, `publicKey`, `name`, `emoji`, `colorId`
   proc addNewPrivateKeyKeypair*(self: Service, privateKey, password: string, doPasswordHashing: bool,
     keyUid, keypairName, rootWalletMasterKey: string, account: WalletAccountDto): string =
     if password.len == 0:
@@ -471,7 +471,7 @@ QtObject:
       error "error: ", procName="addNewPrivateKeyKeypair", errName=e.name, errDesription=e.msg
       return e.msg
 
-  ## Mandatory fields for all accounts: `address`, `keyUid`, `walletType`, `path`, `publicKey`, `name`, `emoji`, `color`
+  ## Mandatory fields for all accounts: `address`, `keyUid`, `walletType`, `path`, `publicKey`, `name`, `emoji`, `colorId`
   proc addNewSeedPhraseKeypair*(self: Service, seedPhrase, password: string, doPasswordHashing: bool,
     keyUid, keypairName, rootWalletMasterKey: string, accounts: seq[WalletAccountDto]): string =
     var finalPassword = password
@@ -532,18 +532,18 @@ QtObject:
     self.checkRecentHistory()
     self.events.emit(SIGNAL_WALLET_ACCOUNT_NETWORK_ENABLED_UPDATED, NetwordkEnabledToggled())
 
-  proc updateWalletAccount*(self: Service, address: string, accountName: string, color: string, emoji: string): bool =
+  proc updateWalletAccount*(self: Service, address: string, accountName: string, colorId: string, emoji: string): bool =
     if not self.walletAccountsContainsAddress(address):
       error "account's address is not among known addresses: ", address=address
       return false
     try:
       var account = self.getAccountByAddress(address)
       let response = status_go_accounts.updateAccount(accountName, account.address, account.path, account.publicKey,
-        account.keyUid, account.walletType, color, emoji, account.isWallet, account.isChat)
+        account.keyUid, account.walletType, colorId, emoji, account.isWallet, account.isChat)
       if not response.error.isNil:
         error "status-go error", procName="updateWalletAccount", errCode=response.error.code, errDesription=response.error.message
         return false
-      self.updateAccountFromLocalStoreAndNotify(address, accountName, color, emoji)
+      self.updateAccountFromLocalStoreAndNotify(address, accountName, colorId, emoji)
       return true
     except Exception as e:
       error "error: ", procName="updateWalletAccount", errName=e.name, errDesription=e.msg
@@ -913,7 +913,7 @@ QtObject:
       self.removeAccountFromLocalStoreAndNotify(account.address)
     else:
       if self.walletAccountsContainsAddress(account.address):
-        self.updateAccountFromLocalStoreAndNotify(account.address, account.name, account.color, account.emoji)
+        self.updateAccountFromLocalStoreAndNotify(account.address, account.name, account.colorId, account.emoji)
       else:
         self.addNewAccountToLocalStoreAndNotify()
 

src/backend/accounts.nim

@@ -37,7 +37,7 @@ proc deleteAccount*(address: string): RpcResponse[JsonNode] {.raises: [Exception
   return core.callPrivateRPC("accounts_deleteAccount", payload)
 
 ## Adds a new account and creates a Keystore file if password is provided, otherwise it only creates a new account. Notifies paired devices.
-proc addAccount*(password, name, address, path, publicKey, keyUid, accountType, color, emoji: string):
+proc addAccount*(password, name, address, path, publicKey, keyUid, accountType, colorId, emoji: string):
   RpcResponse[JsonNode] {.raises: [Exception].} =
   let payload = %* [
     password,
@@ -51,7 +51,7 @@ proc addAccount*(password, name, address, path, publicKey, keyUid, accountType,
       "public-key": publicKey,
       "name": name,
       "emoji": emoji,
-      "color": color,
+      "colorId": colorId,
       #"hidden" present on the status-go side, but we don't use it
       #"clock" we leave this empty, set on the status-go side
       #"removed" present on the status-go side, used for synchronization, no need to set it here
@@ -85,7 +85,7 @@ proc addKeypair*(password, keyUid, keypairName, keypairType, rootWalletMasterKey
           "public-key": acc.publicKey,
           "name": acc.name,
           "emoji": acc.emoji,
-          "color": acc.color,
+          "colorId": acc.colorId,
           #"hidden" present on the status-go side, but we don't use it
           #"clock" we leave this empty, set on the status-go side
           #"removed" present on the status-go side, used for synchronization, no need to set it here
@@ -96,12 +96,12 @@ proc addKeypair*(password, keyUid, keypairName, keypairType, rootWalletMasterKey
   return core.callPrivateRPC("accounts_addKeypair", payload)
 
 ## Adds a new account without creating a Keystore file and notifies paired devices
-proc addAccountWithoutKeystoreFileCreation*(name, address, path, publicKey, keyUid, accountType, color, emoji: string):
+proc addAccountWithoutKeystoreFileCreation*(name, address, path, publicKey, keyUid, accountType, colorId, emoji: string):
   RpcResponse[JsonNode] {.raises: [Exception].} =
-  return addAccount(password = "", name, address, path, publicKey, keyUid, accountType, color, emoji)
+  return addAccount(password = "", name, address, path, publicKey, keyUid, accountType, colorId, emoji)
 
 ## Updates either regular or keycard account, without interaction to a Keystore file and notifies paired devices
-proc updateAccount*(name, address, path: string, publicKey, keyUid, accountType, color, emoji: string,
+proc updateAccount*(name, address, path: string, publicKey, keyUid, accountType, colorId, emoji: string,
   walletDefaultAccount: bool, chatDefaultAccount: bool):
   RpcResponse[JsonNode] {.raises: [Exception].} =
   let payload = %* [
@@ -115,7 +115,7 @@ proc updateAccount*(name, address, path: string, publicKey, keyUid, accountType,
       "public-key": publicKey,
       "name": name,
       "emoji": emoji,
-      "color": color,
+      "colorId": colorId,
       #"hidden" present on the status-go side, but we don't use it
       #"clock" we leave this empty, set on the status-go side
       #"removed" present on the status-go side, used for synchronization, no need to set it here
@@ -448,4 +448,4 @@ proc verifyPassword*(password: string): RpcResponse[JsonNode] {.raises: [Excepti
 
 proc verifyKeystoreFileForAccount*(address, password: string): RpcResponse[JsonNode] {.raises: [Exception].} =
   let payload = %* [address, password]
-  return core.callPrivateRPC("accounts_verifyKeystoreFileForAccount", payload)
+  return core.callPrivateRPC("accounts_verifyKeystoreFileForAccount", payload)

storybook/pages/ProfileShowcaseAccountsPanelPage.qml

@@ -31,28 +31,28 @@ SplitView {
         ListElement {
             name: "My Status Account"
             address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7420"
-            color: "lightcoral"
+            colorId: "primary"
             emoji: "🇨🇿"
             walletType: ""
         }
         ListElement {
             name: "testing (no emoji, colored, seed)"
             address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7000"
-            color: "indigo"
+            colorId: ""
             emoji: ""
             walletType: "seed"
         }
         ListElement {
             name: "My Bro's Account"
             address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
-            color: ""
+            colorId: "orange"
             emoji: "🇸🇰"
             walletType: "watch"
         }
         ListElement {
             name: "Keycard"
             address: "0xdeadbeef"
-            color: "red"
+            colorId: "turquoise"
             emoji: ""
             walletType: "key"
         }

storybook/pages/WalletHeaderPage.qml

@@ -119,12 +119,9 @@ SplitView {
         SplitView.fillWidth: true
         SplitView.fillHeight: true
 
-        Rectangle {
+        Item {
-            id: rect
             width: 800
             height: 200
-            color: Theme.palette.white
-            border.width: 1
             anchors.centerIn: parent
 
             AccountHeaderGradient {
@@ -160,26 +157,17 @@ SplitView {
 
         Column {
             spacing: 20
-            Row {
+            CheckBox {
-                CheckBox {
+                id: allAccountsCheckbox
-                    id: allAccountsCheckbox
+                text: "All Accounts"
-                    text: "All Accounts"
+                checked: false
-                    checked: false
-                }
-
-                CheckBox {
-                    id: darkMode
-                    text: "Dark Mode"
-                    checked: false
-                    onCheckedChanged: rect.color = Theme.palette.baseColor3
-                }
             }
             Row {
                 spacing: 10
                 id: row
                 Repeater {
                     id: repeater
-                    model: Constants.preDefinedWalletAccountColors
+                    model: Theme.palette.customisationColorsArray
                     delegate: StatusColorRadioButton {
                         radioButtonColor: repeater.model[index]
                         checked: index === 0

test/ui-test/testSuites/suite_wallet/tst_wallet/test.feature

@@ -42,5 +42,5 @@ Feature: Status Desktop Wallet
         Given the user opens app settings screen
         And the user opens the wallet settings
         When the user selects the default account
-        And the user edits default account to "Default" name and "#FFCA0F" color
+        And the user edits default account to "Default" name and "#f6af3c" color
-        Then the default account is updated to be named "DefaultStatus account" with color "#FFCA0F"
+        Then the default account is updated to be named "DefaultStatus account" with color "#f6af3c"

test/ui-test/testSuites/suite_wallet/tst_wallet_section_accounts_management/test.feature

@@ -15,7 +15,7 @@ Feature: Status Desktop Wallet Section Wallet Account Management
         Then the account is correctly displayed with "<new_name>" and "#<new_color>" and emoji unicode "<new_emoji_unicode>" in accounts list
         Examples:
             | name           | new_name         | new_color | new_emoji  | new_emoji_unicode |
-            | Status account | MyPrimaryAccount | 7CDA00    | sunglasses | 1f60e             |
+            | Status account | MyPrimaryAccount | 216266    | sunglasses | 1f60e             |
 
         Scenario Outline: The user manages a watch only account
         When the user adds a watch only account "<address>" with "<name>" color "#<color>" and emoji "<emoji>" via "<add_via_context_menu>"
@@ -26,8 +26,8 @@ Feature: Status Desktop Wallet Section Wallet Account Management
         Then the account with "<new_name>" is not displayed
         Examples:
             | address                                    | name      | color  | emoji      | emoji_unicode | add_via_context_menu | new_name        | new_color | new_emoji | new_emoji_unicode |
-            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639A | AccWatch1 | 2946C4 | sunglasses | 1f60e         | yes                  | AccWatch1edited | 7CDA00    | thumbsup  | 1f44d             |
+            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639A | AccWatch1 | 2a4af5 | sunglasses | 1f60e         | yes                  | AccWatch1edited | 216266    | thumbsup  | 1f44d             |
-            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639B | AccWatch2 | D37EF4 | sunglasses | 1f60e         | no                   | AccWatch2edited | 26A69A    | thumbsup  | 1f44d             |
+            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639B | AccWatch2 | 7140fd | sunglasses | 1f60e         | no                   | AccWatch2edited | 2a799b    | thumbsup  | 1f44d             |
 
         Scenario Outline: The user cancel deliting watch only account
         When the user adds a watch only account "<address>" with "<name>" color "#<color>" and emoji "<emoji>" via "<add_via_context_menu>"
@@ -36,7 +36,7 @@ Feature: Status Desktop Wallet Section Wallet Account Management
         Then the account is correctly displayed with "<name>" and "#<color>" and emoji unicode "<emoji_unicode>" in accounts list
         Examples:
             | address                                    | name      | color  | emoji      | emoji_unicode |
-            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639A | AccWatch1 | 2946C4 | sunglasses | 1f60e         |
+            | 0xea123F7beFF45E3C9fdF54B324c29DBdA14a639A | AccWatch1 | 2a4af5 | sunglasses | 1f60e         |
 
 
         Scenario Outline: The user manages a generated account
@@ -49,8 +49,8 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | name    | color  | emoji      | emoji_unicode | add_via_context_menu | new_name      | new_color | new_emoji | new_emoji_unicode |
-            | GenAcc1 | 2946C4 | sunglasses | 1f60e         | yes                  | GenAcc1edited | 7CDA00    | thumbsup  | 1f44d             |
+            | GenAcc1 | 2a4af5 | sunglasses | 1f60e         | yes                  | GenAcc1edited | 216266    | thumbsup  | 1f44d             |
-            | GenAcc2 | D37EF4 | sunglasses | 1f60e         | no                   | GenAcc2edited | 26A69A    | thumbsup  | 1f44d             |
+            | GenAcc2 | 7140fd | sunglasses | 1f60e         | no                   | GenAcc2edited | 2a799b    | thumbsup  | 1f44d             |
 
 
         Scenario Outline: The user cancel deliting generated account
@@ -60,7 +60,7 @@ Feature: Status Desktop Wallet Section Wallet Account Management
         Then the account is correctly displayed with "<name>" and "#<color>" and emoji unicode "<emoji_unicode>" in accounts list
         Examples:
             | name    | color  | emoji      | emoji_unicode | add_via_context_menu |
-            | GenAcc1 | 2946C4 | sunglasses | 1f60e         | yes                  |
+            | GenAcc1 | 2a4af5 | sunglasses | 1f60e         | yes                  |
 
         Scenario Outline: The user manages a custom generated account
         When the user adds a custom generated account with "<name>" color "#<color>" emoji "<emoji>" and derivation "<path>" "<address_index>"
@@ -70,11 +70,11 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | address_index | path                           | name          | color  | emoji      | emoji_unicode |
-            | 5             | Ethereum                       | CustomGenAcc1 | 7CDA00 | sunglasses | 1f60e         |
+            | 5             | Ethereum                       | CustomGenAcc1 | 216266 | sunglasses | 1f60e         |
-            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | D37EF4 | sunglasses | 1f60e         |
+            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | 7140fd | sunglasses | 1f60e         |
-            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 26A69A | sunglasses | 1f60e         |
+            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 2a799b | sunglasses | 1f60e         |
-            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | D37EF4 | sunglasses | 1f60e         |
+            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | 7140fd | sunglasses | 1f60e         |
-            | 95            | N/A                            | CustomGenAcc1 | 7CDA00 | sunglasses | 1f60e         |
+            | 95            | N/A                            | CustomGenAcc1 | 216266 | sunglasses | 1f60e         |
 
 
         Scenario Outline: The user manages a private key imported account
@@ -87,7 +87,7 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | private_key                                                      | name        | color  | emoji      | emoji_unicode | new_name          | new_color | new_emoji | new_emoji_unicode |
-            | 2daa36a3abe381a9c01610bf10fda272fbc1b8a22179a39f782c512346e3e470 | PrivKeyAcc1 | 2946C4 | sunglasses | 1f60e         | PrivKeyAcc1edited | 7CDA00    | thumbsup  | 1f44d             |
+            | 2daa36a3abe381a9c01610bf10fda272fbc1b8a22179a39f782c512346e3e470 | PrivKeyAcc1 | 2a4af5 | sunglasses | 1f60e         | PrivKeyAcc1edited | 216266    | thumbsup  | 1f44d             |
 
         Scenario Outline: The user manages a seed phrase imported account
         When the user adds an imported seed phrase account "<seed_phrase>" with "<name>" color "#<color>" and emoji "<emoji>"
@@ -99,12 +99,12 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | seed_phrase                                                                                                                                                   | name    | color  | emoji      | emoji_unicode | new_name      | new_color | new_emoji | new_emoji_unicode |
-            | elite dinosaur flavor canoe garbage palace antique dolphin virtual mixed sand impact solution inmate hair pipe affair cage vote estate gloom lamp robust like | SPAcc24 | 2946C4 | sunglasses | 1f60e         | SPAcc24edited | 7CDA00    | thumbsup  | 1f44d             |
+            | elite dinosaur flavor canoe garbage palace antique dolphin virtual mixed sand impact solution inmate hair pipe affair cage vote estate gloom lamp robust like | SPAcc24 | 2a4af5 | sunglasses | 1f60e         | SPAcc24edited | 216266    | thumbsup  | 1f44d             |
-            | kitten tiny cup admit cactus shrug shuffle accident century faith roof plastic beach police barely vacant sign blossom                                        | SPAcc18 | 2946C4 | sunglasses | 1f60e         | SPAcc18edited | 7CDA00    | thumbsup  | 1f44d             |
+            | kitten tiny cup admit cactus shrug shuffle accident century faith roof plastic beach police barely vacant sign blossom                                        | SPAcc18 | 2a4af5 | sunglasses | 1f60e         | SPAcc18edited | 216266    | thumbsup  | 1f44d             |
-            | pelican chief sudden oval media rare swamp elephant lawsuit wheat knife initial                                                                               | SPAcc12 | 2946C4 | sunglasses | 1f60e         | SPAcc12edited | 7CDA00    | thumbsup  | 1f44d             |
+            | pelican chief sudden oval media rare swamp elephant lawsuit wheat knife initial                                                                               | SPAcc12 | 2a4af5 | sunglasses | 1f60e         | SPAcc12edited | 216266    | thumbsup  | 1f44d             |
 
         Scenario Outline: The user manages an account created from the imported seed phrase
-        When the user adds an imported seed phrase account "pelican chief sudden oval media rare swamp elephant lawsuit wheat knife initial" with "SPAcc12" color "#2946C4" and emoji "sunglasses"
+        When the user adds an imported seed phrase account "pelican chief sudden oval media rare swamp elephant lawsuit wheat knife initial" with "SPAcc12" color "#2a4af5" and emoji "sunglasses"
         Then the account with "SPAcc12" is displayed
         When the user adds to "pcsomrselw" a custom generated account with "<name>" color "#<color>" emoji "<emoji>" and derivation "<path>" "<address_index>"
         And the user removes account "<name>" with agreement
@@ -112,11 +112,11 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | address_index | path                           | name          | color  | emoji      |
-            | 5             | Ethereum                       | CustomGenAcc1 | 7CDA00 | sunglasses |
+            | 5             | Ethereum                       | CustomGenAcc1 | 216266 | sunglasses |
-            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | D37EF4 | sunglasses |
+            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | 7140fd | sunglasses |
-            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 26A69A | sunglasses |
+            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 2a799b | sunglasses |
-            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | D37EF4 | sunglasses |
+            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | 7140fd | sunglasses |
-            | 95            | N/A                            | CustomGenAcc1 | 7CDA00 | sunglasses |
+            | 95            | N/A                            | CustomGenAcc1 | 216266 | sunglasses |
 
 
         Scenario Outline: The user adds and edits an account from the generated seed phrase
@@ -127,7 +127,7 @@ Feature: Status Desktop Wallet Section Wallet Account Management
 
         Examples:
             | keypair_name | name  | color  | emoji      | emoji_unicode | new_name     | new_color | new_emoji | new_emoji_unicode |
-            | SPKeyPair    | SPAcc | 2946C4 | sunglasses | 1f60e         | SPAcc_edited | 7CDA00    | thumbsup  | 1f44d             |
+            | SPKeyPair    | SPAcc | 2a4af5 | sunglasses | 1f60e         | SPAcc_edited | 216266    | thumbsup  | 1f44d             |
 
         Scenario Outline: The user manages an account created from the generated seed phrase
         When the user adds a generated seed phrase account with "SPKeyPair" color "#<color>" emoji "<emoji>" and keypair "<keypair_name>"
@@ -138,13 +138,13 @@ Feature: Status Desktop Wallet Section Wallet Account Management
         Then the account with "<name>" is not displayed
         Examples:
             | address_index | path                           | name          | color  | emoji      | emoji_unicode | keypair_name |
-            | 5             | Ethereum                       | CustomGenAcc1 | 7CDA00 | sunglasses | 1f60e         | SPKeyPair    |
+            | 5             | Ethereum                       | CustomGenAcc1 | 216266 | sunglasses | 1f60e         | SPKeyPair    |
-            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | D37EF4 | sunglasses | 1f60e         | SPKeyPair    |
+            | 10            | Ethereum Testnet (Ropsten)     | CustomGenAcc2 | 7140fd | sunglasses | 1f60e         | SPKeyPair    |
-            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 26A69A | sunglasses | 1f60e         | SPKeyPair    |
+            | 15            | Ethereum (Ledger)              | CustomGenAcc3 | 2a799b | sunglasses | 1f60e         | SPKeyPair    |
-            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | D37EF4 | sunglasses | 1f60e         | SPKeyPair    |
+            | 20            | Ethereum (Ledger Live/KeepKey) | CustomGenAcc4 | 7140fd | sunglasses | 1f60e         | SPKeyPair    |
-            | 95            | N/A                            | CustomGenAcc1 | 7CDA00 | sunglasses | 1f60e         | SPKeyPair    |
+            | 95            | N/A                            | CustomGenAcc1 | 216266 | sunglasses | 1f60e         | SPKeyPair    |
 
         @mayfail
         Scenario: The user adds an account and then decides to use a Keycard
         When the user adds new master key and go to use a Keycard
-        Then settings keycard section is opened
+        Then settings keycard section is opened

ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml

@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 
 import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
 
 RadioButton {
     id: control
@@ -16,6 +17,11 @@ RadioButton {
     implicitWidth: 44
     implicitHeight: 44
 
+    QtObject {
+        id: d
+        readonly property string yinYangColor: Utils.getYinYangColor(radioButtonColor)
+    }
+
     indicator: Rectangle {
         implicitWidth: control.diameter
         implicitHeight: control.diameter
@@ -24,6 +30,22 @@ RadioButton {
         border.width: 1
         border.color: Theme.palette.directColor7
 
+        Item {
+            id: dualColor
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width/2
+            height: parent.height
+            clip: true
+            Rectangle {
+                width: parent.height
+                height: parent.height
+                radius: width/2
+                color: d.yinYangColor
+            }
+            visible: !!d.yinYangColor
+        }
+
         Rectangle {
             anchors.centerIn: parent
             width: control.selectorDiameter

ui/StatusQ/src/StatusQ/Controls/StatusColorSelectorGrid.qml

@@ -17,18 +17,7 @@ Column {
 
     property int selectedColorIndex: 0
     property string selectedColor: ""
-    property var model:[ StatusColors.colors['black'],
+    property var model: Theme.palette.customisationColorsArray
-                         StatusColors.colors['grey'],
-                         StatusColors.colors['blue2'],
-                         StatusColors.colors['purple'],
-                         StatusColors.colors['cyan'],
-                         StatusColors.colors['violet'],
-                         StatusColors.colors['red2'],
-                         StatusColors.colors['yellow'],
-                         StatusColors.colors['green2'],
-                         StatusColors.colors['moss'],
-                         StatusColors.colors['brown'],
-                         StatusColors.colors['brown2'] ]
 
     signal colorSelected(color color)
 

ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -169,4 +169,19 @@ ThemePalette {
         property color emojiReactionActiveBackground: getColor('blue')
         property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
     }
+
+    customisationColors: QtObject {
+        property color blue: "#223BC4"
+        property color purple: "#5A33CA"
+        property color orange: "#CC6438"
+        property color army: "#1A4E52"
+        property color turquoise: "#22617C"
+        property color sky: "#1475AC"
+        property color yellow: "#C58D30"
+        property color pink: "#C55972"
+        property color copper:"#A24E45"
+        property color camel: "#9F7252"
+        property color magenta: "#BD1E56"
+        property color yinYang: "#FFFFFF"
+    }
 }

ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -167,4 +167,19 @@ ThemePalette {
         property color emojiReactionActiveBackground: getColor('blue')
         property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1)
     }
+
+    customisationColors: QtObject {
+        property color blue: "#2A4AF5"
+        property color purple: "#7140FD"
+        property color orange: "#FF7D46"
+        property color army: "#216266"
+        property color turquoise: "#2A799B"
+        property color sky: "#1992D7"
+        property color yellow: "#F6AF3C"
+        property color pink: "#F66F8F"
+        property color copper:"#CB6256"
+        property color camel: "#C78F67"
+        property color magenta: "#EC266C"
+        property color yinYang: "#09101C"
+    }
 }

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -264,40 +264,47 @@ QtObject {
         property color emojiReactionActiveBackgroundHovered
     }
 
-    property QtObject walletAccountColors: QtObject {
+    property QtObject customisationColors: QtObject {
-        function getHoveredColor(color) {
+        property color blue
-            switch(color) {
+        property color purple
-            case getColor('black'):
+        property color orange
-                return getColor('blackHovered')
+        property color army
-            case getColor('grey'):
+        property color turquoise
-                return getColor('grey2')
+        property color sky
-            case getColor('white'):
+        property color yellow
-                return getColor('grey4')
+        property color pink
-            case getColor('blue2'):
+        property color copper
-                return getColor('blueHovered')
+        property color camel
-            case getColor('purple'):
+        property color magenta
-                return getColor('purpleHovered')
+        property color yinYang
-            case getColor('cyan'):
-                return getColor('cyanHovered')
-            case getColor('violet'):
-                return getColor('violetHovered')
-            case getColor('red2'):
-                return getColor('redHovered')
-            case getColor('yellow'):
-                return getColor('yellowHovered')
-            case getColor('green2'):
-                return getColor('greenHovered')
-            case getColor('moss'):
-                return getColor('mossHovered')
-            case getColor('brown'):
-                return getColor('brownHovered')
-            case getColor('brown2'):
-                return getColor('brown2Hovered')
-            default: return ""
-            }
-        }
     }
 
+    property var customisationColorsArray: [
+        customisationColors.blue,
+        customisationColors.purple,
+        customisationColors.orange,
+        customisationColors.army,
+        customisationColors.turquoise,
+        customisationColors.sky,
+        customisationColors.yellow,
+        customisationColors.pink,
+        customisationColors.copper,
+        customisationColors.camel,
+        customisationColors.magenta,
+        customisationColors.yinYang
+    ]
+
+    property var communityColorsArray: [
+        customisationColors.blue,
+        customisationColors.yellow,
+        customisationColors.magenta,
+        customisationColors.purple,
+        customisationColors.army,
+        customisationColors.sky,
+        customisationColors.orange,
+        customisationColors.camel
+    ]
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml

@@ -271,6 +271,13 @@ QtObject {
         const isMobileDevice = deviceType === "ios" || deviceType === "android"
         return isMobileDevice ? "mobile" : "desktop"
     }
+
+    function getYinYangColor(color) {
+        if (color.toString().toUpperCase() === Theme.palette.customisationColors.yinYang.toString().toUpperCase()) {
+            return Theme.palette.name === "light" ? "#FFFFFF" : "#09101C"
+        }
+        return ""
+    }
 }
 
 

ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml

@@ -13,7 +13,7 @@ StatusModal {
     id: root
 
     property alias color: colorSpace.color
-    property alias standartColors: colorSelectionGrid.model
+    property alias standardColors: colorSelectionGrid.model
     property alias acceptText: acceptButton.text
     property alias previewText: preview.text
 

ui/app/AppLayouts/Browser/BrowserLayout.qml

@@ -165,7 +165,7 @@ StatusSectionLayout {
                                                                             request,
                                                                             selectedAccount: {
                                                                                 name: WalletStore.dappBrowserAccount.name,
-                                                                                iconColor: WalletStore.dappBrowserAccount.color
+                                                                                iconColor: Utils.getColorForId(WalletStore.dappBrowserAccount.colorId)
                                                                             }
                                                                         })
             }
@@ -212,7 +212,7 @@ StatusSectionLayout {
             favoriteComponent: favoritesBar
             currentFavorite: _internal.currentWebView && BookmarksStore.getCurrentFavorite(_internal.currentWebView.url)
             dappBrowserAccName: WalletStore.dappBrowserAccount.name
-            dappBrowserAccIcon: WalletStore.dappBrowserAccount.color
+            dappBrowserAccIcon: Utils.getColorForId(WalletStore.dappBrowserAccount.colorId)
             settingMenu: settingsMenu
             currentUrl: !!_internal.currentWebView ? _internal.currentWebView.url : ""
             isLoading: (!!_internal.currentWebView && _internal.currentWebView.loading)

ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml

@@ -202,6 +202,7 @@ StatusDialog {
                     anchors.centerIn: parent
                     property bool colorSelected: root.isEdit && root.channelColor
                     headerSettings.title: qsTr("Channel Colour")
+                    standardColors: Theme.palette.communityColorsArray
                     color: root.isEdit && root.channelColor ? root.channelColor :
                                                               Theme.palette.primaryColor1
                     onAccepted: colorSelected = true

ui/app/AppLayouts/CommunitiesPortal/panels/CommunityColorPanel.qml

@@ -115,7 +115,7 @@ StatusScrollView {
             title.color: Theme.palette.directColor1
             title.font.pixelSize: 15
             columns: 8
-            model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
+            model: Theme.palette.communityColorsArray
             selectedColorIndex: -1
             onColorSelected: {
                 root.color = selectedColor;

ui/app/AppLayouts/Profile/controls/AccountShowcaseDelegate.qml

@@ -2,11 +2,13 @@ import QtQuick 2.15
 
 import StatusQ.Core.Theme 0.1
 
+import utils 1.0
+
 ShowcaseDelegate {
     title: !!showcaseObj && !!showcaseObj.name ? showcaseObj.name : ""
     secondaryTitle: !!showcaseObj && !!showcaseObj.address ? showcaseObj.address : ""
     hasEmoji: !!showcaseObj && !!showcaseObj.emoji
     hasIcon: !hasEmoji
     icon.name: hasEmoji ? showcaseObj.emoji : "filled-account"
-    icon.color: !!showcaseObj && showcaseObj.color ? showcaseObj.color : Theme.palette.primaryColor3
+    icon.color: !!showcaseObj && showcaseObj.colorId ? Utils.getColorForId(showcaseObj.colorId) : Theme.palette.primaryColor3
 }

ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml

@@ -2,6 +2,7 @@ import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 
+import utils 1.0
 
 StatusListItem {
     id: root
@@ -14,7 +15,7 @@ StatusListItem {
     title: account.name
     subTitle: account.address
     objectName: account.name
-    asset.color: account.color
+    asset.color: Utils.getColorForId(account.colorId)
     asset.emoji: account.emoji
     asset.name: !account.emoji ? "filled-account": ""
     asset.letterSize: 14

ui/app/AppLayouts/Profile/panels/ProfileShowcaseAccountsPanel.qml

@@ -11,7 +11,7 @@ ProfileShowcasePanel {
 
     settingsKey: "accounts"
     keyRole: "address"
-    roleNames: ["name", "address", "walletType", "emoji", "color"]
+    roleNames: ["name", "address", "walletType", "emoji", "colorId"]
     filterFunc: (modelData) => modelData.walletType !== Constants.keyWalletType && !showcaseModel.hasItem(modelData.address)
     hiddenPlaceholderBanner: qsTr("Accounts here will show on your profile")
     showcasePlaceholderBanner: qsTr("Accounts here will be hidden from your profile")

ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml

@@ -55,7 +55,7 @@ StatusModal {
             placeholderText: qsTr("Enter an account name...")
             input.text: popup.account.name
             input.asset.emoji: popup.account.emoji
-            input.asset.color: popup.account.color
+            input.asset.color: Utils.getColorForId(popup.account.colorId)
             input.asset.name: !popup.account.emoji ? "filled-account": ""
 
             validationMode: StatusInput.ValidationMode.Always
@@ -83,9 +83,9 @@ StatusModal {
             anchors.top: selectedColor.bottom
             anchors.topMargin: 10
             anchors.horizontalCenter: parent.horizontalCenter
-            model: Constants.preDefinedWalletAccountColors
+            model: Theme.palette.customisationColorsArray
-            titleText: qsTr("color").toUpperCase()
+            titleText: qsTr("COLOR")
-            selectedColor: popup.account.color
+            selectedColor: Utils.getColorForId(popup.account.colorId)
             selectedColorIndex: {
                 for (let i = 0; i < model.length; i++) {
                     if(model[i] === popup.account.color)
@@ -128,7 +128,7 @@ StatusModal {
                      return
                  }
 
-                const error = walletStore.updateAccount(popup.account.address, accountNameInput.text, accountColorInput.selectedColor, accountNameInput.input.asset.emoji);
+                const error = walletStore.updateAccount(popup.account.address, accountNameInput.text, Utils.getIdForColor(accountColorInput.selectedColor), accountNameInput.input.asset.emoji);
 
                 if (error) {
                     Global.playErrorSound();

ui/app/AppLayouts/Profile/stores/WalletStore.qml

@@ -27,8 +27,8 @@ QtObject {
         return accountsModule.deleteAccount(address)
     }
 
-    function updateAccount(address, accountName, color, emoji) {
+    function updateAccount(address, accountName, colorId, emoji) {
-        return accountsModule.updateAccount(address, accountName, color, emoji)
+        return accountsModule.updateAccount(address, accountName, colorId, emoji)
     }
 
     property var dappList: Global.appIsReady? dappPermissionsModule.dapps : null

ui/app/AppLayouts/Profile/views/wallet/AccountView.qml

@@ -43,7 +43,7 @@ Item {
                 asset: StatusAssetSettings {
                     width: isLetterIdenticon ? 40 : 20
                     height: isLetterIdenticon ? 40 : 20
-                    color: root.account ? root.account.color : "#ffffff"
+                    color: root.account ? Utils.getColorForId(root.account.colorId) : "#ffffff"
                     emoji: root.account ? root.account.emoji : ""
                     name: root.account && !root.account.emoji ? "filled-account": ""
                     letterSize: 14
@@ -132,7 +132,7 @@ Item {
                 primaryText: qsTr("Related Accounts")
                 tagsModel: root.account ? root.account.relatedAccounts : []
                 tagsDelegate: StatusListItemTag {
-                    bgColor: model.color
+                    bgColor: Utils.getColorForId(model.colorId)
                     bgRadius: 6
                     height: 22
                     closeButtonVisible: false

ui/app/AppLayouts/Profile/views/wallet/PermissionsListView.qml

@@ -52,7 +52,7 @@ Column {
                     title: model.name
 
                     asset.emoji: !!model.emoji ? model.emoji: ""
-                    asset.color: model.color
+                    asset.color: Utils.getColorForId(model.colorId)
                     asset.name: !model.emoji ? "filled-account": ""
                     asset.letterSize: 14
                     asset.isLetterIdenticon: !!model.emoji

ui/app/AppLayouts/Wallet/addaccount/panels/SelectOrigin.qml

@@ -51,7 +51,7 @@ StatusSelect {
         tagsModel : root.selectedOrigin.accounts
 
         tagsDelegate: StatusListItemTag {
-            bgColor: model.account.color
+            bgColor: Utils.getColorForId(model.account.colorId)
             height: Style.current.bigPadding
             bgRadius: 6
             tagClickable: false
@@ -114,7 +114,7 @@ StatusSelect {
         tagsModel: menu.isHeader || menu.isOption? [] : model.keyPair.accounts
 
         tagsDelegate: StatusListItemTag {
-            bgColor: model.account.color
+            bgColor: Utils.getColorForId(model.account.colorId)
             height: Style.current.bigPadding
             bgRadius: 6
             tagClickable: false

ui/app/AppLayouts/Wallet/addaccount/states/Main.qml

@@ -21,11 +21,11 @@ Item {
     implicitHeight: layout.implicitHeight
 
     Component.onCompleted: {
-        if (root.store.addAccountModule.selectedColor === "") {
+        if (root.store.addAccountModule.selectedColorId === "") {
             colorSelection.selectedColorIndex = Math.floor(Math.random() * colorSelection.model.length)
         }
         else {
-            let ind = d.evaluateColorIndex(root.store.addAccountModule.selectedColor)
+            let ind = d.evaluateColorIndex(root.store.addAccountModule.selectedColorId)
             colorSelection.selectedColorIndex = ind
         }
 
@@ -42,8 +42,8 @@ Item {
         id: d
 
         function evaluateColorIndex(color) {
-            for (let i = 0; i < Constants.preDefinedWalletAccountColors.length; i++) {
+            for (let i = 0; i < Theme.palette.customisationColorsArray.length; i++) {
-                if(Constants.preDefinedWalletAccountColors[i] === color) {
+                if(Theme.palette.customisationColorsArray[i] === color) {
                     return i
                 }
             }
@@ -107,7 +107,7 @@ Item {
                 text: root.store.addAccountModule.accountName
                 input.isIconSelectable: true
                 input.leftPadding: Style.current.padding
-                input.asset.color: root.store.addAccountModule.selectedColor
+                input.asset.color: Utils.getColorForId(root.store.addAccountModule.selectedColorId)
                 input.asset.emoji: root.store.addAccountModule.selectedEmoji
                 onIconClicked: {
                     d.openEmojiPopup(true)
@@ -152,14 +152,14 @@ Item {
                 id: colorSelection
                 objectName: "AddAccountPopup-AccountColor"
                 anchors.horizontalCenter: parent.horizontalCenter
-                model: Constants.preDefinedWalletAccountColors
+                model: Theme.palette.customisationColorsArray
                 title.color: Theme.palette.directColor1
                 title.font.pixelSize: Constants.addAccountPopup.labelFontSize1
                 title.text: qsTr("Colour")
                 selectedColorIndex: -1
 
                 onSelectedColorChanged: {
-                    root.store.addAccountModule.selectedColor = selectedColor
+                    root.store.addAccountModule.selectedColorId = Utils.getIdForColor(selectedColor)
                 }
             }
 

ui/app/AppLayouts/Wallet/addaccount/stores/AddAccountStore.qml

@@ -78,8 +78,8 @@ QtObject {
         return root.addAccountModule.getStoredSelectedEmoji()
     }
 
-    function getStoredSelectedColor() {
+    function getStoredSelectedColorId() {
-        return root.addAccountModule.getStoredSelectedColor()
+        return root.addAccountModule.getStoredSelectedColorId()
     }
 
     function submitAddAccount(event) {
@@ -198,14 +198,14 @@ QtObject {
         if (root.editMode) {
             return root.accountNameIsValid &&
                     root.addAccountModule.accountName !== root.getStoredAccountName() ||
-                    root.addAccountModule.selectedColor !== "" &&
+                    root.addAccountModule.selectedColorId !== "" &&
-                    root.addAccountModule.selectedColor !== root.getStoredSelectedColor() ||
+                    root.addAccountModule.selectedColorId !== root.getStoredSelectedColorId() ||
                     root.addAccountModule.selectedEmoji !== "" &&
                     root.addAccountModule.selectedEmoji !== root.getStoredSelectedEmoji()
         }
 
         let valid = root.accountNameIsValid &&
-            root.addAccountModule.selectedColor !== "" &&
+            root.addAccountModule.selectedColorId !== "" &&
             root.addAccountModule.selectedEmoji !== ""
 
         if (root.currentState.stateType === Constants.addAccountPopup.state.main) {

ui/app/AppLayouts/Wallet/controls/AccountHeaderGradient.qml

@@ -3,6 +3,8 @@ import QtGraphicalEffects 1.12
 
 import StatusQ.Core.Theme 0.1
 
+import utils 1.0
+
 Loader {
     id: root
 
@@ -15,7 +17,7 @@ Loader {
         Rectangle {
             implicitHeight: 115
             gradient: Gradient {
-                GradientStop { position: 0.0; color:  Theme.palette.alphaColor(root.overview.color, 0.1) }
+                GradientStop { position: 0.0; color:  Theme.palette.alphaColor(Utils.getColorForId(overview.colorId), 0.1) }
                 GradientStop { position: 1.0; color: "transparent" }
             }
         }
@@ -28,14 +30,14 @@ Loader {
                 id: base
                 anchors.fill: parent
                 Component.onCompleted: {
-                    let splitWords = root.overview.colors.split(';')
+                    let splitWords = root.overview.colorIds.split(';')
 
                     var stops = []
                     let numOfColors = splitWords.length
                     let gap =  1/splitWords.length
                     let startPosition = gap
                     for (const word of splitWords) {
-                        stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(word, 0.1)}))
+                        stops.push(stopComponent.createObject(base, {"position":startPosition, "color": Theme.palette.alphaColor(Utils.getColorForId(word), 0.1)}))
                         startPosition += gap
                     }
                     gradient.stops = stops

ui/app/AppLayouts/Wallet/panels/WalletHeader.qml

@@ -37,7 +37,7 @@ Item {
                 objectName: "accountName"
                 Layout.alignment: Qt.AlignVCenter
                 verticalAlignment: Text.AlignVCenter
-                color: overview.isAllAccounts ? Theme.palette.directColor5 : overview.color
+                color: overview.isAllAccounts ? Theme.palette.directColor5 : Utils.getColorForId(overview.colorId)
                 lineHeightMode: Text.FixedHeight
                 lineHeight: 38
                 font.bold: true

ui/app/AppLayouts/Wallet/stores/RootStore.qml

@@ -134,8 +134,8 @@ QtObject {
         return walletSectionAccounts.deleteAccount(address)
     }
 
-    function updateCurrentAccount(address, accountName, color, emoji) {
+    function updateCurrentAccount(address, accountName, colorId, emoji) {
-        return walletSectionAccounts.updateAccount(address, accountName, color, emoji)
+        return walletSectionAccounts.updateAccount(address, accountName, colorId, emoji)
     }
 
     function updateCurrency(newCurrency) {

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

@@ -204,7 +204,7 @@ Rectangle {
                 title: model.name
                 subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
                 asset.emoji: !!model.emoji ? model.emoji: ""
-                asset.color: model.color
+                asset.color: Utils.getColorForId(model.colorId)
                 asset.name: !model.emoji ? "filled-account": ""
                 asset.width: 40
                 asset.height: 40

ui/imports/shared/controls/WalletAccountListItem.qml

@@ -31,7 +31,7 @@ StatusListItem {
     }
     statusListItemSubTitle.wrapMode: Text.NoWrap
     asset.emoji: !!modelData && !!modelData.emoji ? modelData.emoji: ""
-    asset.color: !!modelData ? modelData.color: ""
+    asset.color: !!modelData ? Utils.getColorForId(modelData.colorId): ""
     asset.name: !!modelData && !modelData.emoji ? "filled-account": ""
     asset.letterSize: 14
     asset.isLetterIdenticon: !!modelData && !!modelData.emoji ? true : false

ui/imports/shared/popups/AccountsModalHeader.qml

@@ -6,6 +6,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as StatusQUtils
 
+import utils 1.0
+
 import "../controls"
 
 StatusComboBox {
@@ -15,14 +17,6 @@ StatusComboBox {
     property string chainShortNames
     property int selectedIndex: -1
 
-    QtObject {
-        id: d
-        function getTextColorForWhite(color) {
-            // The grey is kept for backwards compatibility for accounts already created with grey background
-            return color === StatusColors.colors['grey'] || color === StatusColors.colors['white'] ? Theme.palette.black : Theme.palette.white
-        }
-    }
-
     control.padding: 0
     control.spacing: 0
     control.leftPadding: 8
@@ -36,9 +30,9 @@ StatusComboBox {
         width: contentItem.childrenRect.width + control.leftPadding + control.rightPadding
         height: 32
         radius: 8
-        color: !!selectedAccount ? hoverHandler.containsMouse ?
+        color: !!selectedAccount ? hoverHandler.hovered ?
-                                       Theme.palette.walletAccountColors.getHoveredColor(selectedAccount.color) :
+                                       Utils.getHoveredColor(selectedAccount.colorId) :
-                                       selectedAccount.color ?? "transparent" : "transparent"
+                                       Utils.getColorForId(selectedAccount.colorId) : "transparent"
         HoverHandler {
             id: hoverHandler
             cursorShape: Qt.PointingHandCursor
@@ -59,14 +53,14 @@ StatusComboBox {
             anchors.verticalCenter: parent.verticalCenter
             text: selectedAccount.name ?? ""
             font.pixelSize: 15
-            color: d.getTextColorForWhite(selectedAccount.color ?? "")
+            color: Theme.palette.indirectColor1
         }
         StatusIcon {
             anchors.verticalCenter: parent.verticalCenter
             width: 16
             height: width
             icon: "chevron-down"
-            color: d.getTextColorForWhite(selectedAccount.color ?? "")
+            color: Theme.palette.indirectColor1
         }
     }
 

ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml

@@ -78,7 +78,7 @@ StatusListItem {
     tagsModel: root.keyPairAccounts
 
     tagsDelegate: StatusListItemTag {
-        bgColor: model.account.color
+        bgColor: Utils.getColorForId(model.account.colorId)
         height: Style.current.bigPadding
         bgRadius: 6
         tagClickable: root.tagClickable

ui/imports/shared/popups/keycard/helpers/KeycardItem.qml

@@ -66,7 +66,7 @@ StatusListItem {
     tagsModel: root.keyPairAccounts
 
     tagsDelegate: StatusListItemTag {
-        bgColor: model.account.color
+        bgColor: Utils.getColorForId(model.account.colorId)
         bgRadius: 6
         height: Style.current.bigPadding
         closeButtonVisible: false

ui/imports/shared/popups/keycard/states/EnterName.qml

@@ -40,10 +40,10 @@ Item {
                     return
                 }
 
-                let color = Constants.preDefinedWalletAccountColors[Math.floor(Math.random() * Constants.preDefinedWalletAccountColors.length)]
+                let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)]
                 let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall)
                 root.sharedKeycardModule.keyPairForProcessing.observedAccount.name = "      "
-                root.sharedKeycardModule.keyPairForProcessing.observedAccount.color = color
+                root.sharedKeycardModule.keyPairForProcessing.observedAccount.colorId = Utils.getIdForColor(color)
                 root.sharedKeycardModule.keyPairForProcessing.observedAccount.emoji = emoji
             }
         }

ui/imports/shared/popups/keycard/states/ManageAccounts.qml

@@ -42,14 +42,14 @@ Item {
                 d.observedAccount.name = d.emptyName
             }
 
-            if (d.observedAccount.color.length === 0) {
+            if (d.observedAccount.colorId.length === 0) {
-                let color = Constants.preDefinedWalletAccountColors[Math.floor(Math.random() * Constants.preDefinedWalletAccountColors.length)]
+                let color = Theme.palette.customisationColorsArray[Math.floor(Math.random() * Theme.palette.customisationColorsArray.length)]
                 let emoji = StatusQUtils.Emoji.getRandomEmoji(StatusQUtils.Emoji.size.verySmall)
-                d.observedAccount.color = color
+                d.observedAccount.colorId = Utils.getIdForColor(color)
                 d.observedAccount.emoji = emoji
             }
 
-            let ind = d.evaluateColorIndex(d.observedAccount.color)
+            let ind = d.evaluateColorIndex(d.observedAccount.colorId)
             colorSelection.selectedColorIndex = ind
             d.updateValidity()
             accountName.input.edit.forceActiveFocus()
@@ -61,8 +61,8 @@ Item {
         }
 
         function evaluateColorIndex(color) {
-            for (let i = 0; i < Constants.preDefinedWalletAccountColors.length; i++) {
+            for (let i = 0; i < Theme.palette.customisationColorsArray.length; i++) {
-                if(Constants.preDefinedWalletAccountColors[i] === color) {
+                if(Theme.palette.customisationColorsArray[i] === color) {
                     return i
                 }
             }
@@ -211,7 +211,7 @@ Item {
             input.acceptReturn: true
             input.isIconSelectable: true
             input.leftPadding: Style.current.padding
-            input.asset.color: d.observedAccount.color
+            input.asset.color: Utils.getColorForId(d.observedAccount.colorId)
             input.asset.emoji: d.observedAccount.emoji
 
             onTextChanged: {
@@ -242,10 +242,10 @@ Item {
             Layout.alignment: Qt.AlignCenter
             title.text: qsTr("Colour")
             title.font.pixelSize: Constants.keycard.general.fontSize2
-            model: Constants.preDefinedWalletAccountColors
+            model: Theme.palette.customisationColorsArray
 
             onSelectedColorChanged: {
-                d.observedAccount.color = selectedColor
+                d.observedAccount.colorId = Utils.getIdForColor(selectedColor)
             }
         }
 

ui/imports/shared/views/profile/ProfileShowcaseView.qml

@@ -163,7 +163,7 @@ Control {
                     width: ListView.view.width
                     title: model.name
                     subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×")
-                    asset.color: model.color
+                    asset.color: Utils.getColorForId(model.colorId)
                     asset.emoji: model.emoji ?? ""
                     asset.name: asset.emoji || "filled-account"
                     asset.isLetterIdenticon: asset.emoji

ui/imports/utils/Constants.qml

@@ -964,21 +964,6 @@ QtObject {
     readonly property string expired: "expired"
     readonly property string failedResending: "failedResending"
 
-    readonly property var preDefinedWalletAccountColors:[
-        StatusColors.colors['black'],
-        StatusColors.colors['white'],
-        StatusColors.colors['blue2'],
-        StatusColors.colors['purple'],
-        StatusColors.colors['cyan'],
-        StatusColors.colors['violet'],
-        StatusColors.colors['red2'],
-        StatusColors.colors['yellow'],
-        StatusColors.colors['green2'],
-        StatusColors.colors['moss'],
-        StatusColors.colors['brown'],
-        StatusColors.colors['brown2']
-    ]
-
     readonly property QtObject appTranslatableConstants: QtObject {
         readonly property string loginAccountsListAddNewUser: "LOGIN-ACCOUNTS-LIST-ADD-NEW-USER"
         readonly property string loginAccountsListAddExistingUser: "LOGIN-ACCOUNTS-LIST-ADD-EXISTING-USER"
@@ -1005,6 +990,22 @@ QtObject {
         MembershipRequests,
         RejectedMembers,
         BannedMembers
+    }   
+
+    readonly property QtObject walletAccountColors: QtObject {
+        readonly property string primary: "primary"
+        readonly property string purple: "purple"
+        readonly property string orange: "orange"
+        readonly property string army: "army"
+        readonly property string turquoise: "turquoise"
+        readonly property string sky: "sky"
+        readonly property string yellow: "yellow"
+        readonly property string pink: "pink"
+        readonly property string copper: "copper"
+        readonly property string camel: "camel"
+        readonly property string magenta: "magenta"
+        readonly property string yinYang: "yinYang"
+        readonly property string undefinedAccount: "undefined"
     }
 
     enum MutingVariations {

ui/imports/utils/Utils.qml

@@ -686,6 +686,108 @@ QtObject {
         globalUtilsInst.downloadImageByUrl(url, path)
     }
 
+    function getHoveredColor(colorId) {
+        let isLightTheme = Theme.palette.name === Constants.lightThemeName
+        switch(colorId.toString().toUpperCase()) {
+        case Constants.walletAccountColors.primary.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.blue: Style.statusQLightTheme.customisationColors.blue
+        case Constants.walletAccountColors.purple.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.purple: Style.statusQLightTheme.customisationColors.purple
+        case Constants.walletAccountColors.orange.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.orange: Style.statusQLightTheme.customisationColors.orange
+        case Constants.walletAccountColors.army.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.army: Style.statusQLightTheme.customisationColors.army
+        case Constants.walletAccountColors.turquoise.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.turquoise: Style.statusQLightTheme.customisationColors.turquoise
+        case Constants.walletAccountColors.sky.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.sky: Style.statusQLightTheme.customisationColors.sky
+        case Constants.walletAccountColors.yellow.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.yellow: Style.statusQLightTheme.customisationColors.yellow
+        case Constants.walletAccountColors.pink.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.pink: Style.statusQLightTheme.customisationColors.pink
+        case Constants.walletAccountColors.copper.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.copper: Style.statusQLightTheme.customisationColors.copper
+        case Constants.walletAccountColors.camel.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.camel: Style.statusQLightTheme.customisationColors.camel
+        case Constants.walletAccountColors.magenta.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.customisationColors.magenta: Style.statusQLightTheme.customisationColors.magenta
+        case Constants.walletAccountColors.yinYang.toUpperCase():
+            return isLightTheme ? Theme.palette.getColor('blackHovered'): Theme.palette.getColor('grey4')
+        case Constants.walletAccountColors.undefinedAccount.toUpperCase():
+            return isLightTheme ? Style.statusQDarkTheme.baseColor1: Style.statusQLightTheme.baseColor1
+        default:
+            return getColorForId(colorId)
+        }
+    }
+
+
+    function getIdForColor(color){
+        let c = color.toUpperCase()
+        switch(c) {
+        case Theme.palette.customisationColors.blue.toString().toUpperCase():
+            return Constants.walletAccountColors.primary
+        case Theme.palette.customisationColors.purple.toString().toUpperCase():
+            return Constants.walletAccountColors.purple
+        case Theme.palette.customisationColors.orange.toString().toUpperCase():
+            return Constants.walletAccountColors.orange
+        case Theme.palette.customisationColors.army.toString().toUpperCase():
+            return Constants.walletAccountColors.army
+        case Theme.palette.customisationColors.turquoise.toString().toUpperCase():
+            return Constants.walletAccountColors.turquoise
+        case Theme.palette.customisationColors.sky.toString().toUpperCase():
+            return Constants.walletAccountColors.sky
+        case Theme.palette.customisationColors.yellow.toString().toUpperCase():
+            return Constants.walletAccountColors.yellow
+        case Theme.palette.customisationColors.pink.toString().toUpperCase():
+            return Constants.walletAccountColors.pink
+        case Theme.palette.customisationColors.copper.toString().toUpperCase():
+            return Constants.walletAccountColors.copper
+        case Theme.palette.customisationColors.camel.toString().toUpperCase():
+            return Constants.walletAccountColors.camel
+        case Theme.palette.customisationColors.magenta.toString().toUpperCase():
+            return Constants.walletAccountColors.magenta
+        case Theme.palette.customisationColors.yinYang.toString().toUpperCase():
+            return Constants.walletAccountColors.yinYang
+        case Theme.palette.baseColor1.toString().toUpperCase():
+            return Constants.walletAccountColors.undefinedAccount
+        default:
+            return Constants.walletAccountColors.primary
+        }
+    }
+
+    function getColorForId(colorId) {
+        switch(colorId.toUpperCase()) {
+        case Constants.walletAccountColors.primary.toUpperCase():
+            return Theme.palette.customisationColors.blue
+        case Constants.walletAccountColors.purple.toUpperCase():
+            return Theme.palette.customisationColors.purple
+        case Constants.walletAccountColors.orange.toUpperCase():
+            return Theme.palette.customisationColors.orange
+        case  Constants.walletAccountColors.army.toUpperCase():
+            return Theme.palette.customisationColors.army
+        case  Constants.walletAccountColors.turquoise.toUpperCase():
+            return Theme.palette.customisationColors.turquoise
+        case  Constants.walletAccountColors.sky.toUpperCase():
+            return Theme.palette.customisationColors.sky
+        case  Constants.walletAccountColors.yellow.toUpperCase():
+            return Theme.palette.customisationColors.yellow
+        case  Constants.walletAccountColors.pink.toUpperCase():
+            return Theme.palette.customisationColors.pink
+        case  Constants.walletAccountColors.copper.toUpperCase():
+            return Theme.palette.customisationColors.copper
+        case  Constants.walletAccountColors.camel.toUpperCase():
+            return Theme.palette.customisationColors.camel
+        case  Constants.walletAccountColors.magenta.toUpperCase():
+            return Theme.palette.customisationColors.magenta
+        case  Constants.walletAccountColors.yinYang.toUpperCase():
+            return Theme.palette.customisationColors.yinYang
+        case  Constants.walletAccountColors.undefinedAccount.toUpperCase():
+            return Theme.palette.baseColor1
+        default:
+            return Theme.palette.customisationColors.blue
+        }
+    }
+
     // Leave this function at the bottom of the file as QT Creator messes up the code color after this
     function isPunct(c) {
         return /(!|\@|#|\$|%|\^|&|\*|\(|\)|\+|\||-|=|\\|{|}|[|]|"|;|'|<|>|\?|,|\.|\/)/.test(c)

vendor/status-go

@@ -1 +1 @@
-Subproject commit 3f00869e1faed9fee17f6dfe500280c93d390284
+Subproject commit 8b91e3aaafa3f38a6040ff2e7c778540d67efd92