CU-86a5wnpn9-NEON3 - NFI Skin - Enhancement for Christmas Campaign (N3)

package.json

@@ -36,8 +36,8 @@
     "@cityofzion/bs-neo-legacy": "1.6.7",
     "@cityofzion/bs-neo3": "1.8.9",
     "@cityofzion/bs-swap": "0.3.2",
-    "@cityofzion/neon-core": "5.5.1",
-    "@cityofzion/neon-js": "5.5.1",
+    "@cityofzion/neon-core": "5.6.0",
+    "@cityofzion/neon-js": "5.6.0",
     "@cityofzion/wallet-connect-sdk-wallet-core": "4.4.0",
     "@cityofzion/wallet-connect-sdk-wallet-react": "4.0.18",
     "@electron-toolkit/preload": "^2.0.0",
@@ -125,4 +125,4 @@
     "vite-plugin-node-polyfills": "^0.17.0",
     "vite-plugin-svgr": "^3.2.0"
   }
-}
+}

src/renderer/src/components/AccountIcon.tsx

@@ -1,49 +1,77 @@
 import { cloneElement } from 'react'
-import { ACCOUNT_COLOR_SKINS, ACCOUNT_LOCAL_SKINS } from '@renderer/constants/skins'
+import { ACCOUNT_COLOR_SKINS, LOCAL_SKINS } from '@renderer/constants/skins'
+import { TBlockchainServiceKey } from '@shared/@types/blockchain'
 import { IAccountState, TNftSkin } from '@shared/@types/store'
 
 import { BlockchainIcon } from './BlockchainIcon'
 type TProps = {
   account: IAccountState
 }
 
