Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 101 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -125,4 +125,4 @@
"vite-plugin-node-polyfills": "^0.17.0",
"vite-plugin-svgr": "^3.2.0"
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 44 additions & 16 deletions src/renderer/src/components/AccountIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,77 @@
import { cloneElement } from 'react'
import { ACCOUNT_COLOR_SKINS, ACCOUNT_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" />
dustr94 marked this conversation as resolved.
Show resolved Hide resolved

<AccountBlockchainCircle blockchain={account.blockchain} />
</div>
)
}

const AccountIconLocal = ({ account }: TProps) => {
const component = ACCOUNT_LOCAL_SKINS.find(it => it.id === account.skin.id)!.component
const component = ACCOUNT_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>
)
Expand Down
24 changes: 16 additions & 8 deletions src/renderer/src/components/SkinCard.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down
10 changes: 9 additions & 1 deletion src/renderer/src/constants/skins.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import CozFaceDecember2024 from '@renderer/assets/skins/coz-face-december-2024.png'
import { TBlockchainServiceKey } from '@shared/@types/blockchain'

type TAccountColorSkin = {
Expand All @@ -22,6 +23,13 @@ export const ACCOUNT_COLOR_SKINS: TAccountColorSkin[] = [
{ id: 'orange', color: 'bg-[#FE872F]' },
]

export const ACCOUNT_LOCAL_SKINS: TLocalSkin[] = []
export const ACCOUNT_LOCAL_SKINS: TLocalSkin[] = [
{
id: 'coz-face-december-2024',
blockchain: 'neo3',
component: <img src={CozFaceDecember2024} alt="" />,
unlockedContractHash: '0x76a8f8a7a901b29a33013b469949f4b08db15756',
},
]

export const LOCAL_SKINS: TLocalSkin[] = [...ACCOUNT_LOCAL_SKINS]
12 changes: 12 additions & 0 deletions src/renderer/src/helpers/UtilsHelper.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
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 { TColorSkin } from '@shared/@types/store'
import _ from 'lodash'
import * as uuid from 'uuid'

Expand Down Expand Up @@ -222,4 +224,14 @@ 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 newIndex = index ?? UtilsHelper.getRandomNumber(7)

return ACCOUNT_COLOR_SKINS[newIndex]?.id ?? ACCOUNT_COLOR_SKINS[0].id
}

static generateColorSkin(colorIndex?: number): TColorSkin {
return { id: UtilsHelper.getSkinColor(colorIndex), type: 'color' }
}
}
Loading