-
-
+
+
)
}
const AccountIconNFT = ({ account }: TProps) => {
- const skin = account.skin as TNftSkin
+ const imgUrl = (account.skin as TNftSkin)?.imgUrl
+
+ if (!imgUrl) return null
+
return (
-
- 
+
+
+ 
+
+
)
}
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
+
+ {cloneElement(component, { className: 'w-full h-full' })}
+ return (
+
+ {cloneElement(component, {
+ 'aria-hidden': true,
+ className: 'w-full h-full object-cover absolute inset-0 m-auto',
+ })}
+
+
+ )
}
export const AccountIcon = ({ account }: TProps) => {
return (
-
- {account.skin.type === 'color' ? (
-
+ {account.skin.type === 'nft' ? (
)
diff --git a/src/renderer/src/components/SkinCard.tsx b/src/renderer/src/components/SkinCard.tsx
index e671c9a0..0c06e3d1 100644
--- a/src/renderer/src/components/SkinCard.tsx
+++ b/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 (
- {image ? (
- 
- ) : color ? (
-
- ) : component ? (
- cloneElement(component, { className: 'w-full h-full' })
- ) : null}
+ {match({ image, component, color })
+ .with({ image: P.when(value => !!value) }, () => (
+
+ ))
+ .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) }, () => (
+
+ ))
+ .otherwise(() => null)}
([])
- const unlockSkins = useCallback(async () => {
await Promise.allSettled(
LOCAL_SKINS.map(async skin => {
- if (
- unlockedSkinIdsRef.current.includes(skin.id) ||
- !NetworkHelper.isMainnet(skin.blockchain, networkByBlockchainRef.current[skin.blockchain])
- )
- return
-
- await Promise.allSettled(
- accounts.map(async account => {
- if (account.type === 'watch') return
-
+ for (const account of ownAccounts) {
+ try {
const service = bsAggregator.blockchainServicesByName[account.blockchain]
- if (!hasNft(service)) return
+
+ if (account.blockchain !== skin.blockchain || !hasNft(service)) continue
const hasToken = await service.nftDataService.hasToken({
- contractHash: skin.unlockedContractHash,
address: account.address,
+ contractHash: skin.unlockedContractHash,
})
- if (hasToken) {
- dispatch(settingsReducerActions.unlockSkin(skin.id))
- }
- })
- )
+ if (!hasToken) continue
+
+ skinIds.add(skin.id)
+
+ break
+ } catch {
+ /* empty */
+ }
+ }
})
)
- }, [accounts, dispatch, networkByBlockchainRef, unlockedSkinIdsRef])
+
+ const invalidSkinIds = unlockedSkinIds.filter(skinId => !skinIds.has(skinId))
+
+ dispatch(settingsReducerActions.setUnlockedSkinIds([...skinIds]))
+ dispatch(authReducerActions.removeAccountSkins(invalidSkinIds))
+ }
useEffect(() => {
unlockSkins()
- }, [unlockSkins])
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
}
export const useAfterLogin = () => {
useRegisterWalletConnectListeners()
useRegisterHardwareWalletListeners()
useRegisterDeeplinkListeners()
- useUnlockedSkins()
+ useUnlockSkins()
}
diff --git a/src/renderer/src/hooks/useBlockchainActions.ts b/src/renderer/src/hooks/useBlockchainActions.ts
index d04d1342..1a587431 100644
--- a/src/renderer/src/hooks/useBlockchainActions.ts
+++ b/src/renderer/src/hooks/useBlockchainActions.ts
@@ -1,7 +1,6 @@
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useWalletConnectWallet } from '@cityofzion/wallet-connect-sdk-wallet-react'
-import { ACCOUNT_COLOR_SKINS } from '@renderer/constants/skins'
import { AccountHelper } from '@renderer/helpers/AccountHelper'
import { UtilsHelper } from '@renderer/helpers/UtilsHelper'
import { WalletConnectHelper } from '@renderer/helpers/WalletConnectHelper'
@@ -88,8 +87,7 @@ export function useBlockchainActions() {
idWallet: wallet.id,
name,
blockchain,
- skin: skin ?? { type: 'color', id: ACCOUNT_COLOR_SKINS[UtilsHelper.getRandomNumber(7)].id },
- lastNftSkin: skin?.type === 'nft' ? skin : undefined,
+ skin: skin ?? { type: 'color', id: UtilsHelper.getSkinColor() },
address: generatedAccount.address,
type: 'standard',
encryptedKey,
@@ -126,8 +124,7 @@ export function useBlockchainActions() {
idWallet: wallet.id,
name: name ?? t('defaultName', { accountNumber: accountOrder + 1 }),
blockchain,
- skin: skin ?? { type: 'color', id: ACCOUNT_COLOR_SKINS[UtilsHelper.getRandomNumber(7)].id },
- lastNftSkin: skin?.type === 'nft' ? skin : undefined,
+ skin: skin ?? { type: 'color', id: UtilsHelper.getSkinColor() },
address,
type,
encryptedKey,
diff --git a/src/renderer/src/hooks/useNeonBackup.ts b/src/renderer/src/hooks/useNeonBackup.ts
index 6e1d8886..36676a1b 100644
--- a/src/renderer/src/hooks/useNeonBackup.ts
+++ b/src/renderer/src/hooks/useNeonBackup.ts
@@ -1,6 +1,5 @@
import { useTranslation } from 'react-i18next'
import { BACKUP_FILE_EXTENSION, BACKUP_VERSION, DEPRECATED_BACKUP_FILE_EXTENSION } from '@renderer/constants/backup'
-import { ACCOUNT_COLOR_SKINS } from '@renderer/constants/skins'
import { DateHelper } from '@renderer/helpers/DateHelper'
import { UtilsHelper } from '@renderer/helpers/UtilsHelper'
import { doesBlockchainSupported } from '@renderer/libs/blockchainService'
@@ -13,7 +12,6 @@ import {
IWalletState,
TAccountType,
TContactAddress,
- TNftSkin,
TSkin,
TSwapRecord,
} from '@shared/@types/store'
@@ -55,7 +53,6 @@ export const backupAccountSchema = zod.object({
key: zod.string().optional(),
order: zod.number(),
skin: backupAccountSkinSchema,
- lastNftSkin: backupAccountSkinSchema.optional(),
})
export const backupWalletSchema = zod.object({
@@ -112,7 +109,7 @@ const fixAccountProperties = (
backupAccount.type === 'ledger' || backupAccount.type === 'hardware' ? 'watch' : backupAccount.type
if (!backupAccount.skin || UtilsHelper.isHexadecimal(backupAccount.skin.id))
- backupAccount.skin = { id: ACCOUNT_COLOR_SKINS[UtilsHelper.getRandomNumber(7)].id, type: 'color' }
+ backupAccount.skin = { id: UtilsHelper.getSkinColor(), type: 'color' }
return {
address: backupAccount.address,
@@ -122,7 +119,6 @@ const fixAccountProperties = (
name: backupAccount.name,
order: backupAccount.order,
skin: backupAccount.skin as TSkin,
- lastNftSkin: backupAccount.lastNftSkin as TNftSkin,
type,
}
}
diff --git a/src/renderer/src/hooks/useSettingsSelector.ts b/src/renderer/src/hooks/useSettingsSelector.ts
index 17290a14..b8b5bc34 100644
--- a/src/renderer/src/hooks/useSettingsSelector.ts
+++ b/src/renderer/src/hooks/useSettingsSelector.ts
@@ -61,6 +61,7 @@ export const useCurrencySelector = () => {
export const useUnlockedSkinIdsSelector = () => {
const { ref, value } = useAppSelector(state => state.settings.data.unlockedSkinIds)
+
return {
unlockedSkinIds: value,
unlockedSkinIdsRef: ref,
diff --git a/src/renderer/src/locales/en/modals.json b/src/renderer/src/locales/en/modals.json
index c6eb1358..f37d62b2 100644
--- a/src/renderer/src/locales/en/modals.json
+++ b/src/renderer/src/locales/en/modals.json
@@ -50,7 +50,7 @@
"inputPlaceholder": "Enter your account name...",
"inputSubtitle": "It could be helpful to name your account with a label related to what you want to use the account for (such as ‘Investments’ or ‘Trading’).",
"selectBlockchainDescription": "Please select which chain you would like to use for this account.",
- "colorSelectorLabel": "Select an account colour",
+ "skinSelectorLabel": "Select an account skin",
"saveButtonLabel": "Save",
"nextButtonLabel": "Next",
"cancelButtonLabel": "Cancel",
diff --git a/src/renderer/src/routes/modals/PersistAccount/SkinSelector.tsx b/src/renderer/src/routes/modals/PersistAccount/SkinSelector.tsx
index ca1f68c2..08bc302f 100644
--- a/src/renderer/src/routes/modals/PersistAccount/SkinSelector.tsx
+++ b/src/renderer/src/routes/modals/PersistAccount/SkinSelector.tsx
@@ -1,20 +1,19 @@
-import { MdAdd } from 'react-icons/md'
import { SkinCard } from '@renderer/components/SkinCard'
import { ACCOUNT_COLOR_SKINS, ACCOUNT_LOCAL_SKINS } from '@renderer/constants/skins'
import { useUnlockedSkinIdsSelector } from '@renderer/hooks/useSettingsSelector'
-import { TNftSkin, TSkin } from '@shared/@types/store'
+import { IAccountState, TSkin } from '@shared/@types/store'
type TProps = {
label: string
selectedSkin: TSkin
- lastNftSkin?: TNftSkin
onSelectSkin: (skin: TSkin) => void
+ account?: IAccountState
}
-export const SkinSelector = ({ label, selectedSkin, onSelectSkin, lastNftSkin }: TProps) => {
+export const SkinSelector = ({ label, selectedSkin, account, onSelectSkin }: TProps) => {
const { unlockedSkinIds } = useUnlockedSkinIdsSelector()
-
- const unlokedLocalSkins = ACCOUNT_LOCAL_SKINS.filter(skin => unlockedSkinIds.includes(skin.id))
+ const unlockedLocalSkins =
+ account?.type === 'watch' ? [] : ACCOUNT_LOCAL_SKINS.filter(skin => unlockedSkinIds.includes(skin.id))
return (
@@ -22,25 +21,16 @@ export const SkinSelector = ({ label, selectedSkin, onSelectSkin, lastNftSkin }:
{ACCOUNT_COLOR_SKINS.map(skin => (
))}
- ({
name: account ? account.name : '',
- skin: account ? account.skin : { id: ACCOUNT_COLOR_SKINS[0].id, type: 'color' },
- lastNftSkin: account ? account.lastNftSkin : undefined,
+ skin: account ? account.skin : { id: UtilsHelper.getSkinColor(0), type: 'color' },
})
const handleSelectColorSkin = (skin: TSkin) => {
setData({ skin })
}
- const handleSubmit = async ({ name, skin, lastNftSkin }: TFormData) => {
+ const handleSubmit = async ({ name, skin }: TFormData) => {
const nameTrimmed = name.trim()
if (nameTrimmed.length === 0) {
setError('name', t('nameLengthError'))
@@ -55,7 +53,7 @@ export const PersistAccountModal = () => {
}
if (account) {
- dispatch(authReducerActions.saveAccount({ ...account, name: nameTrimmed, skin, lastNftSkin }))
+ dispatch(authReducerActions.saveAccount({ ...account, name: nameTrimmed, skin }))
modalNavigate(-1)
return
@@ -116,14 +114,15 @@ export const PersistAccountModal = () => {
-
-
- {lastNftSkin && (
-
- )}
+ {/* TODO: create color picker here */}
+ {/**/}
+ {/*
*/}
- {unlokedLocalSkins.map(skin => (
+ {unlockedLocalSkins.map(skin => (
diff --git a/src/renderer/src/routes/modals/PersistAccount/index.tsx b/src/renderer/src/routes/modals/PersistAccount/index.tsx
index 3b001d10..ce85eeb6 100644
--- a/src/renderer/src/routes/modals/PersistAccount/index.tsx
+++ b/src/renderer/src/routes/modals/PersistAccount/index.tsx
@@ -4,7 +4,7 @@ import { TbPencil, TbPlus } from 'react-icons/tb'
import { Button } from '@renderer/components/Button'
import { Input } from '@renderer/components/Input'
import { Separator } from '@renderer/components/Separator'
-import { ACCOUNT_COLOR_SKINS } from '@renderer/constants/skins'
+import { UtilsHelper } from '@renderer/helpers/UtilsHelper'
import { useActions } from '@renderer/hooks/useActions'
import { useBlockchainActions } from '@renderer/hooks/useBlockchainActions'
import { useHardwareWalletActions } from '@renderer/hooks/useHardwareWallet'
@@ -13,14 +13,13 @@ import { useAppDispatch } from '@renderer/hooks/useRedux'
import { SideModalLayout } from '@renderer/layouts/SideModal'
import { authReducerActions } from '@renderer/store/reducers/AuthReducer'
import { TBlockchainServiceKey } from '@shared/@types/blockchain'
-import { IAccountState, IWalletState, TNftSkin, TSkin } from '@shared/@types/store'
+import { IAccountState, IWalletState, TSkin } from '@shared/@types/store'
import { SkinSelector } from './SkinSelector'
type TFormData = {
name: string
skin: TSkin
- lastNftSkin?: TNftSkin
}
type TLocationState = {
@@ -39,15 +38,14 @@ export const PersistAccountModal = () => {
const { actionData, actionState, handleAct, setDataFromEventWrapper, setData, setError } = useActions