+type TAccountBlockchainCircleProps = {
+  blockchain: TBlockchainServiceKey
+}
+
+const AccountBlockchainCircle = ({ blockchain }: TAccountBlockchainCircleProps) => (
+  <div className="w-4.5 h-4.5 flex items-center justify-center relative">
+    <div className="w-full h-full rounded-full bg-asphalt mix-blend-overlay absolute" />
+
+    <BlockchainIcon blockchain={blockchain} type="white" className="w-2.5 h-2.5" />
+  </div>
+)
+
 const AccountIconColor = ({ account }: TProps) => {
-  const bgColor = ACCOUNT_COLOR_SKINS.find(({ id }) => id === account.skin.id)?.color ?? ACCOUNT_COLOR_SKINS[0].color
+  const color = ACCOUNT_COLOR_SKINS.find(({ id }) => id === account.skin.id)?.color
+
+  if (!color) return null
 
   return (
-    <div className={`w-full h-full flex items-center justify-center relative ${bgColor}`}>
-      <div className="w-3.5 h-3.5 flex items-center justify-center relative">
-        <div className="w-full h-full rounded-full bg-asphalt mix-blend-overlay absolute" />
-        <BlockchainIcon blockchain={account.blockchain} type="white" className="w-2 h-2" />
-      </div>
+    <div className={`flex w-full h-full items-center justify-center relative ${color}`}>
+      <AccountBlockchainCircle blockchain={account.blockchain} />
     </div>
   )
 }
 
 const AccountIconNFT = ({ account }: TProps) => {
-  const skin = account.skin as TNftSkin
+  const imgUrl = (account.skin as TNftSkin)?.imgUrl
+
+  if (!imgUrl) return null
+
   return (
-    <div className="w-full h-full relative bg-gray-300/30">
-      <img src={skin.imgUrl} className="w-full h-full object-cover" />
+    <div className="flex w-full h-full items-center justify-center relative bg-gray-300/30">
+      <img aria-hidden={true} src={imgUrl} alt="" className="w-full h-full object-cover absolute inset-0 m-auto" />
+
+      <AccountBlockchainCircle blockchain={account.blockchain} />
     </div>
   )
 }
 
 const AccountIconLocal = ({ account }: TProps) => {
-  const component = ACCOUNT_LOCAL_SKINS.find(it => it.id === account.skin.id)!.component
+  const component = LOCAL_SKINS.find(({ id }) => id === account.skin.id)?.component
+
+  if (!component) return null
 
-  return <div className="w-full h-full relative">{cloneElement(component, { className: 'w-full h-full' })}</div>
+  return (
+    <div className="flex w-full h-full items-center justify-center relative">
+      {cloneElement(component, {
+        'aria-hidden': true,
+        className: 'w-full h-full object-cover absolute inset-0 m-auto',
+      })}
+
+      <AccountBlockchainCircle blockchain={account.blockchain} />
+    </div>
+  )
 }
 
 export const AccountIcon = ({ account }: TProps) => {
   return (
-    <div className="w-7 h-5 rounded-sm shadow-sm overflow-hidden">
-      {account.skin.type === 'color' ? (
-        <AccountIconColor account={account} />
-      ) : account.skin.type === 'nft' ? (
+    <div className="w-10 h-6 min-w-10 min-h-6 min-w-10 max-h-6 rounded-sm shadow-sm overflow-hidden">
+      {account.skin.type === 'nft' ? (
         <AccountIconNFT account={account} />
-      ) : (
+      ) : account.skin.type === 'local' ? (
         <AccountIconLocal account={account} />
+      ) : (
+        <AccountIconColor account={account} />
       )}
     </div>
   )

src/renderer/src/components/SkinCard.tsx

@@ -1,6 +1,7 @@
 import { cloneElement } from 'react'
 import { MdCheckCircle } from 'react-icons/md'
 import { StyleHelper } from '@renderer/helpers/StyleHelper'
+import { match, P } from 'ts-pattern'
 
 type TProps = {
   showCheck: boolean
@@ -14,17 +15,24 @@ export const SkinCard = ({ showCheck, image, color, className, component }: TPro
   return (
     <div
       className={StyleHelper.mergeStyles(
-        'w-[3.75rem] min-w-[3.75rem] h-[3.75rem] rounded overflow-hidden bg-gray-300/30 shadow-md relative',
+        'w-[3.75rem] min-w-[3.75rem] h-[3.75rem] rounded overflow-hidden bg-gray-300/30 shadow-md relative shadow-[4px_2px_4px_0px_rgba(0,0,0,0.3),-9px_-9px_11px_0px_rgba(55,63,71,0.49),inset_1px_1px_0px_0px_rgba(214,210,210,0.14),inset_-1px_-1px_0px_0px_rgba(0,0,0,0.39)]',
         className
       )}
     >
-      {image ? (
-        <img className="w-full h-full object-cover" src={image} />
-      ) : color ? (
-        <div className={StyleHelper.mergeStyles('w-full h-full', color)} />
-      ) : component ? (
-        cloneElement(component, { className: 'w-full h-full' })
-      ) : null}
+      {match({ image, component, color })
+        .with({ image: P.when(value => !!value) }, () => (
+          <img aria-hidden={true} src={image} alt="" className="w-full h-full object-cover absolute inset-0 m-auto" />
+        ))
+        .with({ component: P.when(value => !!value) }, () =>
+          cloneElement(component, {
+            'aria-hidden': true,
+            className: 'w-full h-full object-cover absolute inset-0 m-auto',
+          })
+        )
+        .with({ color: P.when(value => !!value) }, () => (
+          <div className={StyleHelper.mergeStyles('w-full h-full', color)} />
+        ))
+        .otherwise(() => null)}
 
       <div className="flex items-center justify-center absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#4F4F4F15] to-[#5E5E5E20]">
         <MdCheckCircle

src/renderer/src/constants/skins.tsx

@@ -1,3 +1,4 @@
+import CozFaceDecember2024 from '@renderer/assets/skins/coz-face-december-2024.png'
 import { TBlockchainServiceKey } from '@shared/@types/blockchain'
 
 type TAccountColorSkin = {
@@ -22,6 +23,11 @@ export const ACCOUNT_COLOR_SKINS: TAccountColorSkin[] = [
   { id: 'orange', color: 'bg-[#FE872F]' },
 ]
 
-export const ACCOUNT_LOCAL_SKINS: TLocalSkin[] = []
-
-export const LOCAL_SKINS: TLocalSkin[] = [...ACCOUNT_LOCAL_SKINS]
+export const LOCAL_SKINS: TLocalSkin[] = [
+  {
+    id: 'coz-face-december-2024',
+    blockchain: 'neo3',
+    component: <img src={CozFaceDecember2024} alt="" />,
+    unlockedContractHash: '0x76a8f8a7a901b29a33013b469949f4b08db15756',
+  },
+]

src/renderer/src/helpers/UtilsHelper.ts

@@ -1,5 +1,6 @@
 import { getI18n } from 'react-i18next'
 import { AVAILABLE_RANDOM_COLORS, MANDATORY_TOKEN_COLORS } from '@renderer/constants/colors'
+import { ACCOUNT_COLOR_SKINS } from '@renderer/constants/skins'
 import _ from 'lodash'
 import * as uuid from 'uuid'
 
@@ -222,4 +223,10 @@ export class UtilsHelper {
   static isHexadecimal(hexadecimal: string) {
     return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hexadecimal)
   }
+
+  static getSkinColor(index?: number) {
+    const nextIndex = index ?? UtilsHelper.getRandomNumber(7)
+
+    return ACCOUNT_COLOR_SKINS[nextIndex]?.id ?? ACCOUNT_COLOR_SKINS[0].id
+  }
 }