diff --git a/packages/components/src/components/Icon/Icon.stories.tsx b/packages/components/src/components/Icon/Icon.stories.tsx index a7c68227cd8..4a68eb19212 100644 --- a/packages/components/src/components/Icon/Icon.stories.tsx +++ b/packages/components/src/components/Icon/Icon.stories.tsx @@ -10,7 +10,7 @@ import { IconName, icons } from '@suite-common/icons'; import { icons as iconsDeprecated, IconName as IconNameDeprecated, -} from '@suite-common/icons-deprecated/src/webComponents'; +} from '@suite-common/icons-deprecated'; import { getFramePropsStory } from '../../utils/frameProps'; const meta: Meta = { diff --git a/packages/components/src/components/Icon/Icon.tsx b/packages/components/src/components/Icon/Icon.tsx index 9b8d8396a9f..8e31a2e6898 100644 --- a/packages/components/src/components/Icon/Icon.tsx +++ b/packages/components/src/components/Icon/Icon.tsx @@ -5,7 +5,7 @@ import styled, { css, DefaultTheme } from 'styled-components'; import { icons as iconsDeprecated, IconName as IconNameDeprecated, -} from '@suite-common/icons-deprecated/src/webComponents'; +} from '@suite-common/icons-deprecated'; import { icons, IconName as IconNameNew } from '@suite-common/icons'; import { CSSColor, Color } from '@trezor/theme'; diff --git a/packages/components/src/components/Icon/icons.stories.tsx b/packages/components/src/components/Icon/icons.stories.tsx index 323ae2f8364..19645c37b9a 100644 --- a/packages/components/src/components/Icon/icons.stories.tsx +++ b/packages/components/src/components/Icon/icons.stories.tsx @@ -11,7 +11,7 @@ import { icons, IconName } from '@suite-common/icons'; import { icons as iconsDeprecated, IconName as IconNameDeprecated, -} from '@suite-common/icons-deprecated/src/webComponents'; +} from '@suite-common/icons-deprecated'; const CopiedText = styled.div` display: flex; diff --git a/scripts/list-outdated-dependencies/mobile-dependencies.txt b/scripts/list-outdated-dependencies/mobile-dependencies.txt index 8f54c36dd89..59c7cd2ea38 100644 --- a/scripts/list-outdated-dependencies/mobile-dependencies.txt +++ b/scripts/list-outdated-dependencies/mobile-dependencies.txt @@ -68,4 +68,5 @@ metro metro-react-native-babel-preset jest-expo intl-pluralrules -@gorhom/bottom-sheet \ No newline at end of file +@gorhom/bottom-sheet +fantasticon \ No newline at end of file diff --git a/suite-common/icons-deprecated/assets/cryptoIcons/op.svg b/suite-common/icons-deprecated/assets/cryptoIcons/op.svg index 098392b7f62..2719391ea7b 100644 --- a/suite-common/icons-deprecated/assets/cryptoIcons/op.svg +++ b/suite-common/icons-deprecated/assets/cryptoIcons/op.svg @@ -1,21 +1,4 @@ - - - - - - - + + + diff --git a/suite-common/icons-deprecated/assets/flags/cz.svg b/suite-common/icons-deprecated/assets/flags/cz.svg deleted file mode 100644 index da97767b966..00000000000 --- a/suite-common/icons-deprecated/assets/flags/cz.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/suite-common/icons-deprecated/generateIcons.js b/suite-common/icons-deprecated/generateIcons.js index 8349762c9d4..fac1a01d7a6 100644 --- a/suite-common/icons-deprecated/generateIcons.js +++ b/suite-common/icons-deprecated/generateIcons.js @@ -18,11 +18,6 @@ const assetTypesConfig = [ dirname: 'assets/cryptoIcons', typeName: 'CryptoIconName', }, - { - name: 'flagIcons', - dirname: 'assets/flags', - typeName: 'FlagIconName', - }, ]; // https://github.com/svg/svgo#built-in-plugins diff --git a/suite-common/icons-deprecated/package.json b/suite-common/icons-deprecated/package.json index 5a75271dc2b..daabd90462a 100644 --- a/suite-common/icons-deprecated/package.json +++ b/suite-common/icons-deprecated/package.json @@ -13,17 +13,7 @@ "download-crypto-icons": "yarn g:tsx ./scripts/downloadCryptoIcons.ts" }, "dependencies": { - "@shopify/react-native-skia": "1.3.11", - "@suite-common/wallet-config": "workspace:*", - "@suite-common/wallet-types": "workspace:*", - "@trezor/connect": "workspace:*", - "@trezor/styles": "workspace:*", - "@trezor/theme": "workspace:*", - "react": "18.2.0", - "react-native": "0.75.2", - "react-native-reanimated": "3.15.0", - "sharp": "0.32.6", - "styled-components": "^6.1.8" + "sharp": "0.32.6" }, "devDependencies": { "prettier": "^3.3.2", diff --git a/suite-common/icons-deprecated/src/components/CryptoIcon.tsx b/suite-common/icons-deprecated/src/components/CryptoIcon.tsx deleted file mode 100644 index ee621ca2a7e..00000000000 --- a/suite-common/icons-deprecated/src/components/CryptoIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Canvas, ImageSVG, useSVG } from '@shopify/react-native-skia'; - -import { networks } from '@suite-common/wallet-config'; - -import { CryptoIconName, cryptoIcons } from '../icons'; -import { genericTokenIcon, TokenIconName, tokenIcons } from '../tokenIcons'; -import { CoinSymbol, CryptoIconProps, cryptoIconSizes } from '../config'; -import { useRerenderOnAppStateChange } from '../useRerenderOnAppState'; - -const getIconFile = (symbol: CoinSymbol) => { - if (symbol in networks) return cryptoIcons[symbol as CryptoIconName]; - - // the symbol in case of a token is a contract address. Since it is hexadecimal value, we can convert it - // to lowerCase to mach definition `suite-common/icons/icons.ts` without changing the meaning of the date. - return tokenIcons[symbol.toLowerCase() as TokenIconName] ?? genericTokenIcon; -}; - -export const CryptoIcon = ({ symbol, size = 'small' }: CryptoIconProps) => { - useRerenderOnAppStateChange(); - - const iconFile = getIconFile(symbol); - const svg = useSVG(iconFile); - const sizeNumber = cryptoIconSizes[size]; - - return ( - - {svg && } - - ); -}; diff --git a/suite-common/icons-deprecated/src/components/FlagIcon.tsx b/suite-common/icons-deprecated/src/components/FlagIcon.tsx deleted file mode 100644 index fdc2b2ea418..00000000000 --- a/suite-common/icons-deprecated/src/components/FlagIcon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Canvas, ImageSVG, useSVG } from '@shopify/react-native-skia'; - -import { flagIcons } from '../icons'; -import { FlagIconProps, flagIconSizes } from '../config'; -import { useRerenderOnAppStateChange } from '../useRerenderOnAppState'; - -export const FlagIcon = ({ name, size = 'medium' }: FlagIconProps) => { - useRerenderOnAppStateChange(); - - const svg = useSVG(flagIcons[name]); - const sizeNumber = flagIconSizes[size]; - - return ( - - {svg && } - - ); -}; diff --git a/suite-common/icons-deprecated/src/components/Icon.tsx b/suite-common/icons-deprecated/src/components/Icon.tsx deleted file mode 100644 index 0b1ca6fc190..00000000000 --- a/suite-common/icons-deprecated/src/components/Icon.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { SharedValue, useDerivedValue } from 'react-native-reanimated'; - -import { Canvas, ImageSVG, useSVG, Group, Skia, BlendMode } from '@shopify/react-native-skia'; - -import { useNativeStyles } from '@trezor/styles'; -import { Color, Colors, CSSColor } from '@trezor/theme'; - -import { useRerenderOnAppStateChange } from '../useRerenderOnAppState'; -import { icons } from '../icons'; -import { getIconSize, IconProps } from '../config'; - -export type IconColor = 'svgSource' | Color | CSSColor | SharedValue; - -// This type-guard has to be set as 'worklet' to be executable via Reanimated on the UI thread. -const isReanimatedSharedValue = (value: IconColor): value is SharedValue => { - 'worklet'; - - return typeof value === 'object' && 'value' in value; -}; - -function isCSSColor(value: any): value is CSSColor { - 'worklet'; - - return ( - typeof value === 'string' && - (value.startsWith('#') || - value.startsWith('rgb(') || - value.startsWith('rgba(') || - value === 'transparent' || - value === 'currentColor') - ); -} - -const getColorCode = (color: Exclude, themeColors: Colors) => { - 'worklet'; - - if (isReanimatedSharedValue(color)) { - return color.value; - } - if (isCSSColor(color)) { - return color; - } - - return themeColors[color]; -}; - -interface NativeIconProps extends Omit { - color?: IconColor; -} - -export const Icon = ({ name, size = 'large', color = 'iconDefault' }: NativeIconProps) => { - useRerenderOnAppStateChange(); - - const svg = useSVG(icons[name]); - const { - utils: { colors }, - } = useNativeStyles(); - const sizeNumber = getIconSize(size); - - // Paint has to be Reanimated derived value, to allow color transition animation on the UI thread. - const paint = useDerivedValue(() => { - // If color is set to 'svgSource', it means that the SVG file contains its own colors and we don't want to override them. - if (color === 'svgSource') return undefined; - - const colorCode = getColorCode(color, colors); - - const freshPaint = Skia.Paint(); - freshPaint.setColorFilter( - Skia.ColorFilter.MakeBlend(Skia.Color(colorCode), BlendMode.SrcIn), - ); - - return freshPaint; - }, [color]); - - return ( - - - {svg && } - - - ); -}; diff --git a/suite-common/icons-deprecated/src/config.ts b/suite-common/icons-deprecated/src/config.ts deleted file mode 100644 index a9e888a4bdf..00000000000 --- a/suite-common/icons-deprecated/src/config.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { TokenAddress } from '@suite-common/wallet-types'; -import { Color } from '@trezor/theme'; - -import { IconName, FlagIconName, CryptoIconName } from './icons'; - -export interface IconProps { - name: IconName; - size?: IconSize | number; - color?: Color; -} - -export const iconSizes = { - extraSmall: 8, - small: 12, - medium: 16, - mediumLarge: 20, - large: 24, - extraLarge: 32, -} as const; - -export type IconSize = keyof typeof iconSizes; - -export const getIconSize = (size: IconSize | number) => - typeof size === 'string' ? iconSizes[size] : size; - -export interface FlagIconProps { - name: FlagIconName; - size?: FlagIconSize; -} - -export const flagIconSizes = { - extraSmall: 16, - small: 24, - medium: 30, -} as const; - -type FlagIconSize = keyof typeof flagIconSizes; - -export type CoinSymbol = CryptoIconName | TokenAddress; - -export interface CryptoIconProps { - symbol: CoinSymbol; - size?: CryptoIconSize; -} - -export const cryptoIconSizes = { - extraSmall: 16, - small: 24, - large: 42, -} as const; - -export type CryptoIconSize = keyof typeof cryptoIconSizes; diff --git a/suite-common/icons-deprecated/src/icons.ts b/suite-common/icons-deprecated/src/icons.ts index 746ad3e5f03..979eb76c561 100644 --- a/suite-common/icons-deprecated/src/icons.ts +++ b/suite-common/icons-deprecated/src/icons.ts @@ -238,12 +238,12 @@ export const cryptoIcons = { dsol: require('../assets/cryptoIcons/dsol.svg'), etc: require('../assets/cryptoIcons/etc.svg'), eth: require('../assets/cryptoIcons/eth.svg'), - op: require('../assets/cryptoIcons/op.svg'), gnt: require('../assets/cryptoIcons/gnt.svg'), ltc: require('../assets/cryptoIcons/ltc.svg'), - pol: require('../assets/cryptoIcons/pol.svg'), name: require('../assets/cryptoIcons/name.svg'), nmc: require('../assets/cryptoIcons/nmc.svg'), + op: require('../assets/cryptoIcons/op.svg'), + pol: require('../assets/cryptoIcons/pol.svg'), regtest: require('../assets/cryptoIcons/regtest.svg'), sol: require('../assets/cryptoIcons/sol.svg'), tada: require('../assets/cryptoIcons/tada.svg'), @@ -256,8 +256,3 @@ export const cryptoIcons = { zec: require('../assets/cryptoIcons/zec.svg'), } as const; export type CryptoIconName = keyof typeof cryptoIcons; - -export const flagIcons = { - cz: require('../assets/flags/cz.svg'), -} as const; -export type FlagIconName = keyof typeof flagIcons; diff --git a/suite-common/icons-deprecated/src/index.ts b/suite-common/icons-deprecated/src/index.ts index b8d0957e14a..0b3955407b0 100644 --- a/suite-common/icons-deprecated/src/index.ts +++ b/suite-common/icons-deprecated/src/index.ts @@ -1,9 +1,2 @@ export * from './icons'; export * from './tokenIcons'; -export * from './components/CryptoIcon'; -export * from './components/CryptoIconWithPercentage'; -export * from './components/DeviceModelIcon'; -export * from './components/FlagIcon'; -export * from './components/Icon'; -export * from './utils'; -export * from './config'; diff --git a/suite-common/icons-deprecated/src/useRerenderOnAppState.ios.ts b/suite-common/icons-deprecated/src/useRerenderOnAppState.ios.ts deleted file mode 100644 index df2cfd8dfb1..00000000000 --- a/suite-common/icons-deprecated/src/useRerenderOnAppState.ios.ts +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Hotfix is not needed for iOS. - */ -export const useRerenderOnAppStateChange = () => {}; diff --git a/suite-common/icons-deprecated/src/useRerenderOnAppState.ts b/suite-common/icons-deprecated/src/useRerenderOnAppState.ts deleted file mode 100644 index cdbf12032da..00000000000 --- a/suite-common/icons-deprecated/src/useRerenderOnAppState.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useEffect, useState } from 'react'; -import { AppState } from 'react-native'; - -/** - * It's necessary because Skia Android bug when Icon components are used in Modal component. - * After app is suspended to background and then resumed, icons are not rendered. - * This is a workaround for this issue. - * @see https://github.com/Shopify/react-native-skia/issues/2135 - */ -export const useRerenderOnAppStateChange = () => { - const [_, setRerender] = useState(0); - - useEffect(() => { - const handleChange = () => { - setRerender(prev => prev + 1); - }; - const subscription = AppState.addEventListener('change', handleChange); - - return () => subscription.remove(); - }, []); -}; diff --git a/suite-common/icons-deprecated/src/utils.ts b/suite-common/icons-deprecated/src/utils.ts deleted file mode 100644 index 83aba8e3217..00000000000 --- a/suite-common/icons-deprecated/src/utils.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { CryptoIconName, cryptoIcons, FlagIconName, flagIcons } from './icons'; - -export const isCryptoIconType = ( - iconName: CryptoIconName | FlagIconName, -): iconName is CryptoIconName => iconName in cryptoIcons; - -export const isFlagIconType = (iconName: CryptoIconName | FlagIconName): iconName is FlagIconName => - iconName in flagIcons; diff --git a/suite-common/icons-deprecated/src/webComponents/CryptoIcon.web.tsx b/suite-common/icons-deprecated/src/webComponents/CryptoIcon.web.tsx deleted file mode 100644 index 9bdcb8efe81..00000000000 --- a/suite-common/icons-deprecated/src/webComponents/CryptoIcon.web.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { CryptoIconProps } from '../config'; - -// This will be used for web in the future -export const CryptoIcon: React.FC = () => null; diff --git a/suite-common/icons-deprecated/src/webComponents/FlagIcon.web.tsx b/suite-common/icons-deprecated/src/webComponents/FlagIcon.web.tsx deleted file mode 100644 index ec83259c75e..00000000000 --- a/suite-common/icons-deprecated/src/webComponents/FlagIcon.web.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { FlagIconProps } from '../config'; - -// This will be used for web in the future -export const FlagIcon: React.FC = () => null; diff --git a/suite-common/icons-deprecated/src/webComponents/index.ts b/suite-common/icons-deprecated/src/webComponents/index.ts deleted file mode 100644 index 9b469afe93a..00000000000 --- a/suite-common/icons-deprecated/src/webComponents/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from '../icons'; -export * from '../config'; diff --git a/suite-common/icons-deprecated/styled.d.ts b/suite-common/icons-deprecated/styled.d.ts deleted file mode 100644 index a87c74d8242..00000000000 --- a/suite-common/icons-deprecated/styled.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -// import original module declarations -import 'styled-components'; -import { Colors } from '@trezor/theme'; - -declare module 'styled-components' { - export type DefaultTheme = Colors; -} diff --git a/suite-common/icons-deprecated/tsconfig.json b/suite-common/icons-deprecated/tsconfig.json index 61538369460..c7ebe855e21 100644 --- a/suite-common/icons-deprecated/tsconfig.json +++ b/suite-common/icons-deprecated/tsconfig.json @@ -1,11 +1,5 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, - "references": [ - { "path": "../wallet-config" }, - { "path": "../wallet-types" }, - { "path": "../../packages/connect" }, - { "path": "../../packages/styles" }, - { "path": "../../packages/theme" } - ] + "references": [] } diff --git a/suite-common/icons/.gitignore b/suite-common/icons/.gitignore index 027271b9b22..34af8b928d2 100644 --- a/suite-common/icons/.gitignore +++ b/suite-common/icons/.gitignore @@ -1 +1 @@ -files +assetsTemp diff --git a/suite-common/icons/README.md b/suite-common/icons/README.md index 3b6deec5f1c..bf04af002c0 100644 --- a/suite-common/icons/README.md +++ b/suite-common/icons/README.md @@ -1,14 +1,25 @@ # @suite-common/icons -This package contains fully-fledged icon components using the Skia engine. +This package contains source assets for icons used in the app. ## How to add or update icon 1. Export icon as SVG from Figma (no other types than SVG are allowed). 2. Rename icon to follow camel case convention (`Warning Circle.svg` => `warningCircle.svg`). 3. Run `yarn generate-icons` - this will do some necessary changes in SVG structure like removing dimensions and some optimization using [SVGO library](https://github.com/svg/svgo). It will also regenerate `src/icons.ts` file. -4. You can use your newly added icon ๐ŸŽ‰. Pay attention that file name without extension is what you need to put into Icon `name` prop: +4. You can use your newly added icon ๐ŸŽ‰. -```tsx - -``` +## How to update icon font for mobile app + +1. Register new icon in `generateIconFont.ts` file. +2. Run `yarn generate-icons` to generate new font file. +3. Sometimes you need to rebuild/restart app to see changes. + +## In case some icons are not rendering correctly in icon font + +1. Copy path from svg file of broken icon. +2. Open `https://codepen.io/herrstrietzel/pen/MWQVoLp` and paste path there. +3. Uncheck `directions` checkbox. +4. Inspect fix path output preview SVG in Chrome DevTools. +5. Copy SVG code from Chrome DevTools and replace original SVG code (do not use that fixed path directly, it won't work for some reason). +6. Regenerate icons with `yarn generate-icons`. diff --git a/suite-common/icons/assets/change.svg b/suite-common/icons/assets/change.svg new file mode 100644 index 00000000000..5e6f6da6e0b --- /dev/null +++ b/suite-common/icons/assets/change.svg @@ -0,0 +1,3 @@ + + + diff --git a/suite-common/icons/assets/trezorLogo.svg b/suite-common/icons/assets/trezorLogo.svg new file mode 100644 index 00000000000..7a7dfb2a464 --- /dev/null +++ b/suite-common/icons/assets/trezorLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/suite-common/icons/assets/trezorSafe3.svg b/suite-common/icons/assets/trezorSafe3.svg index 25e9f253b0a..ede391a19e6 100644 --- a/suite-common/icons/assets/trezorSafe3.svg +++ b/suite-common/icons/assets/trezorSafe3.svg @@ -1,4 +1,4 @@ - + diff --git a/suite-common/icons/assets/trezorSafe3Filled.svg b/suite-common/icons/assets/trezorSafe3Filled.svg index 7a7e7cc43f2..7a5d3518bab 100644 --- a/suite-common/icons/assets/trezorSafe3Filled.svg +++ b/suite-common/icons/assets/trezorSafe3Filled.svg @@ -1,3 +1,3 @@ - + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/ada.svg b/suite-common/icons/cryptoAssets/cryptoIcons/ada.svg new file mode 100644 index 00000000000..d902185c6cf --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/ada.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/bch.svg b/suite-common/icons/cryptoAssets/cryptoIcons/bch.svg new file mode 100644 index 00000000000..8ed5ebf15d8 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/bch.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/bnb.svg b/suite-common/icons/cryptoAssets/cryptoIcons/bnb.svg new file mode 100644 index 00000000000..c70e3f223a9 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/bnb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/btc.svg b/suite-common/icons/cryptoAssets/cryptoIcons/btc.svg new file mode 100644 index 00000000000..38fae0b1f33 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/btc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/btg.svg b/suite-common/icons/cryptoAssets/cryptoIcons/btg.svg new file mode 100644 index 00000000000..b6d0f2bec1e --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/btg.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/dash.svg b/suite-common/icons/cryptoAssets/cryptoIcons/dash.svg new file mode 100644 index 00000000000..5c06e0f75fc --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/dash.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/dgb.svg b/suite-common/icons/cryptoAssets/cryptoIcons/dgb.svg new file mode 100644 index 00000000000..a88f4b3f955 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/dgb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/doge.svg b/suite-common/icons/cryptoAssets/cryptoIcons/doge.svg new file mode 100644 index 00000000000..4365a3a65dd --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/doge.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/dsol.svg b/suite-common/icons/cryptoAssets/cryptoIcons/dsol.svg new file mode 100644 index 00000000000..f0b84892f74 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/dsol.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/etc.svg b/suite-common/icons/cryptoAssets/cryptoIcons/etc.svg new file mode 100644 index 00000000000..a931e1e1c92 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/etc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/eth.svg b/suite-common/icons/cryptoAssets/cryptoIcons/eth.svg new file mode 100644 index 00000000000..a2913eecc9c --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/eth.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/gnt.svg b/suite-common/icons/cryptoAssets/cryptoIcons/gnt.svg new file mode 100644 index 00000000000..bfd4a0a21ff --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/gnt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/ltc.svg b/suite-common/icons/cryptoAssets/cryptoIcons/ltc.svg new file mode 100644 index 00000000000..e859a4091e0 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/ltc.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/name.svg b/suite-common/icons/cryptoAssets/cryptoIcons/name.svg new file mode 100644 index 00000000000..16839ab91f4 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/name.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/nmc.svg b/suite-common/icons/cryptoAssets/cryptoIcons/nmc.svg new file mode 100644 index 00000000000..eb0e01e5bf5 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/nmc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/op.svg b/suite-common/icons/cryptoAssets/cryptoIcons/op.svg new file mode 100644 index 00000000000..2719391ea7b --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/op.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/pol.svg b/suite-common/icons/cryptoAssets/cryptoIcons/pol.svg new file mode 100644 index 00000000000..6e0f46c6d2d --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/pol.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/regtest.svg b/suite-common/icons/cryptoAssets/cryptoIcons/regtest.svg new file mode 100644 index 00000000000..c2dd1a91422 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/regtest.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/sol.svg b/suite-common/icons/cryptoAssets/cryptoIcons/sol.svg new file mode 100644 index 00000000000..317168ed4f3 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/sol.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/tada.svg b/suite-common/icons/cryptoAssets/cryptoIcons/tada.svg new file mode 100644 index 00000000000..5ce56a03eb4 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/tada.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/test.svg b/suite-common/icons/cryptoAssets/cryptoIcons/test.svg new file mode 100644 index 00000000000..c2dd1a91422 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/test.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/thol.svg b/suite-common/icons/cryptoAssets/cryptoIcons/thol.svg new file mode 100644 index 00000000000..9a9f29db0f6 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/thol.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/tsep.svg b/suite-common/icons/cryptoAssets/cryptoIcons/tsep.svg new file mode 100644 index 00000000000..9a9f29db0f6 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/tsep.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/txrp.svg b/suite-common/icons/cryptoAssets/cryptoIcons/txrp.svg new file mode 100644 index 00000000000..0415c2ca14f --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/txrp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/vtc.svg b/suite-common/icons/cryptoAssets/cryptoIcons/vtc.svg new file mode 100644 index 00000000000..f0ed9800bab --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/vtc.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/xrp.svg b/suite-common/icons/cryptoAssets/cryptoIcons/xrp.svg new file mode 100644 index 00000000000..6633690361c --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/xrp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/cryptoIcons/zec.svg b/suite-common/icons/cryptoAssets/cryptoIcons/zec.svg new file mode 100644 index 00000000000..658b020de82 --- /dev/null +++ b/suite-common/icons/cryptoAssets/cryptoIcons/zec.svg @@ -0,0 +1,4 @@ + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/cro.svg b/suite-common/icons/cryptoAssets/tokenIcons/cro.svg new file mode 100644 index 00000000000..f0e2ee55b94 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/cro.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/dai.svg b/suite-common/icons/cryptoAssets/tokenIcons/dai.svg new file mode 100644 index 00000000000..3575bd1f3c6 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/dai.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/erc20.svg b/suite-common/icons/cryptoAssets/tokenIcons/erc20.svg new file mode 100644 index 00000000000..80766141d47 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/erc20.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/leo.svg b/suite-common/icons/cryptoAssets/tokenIcons/leo.svg new file mode 100644 index 00000000000..06b45ed905e --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/leo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/link.svg b/suite-common/icons/cryptoAssets/tokenIcons/link.svg new file mode 100644 index 00000000000..08f1bd71ee8 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/link.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/okb.svg b/suite-common/icons/cryptoAssets/tokenIcons/okb.svg new file mode 100644 index 00000000000..03d75f4bcce --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/okb.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/shib.svg b/suite-common/icons/cryptoAssets/tokenIcons/shib.svg new file mode 100644 index 00000000000..930299c5633 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/shib.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/uni.svg b/suite-common/icons/cryptoAssets/tokenIcons/uni.svg new file mode 100644 index 00000000000..c21b6e0acf4 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/uni.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg b/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg new file mode 100644 index 00000000000..8e405afc18f --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/usdc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg b/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg new file mode 100644 index 00000000000..410c2262fea --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/usdt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg b/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg new file mode 100644 index 00000000000..4fe638b2278 --- /dev/null +++ b/suite-common/icons/cryptoAssets/tokenIcons/wbtc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts new file mode 100644 index 00000000000..fcece1ec094 --- /dev/null +++ b/suite-common/icons/generateIconFont.ts @@ -0,0 +1,157 @@ +/* eslint-disable no-console */ +// disable eslint import for this file because this whole file is using only devDependencies +// eslint-disable-next-line import/no-extraneous-dependencies +import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon'; +import fs, { constants } from 'fs'; +import path from 'path'; +// eslint-disable-next-line import/no-extraneous-dependencies +import chalk from 'chalk'; + +import { type IconName as AllAvailableIcons } from './src/icons'; +import { MOBILE_ICON_FONT_NAME } from './src/constants'; + +const usedIcons = [ + 'arrowDown', + 'arrowDown', + 'arrowLineDown', + 'arrowLineUp', + 'arrowLineUpRight', + 'arrowRight', + 'arrowsCounterClockwise', + 'arrowSquareOut', + 'arrowUp', + 'arrowUpRight', + 'arrowUpRight', + 'arrowURightDown', + 'backspace', + 'bookmark', + 'bugBeetle', + 'calendar', + 'caretCircleRight', + 'caretDown', + 'caretDown', + 'caretDownFilled', + 'caretLeft', + 'caretRight', + 'caretUp', + 'caretUpDown', + 'caretUpFilled', + 'change', + 'check', + 'checkCircle', + 'checkCircleFilled', + 'checks', + 'circleDashed', + 'clockClockwise', + 'coins', + 'coinVerticalCheck', + 'copy', + 'database', + 'detective', + 'discover', + 'eye', + 'eyeSlash', + 'facebookLogo', + 'filePdf', + 'fingerprint', + 'fingerprintSimple', + 'flag', + 'flagCheckered', + 'gear', + 'githubLogo', + 'house', + 'image', + 'info', + 'lifebuoy', + 'lightbulb', + 'link', + 'lock', + 'magnifyingGlass', + 'palette', + 'password', + 'pencil', + 'pencilSimpleLine', + 'piggyBank', + 'piggyBankFilled', + 'plus', + 'plusCircle', + 'qrCode', + 'question', + 'shareNetwork', + 'shieldWarning', + 'shuffle', + 'stack', + 'swap', + 'trashSimple', + 'treeStructure', + 'trezorLogo', + 'trezorModelOne', + 'trezorModelOneFilled', + 'trezorModelT', + 'trezorModelTFilled', + 'trezorSafe3', + 'trezorSafe3Filled', + 'trezorSafe5', + 'trezorSafe5Filled', + 'twitterLogo', + 'wallet', + 'warning', + 'warningCircle', + 'wifiSlash', + 'wifiX', + 'x', + 'xCircle', +] as const satisfies AllAvailableIcons[]; + +const tempAssetsDir = path.join(__dirname, 'assetsTemp'); +const iconFontsMobileDir = path.join(__dirname, 'iconFontsMobile'); + +(async () => { + console.log('Generating icon font for mobile...'); + + fs.rmSync(tempAssetsDir, { recursive: true, force: true }); + fs.rmSync(iconFontsMobileDir, { recursive: true, force: true }); + + fs.mkdirSync(tempAssetsDir); + + // copy used icons to assetsTemp + usedIcons.forEach(icon => { + fs.copyFileSync( + `./assets/${icon}.svg`, + `${tempAssetsDir}/${icon}.svg`, + constants.COPYFILE_FICLONE, + ); + }); + + // create iconFontsMobile folder + fs.mkdirSync('./iconFontsMobile'); + + try { + await generateFonts({ + inputDir: tempAssetsDir, + outputDir: iconFontsMobileDir, + name: MOBILE_ICON_FONT_NAME, + fontTypes: [FontAssetType.TTF], + assetTypes: [OtherAssetType.JSON], + formatOptions: { json: { indent: 4 } }, + templates: {}, + pathOptions: {}, + codepoints: {}, + fontHeight: 300, + round: undefined, // -- + descent: undefined, // Will use `svgicons2svgfont` defaults + normalize: false, // -- + tag: 'i', + prefix: 'icon', + fontsUrl: undefined, + }); + } catch (error) { + console.error(error); + process.exit(1); + } + + // append newline to the end of the file to satisfy prettier + fs.appendFileSync(`${iconFontsMobileDir}/${MOBILE_ICON_FONT_NAME}.json`, '\n'); + + console.log(chalk.green('Icon font for mobile generated.')); +})(); diff --git a/suite-common/icons/generateIcons.js b/suite-common/icons/generateIcons.js index 7a9da50a212..dcfa18f5800 100644 --- a/suite-common/icons/generateIcons.js +++ b/suite-common/icons/generateIcons.js @@ -1,11 +1,14 @@ /* eslint-disable import/no-extraneous-dependencies */ +import chalk from 'chalk'; + const fs = require('fs'); const path = require('path'); const prettier = require('prettier'); const { optimize } = require('svgo'); const iconsFilePath = './src/icons.ts'; +const cryptoIconsPath = './src/cryptoIcons.ts'; const assetTypesConfig = [ { @@ -15,6 +18,19 @@ const assetTypesConfig = [ }, ]; +const cryptoAssetsTypesConfig = [ + { + name: 'cryptoIcons', + dirname: 'cryptoAssets/cryptoIcons', + typeName: 'CryptoIconName', + }, + { + name: 'tokenIcons', + dirname: 'cryptoAssets/tokenIcons', + typeName: 'TokenIconName', + }, +]; + // https://github.com/svg/svgo#built-in-plugins const svgoConfig = { multipass: true, @@ -44,19 +60,19 @@ const optimizeSvgAssets = assetsDirname => { const assetFileNames = fs.readdirSync(assetsDir); return assetFileNames + .filter(fileName => fileName.endsWith('.svg')) .map(fileName => ({ fileName, content: fs.readFileSync(path.resolve(assetsDir, fileName)).toString(), })) - .map(({ fileName, content }) => ({ fileName, content: optimize(content, svgoConfig).data, })); }; -const getOptimizedAssetTypes = () => - assetTypesConfig.map(config => ({ +const getOptimizedAssetTypes = assetTypesArray => + assetTypesArray.map(config => ({ ...config, assets: optimizeSvgAssets(config.dirname), })); @@ -92,8 +108,8 @@ const writeOptimizedAssets = assetTypesArray => { }); }; -(async () => { - const assetTypes = getOptimizedAssetTypes(assetTypesConfig); +const generateFileForAssetTypes = async (assetTypesArray, outputFilePath) => { + const assetTypes = getOptimizedAssetTypes(assetTypesArray); const iconsFileContent = generateIconsFileContent(assetTypes); @@ -105,7 +121,16 @@ const writeOptimizedAssets = assetTypesArray => { const formattedIconTypesFileContent = await prettier.format(iconsFileContent, prettierConfig); - fs.writeFileSync(path.resolve(iconsFilePath), formattedIconTypesFileContent); + fs.writeFileSync(path.resolve(outputFilePath), formattedIconTypesFileContent); writeOptimizedAssets(assetTypes); +}; + +(async () => { + console.log('Generating icons TS file...'); + await generateFileForAssetTypes(assetTypesConfig, iconsFilePath); + console.log(chalk.green('Icons TS file generated successfully')); + console.log('Generating crypto icons TS file...'); + await generateFileForAssetTypes(cryptoAssetsTypesConfig, cryptoIconsPath); + console.log(chalk.green('Crypto icons TS file generated successfully')); })(); diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json new file mode 100644 index 00000000000..c5079e7e751 --- /dev/null +++ b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json @@ -0,0 +1,89 @@ +{ + "xCircle": 61697, + "x": 61698, + "wifiX": 61699, + "wifiSlash": 61700, + "warningCircle": 61701, + "warning": 61702, + "wallet": 61703, + "twitterLogo": 61704, + "trezorSafe5Filled": 61705, + "trezorSafe5": 61706, + "trezorSafe3Filled": 61707, + "trezorSafe3": 61708, + "trezorModelTFilled": 61709, + "trezorModelT": 61710, + "trezorModelOneFilled": 61711, + "trezorModelOne": 61712, + "trezorLogo": 61713, + "treeStructure": 61714, + "trashSimple": 61715, + "swap": 61716, + "stack": 61717, + "shuffle": 61718, + "shieldWarning": 61719, + "shareNetwork": 61720, + "question": 61721, + "qrCode": 61722, + "plusCircle": 61723, + "plus": 61724, + "piggyBankFilled": 61725, + "piggyBank": 61726, + "pencilSimpleLine": 61727, + "pencil": 61728, + "password": 61729, + "palette": 61730, + "magnifyingGlass": 61731, + "lock": 61732, + "link": 61733, + "lightbulb": 61734, + "lifebuoy": 61735, + "info": 61736, + "image": 61737, + "house": 61738, + "githubLogo": 61739, + "gear": 61740, + "flagCheckered": 61741, + "flag": 61742, + "fingerprintSimple": 61743, + "fingerprint": 61744, + "filePdf": 61745, + "facebookLogo": 61746, + "eyeSlash": 61747, + "eye": 61748, + "discover": 61749, + "detective": 61750, + "database": 61751, + "copy": 61752, + "coins": 61753, + "coinVerticalCheck": 61754, + "clockClockwise": 61755, + "circleDashed": 61756, + "checks": 61757, + "checkCircleFilled": 61758, + "checkCircle": 61759, + "check": 61760, + "change": 61761, + "caretUpFilled": 61762, + "caretUpDown": 61763, + "caretUp": 61764, + "caretRight": 61765, + "caretLeft": 61766, + "caretDownFilled": 61767, + "caretDown": 61768, + "caretCircleRight": 61769, + "calendar": 61770, + "bugBeetle": 61771, + "bookmark": 61772, + "backspace": 61773, + "arrowsCounterClockwise": 61774, + "arrowUpRight": 61775, + "arrowUp": 61776, + "arrowURightDown": 61777, + "arrowSquareOut": 61778, + "arrowRight": 61779, + "arrowLineUpRight": 61780, + "arrowLineUp": 61781, + "arrowLineDown": 61782, + "arrowDown": 61783 +} diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf new file mode 100644 index 00000000000..c7d1cc5bb94 Binary files /dev/null and b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf differ diff --git a/suite-common/icons/package.json b/suite-common/icons/package.json index 6774b0bb0e8..37c7a76dba8 100644 --- a/suite-common/icons/package.json +++ b/suite-common/icons/package.json @@ -9,9 +9,12 @@ "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'", "depcheck": "yarn g:depcheck", "type-check": "yarn g:tsc --build", - "generate-icons": "yarn g:tsx generateIcons.js" + "generate-icons": "yarn g:tsx generateIcons.js && yarn g:tsx generateIconFont.ts", + "generate-icon-font": "yarn g:tsx generateIconFont.ts" }, "devDependencies": { + "chalk": "4.1.2", + "fantasticon": "3.0.0", "prettier": "^3.3.2", "svgo": "3.2.0" } diff --git a/suite-common/icons/src/constants.ts b/suite-common/icons/src/constants.ts new file mode 100644 index 00000000000..72f27fb875f --- /dev/null +++ b/suite-common/icons/src/constants.ts @@ -0,0 +1 @@ +export const MOBILE_ICON_FONT_NAME = 'TrezorSuiteIcons'; diff --git a/suite-common/icons/src/cryptoIcons.ts b/suite-common/icons/src/cryptoIcons.ts new file mode 100644 index 00000000000..e9fff0d5542 --- /dev/null +++ b/suite-common/icons/src/cryptoIcons.ts @@ -0,0 +1,48 @@ +// !!! IMPORTANT: This file is autogenerated !!! +// If you want to add of modify icons please read README.md to find out how to do it + +export const cryptoIcons = { + ada: require('../cryptoAssets/cryptoIcons/ada.svg'), + bch: require('../cryptoAssets/cryptoIcons/bch.svg'), + bnb: require('../cryptoAssets/cryptoIcons/bnb.svg'), + btc: require('../cryptoAssets/cryptoIcons/btc.svg'), + btg: require('../cryptoAssets/cryptoIcons/btg.svg'), + dash: require('../cryptoAssets/cryptoIcons/dash.svg'), + dgb: require('../cryptoAssets/cryptoIcons/dgb.svg'), + doge: require('../cryptoAssets/cryptoIcons/doge.svg'), + dsol: require('../cryptoAssets/cryptoIcons/dsol.svg'), + etc: require('../cryptoAssets/cryptoIcons/etc.svg'), + eth: require('../cryptoAssets/cryptoIcons/eth.svg'), + gnt: require('../cryptoAssets/cryptoIcons/gnt.svg'), + ltc: require('../cryptoAssets/cryptoIcons/ltc.svg'), + name: require('../cryptoAssets/cryptoIcons/name.svg'), + nmc: require('../cryptoAssets/cryptoIcons/nmc.svg'), + op: require('../cryptoAssets/cryptoIcons/op.svg'), + pol: require('../cryptoAssets/cryptoIcons/pol.svg'), + regtest: require('../cryptoAssets/cryptoIcons/regtest.svg'), + sol: require('../cryptoAssets/cryptoIcons/sol.svg'), + tada: require('../cryptoAssets/cryptoIcons/tada.svg'), + test: require('../cryptoAssets/cryptoIcons/test.svg'), + thol: require('../cryptoAssets/cryptoIcons/thol.svg'), + tsep: require('../cryptoAssets/cryptoIcons/tsep.svg'), + txrp: require('../cryptoAssets/cryptoIcons/txrp.svg'), + vtc: require('../cryptoAssets/cryptoIcons/vtc.svg'), + xrp: require('../cryptoAssets/cryptoIcons/xrp.svg'), + zec: require('../cryptoAssets/cryptoIcons/zec.svg'), +} as const; +export type CryptoIconName = keyof typeof cryptoIcons; + +export const tokenIcons = { + cro: require('../cryptoAssets/tokenIcons/cro.svg'), + dai: require('../cryptoAssets/tokenIcons/dai.svg'), + erc20: require('../cryptoAssets/tokenIcons/erc20.svg'), + leo: require('../cryptoAssets/tokenIcons/leo.svg'), + link: require('../cryptoAssets/tokenIcons/link.svg'), + okb: require('../cryptoAssets/tokenIcons/okb.svg'), + shib: require('../cryptoAssets/tokenIcons/shib.svg'), + uni: require('../cryptoAssets/tokenIcons/uni.svg'), + usdc: require('../cryptoAssets/tokenIcons/usdc.svg'), + usdt: require('../cryptoAssets/tokenIcons/usdt.svg'), + wbtc: require('../cryptoAssets/tokenIcons/wbtc.svg'), +} as const; +export type TokenIconName = keyof typeof tokenIcons; diff --git a/suite-common/icons/src/icons.ts b/suite-common/icons/src/icons.ts index 931e08c9a8b..1f51a1710cd 100644 --- a/suite-common/icons/src/icons.ts +++ b/suite-common/icons/src/icons.ts @@ -572,6 +572,7 @@ export const icons = { chalkboardTeacherFilled: require('../assets/chalkboardTeacherFilled.svg'), champagne: require('../assets/champagne.svg'), champagneFilled: require('../assets/champagneFilled.svg'), + change: require('../assets/change.svg'), chargingStation: require('../assets/chargingStation.svg'), chargingStationFilled: require('../assets/chargingStationFilled.svg'), chartBar: require('../assets/chartBar.svg'), @@ -2422,6 +2423,7 @@ export const icons = { trezorDevicesFilled: require('../assets/trezorDevicesFilled.svg'), trezorKeep: require('../assets/trezorKeep.svg'), trezorKeepFilled: require('../assets/trezorKeepFilled.svg'), + trezorLogo: require('../assets/trezorLogo.svg'), trezorModelOne: require('../assets/trezorModelOne.svg'), trezorModelOneFilled: require('../assets/trezorModelOneFilled.svg'), trezorModelT: require('../assets/trezorModelT.svg'), diff --git a/suite-common/icons/src/index.ts b/suite-common/icons/src/index.ts index 838008a0b2f..7d3666cf45e 100644 --- a/suite-common/icons/src/index.ts +++ b/suite-common/icons/src/index.ts @@ -1 +1,2 @@ export * from './icons'; +export * from './constants'; diff --git a/suite-common/icons/tsconfig.json b/suite-common/icons/tsconfig.json index c7ebe855e21..3a661fc75b1 100644 --- a/suite-common/icons/tsconfig.json +++ b/suite-common/icons/tsconfig.json @@ -1,5 +1,6 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, + "include": [".", "**/*.json"], "references": [] } diff --git a/suite-native/accounts/package.json b/suite-native/accounts/package.json index f23f9cb090b..bab08140927 100644 --- a/suite-native/accounts/package.json +++ b/suite-native/accounts/package.json @@ -15,7 +15,6 @@ "@mobily/ts-belt": "^3.13.1", "@react-navigation/native": "6.1.18", "@suite-common/formatters": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/token-definitions": "workspace:*", "@suite-common/validators": "workspace:*", "@suite-common/wallet-config": "workspace:*", @@ -28,6 +27,7 @@ "@suite-native/feature-flags": "workspace:*", "@suite-native/formatters": "workspace:*", "@suite-native/forms": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/navigation": "workspace:*", "@suite-native/settings": "workspace:*", diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListEmptyPlaceholder.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListEmptyPlaceholder.tsx index 4dbb60419f3..18d1cbdac46 100644 --- a/suite-native/accounts/src/components/AccountsList/AccountsListEmptyPlaceholder.tsx +++ b/suite-native/accounts/src/components/AccountsList/AccountsListEmptyPlaceholder.tsx @@ -4,7 +4,7 @@ import { Box, PictogramTitleHeader } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { TxKeyPath, Translation } from '@suite-native/intl'; import { ReceiveStackRoutes, RootStackRoutes } from '@suite-native/navigation'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; const PLACEHOLDER_HEIGHT = 380; @@ -30,11 +30,11 @@ export const AccountsListEmptyPlaceholder = ({ const getIcon = (): IconName => { if (!isFilterEmpty) { - return 'searchLight'; + return 'magnifyingGlass'; } if (isReceiveRoute) { - return 'receive'; + return 'arrowLineDown'; } return 'discover'; diff --git a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx index 41ecb9ac6e8..3f3e0ace7ca 100644 --- a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx +++ b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx @@ -87,7 +87,7 @@ export const SearchableAccountsListScreenHeader = ({ } leftIcon={ setIsSearchActive(true)} colorScheme="tertiaryElevation1" size="medium" diff --git a/suite-native/accounts/src/components/SelectableNetworkItem.tsx b/suite-native/accounts/src/components/SelectableNetworkItem.tsx index 30a4931d371..e2e54563f4d 100644 --- a/suite-native/accounts/src/components/SelectableNetworkItem.tsx +++ b/suite-native/accounts/src/components/SelectableNetworkItem.tsx @@ -3,7 +3,7 @@ import { TouchableOpacity } from 'react-native'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { networks, NetworkSymbol } from '@suite-common/wallet-config'; import { useFormatters } from '@suite-common/formatters'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { Badge, Box, HStack, RoundedIcon, Text } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; import { isCoinWithTokens } from '@suite-native/tokens'; diff --git a/suite-native/accounts/tsconfig.json b/suite-native/accounts/tsconfig.json index d4b06c7edee..bc2807d8dd5 100644 --- a/suite-native/accounts/tsconfig.json +++ b/suite-native/accounts/tsconfig.json @@ -5,9 +5,6 @@ { "path": "../../suite-common/formatters" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/token-definitions" }, @@ -32,6 +29,7 @@ { "path": "../feature-flags" }, { "path": "../formatters" }, { "path": "../forms" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../navigation" }, { "path": "../settings" }, diff --git a/suite-native/alerts/package.json b/suite-native/alerts/package.json index 4813fece1ee..6c3902f376f 100644 --- a/suite-native/alerts/package.json +++ b/suite-native/alerts/package.json @@ -11,8 +11,8 @@ "type-check": "yarn g:tsc --build" }, "dependencies": { - "@suite-common/icons-deprecated": "workspace:*", "@suite-native/atoms": "workspace:*", + "@suite-native/icons": "workspace:*", "@trezor/styles": "workspace:*", "@trezor/theme": "workspace:*", "jotai": "1.9.1", diff --git a/suite-native/alerts/src/alertsAtoms.ts b/suite-native/alerts/src/alertsAtoms.ts index ec4537c1174..c2d1fdcb516 100644 --- a/suite-native/alerts/src/alertsAtoms.ts +++ b/suite-native/alerts/src/alertsAtoms.ts @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { atom } from 'jotai'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { ButtonAccessory, ButtonColorScheme, PictogramVariant } from '@suite-native/atoms'; import { NativeSpacing } from '@trezor/theme'; diff --git a/suite-native/alerts/tsconfig.json b/suite-native/alerts/tsconfig.json index 8f0db7b68fa..58c7fb0b0ab 100644 --- a/suite-native/alerts/tsconfig.json +++ b/suite-native/alerts/tsconfig.json @@ -2,10 +2,8 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../atoms" }, + { "path": "../icons" }, { "path": "../../packages/styles" }, { "path": "../../packages/theme" } ] diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts index 7d54f91b9b1..3ae94d8b692 100644 --- a/suite-native/app/app.config.ts +++ b/suite-native/app/app.config.ts @@ -86,6 +86,7 @@ const getPlugins = (): ExpoPlugins => { fonts: [ '../../packages/theme/fonts/TTSatoshi-Medium.otf', '../../packages/theme/fonts/TTSatoshi-DemiBold.otf', + `../../suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf`, ], }, ], diff --git a/suite-native/app/package.json b/suite-native/app/package.json index 659fb0416f8..f9871a936a2 100644 --- a/suite-native/app/package.json +++ b/suite-native/app/package.json @@ -37,7 +37,6 @@ "@suite-common/analytics": "workspace:*", "@suite-common/connect-init": "workspace:*", "@suite-common/formatters": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/message-system": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/suite-constants": "workspace:*", @@ -55,6 +54,7 @@ "@suite-native/device": "workspace:*", "@suite-native/device-authorization": "workspace:*", "@suite-native/discovery": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/message-system": "workspace:*", "@suite-native/module-accounts-import": "workspace:*", diff --git a/suite-native/app/src/navigation/enhanceTabOption.ts b/suite-native/app/src/navigation/enhanceTabOption.ts index 797dc1a0959..47d7ec9b0e3 100644 --- a/suite-native/app/src/navigation/enhanceTabOption.ts +++ b/suite-native/app/src/navigation/enhanceTabOption.ts @@ -1,4 +1,4 @@ -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { AppTabsParamList } from '@suite-native/navigation'; type TabOption = { diff --git a/suite-native/app/src/navigation/routes.ts b/suite-native/app/src/navigation/routes.ts index 93173a29bfb..c60ab265948 100644 --- a/suite-native/app/src/navigation/routes.ts +++ b/suite-native/app/src/navigation/routes.ts @@ -4,7 +4,7 @@ import { enhanceTabOption } from './enhanceTabOption'; const homeStack = enhanceTabOption({ routeName: AppTabsRoutes.HomeStack, - iconName: 'home', + iconName: 'house', label: 'Home', }); @@ -20,12 +20,12 @@ const accountsStack = enhanceTabOption({ const receiveStack = enhanceTabOption({ routeName: AppTabsRoutes.ReceiveStack, label: 'Receive', - iconName: 'arrowDownLight', + iconName: 'arrowLineDown', }); const settingsStack = enhanceTabOption({ routeName: AppTabsRoutes.SettingsStack, - iconName: 'settings', + iconName: 'gear', label: 'Settings', }); diff --git a/suite-native/app/src/snow/Snowflake.tsx b/suite-native/app/src/snow/Snowflake.tsx index 7157d6f2a68..96dd61d7983 100644 --- a/suite-native/app/src/snow/Snowflake.tsx +++ b/suite-native/app/src/snow/Snowflake.tsx @@ -14,7 +14,7 @@ import Animated, { withTiming, } from 'react-native-reanimated'; -import { Image } from 'expo-image'; +import { CryptoIcon } from '@suite-native/icons'; const HEIGHT = Dimensions.get('window').height; const topOffset = HEIGHT * 0.1; @@ -106,10 +106,7 @@ export const Snowflake: React.FC<{ if (props.glyph === 'btc') { return ( - + ); } diff --git a/suite-native/app/tsconfig.json b/suite-native/app/tsconfig.json index c594e090cde..470edf6259d 100644 --- a/suite-native/app/tsconfig.json +++ b/suite-native/app/tsconfig.json @@ -11,9 +11,6 @@ { "path": "../../suite-common/formatters" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/message-system" }, @@ -43,6 +40,7 @@ { "path": "../device" }, { "path": "../device-authorization" }, { "path": "../discovery" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../message-system" }, { "path": "../module-accounts-import" }, diff --git a/suite-native/assets/package.json b/suite-native/assets/package.json index cc29cb7dd43..099f6d0ebca 100644 --- a/suite-native/assets/package.json +++ b/suite-native/assets/package.json @@ -15,7 +15,6 @@ "@react-navigation/native": "6.1.18", "@suite-common/assets": "workspace:*", "@suite-common/formatters": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/token-definitions": "workspace:*", "@suite-common/wallet-config": "workspace:*", @@ -25,6 +24,7 @@ "@suite-native/atoms": "workspace:*", "@suite-native/config": "workspace:*", "@suite-native/formatters": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/navigation": "workspace:*", "@suite-native/settings": "workspace:*", diff --git a/suite-native/assets/src/components/AssetItem.tsx b/suite-native/assets/src/components/AssetItem.tsx index 6bf7c91c8ed..74ea465d57f 100644 --- a/suite-native/assets/src/components/AssetItem.tsx +++ b/suite-native/assets/src/components/AssetItem.tsx @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import { useFormatters } from '@suite-common/formatters'; -import { CryptoIconWithPercentage, Icon } from '@suite-common/icons-deprecated'; +import { CryptoIconWithPercentage, Icon } from '@suite-native/icons'; import { useSelectorDeepComparison } from '@suite-common/redux-utils'; import { TokenDefinitionsRootState } from '@suite-common/token-definitions'; import { NetworkSymbol } from '@suite-common/wallet-config'; @@ -117,7 +117,7 @@ export const AssetItem = React.memo(({ cryptoCurrencySymbol, onPress }: AssetIte badges={ <> - + {accountsPerAsset} diff --git a/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx b/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx index ca5714545d2..bf74be0938f 100644 --- a/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx +++ b/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ListItemSkeleton, HStack, Text } from '@suite-native/atoms'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Translation } from '@suite-native/intl'; export const DiscoveryAssetsLoader = ({ isListEmpty }: { isListEmpty: boolean }) => { @@ -19,7 +19,7 @@ export const DiscoveryAssetsLoader = ({ isListEmpty }: { isListEmpty: boolean }) <> - + {discoveryProgressText} diff --git a/suite-native/assets/tsconfig.json b/suite-native/assets/tsconfig.json index baf9b8a7599..859b6f035e2 100644 --- a/suite-native/assets/tsconfig.json +++ b/suite-native/assets/tsconfig.json @@ -6,9 +6,6 @@ { "path": "../../suite-common/formatters" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/redux-utils" }, @@ -28,6 +25,7 @@ { "path": "../atoms" }, { "path": "../config" }, { "path": "../formatters" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../navigation" }, { "path": "../settings" }, diff --git a/suite-native/atoms/package.json b/suite-native/atoms/package.json index d3dd9c4b3f2..8e7e1fcf692 100644 --- a/suite-native/atoms/package.json +++ b/suite-native/atoms/package.json @@ -15,8 +15,8 @@ "@mobily/ts-belt": "^3.13.1", "@shopify/flash-list": "1.7.1", "@shopify/react-native-skia": "1.3.11", - "@suite-common/icons-deprecated": "workspace:*", "@suite-native/config": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:^", "@suite-native/storage": "workspace:*", "@trezor/env-utils": "workspace:*", diff --git a/suite-native/atoms/src/Accordion/AccordionItem.tsx b/suite-native/atoms/src/Accordion/AccordionItem.tsx index fa8830056ed..5806e6a801c 100644 --- a/suite-native/atoms/src/Accordion/AccordionItem.tsx +++ b/suite-native/atoms/src/Accordion/AccordionItem.tsx @@ -64,7 +64,7 @@ export const AccordionItem = ({ title, content }: AccordionItemProps) => { {title} ; diff --git a/suite-native/atoms/src/Badge.tsx b/suite-native/atoms/src/Badge.tsx index e6cb2f991ed..88328d58445 100644 --- a/suite-native/atoms/src/Badge.tsx +++ b/suite-native/atoms/src/Badge.tsx @@ -3,14 +3,7 @@ import { ReactNode } from 'react'; import { G } from '@mobily/ts-belt'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { - Icon, - IconSize, - IconName, - CryptoIconName, - icons, - CryptoIcon, -} from '@suite-common/icons-deprecated'; +import { Icon, IconSize, IconName, CoinSymbolName, icons, CryptoIcon } from '@suite-native/icons'; import { Color } from '@trezor/theme'; import { Text } from './Text'; @@ -24,7 +17,7 @@ type BadgeProps = { label: ReactNode; variant?: BadgeVariant; size?: BadgeSize; - icon?: IconName | CryptoIconName; + icon?: IconName | CoinSymbolName; iconSize?: IconSize; elevation?: SurfaceElevation; isDisabled?: boolean; @@ -147,7 +140,7 @@ export const Badge = ({ ) : ( ); diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx index 9e2e40bb08e..ac352bc7624 100644 --- a/suite-native/atoms/src/Button/Button.tsx +++ b/suite-native/atoms/src/Button/Button.tsx @@ -4,9 +4,9 @@ import Animated, { FadeIn } from 'react-native-reanimated'; import { MergeExclusive } from 'type-fest'; +import { AnimatedIconColor, Icon, IconName, IconSize, icons } from '@suite-native/icons'; import { Color, TypographyStyle, nativeSpacings } from '@trezor/theme'; import { NativeStyleObject, prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon, IconColor, IconName, IconSize, icons } from '@suite-common/icons-deprecated'; import { Text } from '../Text'; import { useButtonPressAnimatedStyle } from './useButtonPressAnimatedStyle'; @@ -46,13 +46,13 @@ export type ButtonProps = Omit; -const buttonToIconSizeMap = { +export const buttonToIconSizeMap = { extraSmall: 'medium', small: 'medium', medium: 'mediumLarge', @@ -241,14 +241,20 @@ export const ButtonIcon = ({ iconName, color = 'iconDefault', size = 'medium', -}: ButtonIconProps) => ; +}: ButtonIconProps) => ( + +); const isIconName = (value: ButtonAccessory): value is IconName => - typeof value === 'string' && icons[value as IconName] !== undefined; + typeof value === 'string' && value in icons; // ButtonAccessoryView renders either a ButtonIcon or a provided custom element // iconColor and iconSize are only used when element is an IconName -export const ButtonAccessoryView = ({ element, iconColor, iconSize }: ButtonAccessoryViewProps) => { +export const ButtonAccessoryView = ({ + element, + iconColor = 'iconDefault', + iconSize = 'medium', +}: ButtonAccessoryViewProps) => { if (isIconName(element)) { return ; } @@ -256,6 +262,8 @@ export const ButtonAccessoryView = ({ element, iconColor, iconSize }: ButtonAcce return element; }; +const AnimatedPressable = Animated.createAnimatedComponent(Pressable); + export const Button = ({ viewLeft, viewRight, @@ -285,53 +293,46 @@ export const Button = ({ const handlePressOut = () => setIsPressed(false); return ( - - - {isLoading ? ( - - - - ) : ( - - {viewLeft && ( - - )} - - {children} - - {viewRight && ( - - )} - - )} - - + {isLoading ? ( + + + + ) : ( + + {viewLeft && ( + + )} + + {children} + + {viewRight && ( + + )} + + )} + ); }; diff --git a/suite-native/atoms/src/Button/IconButton.tsx b/suite-native/atoms/src/Button/IconButton.tsx index b8694836aab..c4cb00f4bed 100644 --- a/suite-native/atoms/src/Button/IconButton.tsx +++ b/suite-native/atoms/src/Button/IconButton.tsx @@ -1,58 +1,56 @@ -import { ReactNode, useState } from 'react'; +import { useState } from 'react'; import { Pressable, PressableProps } from 'react-native'; import Animated from 'react-native-reanimated'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName, Icon } from '@suite-native/icons'; import { + mergeNativeStyles, NativeStyleObject, prepareNativeStyle, - mergeNativeStyles, useNativeStyles, } from '@trezor/styles'; import { ButtonColorScheme, - ButtonSize, buttonSchemeToColorsMap, + ButtonSize, buttonStyle, ButtonStyleProps, - ButtonIcon, + buttonToIconSizeMap, } from './Button'; -import { Box } from '../Box'; -import { Text } from '../Text'; import { useButtonPressAnimatedStyle } from './useButtonPressAnimatedStyle'; - type IconButtonProps = Omit & { iconName: IconName; colorScheme?: ButtonColorScheme; size?: ButtonSize; style?: NativeStyleObject; - title?: ReactNode; isDisabled?: boolean; }; +const sizeDimensions = { + extraSmall: 36, + small: 40, + medium: 48, + large: 56, +} as const satisfies Record; const iconButtonStyle = mergeNativeStyles([ buttonStyle, prepareNativeStyle((_, { size, hasTitle }) => { - const sizeDimensions = { - extraSmall: 36, - small: 40, - medium: 48, - large: 56, - } as const satisfies Record; - return { - padding: 0, height: sizeDimensions[size], width: hasTitle ? 'auto' : sizeDimensions[size], + // padding must be set using paddingVertical and paddingHorizontal otverwise it won't override the default padding + paddingVertical: 0, + paddingHorizontal: 0, }; }), ]); +const AnimatedPressable = Animated.createAnimatedComponent(Pressable); + export const IconButton = ({ iconName, style, - title, colorScheme = 'primary', size = 'medium', isDisabled = false, @@ -74,34 +72,22 @@ export const IconButton = ({ const handlePressOut = () => setIsPressed(false); return ( - - - - - - - {title && ( - - {title} - - )} - - - + + + ); }; diff --git a/suite-native/atoms/src/Card/HeaderedCard.tsx b/suite-native/atoms/src/Card/HeaderedCard.tsx index 9356bf43ab6..ac53fe2d150 100644 --- a/suite-native/atoms/src/Card/HeaderedCard.tsx +++ b/suite-native/atoms/src/Card/HeaderedCard.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { RequireAllOrNone } from 'type-fest'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { Card, CardProps } from './Card'; import { Text } from '../Text'; diff --git a/suite-native/atoms/src/CheckBox.tsx b/suite-native/atoms/src/CheckBox.tsx index 90b0343dc15..a26bc6a838f 100644 --- a/suite-native/atoms/src/CheckBox.tsx +++ b/suite-native/atoms/src/CheckBox.tsx @@ -1,6 +1,6 @@ import { TouchableOpacity } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { NativeStyleObject, prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { ACCESSIBILITY_FONTSIZE_MULTIPLIER } from './Text'; diff --git a/suite-native/atoms/src/ErrorMessage.tsx b/suite-native/atoms/src/ErrorMessage.tsx index a5c48810587..37f87d07fbd 100644 --- a/suite-native/atoms/src/ErrorMessage.tsx +++ b/suite-native/atoms/src/ErrorMessage.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Box } from './Box'; import { Text } from './Text'; diff --git a/suite-native/atoms/src/Hint.tsx b/suite-native/atoms/src/Hint.tsx index dbcdc69fe57..7ccc3817154 100644 --- a/suite-native/atoms/src/Hint.tsx +++ b/suite-native/atoms/src/Hint.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { useNativeStyles, prepareNativeStyle, NativeStyleObject } from '@trezor/styles'; import { Color } from '@trezor/theme'; diff --git a/suite-native/atoms/src/Input/SearchInput.tsx b/suite-native/atoms/src/Input/SearchInput.tsx index 78aeada338c..a38047ddb07 100644 --- a/suite-native/atoms/src/Input/SearchInput.tsx +++ b/suite-native/atoms/src/Input/SearchInput.tsx @@ -1,7 +1,7 @@ import { useState, useRef } from 'react'; import { Pressable, TextInput, TouchableOpacity } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Box } from '../Box'; @@ -86,7 +86,7 @@ export const SearchInput = ({ return ( - + {isClearButtonVisible && ( - + )} diff --git a/suite-native/atoms/src/OrderedListIcon.tsx b/suite-native/atoms/src/OrderedListIcon.tsx index fcfa61c4050..1cb092f55e1 100644 --- a/suite-native/atoms/src/OrderedListIcon.tsx +++ b/suite-native/atoms/src/OrderedListIcon.tsx @@ -1,7 +1,7 @@ import { G } from '@mobily/ts-belt'; import { RequireExactlyOne } from 'type-fest'; -import { Icon, IconName, IconSize } from '@suite-common/icons-deprecated'; +import { Icon, IconName, IconSize } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Color } from '@trezor/theme'; diff --git a/suite-native/atoms/src/Pictogram.tsx b/suite-native/atoms/src/Pictogram.tsx index 0b81745f173..c35a963f6ab 100644 --- a/suite-native/atoms/src/Pictogram.tsx +++ b/suite-native/atoms/src/Pictogram.tsx @@ -1,4 +1,4 @@ -import { IconName, Icon } from '@suite-common/icons-deprecated'; +import { IconName, Icon } from '@suite-native/icons'; import { Color } from '@trezor/theme'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; diff --git a/suite-native/atoms/src/RoundedIcon.tsx b/suite-native/atoms/src/RoundedIcon.tsx index 66a16208172..d330be7cc2e 100644 --- a/suite-native/atoms/src/RoundedIcon.tsx +++ b/suite-native/atoms/src/RoundedIcon.tsx @@ -1,20 +1,13 @@ import { G } from '@mobily/ts-belt'; -import { - CryptoIcon, - CoinSymbol, - Icon, - IconName, - icons, - IconSize, -} from '@suite-common/icons-deprecated'; +import { CryptoIcon, CoinSymbolName, Icon, IconName, icons, IconSize } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Color } from '@trezor/theme'; import { Box, BoxProps } from './Box'; export type RoundedIconProps = { - name: IconName | CoinSymbol; + name: IconName | CoinSymbolName; color?: Color; iconSize?: IconSize; containerSize?: number; @@ -60,7 +53,7 @@ export const RoundedIcon = ({ {name in icons ? ( ) : ( - + )} ); diff --git a/suite-native/atoms/src/Select/Select.tsx b/suite-native/atoms/src/Select/Select.tsx index 4d0bcc488d4..8b708cd1951 100644 --- a/suite-native/atoms/src/Select/Select.tsx +++ b/suite-native/atoms/src/Select/Select.tsx @@ -1,13 +1,6 @@ import { useMemo, useState, ReactNode } from 'react'; -import { - CryptoIcon, - CryptoIconName, - FlagIcon, - FlagIconName, - isCryptoIconType, - isFlagIconType, -} from '@suite-common/icons-deprecated'; +import { CryptoIcon, CoinSymbolName } from '@suite-native/icons'; import { BottomSheet } from '../Sheet/BottomSheet'; import { SelectItemValue, SelectItem } from './SelectItem'; @@ -20,7 +13,7 @@ export type SelectItemType = { export type SelectItemExtendedType = SelectItemType & { - iconName?: FlagIconName | CryptoIconName; + iconName?: CoinSymbolName; }; type SelectProps = { @@ -47,14 +40,10 @@ export const Select = ({ setIsOpen(false); }; - const getIcon = (iconName?: CryptoIconName | FlagIconName, isSelectItem = false): ReactNode => { + const getIcon = (iconName?: CoinSymbolName, isSelectItem = false): ReactNode => { if (!iconName) return null; - if (isCryptoIconType(iconName)) { - return ; - } - if (isFlagIconType(iconName)) { - return ; - } + + return ; }; return ( diff --git a/suite-native/atoms/src/Select/SelectTrigger.tsx b/suite-native/atoms/src/Select/SelectTrigger.tsx index b3d1b84119f..4c1df8cf4ec 100644 --- a/suite-native/atoms/src/Select/SelectTrigger.tsx +++ b/suite-native/atoms/src/Select/SelectTrigger.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { TouchableOpacity } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Box } from '../Box'; @@ -52,7 +52,7 @@ export const SelectTrigger = ({ value, label, icon, handlePress }: SelectTrigger - + ); }; diff --git a/suite-native/atoms/src/SelectableItem.tsx b/suite-native/atoms/src/SelectableItem.tsx index d89f6e24d87..d40098ce3ce 100644 --- a/suite-native/atoms/src/SelectableItem.tsx +++ b/suite-native/atoms/src/SelectableItem.tsx @@ -83,7 +83,7 @@ export const SelectableItem = ({ key="defaultType" variant="greenSubtle" label={} - icon="checkCircleSolid" + icon="checkCircle" /> )} diff --git a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx index 7500c3f4cfe..1acab511fd6 100644 --- a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx +++ b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx @@ -90,7 +90,7 @@ export const BottomSheetHeader = ({ {isCloseDisplayed && ( - + {isBiometricsAuthButtonVisible && ( { const { applyStyle } = useNativeStyles(); - const icon: IconName = Platform.OS === 'ios' ? 'touchId' : 'fingerprint'; + const icon: IconName = Platform.OS === 'ios' ? 'fingerprintSimple' : 'fingerprint'; return ( ))} - + diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx index b4e7484bdb8..e46ee92b9b8 100644 --- a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx +++ b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx @@ -1,7 +1,7 @@ import { TouchableOpacity, View } from 'react-native'; import { useDispatch, useSelector } from 'react-redux'; -import { CryptoIcon } from '@suite-common/icons-deprecated'; +import { CryptoIcon } from '@suite-native/icons'; import { networks, NetworkSymbol } from '@suite-common/wallet-config'; import { Card, HStack, Text, Switch, VStack } from '@suite-native/atoms'; import { diff --git a/suite-native/coin-enabling/tsconfig.json b/suite-native/coin-enabling/tsconfig.json index f4eb3a52652..0cdc83ee680 100644 --- a/suite-native/coin-enabling/tsconfig.json +++ b/suite-native/coin-enabling/tsconfig.json @@ -2,9 +2,6 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/suite-utils" }, @@ -19,6 +16,7 @@ { "path": "../atoms" }, { "path": "../discovery" }, { "path": "../feature-flags" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../navigation" }, { "path": "../theme" }, diff --git a/suite-native/connection-status/package.json b/suite-native/connection-status/package.json index caa075affad..da400cf3f06 100644 --- a/suite-native/connection-status/package.json +++ b/suite-native/connection-status/package.json @@ -12,8 +12,8 @@ }, "dependencies": { "@react-native-community/netinfo": "11.3.2", - "@suite-common/icons-deprecated": "workspace:*", "@suite-native/atoms": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/settings": "workspace:*", "@trezor/styles": "workspace:*", diff --git a/suite-native/connection-status/src/OfflineBanner.tsx b/suite-native/connection-status/src/OfflineBanner.tsx index 2b0f10d5d3c..b697ae6ac8a 100644 --- a/suite-native/connection-status/src/OfflineBanner.tsx +++ b/suite-native/connection-status/src/OfflineBanner.tsx @@ -1,7 +1,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { View } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Text, HStack } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; diff --git a/suite-native/connection-status/tsconfig.json b/suite-native/connection-status/tsconfig.json index dc0a70fe615..ce5d4bc614f 100644 --- a/suite-native/connection-status/tsconfig.json +++ b/suite-native/connection-status/tsconfig.json @@ -2,10 +2,8 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../atoms" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../settings" }, { "path": "../../packages/styles" } diff --git a/suite-native/device-authorization/src/hooks/useHandlePassphraseMismatch.tsx b/suite-native/device-authorization/src/hooks/useHandlePassphraseMismatch.tsx index a326c0a5a31..44ffb537adf 100644 --- a/suite-native/device-authorization/src/hooks/useHandlePassphraseMismatch.tsx +++ b/suite-native/device-authorization/src/hooks/useHandlePassphraseMismatch.tsx @@ -64,7 +64,7 @@ export const useHandlePassphraseMismatch = () => { }); }, secondaryButtonVariant: 'redElevation0', - icon: 'warningTriangleLight', + icon: 'warning', pictogramVariant: 'red', }); } diff --git a/suite-native/device-manager/package.json b/suite-native/device-manager/package.json index e2b61a26c3b..370f75a638e 100644 --- a/suite-native/device-manager/package.json +++ b/suite-native/device-manager/package.json @@ -13,7 +13,6 @@ "dependencies": { "@react-navigation/native": "6.1.18", "@reduxjs/toolkit": "1.9.5", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/suite-types": "workspace:*", "@suite-common/wallet-core": "workspace:*", @@ -22,6 +21,7 @@ "@suite-native/device": "workspace:*", "@suite-native/feature-flags": "workspace:*", "@suite-native/formatters": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/link": "workspace:*", "@suite-native/navigation": "workspace:*", diff --git a/suite-native/device-manager/src/components/AddHiddenWalletButton.tsx b/suite-native/device-manager/src/components/AddHiddenWalletButton.tsx index d506214f087..546c7964b47 100644 --- a/suite-native/device-manager/src/components/AddHiddenWalletButton.tsx +++ b/suite-native/device-manager/src/components/AddHiddenWalletButton.tsx @@ -10,7 +10,7 @@ import { selectIsDeviceProtectedByPassphrase, } from '@suite-common/wallet-core'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { AuthorizeDeviceStackParamList, AuthorizeDeviceStackRoutes, @@ -72,7 +72,7 @@ export const AddHiddenWalletButton = () => { - + ); diff --git a/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx b/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx index b59a07e32c6..46facb765b9 100644 --- a/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx +++ b/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx @@ -2,7 +2,7 @@ import { Pressable } from 'react-native'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { HStack } from '@suite-native/atoms'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { TrezorDevice } from '@suite-common/suite-types'; import { DeviceItemContent } from './DeviceItemContent'; @@ -26,7 +26,7 @@ export const DeviceItem = ({ deviceState, onPress }: DeviceItemProps) => { - + ); diff --git a/suite-native/device-manager/src/components/DeviceItem/DeviceItemIcon.tsx b/suite-native/device-manager/src/components/DeviceItem/DeviceItemIcon.tsx index f2b6c840ef1..2e6166c0275 100644 --- a/suite-native/device-manager/src/components/DeviceItem/DeviceItemIcon.tsx +++ b/suite-native/device-manager/src/components/DeviceItem/DeviceItemIcon.tsx @@ -1,6 +1,6 @@ import { useSelector } from 'react-redux'; -import { Icon, DeviceModelIcon } from '@suite-common/icons-deprecated'; +import { Icon, DeviceModelIcon } from '@suite-native/icons'; import { DeviceRootState, PORTFOLIO_TRACKER_DEVICE_ID, @@ -26,5 +26,5 @@ export const DeviceItemIcon = ({ deviceId }: DeviceItemIconProps) => { return ; } - return ; + return ; }; diff --git a/suite-native/device-manager/src/components/DeviceSettingsButton.tsx b/suite-native/device-manager/src/components/DeviceSettingsButton.tsx index 25b9411dd9f..fe105ac326b 100644 --- a/suite-native/device-manager/src/components/DeviceSettingsButton.tsx +++ b/suite-native/device-manager/src/components/DeviceSettingsButton.tsx @@ -11,7 +11,7 @@ import { RootStackRoutes, StackToStackCompositeNavigationProps, } from '@suite-native/navigation'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { useDeviceManager } from '../hooks/useDeviceManager'; @@ -64,7 +64,7 @@ export const DeviceSettingsButton = ({ showAsFullWidth }: DeviceInfoButtonProps) showAsFullWidth={showAsFullWidth} > - + diff --git a/suite-native/device-manager/src/components/DeviceSwitch.tsx b/suite-native/device-manager/src/components/DeviceSwitch.tsx index e820b77f187..f2df92fe008 100644 --- a/suite-native/device-manager/src/components/DeviceSwitch.tsx +++ b/suite-native/device-manager/src/components/DeviceSwitch.tsx @@ -2,7 +2,7 @@ import { Pressable } from 'react-native'; import { useSelector } from 'react-redux'; import { Box, HStack } from '@suite-native/atoms'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { selectDeviceState, selectNumberOfDeviceInstances } from '@suite-common/wallet-core'; @@ -61,7 +61,7 @@ export const DeviceSwitch = () => { isSubHeaderForceHidden={true} /> )} - + diff --git a/suite-native/device-manager/src/components/DevicesToggleButton.tsx b/suite-native/device-manager/src/components/DevicesToggleButton.tsx index 30e52d5998e..2d8e07d8335 100644 --- a/suite-native/device-manager/src/components/DevicesToggleButton.tsx +++ b/suite-native/device-manager/src/components/DevicesToggleButton.tsx @@ -27,7 +27,7 @@ export const DevicesToggleButton = ({ isOpened, onDeviceButtonTap }: DevicesTogg colorScheme="tertiaryElevation0" viewRight={ - + } onPress={onDeviceButtonTap} diff --git a/suite-native/device-manager/src/components/WalletItem.tsx b/suite-native/device-manager/src/components/WalletItem.tsx index de86856fdd4..8e13dab3021 100644 --- a/suite-native/device-manager/src/components/WalletItem.tsx +++ b/suite-native/device-manager/src/components/WalletItem.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { HStack, Radio, Text } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { TrezorDevice } from '@suite-common/suite-types'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { selectDevice, selectDeviceByState } from '@suite-common/wallet-core'; @@ -85,7 +85,7 @@ export const WalletItem = ({ deviceState, onPress, isSelectable = true }: Wallet > diff --git a/suite-native/device-manager/tsconfig.json b/suite-native/device-manager/tsconfig.json index 8fabffeee4d..816747d0be1 100644 --- a/suite-native/device-manager/tsconfig.json +++ b/suite-native/device-manager/tsconfig.json @@ -2,9 +2,6 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/redux-utils" }, @@ -19,6 +16,7 @@ { "path": "../device" }, { "path": "../feature-flags" }, { "path": "../formatters" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../link" }, { "path": "../navigation" }, diff --git a/suite-native/device/src/hooks/useDetectDeviceError.tsx b/suite-native/device/src/hooks/useDetectDeviceError.tsx index c63a1d03710..f52b094feed 100644 --- a/suite-native/device/src/hooks/useDetectDeviceError.tsx +++ b/suite-native/device/src/hooks/useDetectDeviceError.tsx @@ -84,7 +84,7 @@ export const useDetectDeviceError = () => { showAlert({ title: , description: , - icon: 'warningCircleLight', + icon: 'warningCircle', pictogramVariant: 'red', primaryButtonTitle: , appendix: , @@ -101,7 +101,7 @@ export const useDetectDeviceError = () => { showAlert({ title: , description: , - icon: 'warningCircleLight', + icon: 'warningCircle', pictogramVariant: 'red', primaryButtonTitle: , primaryButtonVariant: 'tertiaryElevation1', @@ -190,7 +190,7 @@ export const useDetectDeviceError = () => { showAlert({ title: , description: , - icon: 'warningCircleLight', + icon: 'warningCircle', pictogramVariant: 'red', primaryButtonVariant: 'tertiaryElevation1', primaryButtonTitle: , @@ -220,7 +220,7 @@ export const useDetectDeviceError = () => { showAlert({ title: , description: , - icon: 'warningCircleLight', + icon: 'warningCircle', pictogramVariant: 'red', primaryButtonVariant: 'redBold', primaryButtonTitle: ( diff --git a/suite-native/forms/package.json b/suite-native/forms/package.json index 22e83ad03f0..bf38a905e12 100644 --- a/suite-native/forms/package.json +++ b/suite-native/forms/package.json @@ -13,8 +13,8 @@ "dependencies": { "@hookform/resolvers": "3.9.0", "@mobily/ts-belt": "^3.13.1", - "@suite-common/icons-deprecated": "workspace:*", "@suite-native/atoms": "workspace:*", + "@suite-native/icons": "workspace:*", "react": "18.2.0", "react-hook-form": "^7.53.0", "react-native": "0.75.2", diff --git a/suite-native/forms/src/fields/SecureTextInputField.tsx b/suite-native/forms/src/fields/SecureTextInputField.tsx index 5059b063cf6..a0387c6622d 100644 --- a/suite-native/forms/src/fields/SecureTextInputField.tsx +++ b/suite-native/forms/src/fields/SecureTextInputField.tsx @@ -3,7 +3,7 @@ import { Pressable } from 'react-native'; import { TextInput } from 'react-native/types'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { FieldProps, TextInputField } from './TextInputField'; diff --git a/suite-native/forms/tsconfig.json b/suite-native/forms/tsconfig.json index d04e414bf03..e8b7dc42390 100644 --- a/suite-native/forms/tsconfig.json +++ b/suite-native/forms/tsconfig.json @@ -2,9 +2,7 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, - { "path": "../atoms" } + { "path": "../atoms" }, + { "path": "../icons" } ] } diff --git a/suite-native/graph/package.json b/suite-native/graph/package.json index db7392e752c..d5226eef13e 100644 --- a/suite-native/graph/package.json +++ b/suite-native/graph/package.json @@ -19,7 +19,6 @@ "@shopify/react-native-skia": "1.3.11", "@suite-common/formatters": "workspace:*", "@suite-common/graph": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/suite-types": "workspace:*", "@suite-common/token-definitions": "workspace:*", @@ -30,6 +29,7 @@ "@suite-native/analytics": "workspace:*", "@suite-native/atoms": "workspace:*", "@suite-native/formatters": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/react-native-graph": "workspace:*", "@suite-native/storage": "workspace:*", diff --git a/suite-native/graph/src/components/GraphError.tsx b/suite-native/graph/src/components/GraphError.tsx index 773e6aef25a..cfffeaf634e 100644 --- a/suite-native/graph/src/components/GraphError.tsx +++ b/suite-native/graph/src/components/GraphError.tsx @@ -2,7 +2,7 @@ import Animated, { FadeInDown, FadeInUp, FadeOutUp } from 'react-native-reanimat import { Pressable } from 'react-native'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Text, VStack } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; @@ -31,7 +31,7 @@ const ErrorIcon = () => { return ( - + ); }; diff --git a/suite-native/graph/src/components/PriceChangeIndicator.tsx b/suite-native/graph/src/components/PriceChangeIndicator.tsx index 1a9fd380a4f..0622aa5f53a 100644 --- a/suite-native/graph/src/components/PriceChangeIndicator.tsx +++ b/suite-native/graph/src/components/PriceChangeIndicator.tsx @@ -1,7 +1,7 @@ import { Atom, useAtom } from 'jotai'; import { HStack, Text } from '@suite-native/atoms'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; type PriceChangeIndicatorProps = { @@ -20,7 +20,7 @@ type PercentageChangeProps = { hasPriceIncreasedAtom: HasPriceIncreasedAtom; }; -const PRICE_CHANGE_ICON_SIZE = 6; +const PRICE_CHANGE_ICON_SIZE = 12; const PercentageChange = ({ percentageChangeAtom, @@ -43,7 +43,7 @@ const PercentageChangeArrow = ({ }) => { const [hasPriceIncreased] = useAtom(hasPriceIncreasedAtom); - const iconName: IconName = hasPriceIncreased ? 'arrowUp' : 'arrowDown'; + const iconName: IconName = hasPriceIncreased ? 'caretUpFilled' : 'caretDownFilled'; return ( + { + if (symbol in networks) return cryptoIcons[symbol as CryptoIconName]; + + // the symbol in case of a token is a contract address. Since it is hexadecimal value, we can convert it + // to lowerCase to mach definition `suite-common/icons/icons.ts` without changing the meaning of the date. + return tokenIcons[symbol.toLowerCase() as TokenIconName] ?? tokenIcons[genericTokenIconName]; +}; + +export const CryptoIcon = ({ symbol, size = 'small' }: CryptoIconProps) => { + const iconFile = getIconFile(symbol); + const sizeNumber = typeof size === 'number' ? size : cryptoIconSizes[size]; + + return ( + + ); +}; diff --git a/suite-common/icons-deprecated/src/components/CryptoIconWithPercentage.tsx b/suite-native/icons/src/CryptoIconWithPercentage.tsx similarity index 98% rename from suite-common/icons-deprecated/src/components/CryptoIconWithPercentage.tsx rename to suite-native/icons/src/CryptoIconWithPercentage.tsx index c506c99c684..16511efaf5e 100644 --- a/suite-common/icons-deprecated/src/components/CryptoIconWithPercentage.tsx +++ b/suite-native/icons/src/CryptoIconWithPercentage.tsx @@ -14,8 +14,8 @@ import { } from '@shopify/react-native-skia'; import { useNativeStyles } from '@trezor/styles'; +import { CryptoIconName, cryptoIcons } from '@suite-common/icons/src/cryptoIcons'; -import { CryptoIconName, cryptoIcons } from '../icons'; import { PizzaIcon, usePizzaAnimation } from './PizzaIcon'; const CANVAS_SIZE = 48; diff --git a/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx b/suite-native/icons/src/DeviceModelIcon.tsx similarity index 72% rename from suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx rename to suite-native/icons/src/DeviceModelIcon.tsx index 9600d98c3eb..f0ff6931689 100644 --- a/suite-common/icons-deprecated/src/components/DeviceModelIcon.tsx +++ b/suite-native/icons/src/DeviceModelIcon.tsx @@ -1,7 +1,6 @@ import { DeviceModelInternal } from '@trezor/connect'; -import { IconSize } from '../config'; -import { IconName } from '../icons'; +import { IconName, IconSize } from './Icon'; import { Icon } from './Icon'; type DeviceModelIconProps = { @@ -10,11 +9,11 @@ type DeviceModelIconProps = { }; const icons = { - T1B1: 'trezorT1B1', - T2T1: 'trezorT2T1', - T2B1: 'trezorT3B1', - T3B1: 'trezorT3B1', - T3T1: 'trezorT3T1', + T1B1: 'trezorModelOne', + T2T1: 'trezorModelT', + T2B1: 'trezorSafe3', + T3B1: 'trezorSafe3', + T3T1: 'trezorSafe5', } as const satisfies Record; export const deviceModelToIconName = (deviceModel: DeviceModelInternal) => icons[deviceModel]; diff --git a/suite-native/icons/src/Icon.tsx b/suite-native/icons/src/Icon.tsx new file mode 100644 index 00000000000..1c99cd20f1b --- /dev/null +++ b/suite-native/icons/src/Icon.tsx @@ -0,0 +1,140 @@ +import { useMemo } from 'react'; +import { Platform, Text as RNText, TextProps } from 'react-native'; +import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated'; + +// @ts-expect-error This is not public RN API but it will make Text noticeable faster https://twitter.com/FernandoTheRojo/status/1707769877493121420 +import { NativeText } from 'react-native/Libraries/Text/TextNativeComponent'; + +import codepoints from '@suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json'; +import { useNativeStyles } from '@trezor/styles'; +import { Color, Colors, CSSColor } from '@trezor/theme'; +import { MOBILE_ICON_FONT_NAME } from '@suite-common/icons'; + +export type IconColor = Color | CSSColor; +export type AnimatedIconColor = Color | CSSColor | SharedValue; + +export const icons = codepoints; + +/** + * @description If you need to add a new icon, please follow these steps: + * 1. Add the icon name to the file `generateIconFonts.ts`. + * 2. Run `yarn generate-icons` to generate the new icon font. + */ +export type IconName = keyof typeof codepoints; + +export const iconSizes = { + extraSmall: 8, + small: 12, + medium: 16, + mediumLarge: 20, + large: 24, + extraLarge: 32, +} as const; + +export type IconSize = keyof typeof iconSizes; + +export const getIconSize = (size: IconSize | number) => + typeof size === 'string' ? iconSizes[size] : size; + +// NativeText improves the performance of the text rendering, but unfortunately it does not support iOS Accessibility font enlarging. +// Since iOS devices have enough computational power and the text optimization is not crucial, the NativeText is used only for Android. +const DefaultTextComponent: typeof RNText = Platform.select({ + android: NativeText, + ios: RNText, +}); + +export type IconProps = { + name: IconName; + size?: IconSize | number; + color?: IconColor; +} & Omit; + +export const Icon = ({ name, size = 'large', color = 'iconDefault', ...props }: IconProps) => { + const char = String.fromCodePoint(codepoints[name]); + const sizeNumber = getIconSize(size); + const { + utils: { colors }, + } = useNativeStyles(); + + const style = useMemo(() => { + const colorCode = color in colors ? colors[color as Color] : color; + + return { + fontFamily: MOBILE_ICON_FONT_NAME, + fontSize: sizeNumber, + lineHeight: sizeNumber, + color: colorCode, + }; + }, [sizeNumber, color, colors]); + + return ( + + {char} + + ); +}; + +function isCSSColor(value: any): value is CSSColor { + 'worklet'; + + return ( + typeof value === 'string' && + (value.startsWith('#') || + value.startsWith('rgb(') || + value.startsWith('rgba(') || + value === 'transparent' || + value === 'currentColor') + ); +} + +const getColorCode = (color: AnimatedIconColor, themeColors: Colors) => { + 'worklet'; + if (isCSSColor(color)) { + return color; + } + if (typeof color === 'string') { + return themeColors[color]; + } + + return color.value; +}; + +type AnimatedIconProps = Omit & { + color?: AnimatedIconColor; +}; + +// We have two versions of the Icon component, one that is animated and one that should be super fast without animations. +const AnimatedIcon = ({ + name, + size = 'large', + color = 'iconDefault', + ...props +}: AnimatedIconProps) => { + const char = String.fromCodePoint(codepoints[name]); + const { + utils: { colors }, + } = useNativeStyles(); + + const sizeNumber = getIconSize(size); + + const baseStyle = useMemo( + () => ({ + fontFamily: MOBILE_ICON_FONT_NAME, + fontSize: sizeNumber, + lineHeight: sizeNumber, + }), + [sizeNumber], + ); + + const style = useAnimatedStyle(() => ({ + color: getColorCode(color, colors), + })); + + return ( + + {char} + + ); +}; + +Icon.Animated = AnimatedIcon; diff --git a/suite-common/icons-deprecated/src/components/PizzaIcon.tsx b/suite-native/icons/src/PizzaIcon.tsx similarity index 100% rename from suite-common/icons-deprecated/src/components/PizzaIcon.tsx rename to suite-native/icons/src/PizzaIcon.tsx diff --git a/suite-native/icons/src/index.ts b/suite-native/icons/src/index.ts new file mode 100644 index 00000000000..1cdd7bc90d7 --- /dev/null +++ b/suite-native/icons/src/index.ts @@ -0,0 +1,5 @@ +export * from './Icon'; +export * from './CryptoIcon'; +export * from './CryptoIconWithPercentage'; +export * from './DeviceModelIcon'; +export * from './PizzaIcon'; diff --git a/suite-common/icons-deprecated/src/components/pizza1.png b/suite-native/icons/src/pizza1.png similarity index 100% rename from suite-common/icons-deprecated/src/components/pizza1.png rename to suite-native/icons/src/pizza1.png diff --git a/suite-common/icons-deprecated/src/components/pizza2.png b/suite-native/icons/src/pizza2.png similarity index 100% rename from suite-common/icons-deprecated/src/components/pizza2.png rename to suite-native/icons/src/pizza2.png diff --git a/suite-common/icons-deprecated/src/components/pizza3.png b/suite-native/icons/src/pizza3.png similarity index 100% rename from suite-common/icons-deprecated/src/components/pizza3.png rename to suite-native/icons/src/pizza3.png diff --git a/suite-native/icons/tsconfig.json b/suite-native/icons/tsconfig.json new file mode 100644 index 00000000000..304b4f20b42 --- /dev/null +++ b/suite-native/icons/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { "outDir": "libDev" }, + "references": [ + { "path": "../../suite-common/icons" }, + { + "path": "../../suite-common/wallet-config" + }, + { + "path": "../../suite-common/wallet-types" + }, + { "path": "../../packages/connect" }, + { "path": "../../packages/styles" }, + { "path": "../../packages/theme" } + ] +} diff --git a/suite-native/link/src/useOpenLink.ts b/suite-native/link/src/useOpenLink.ts index 44e794bdd61..fd17f2f2a0b 100644 --- a/suite-native/link/src/useOpenLink.ts +++ b/suite-native/link/src/useOpenLink.ts @@ -9,7 +9,7 @@ export const useOpenLink = () => { const showErrorToast = useCallback(() => { showToast({ variant: 'error', - icon: 'warningTriangle', + icon: 'warning', message: 'Unable to open the link', }); }, [showToast]); diff --git a/suite-native/message-system/package.json b/suite-native/message-system/package.json index 72ac5b31ca1..0fbb9c38ab9 100644 --- a/suite-native/message-system/package.json +++ b/suite-native/message-system/package.json @@ -13,7 +13,6 @@ "dependencies": { "@mobily/ts-belt": "^3.13.1", "@reduxjs/toolkit": "1.9.5", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/message-system": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/suite-types": "workspace:*", @@ -21,6 +20,7 @@ "@suite-native/atoms": "workspace:*", "@suite-native/connection-status": "workspace:*", "@suite-native/discovery": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/link": "workspace:*", "@trezor/styles": "workspace:*", diff --git a/suite-native/message-system/src/components/FeatureMessageScreen.tsx b/suite-native/message-system/src/components/FeatureMessageScreen.tsx index 375105ce3b9..bcb0b23a7ef 100644 --- a/suite-native/message-system/src/components/FeatureMessageScreen.tsx +++ b/suite-native/message-system/src/components/FeatureMessageScreen.tsx @@ -2,7 +2,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { A, G } from '@mobily/ts-belt'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { Box, Button, PictogramTitleHeader, PictogramVariant, VStack } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Variant } from '@suite-common/suite-types'; @@ -42,8 +42,8 @@ const variantMap = { const iconVariantMap = { info: 'info', - warning: 'warningTriangleLight', - critical: 'warningTriangleLight', + warning: 'warning', + critical: 'warning', } as const satisfies Record; export const FeatureMessageScreen = () => { diff --git a/suite-native/message-system/src/components/MessageBanner.tsx b/suite-native/message-system/src/components/MessageBanner.tsx index f51fe9a889f..d0b01643b85 100644 --- a/suite-native/message-system/src/components/MessageBanner.tsx +++ b/suite-native/message-system/src/components/MessageBanner.tsx @@ -7,7 +7,7 @@ import { messageSystemActions } from '@suite-common/message-system'; import { Color } from '@trezor/theme'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { HStack, Box, Text, RoundedIcon, VStack } from '@suite-native/atoms'; -import { IconName, Icon } from '@suite-common/icons-deprecated'; +import { IconName, Icon } from '@suite-native/icons'; import { Link } from '@suite-native/link'; type MessageBannerProps = { @@ -32,13 +32,13 @@ const MessageBannerVariantToStyleMap = { }, warning: { backgroundColor: 'backgroundAlertYellowSubtleOnElevation0', - icon: 'warningTriangle', + icon: 'warning', iconColor: 'iconAlertYellow', iconBackgroundColor: 'backgroundAlertYellowSubtleOnElevation1', }, critical: { backgroundColor: 'backgroundAlertRedSubtleOnElevation0', - icon: 'warningOctagon', + icon: 'warning', iconColor: 'iconAlertRed', iconBackgroundColor: 'backgroundAlertRedSubtleOnElevation1', }, @@ -95,7 +95,7 @@ const MessageCloseButton = ({ }) => ( + + + + + + + + + + + + + + + + + + + + diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx index de4e3ce51ee..71e22de940f 100644 --- a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx +++ b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx @@ -65,7 +65,7 @@ export const AccountImportOverviewCard = ({ {shouldDisplayDeleteIcon && ( { leftIcon={ !isDeviceAccountless ? ( {title}} subtitle={subtitle} variant="green" - icon="syncedCoin" + icon="coinVerticalCheck" /> diff --git a/suite-native/module-accounts-import/src/components/QRWithLaser.tsx b/suite-native/module-accounts-import/src/components/QRWithLaser.tsx index e0432b41348..e60239c2695 100644 --- a/suite-native/module-accounts-import/src/components/QRWithLaser.tsx +++ b/suite-native/module-accounts-import/src/components/QRWithLaser.tsx @@ -23,7 +23,6 @@ import { vec, } from '@shopify/react-native-skia'; -import { icons } from '@suite-common/icons-deprecated'; import { useNativeStyles } from '@trezor/styles'; import { ENDLESS_ANIMATION_VALUE } from '@suite-native/atoms'; @@ -96,7 +95,7 @@ export const QrWithLaser = () => { const { utils: { colors }, } = useNativeStyles(); - const qrCodeSvg = useSVG(icons.qrCodeImport); + const qrCodeSvg = useSVG(require('../assets/qrCodeImport.svg')); const progress = useSharedValue(0); diff --git a/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx b/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx index db4fe53bc28..bce7e0c032e 100644 --- a/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx +++ b/suite-native/module-accounts-import/src/components/TokenInfoCard.tsx @@ -1,6 +1,6 @@ import { useSelector } from 'react-redux'; -import { CryptoIcon } from '@suite-common/icons-deprecated'; +import { CryptoIcon } from '@suite-native/icons'; import { TokenDefinitionsRootState, selectIsSpecificCoinDefinitionKnown, diff --git a/suite-native/module-accounts-import/src/useShowImportError.ts b/suite-native/module-accounts-import/src/useShowImportError.ts index 0d4ec4e0d57..0f7ce4e1272 100644 --- a/suite-native/module-accounts-import/src/useShowImportError.ts +++ b/suite-native/module-accounts-import/src/useShowImportError.ts @@ -9,7 +9,7 @@ import { RootStackRoutes, StackToStackCompositeNavigationProps, } from '@suite-native/navigation'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { PictogramVariant } from '@suite-native/atoms'; type AlertError = 'invalidXpub' | 'invalidReceiveAddress' | 'networkError' | 'unknownError'; @@ -23,22 +23,22 @@ const alertErrorMap: Record = { invalidXpub: { title: 'Invalid Public address (XPUB)', description: 'Check and correct the public address (XPUB).', - icon: 'warningTriangleLight', + icon: 'warning', }, invalidReceiveAddress: { title: 'Receive address invalid', description: 'Check and correct the receive address.', - icon: 'warningTriangleLight', + icon: 'warning', }, networkError: { title: 'Network error', - icon: 'noConnection', + icon: 'wifiX', description: 'We were unable to retrieve the data from the blockchain due to a network error.', }, unknownError: { title: 'Something went wrong', - icon: 'warningTriangleLight', + icon: 'warning', description: 'We are unable to gather the data right now. Please try again.', }, }; diff --git a/suite-native/module-accounts-import/tsconfig.json b/suite-native/module-accounts-import/tsconfig.json index 8de3d08dfe1..21678864710 100644 --- a/suite-native/module-accounts-import/tsconfig.json +++ b/suite-native/module-accounts-import/tsconfig.json @@ -2,9 +2,6 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/redux-utils" }, @@ -38,6 +35,7 @@ { "path": "../feature-flags" }, { "path": "../formatters" }, { "path": "../forms" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../navigation" }, { "path": "../qr-code" }, diff --git a/suite-native/module-accounts-management/package.json b/suite-native/module-accounts-management/package.json index a65dc61ebf7..b6772f2213b 100644 --- a/suite-native/module-accounts-management/package.json +++ b/suite-native/module-accounts-management/package.json @@ -17,7 +17,6 @@ "@reduxjs/toolkit": "1.9.5", "@suite-common/fiat-services": "workspace:*", "@suite-common/graph": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/wallet-config": "workspace:*", "@suite-common/wallet-core": "workspace:*", "@suite-common/wallet-types": "workspace:*", @@ -31,6 +30,7 @@ "@suite-native/formatters": "workspace:*", "@suite-native/forms": "workspace:*", "@suite-native/graph": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/navigation": "workspace:*", "@suite-native/qr-code": "workspace:*", diff --git a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx index bb617daa680..2782e9b5893 100644 --- a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx +++ b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import { HStack } from '@suite-native/atoms'; import { CryptoAmountFormatter, TokenAmountFormatter } from '@suite-native/formatters'; -import { CryptoIcon } from '@suite-common/icons-deprecated'; +import { CryptoIcon } from '@suite-native/icons'; import { NetworkSymbol } from '@suite-common/wallet-config'; import { TokenAddress, TokenSymbol } from '@suite-common/wallet-types'; diff --git a/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx b/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx index 1693ef54cf7..36e07b0db2d 100644 --- a/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx +++ b/suite-native/module-accounts-management/src/components/AccountDetailScreenHeader.tsx @@ -42,7 +42,7 @@ export const AccountDetailScreenHeader = ({ diff --git a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx index a8ecfd9c8bc..9f5dbcc6e0e 100644 --- a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx +++ b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx @@ -14,7 +14,7 @@ import { selectAccountLabel, selectAccountNetworkSymbol, } from '@suite-common/wallet-core'; -import { CryptoIcon } from '@suite-common/icons-deprecated'; +import { CryptoIcon } from '@suite-native/icons'; import { useTranslate } from '@suite-native/intl'; type TokenAccountDetailScreenHeaderProps = { diff --git a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx index f9956dfd4ae..a9d722c2aed 100644 --- a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx +++ b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx @@ -151,7 +151,7 @@ export const TransactionListHeader = memo( diff --git a/suite-native/module-onboarding/package.json b/suite-native/module-onboarding/package.json index 4d449f656f7..996ea07e9ed 100644 --- a/suite-native/module-onboarding/package.json +++ b/suite-native/module-onboarding/package.json @@ -15,11 +15,11 @@ "@react-navigation/native": "6.1.18", "@react-navigation/native-stack": "6.11.0", "@reduxjs/toolkit": "1.9.5", - "@suite-common/icons-deprecated": "workspace:*", "@suite-native/analytics": "workspace:*", "@suite-native/atoms": "workspace:*", "@suite-native/device": "workspace:*", "@suite-native/feature-flags": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/link": "workspace:*", "@suite-native/navigation": "workspace:*", diff --git a/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx b/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx index d7b45675882..8160959639f 100644 --- a/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx +++ b/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Box, Text } from '@suite-native/atoms'; diff --git a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx index 3532ae7c247..0076f90001c 100644 --- a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx +++ b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx @@ -17,7 +17,7 @@ import { } from '@suite-native/navigation'; import { Box, Button, Stack, Switch, Text, VStack } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { EventType, analytics } from '@suite-native/analytics'; import { Link } from '@suite-native/link'; @@ -138,7 +138,7 @@ export const AnalyticsConsentScreen = () => { justifyContent="space-between" style={applyStyle(cardStyle)} > - + diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx index 4b05235c9d6..fd44ddb367b 100644 --- a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx +++ b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx @@ -9,7 +9,7 @@ import { StackNavigationProps, } from '@suite-native/navigation'; import { Translation } from '@suite-native/intl'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { OnboardingFooter } from '../components/OnboardingFooter'; @@ -57,7 +57,7 @@ export const WelcomeScreen = () => { - + diff --git a/suite-native/module-onboarding/tsconfig.json b/suite-native/module-onboarding/tsconfig.json index bc45d8ec66a..572b4d5cbf6 100644 --- a/suite-native/module-onboarding/tsconfig.json +++ b/suite-native/module-onboarding/tsconfig.json @@ -2,13 +2,11 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "outDir": "libDev" }, "references": [ - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../analytics" }, { "path": "../atoms" }, { "path": "../device" }, { "path": "../feature-flags" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../link" }, { "path": "../navigation" }, diff --git a/suite-native/module-send/package.json b/suite-native/module-send/package.json index 630648ce8fb..f4790ddafb0 100644 --- a/suite-native/module-send/package.json +++ b/suite-native/module-send/package.json @@ -16,7 +16,6 @@ "@react-navigation/native-stack": "6.11.0", "@reduxjs/toolkit": "1.9.5", "@suite-common/formatters": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/redux-utils": "workspace:*", "@suite-common/suite-utils": "workspace:*", "@suite-common/validators": "workspace:*", @@ -34,6 +33,7 @@ "@suite-native/formatters": "workspace:*", "@suite-native/forms": "workspace:*", "@suite-native/helpers": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/navigation": "workspace:*", "@suite-native/qr-code": "workspace:*", diff --git a/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx b/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx index ed6e55bfe3a..ea7f47117e3 100644 --- a/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx +++ b/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { TouchableOpacity } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Translation } from '@suite-native/intl'; import { useAlert } from '@suite-native/alerts'; @@ -27,7 +27,7 @@ export const AddressReviewHelpSheet = ({ body, title, subtitle }: AddressReviewH return ( - + ); }; diff --git a/suite-native/module-send/src/components/AddressReviewStep.tsx b/suite-native/module-send/src/components/AddressReviewStep.tsx index 1f0fadea1aa..9fc30a3dae7 100644 --- a/suite-native/module-send/src/components/AddressReviewStep.tsx +++ b/suite-native/module-send/src/components/AddressReviewStep.tsx @@ -29,7 +29,7 @@ const getIconProps = (stepNumber: AddressReviewStepProps['stepNumber']): Ordered : { iconBackgroundColor: 'backgroundPrimaryDefault', iconNumber: undefined, - iconName: 'flagFinish', + iconName: 'flagCheckered', iconColor: 'iconDefaultInverted', iconSize: 'medium', }; diff --git a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx index da8b454994c..dde5f5798b9 100644 --- a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx +++ b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx @@ -1,7 +1,7 @@ import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'; import { Text, HStack } from '@suite-native/atoms'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Translation } from '@suite-native/intl'; diff --git a/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx b/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx index 5034fe64e04..88d7ea0a2db 100644 --- a/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx +++ b/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx @@ -1,7 +1,7 @@ import { TouchableOpacity } from 'react-native'; import { useState } from 'react'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { ScanQRBottomSheet } from '@suite-native/qr-code'; import { Translation } from '@suite-native/intl'; import { useNativeStyles } from '@trezor/styles'; diff --git a/suite-native/module-send/src/components/ReviewOutputStatusBadge.tsx b/suite-native/module-send/src/components/ReviewOutputStatusBadge.tsx index 56849d3e677..c470e749ad3 100644 --- a/suite-native/module-send/src/components/ReviewOutputStatusBadge.tsx +++ b/suite-native/module-send/src/components/ReviewOutputStatusBadge.tsx @@ -6,7 +6,7 @@ import Animated, { useAnimatedStyle, } from 'react-native-reanimated'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { ReviewOutputState } from '@suite-common/wallet-types'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { ENDLESS_ANIMATION_VALUE } from '@suite-native/atoms'; @@ -50,9 +50,7 @@ export const ReviewOutputStatusBadge = ({ status }: { status: ReviewOutputState })); if (status === 'success') { - return ( - - ); + return ; } const isActive = status === 'active'; diff --git a/suite-native/module-send/src/components/SendScreenSubHeader.tsx b/suite-native/module-send/src/components/SendScreenSubHeader.tsx index 8e14625bfb2..afca0a84f87 100644 --- a/suite-native/module-send/src/components/SendScreenSubHeader.tsx +++ b/suite-native/module-send/src/components/SendScreenSubHeader.tsx @@ -1,6 +1,6 @@ import { useSelector } from 'react-redux'; -import { CryptoIcon } from '@suite-common/icons-deprecated'; +import { CryptoIcon } from '@suite-native/icons'; import { AccountsRootState, selectAccountLabel, diff --git a/suite-native/module-send/src/components/SwitchAmountsButton.tsx b/suite-native/module-send/src/components/SwitchAmountsButton.tsx index 48212e2073d..470a5ad15d5 100644 --- a/suite-native/module-send/src/components/SwitchAmountsButton.tsx +++ b/suite-native/module-send/src/components/SwitchAmountsButton.tsx @@ -1,6 +1,6 @@ import { TouchableOpacity } from 'react-native'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Box } from '@suite-native/atoms'; @@ -29,7 +29,7 @@ export const SwitchAmountsButton = ({ onPress }: SwitchAmountsButtonProps) => { return ( - + ); diff --git a/suite-native/module-send/tsconfig.json b/suite-native/module-send/tsconfig.json index ccae51d6e78..81403001475 100644 --- a/suite-native/module-send/tsconfig.json +++ b/suite-native/module-send/tsconfig.json @@ -5,9 +5,6 @@ { "path": "../../suite-common/formatters" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/redux-utils" }, @@ -39,6 +36,7 @@ { "path": "../formatters" }, { "path": "../forms" }, { "path": "../helpers" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../navigation" }, { "path": "../qr-code" }, diff --git a/suite-native/module-settings/package.json b/suite-native/module-settings/package.json index 40afa7ee7cf..7c9970aa361 100644 --- a/suite-native/module-settings/package.json +++ b/suite-native/module-settings/package.json @@ -18,7 +18,6 @@ "@react-navigation/native-stack": "6.11.0", "@reduxjs/toolkit": "1.9.5", "@suite-common/analytics": "workspace:*", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/suite-config": "workspace:*", "@suite-common/suite-constants": "workspace:*", "@suite-common/suite-types": "workspace:*", @@ -34,6 +33,7 @@ "@suite-native/device-manager": "workspace:*", "@suite-native/discovery": "workspace:*", "@suite-native/feature-flags": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/link": "workspace:*", "@suite-native/navigation": "workspace:*", diff --git a/suite-native/module-settings/src/components/AboutUsBanners.tsx b/suite-native/module-settings/src/components/AboutUsBanners.tsx index 99902dc96f2..75617aae0f6 100644 --- a/suite-native/module-settings/src/components/AboutUsBanners.tsx +++ b/suite-native/module-settings/src/components/AboutUsBanners.tsx @@ -2,7 +2,7 @@ import { Card, HStack, IconButton, Text, VStack } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Color } from '@trezor/theme'; import { useOpenLink } from '@suite-native/link'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; const cardStyle = prepareNativeStyle<{ backgroundColor: Color }>((utils, { backgroundColor }) => ({ paddingHorizontal: utils.spacings.sp24, @@ -28,7 +28,7 @@ export const AboutUsBanners = () => { - + { openLink('https://www.facebook.com/trezor.io')} @@ -58,7 +58,7 @@ export const AboutUsBanners = () => { openLink('https://twitter.com/Trezor')} @@ -66,7 +66,7 @@ export const AboutUsBanners = () => { openLink('https://github.com/trezor')} diff --git a/suite-native/module-settings/src/components/FeaturesSettings.tsx b/suite-native/module-settings/src/components/FeaturesSettings.tsx index aec1eb6471f..ab553e9ab5d 100644 --- a/suite-native/module-settings/src/components/FeaturesSettings.tsx +++ b/suite-native/module-settings/src/components/FeaturesSettings.tsx @@ -40,7 +40,7 @@ export const FeaturesSettings = () => { }> {isDevButtonVisible && ( } subtitle={} onPress={() => navigation.navigate(RootStackRoutes.DevUtilsStack)} diff --git a/suite-native/module-settings/src/components/SettingsSection.tsx b/suite-native/module-settings/src/components/SettingsSection.tsx index 58f633f1eb6..c6de799ac27 100644 --- a/suite-native/module-settings/src/components/SettingsSection.tsx +++ b/suite-native/module-settings/src/components/SettingsSection.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { TouchableOpacity } from 'react-native'; import { Box, Text, VStack, Card } from '@suite-native/atoms'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; type SettingsSectionProps = { title: ReactNode; diff --git a/suite-native/module-settings/src/components/SettingsSectionItem.tsx b/suite-native/module-settings/src/components/SettingsSectionItem.tsx index 502b7be61ee..25a8edb23fe 100644 --- a/suite-native/module-settings/src/components/SettingsSectionItem.tsx +++ b/suite-native/module-settings/src/components/SettingsSectionItem.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { ActivityIndicator, TouchableOpacity, View } from 'react-native'; import { Box } from '@suite-native/atoms'; -import { Icon, IconName } from '@suite-common/icons-deprecated'; +import { Icon, IconName } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { SettingsSectionItemIcon } from './SettingsSectionItemIcon'; @@ -44,7 +44,7 @@ export const SettingsSectionItem = ({ {isLoading ? ( ) : ( - + )} diff --git a/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx b/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx index 0a7d106ce76..f3341f17c65 100644 --- a/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx +++ b/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx @@ -1,5 +1,5 @@ import { Box, RoundedIcon } from '@suite-native/atoms'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; type SettingsSectionItemIconProps = { iconName: IconName; diff --git a/suite-native/module-settings/src/components/SupportSettings.tsx b/suite-native/module-settings/src/components/SupportSettings.tsx index cf14cac5c9a..af9424adb1f 100644 --- a/suite-native/module-settings/src/components/SupportSettings.tsx +++ b/suite-native/module-settings/src/components/SupportSettings.tsx @@ -25,7 +25,7 @@ export const SupportSettings = () => { return ( } subtitle={} onPress={() => navigation.navigate(SettingsStackRoutes.SettingsFAQ)} @@ -38,7 +38,7 @@ export const SupportSettings = () => { } - iconName="trezorT3T1" + iconName="trezorSafe5" onPress={() => navigation.navigate(SettingsStackRoutes.SettingsAbout)} testID="@settings/about" /> diff --git a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx index 063ee62cc59..1d88f763ec4 100644 --- a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx +++ b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { TouchableOpacity } from 'react-native'; import { Box, Text, Switch, RoundedIcon } from '@suite-native/atoms'; -import { IconName } from '@suite-common/icons-deprecated'; +import { IconName } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; type TouchableSwitchRowProps = { diff --git a/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx b/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx index 86fcaa31f64..9afc3abb05c 100644 --- a/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx +++ b/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx @@ -5,7 +5,7 @@ import { Translation } from '@suite-native/intl'; import { ConnectionDot } from '@suite-native/device-manager'; import { selectPhysicalDevicesGrouppedById } from '@suite-common/wallet-core'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { DeviceModelIcon } from '@suite-common/icons-deprecated'; +import { DeviceModelIcon } from '@suite-native/icons'; import { About, AboutProps } from './About'; import { WalletRow } from './WalletRow'; diff --git a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx index 0f8421785b3..96756bf4dbd 100644 --- a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx +++ b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx @@ -12,7 +12,7 @@ import { import { analytics, EventType } from '@suite-native/analytics'; import { useAlert } from '@suite-native/alerts'; import { useToast } from '@suite-native/toasts'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { TrezorDevice } from '@suite-common/suite-types'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { setViewOnlyCancelationTimestamp } from '@suite-native/settings'; @@ -113,10 +113,7 @@ export const WalletRow = ({ device }: WalletRowProps) => { return ( - + {walletNameLabel} {showToggleButton ? ( diff --git a/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx b/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx index cc18121cbb8..9e55eb5076d 100644 --- a/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx +++ b/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx @@ -31,12 +31,12 @@ export const SettingsAboutUsScreen = () => { diff --git a/suite-native/module-settings/src/screens/SettingsPrivacyAndSecurity.tsx b/suite-native/module-settings/src/screens/SettingsPrivacyAndSecurity.tsx index f6e97fc332a..5d8ee43d12f 100644 --- a/suite-native/module-settings/src/screens/SettingsPrivacyAndSecurity.tsx +++ b/suite-native/module-settings/src/screens/SettingsPrivacyAndSecurity.tsx @@ -98,7 +98,7 @@ const BiometricsSwitchRow = () => { isChecked={isBiometricsOptionEnabled} onChange={toggleBiometricsOption} text="Biometrics" - iconName={Platform.OS === 'ios' ? 'touchId' : 'fingerprint'} + iconName={Platform.OS === 'ios' ? 'fingerprintSimple' : 'fingerprint'} description={ Use facial or fingerprint verification to unlock the app diff --git a/suite-native/module-settings/tsconfig.json b/suite-native/module-settings/tsconfig.json index 0bbf9190940..136230c339c 100644 --- a/suite-native/module-settings/tsconfig.json +++ b/suite-native/module-settings/tsconfig.json @@ -5,9 +5,6 @@ { "path": "../../suite-common/analytics" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/suite-config" }, @@ -33,6 +30,7 @@ { "path": "../device-manager" }, { "path": "../discovery" }, { "path": "../feature-flags" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../link" }, { "path": "../navigation" }, diff --git a/suite-native/module-staking-management/package.json b/suite-native/module-staking-management/package.json index 00b2c98437f..25a77668a36 100644 --- a/suite-native/module-staking-management/package.json +++ b/suite-native/module-staking-management/package.json @@ -12,10 +12,10 @@ }, "dependencies": { "@react-navigation/native": "6.1.18", - "@suite-common/icons-deprecated": "workspace:*", "@suite-common/wallet-core": "workspace:*", "@suite-native/atoms": "workspace:*", "@suite-native/formatters": "workspace:*", + "@suite-native/icons": "workspace:*", "@suite-native/intl": "workspace:*", "@suite-native/link": "workspace:*", "@suite-native/navigation": "workspace:*", diff --git a/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx b/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx index 6c397119dac..9b30de2bc33 100644 --- a/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx +++ b/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx @@ -1,7 +1,7 @@ import { TouchableOpacity } from 'react-native'; import { useSelector } from 'react-redux'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { AccountsRootState, selectAccountNetworkSymbol } from '@suite-common/wallet-core'; import { Box, Card, Text } from '@suite-native/atoms'; import { CryptoAmountFormatter, CryptoToFiatAmountFormatter } from '@suite-native/formatters'; diff --git a/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx b/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx index 36e3ab5a1d2..c883ec69988 100644 --- a/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx +++ b/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx @@ -12,7 +12,7 @@ import { } from '@suite-native/navigation'; import { Translation } from '@suite-native/intl'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { AccountsRootState, selectAccountLabel } from '@suite-common/wallet-core'; const headerStyle = prepareNativeStyle(utils => ({ diff --git a/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx b/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx index 3e01191d63a..0aec62b1ced 100644 --- a/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx +++ b/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx @@ -48,7 +48,7 @@ export const StakingUnavailableBottomSheet = ({ ); diff --git a/suite-native/qr-code/src/components/QRCodeScanner.tsx b/suite-native/qr-code/src/components/QRCodeScanner.tsx index 46d80c70895..b117aea42e0 100644 --- a/suite-native/qr-code/src/components/QRCodeScanner.tsx +++ b/suite-native/qr-code/src/components/QRCodeScanner.tsx @@ -6,7 +6,7 @@ import { BarcodeScanningResult, CameraView, PermissionStatus } from 'expo-camera import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Box, HStack, Loader, VStack, Text } from '@suite-native/atoms'; import { nativeSpacings } from '@trezor/theme'; -import { Icon } from '@suite-common/icons-deprecated'; +import { Icon } from '@suite-native/icons'; import { Translation } from '@suite-native/intl'; import { CameraPermissionError } from './CameraPermissionError'; diff --git a/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx b/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx index 9acc571c0d9..b83a3bb4333 100644 --- a/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx +++ b/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx @@ -14,7 +14,7 @@ export const XpubOverlayWarning = () => { diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx index ad12d1e4630..b77120abef2 100644 --- a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx @@ -1,14 +1,14 @@ import { Box, RoundedIcon } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { TransactionType } from '@suite-common/wallet-types'; -import { CoinSymbol, CryptoIcon, IconName, IconSize } from '@suite-common/icons-deprecated'; +import { CoinSymbolName, CryptoIcon, IconName, IconSize } from '@suite-native/icons'; import { Color } from '@trezor/theme'; import { TransactionIconSpinner } from './TransactionIconSpinner'; type TransactionIconProps = { transactionType: TransactionType; - symbol?: CoinSymbol; + symbol?: CoinSymbolName; isAnimated?: boolean; iconColor?: Color; spinnerColor?: Color; @@ -21,13 +21,13 @@ type TransactionIconProps = { const DEFAULT_CONTAINER_SIZE = 48; const transactionIconMap: Record = { - recv: 'receiveLight', - sent: 'sendLight', - contract: 'placeholderLight', - joint: 'shuffleLight', - self: 'arrowURightDownLight', - failed: 'placeholderLight', - unknown: 'placeholderLight', + recv: 'arrowDown', + sent: 'arrowUp', + contract: 'circleDashed', + joint: 'shuffle', + self: 'arrowURightDown', + failed: 'xCircle', + unknown: 'circleDashed', }; const cryptoIconStyle = prepareNativeStyle(utils => ({ diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx index b55c4fa94b3..d058f66b94c 100644 --- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx +++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx @@ -191,7 +191,7 @@ export const TransactionListItemContainer = ({ } size="small" - icon="warningTriangle" + icon="warning" variant="red" /> )} diff --git a/suite-native/transactions/tsconfig.json b/suite-native/transactions/tsconfig.json index 117463d22ca..821f70cf40f 100644 --- a/suite-native/transactions/tsconfig.json +++ b/suite-native/transactions/tsconfig.json @@ -5,9 +5,6 @@ { "path": "../../suite-common/formatters" }, - { - "path": "../../suite-common/icons-deprecated" - }, { "path": "../../suite-common/suite-types" }, @@ -30,6 +27,7 @@ { "path": "../atoms" }, { "path": "../formatters" }, { "path": "../helpers" }, + { "path": "../icons" }, { "path": "../intl" }, { "path": "../link" }, { "path": "../navigation" }, diff --git a/tsconfig.json b/tsconfig.json index 36c7a54fdf9..50782a9cdde 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -68,6 +68,7 @@ { "path": "suite-native/forms" }, { "path": "suite-native/graph" }, { "path": "suite-native/helpers" }, + { "path": "suite-native/icons" }, { "path": "suite-native/intl" }, { "path": "suite-native/link" }, { "path": "suite-native/message-system" }, diff --git a/yarn.lock b/yarn.lock index dffb5150639..8cadd1793c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9191,18 +9191,8 @@ __metadata: version: 0.0.0-use.local resolution: "@suite-common/icons-deprecated@workspace:suite-common/icons-deprecated" dependencies: - "@shopify/react-native-skia": "npm:1.3.11" - "@suite-common/wallet-config": "workspace:*" - "@suite-common/wallet-types": "workspace:*" - "@trezor/connect": "workspace:*" - "@trezor/styles": "workspace:*" - "@trezor/theme": "workspace:*" prettier: "npm:^3.3.2" - react: "npm:18.2.0" - react-native: "npm:0.75.2" - react-native-reanimated: "npm:3.15.0" sharp: "npm:0.32.6" - styled-components: "npm:^6.1.8" svgo: "npm:3.2.0" languageName: unknown linkType: soft @@ -9211,6 +9201,8 @@ __metadata: version: 0.0.0-use.local resolution: "@suite-common/icons@workspace:suite-common/icons" dependencies: + chalk: "npm:4.1.2" + fantasticon: "npm:3.0.0" prettier: "npm:^3.3.2" svgo: "npm:3.2.0" languageName: unknown @@ -9518,7 +9510,6 @@ __metadata: "@mobily/ts-belt": "npm:^3.13.1" "@react-navigation/native": "npm:6.1.18" "@suite-common/formatters": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/token-definitions": "workspace:*" "@suite-common/validators": "workspace:*" "@suite-common/wallet-config": "workspace:*" @@ -9531,6 +9522,7 @@ __metadata: "@suite-native/feature-flags": "workspace:*" "@suite-native/formatters": "workspace:*" "@suite-native/forms": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/settings": "workspace:*" @@ -9551,8 +9543,8 @@ __metadata: version: 0.0.0-use.local resolution: "@suite-native/alerts@workspace:suite-native/alerts" dependencies: - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/atoms": "workspace:*" + "@suite-native/icons": "workspace:*" "@trezor/styles": "workspace:*" "@trezor/theme": "workspace:*" jotai: "npm:1.9.1" @@ -9602,7 +9594,6 @@ __metadata: "@suite-common/analytics": "workspace:*" "@suite-common/connect-init": "workspace:*" "@suite-common/formatters": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/message-system": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-constants": "workspace:*" @@ -9620,6 +9611,7 @@ __metadata: "@suite-native/device": "workspace:*" "@suite-native/device-authorization": "workspace:*" "@suite-native/discovery": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/message-system": "workspace:*" "@suite-native/module-accounts-import": "workspace:*" @@ -9703,7 +9695,6 @@ __metadata: "@react-navigation/native": "npm:6.1.18" "@suite-common/assets": "workspace:*" "@suite-common/formatters": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/token-definitions": "workspace:*" "@suite-common/wallet-config": "workspace:*" @@ -9713,6 +9704,7 @@ __metadata: "@suite-native/atoms": "workspace:*" "@suite-native/config": "workspace:*" "@suite-native/formatters": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/settings": "workspace:*" @@ -9734,8 +9726,8 @@ __metadata: "@mobily/ts-belt": "npm:^3.13.1" "@shopify/flash-list": "npm:1.7.1" "@shopify/react-native-skia": "npm:1.3.11" - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/config": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:^" "@suite-native/storage": "workspace:*" "@trezor/env-utils": "workspace:*" @@ -9756,10 +9748,10 @@ __metadata: version: 0.0.0-use.local resolution: "@suite-native/biometrics@workspace:suite-native/biometrics" dependencies: - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/alerts": "workspace:*" "@suite-native/analytics": "workspace:*" "@suite-native/atoms": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/storage": "workspace:*" "@trezor/styles": "workspace:*" @@ -9789,7 +9781,6 @@ __metadata: "@mobily/ts-belt": "npm:^3.13.1" "@react-navigation/native": "npm:6.1.18" "@reduxjs/toolkit": "npm:1.9.5" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/suite-utils": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-core": "workspace:*" @@ -9798,6 +9789,7 @@ __metadata: "@suite-native/atoms": "workspace:*" "@suite-native/discovery": "workspace:*" "@suite-native/feature-flags": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/theme": "workspace:*" @@ -9828,8 +9820,8 @@ __metadata: resolution: "@suite-native/connection-status@workspace:suite-native/connection-status" dependencies: "@react-native-community/netinfo": "npm:11.3.2" - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/atoms": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/settings": "workspace:*" "@trezor/styles": "workspace:*" @@ -9865,7 +9857,6 @@ __metadata: dependencies: "@react-navigation/native": "npm:6.1.18" "@reduxjs/toolkit": "npm:1.9.5" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-types": "workspace:*" "@suite-common/wallet-core": "workspace:*" @@ -9874,6 +9865,7 @@ __metadata: "@suite-native/device": "workspace:*" "@suite-native/feature-flags": "workspace:*" "@suite-native/formatters": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -9998,8 +9990,8 @@ __metadata: dependencies: "@hookform/resolvers": "npm:3.9.0" "@mobily/ts-belt": "npm:^3.13.1" - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/atoms": "workspace:*" + "@suite-native/icons": "workspace:*" react: "npm:18.2.0" react-hook-form: "npm:^7.53.0" react-native: "npm:0.75.2" @@ -10018,7 +10010,6 @@ __metadata: "@shopify/react-native-skia": "npm:1.3.11" "@suite-common/formatters": "workspace:*" "@suite-common/graph": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-types": "workspace:*" "@suite-common/token-definitions": "workspace:*" @@ -10029,6 +10020,7 @@ __metadata: "@suite-native/analytics": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/formatters": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/react-native-graph": "workspace:*" "@suite-native/storage": "workspace:*" @@ -10057,6 +10049,24 @@ __metadata: languageName: unknown linkType: soft +"@suite-native/icons@workspace:*, @suite-native/icons@workspace:suite-native/icons": + version: 0.0.0-use.local + resolution: "@suite-native/icons@workspace:suite-native/icons" + dependencies: + "@shopify/react-native-skia": "npm:1.3.11" + "@suite-common/icons": "workspace:*" + "@suite-common/wallet-config": "workspace:*" + "@suite-common/wallet-types": "workspace:*" + "@trezor/connect": "workspace:*" + "@trezor/styles": "workspace:*" + "@trezor/theme": "workspace:*" + expo-image: "npm:1.12.15" + react: "npm:18.2.0" + react-native: "npm:0.75.2" + react-native-reanimated: "npm:3.15.0" + languageName: unknown + linkType: soft + "@suite-native/intl@workspace:*, @suite-native/intl@workspace:^, @suite-native/intl@workspace:suite-native/intl": version: 0.0.0-use.local resolution: "@suite-native/intl@workspace:suite-native/intl" @@ -10087,7 +10097,6 @@ __metadata: dependencies: "@mobily/ts-belt": "npm:^3.13.1" "@reduxjs/toolkit": "npm:1.9.5" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/message-system": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-types": "workspace:*" @@ -10095,6 +10104,7 @@ __metadata: "@suite-native/atoms": "workspace:*" "@suite-native/connection-status": "workspace:*" "@suite-native/discovery": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@trezor/styles": "workspace:*" @@ -10117,7 +10127,6 @@ __metadata: "@reduxjs/toolkit": "npm:1.9.5" "@shopify/flash-list": "npm:1.7.1" "@shopify/react-native-skia": "npm:1.3.11" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-config": "workspace:*" "@suite-common/token-definitions": "workspace:*" @@ -10135,6 +10144,7 @@ __metadata: "@suite-native/feature-flags": "workspace:*" "@suite-native/formatters": "workspace:*" "@suite-native/forms": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/qr-code": "workspace:*" @@ -10160,7 +10170,6 @@ __metadata: "@reduxjs/toolkit": "npm:1.9.5" "@suite-common/fiat-services": "workspace:*" "@suite-common/graph": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-common/wallet-types": "workspace:*" @@ -10174,6 +10183,7 @@ __metadata: "@suite-native/formatters": "workspace:*" "@suite-native/forms": "workspace:*" "@suite-native/graph": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/qr-code": "workspace:*" @@ -10226,7 +10236,6 @@ __metadata: "@react-navigation/native": "npm:6.1.18" "@react-navigation/native-stack": "npm:6.11.0" "@reduxjs/toolkit": "npm:1.9.5" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/validators": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-native/alerts": "workspace:*" @@ -10237,6 +10246,7 @@ __metadata: "@suite-native/device-mutex": "workspace:*" "@suite-native/discovery": "workspace:*" "@suite-native/forms": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/module-connect-popup": "workspace:*" @@ -10283,7 +10293,6 @@ __metadata: "@mobily/ts-belt": "npm:^3.13.1" "@react-navigation/native-stack": "npm:6.11.0" "@sentry/react-native": "npm:5.33.0" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/message-system": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-native/atoms": "workspace:*" @@ -10291,6 +10300,7 @@ __metadata: "@suite-native/discovery": "workspace:*" "@suite-native/feature-flags": "workspace:*" "@suite-native/helpers": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/storage": "workspace:*" @@ -10312,13 +10322,13 @@ __metadata: "@mobily/ts-belt": "npm:^3.13.1" "@react-navigation/native": "npm:6.1.18" "@react-navigation/native-stack": "npm:6.11.0" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/suite-utils": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-native/alerts": "workspace:*" "@suite-native/analytics": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/device": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -10374,11 +10384,11 @@ __metadata: "@react-navigation/native": "npm:6.1.18" "@react-navigation/native-stack": "npm:6.11.0" "@reduxjs/toolkit": "npm:1.9.5" - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/analytics": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/device": "workspace:*" "@suite-native/feature-flags": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -10415,7 +10425,6 @@ __metadata: "@react-navigation/native-stack": "npm:6.11.0" "@reduxjs/toolkit": "npm:1.9.5" "@suite-common/formatters": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/redux-utils": "workspace:*" "@suite-common/suite-utils": "workspace:*" "@suite-common/validators": "workspace:*" @@ -10433,6 +10442,7 @@ __metadata: "@suite-native/formatters": "workspace:*" "@suite-native/forms": "workspace:*" "@suite-native/helpers": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/qr-code": "workspace:*" @@ -10464,7 +10474,6 @@ __metadata: "@react-navigation/native-stack": "npm:6.11.0" "@reduxjs/toolkit": "npm:1.9.5" "@suite-common/analytics": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/suite-config": "workspace:*" "@suite-common/suite-constants": "workspace:*" "@suite-common/suite-types": "workspace:*" @@ -10480,6 +10489,7 @@ __metadata: "@suite-native/device-manager": "workspace:*" "@suite-native/discovery": "workspace:*" "@suite-native/feature-flags": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -10505,10 +10515,10 @@ __metadata: resolution: "@suite-native/module-staking-management@workspace:suite-native/module-staking-management" dependencies: "@react-navigation/native": "npm:6.1.18" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/formatters": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -10529,13 +10539,13 @@ __metadata: "@react-navigation/native": "npm:6.1.18" "@react-navigation/native-stack": "npm:6.11.0" "@sentry/react-native": "npm:5.33.0" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/message-system": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-types": "workspace:*" "@suite-native/analytics": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/connection-status": "workspace:*" + "@suite-native/icons": "workspace:*" "@trezor/connect": "workspace:*" "@trezor/styles": "workspace:*" "@trezor/theme": "workspace:*" @@ -10555,7 +10565,6 @@ __metadata: resolution: "@suite-native/notifications@workspace:suite-native/notifications" dependencies: "@react-navigation/native": "npm:6.1.18" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/toast-notifications": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-core": "workspace:*" @@ -10563,6 +10572,7 @@ __metadata: "@suite-native/atoms": "workspace:*" "@suite-native/connection-status": "workspace:*" "@suite-native/formatters": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/navigation": "workspace:*" "@suite-native/theme": "workspace:*" "@suite-native/transactions": "workspace:*" @@ -10579,11 +10589,11 @@ __metadata: version: 0.0.0-use.local resolution: "@suite-native/qr-code@workspace:suite-native/qr-code" dependencies: - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-utils": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/helpers": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/toasts": "workspace:*" "@trezor/styles": "workspace:*" @@ -10618,7 +10628,6 @@ __metadata: "@react-navigation/native": "npm:6.1.18" "@reduxjs/toolkit": "npm:1.9.5" "@shopify/react-native-skia": "npm:1.3.11" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/wallet-config": "workspace:*" "@suite-common/wallet-core": "workspace:*" "@suite-common/wallet-types": "workspace:*" @@ -10631,6 +10640,7 @@ __metadata: "@suite-native/device-mutex": "workspace:*" "@suite-native/formatters": "workspace:*" "@suite-native/helpers": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -10761,9 +10771,9 @@ __metadata: resolution: "@suite-native/toasts@workspace:suite-native/toasts" dependencies: "@mobily/ts-belt": "npm:^3.13.1" - "@suite-common/icons-deprecated": "workspace:*" "@suite-native/atoms": "workspace:*" "@suite-native/connection-status": "workspace:*" + "@suite-native/icons": "workspace:*" "@trezor/styles": "workspace:*" "@trezor/theme": "workspace:*" jotai: "npm:1.9.1" @@ -10797,7 +10807,6 @@ __metadata: "@shopify/flash-list": "npm:1.7.1" "@shopify/react-native-skia": "npm:1.3.11" "@suite-common/formatters": "workspace:*" - "@suite-common/icons-deprecated": "workspace:*" "@suite-common/suite-types": "workspace:*" "@suite-common/token-definitions": "workspace:*" "@suite-common/wallet-config": "workspace:*" @@ -10808,6 +10817,7 @@ __metadata: "@suite-native/atoms": "workspace:*" "@suite-native/formatters": "workspace:*" "@suite-native/helpers": "workspace:*" + "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:*" "@suite-native/link": "workspace:*" "@suite-native/navigation": "workspace:*" @@ -14487,6 +14497,13 @@ __metadata: languageName: node linkType: hard +"@xmldom/xmldom@npm:^0.7.2, @xmldom/xmldom@npm:~0.7.7": + version: 0.7.13 + resolution: "@xmldom/xmldom@npm:0.7.13" + checksum: 10/a359d15fe3c24fe85a1e1b3bc4cfd23d4f014fb8aa382aa445cccaac545e42958b75e386dd4853c76d82036401400b8d5e33cbcbfb6af7cdadeba769eae6122a + languageName: node + linkType: hard + "@xmldom/xmldom@npm:^0.8.8": version: 0.8.10 resolution: "@xmldom/xmldom@npm:0.8.10" @@ -14494,13 +14511,6 @@ __metadata: languageName: node linkType: hard -"@xmldom/xmldom@npm:~0.7.7": - version: 0.7.9 - resolution: "@xmldom/xmldom@npm:0.7.9" - checksum: 10/730f6733a90ad014f13f2071b1018434a8b0c49838006645210d26398cb6c7e096b843d0e79fd168deea34fbe27c880698dc8577d38bdb95c9d0e8cc4198dd16 - languageName: node - linkType: hard - "@xobotyi/scrollbar-width@npm:^1.9.5": version: 1.9.5 resolution: "@xobotyi/scrollbar-width@npm:1.9.5" @@ -16103,7 +16113,7 @@ __metadata: languageName: node linkType: hard -"bindings@npm:^1.3.0": +"bindings@npm:^1.3.0, bindings@npm:^1.5.0": version: 1.5.0 resolution: "bindings@npm:1.5.0" dependencies: @@ -16694,6 +16704,15 @@ __metadata: languageName: node linkType: hard +"bufferstreams@npm:^3.0.0": + version: 3.0.0 + resolution: "bufferstreams@npm:3.0.0" + dependencies: + readable-stream: "npm:^3.4.0" + checksum: 10/b7643da7e7d879199ce617524fb23718c9d25eb77edb616ff33b1d324d10cf17c126cb2916f3c53ef2714bd0aff2c065d10590962a20c7d4d6d02ceddf70fd44 + languageName: node + linkType: hard + "bufferutil@npm:^4.0.1": version: 4.0.8 resolution: "bufferutil@npm:4.0.8" @@ -17107,6 +17126,13 @@ __metadata: languageName: node linkType: hard +"case@npm:^1.6.3": + version: 1.6.3 + resolution: "case@npm:1.6.3" + checksum: 10/2fc1df75bbb4118339e06141b9a54aba95cc62460ac92730290144fbec6b6a04f5bf7abf6a6486a1338f5821bd184402f216cec8cea0472451759c27e20fc332 + languageName: node + linkType: hard + "caseless@npm:~0.12.0": version: 0.12.0 resolution: "caseless@npm:0.12.0" @@ -17172,6 +17198,16 @@ __metadata: languageName: node linkType: hard +"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": + version: 4.1.2 + resolution: "chalk@npm:4.1.2" + dependencies: + ansi-styles: "npm:^4.1.0" + supports-color: "npm:^7.1.0" + checksum: 10/cb3f3e594913d63b1814d7ca7c9bafbf895f75fbf93b92991980610dfd7b48500af4e3a5d4e3a8f337990a96b168d7eb84ee55efdce965e2ee8efc20f8c8f139 + languageName: node + linkType: hard + "chalk@npm:^1.1.3": version: 1.1.3 resolution: "chalk@npm:1.1.3" @@ -17206,16 +17242,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2": - version: 4.1.2 - resolution: "chalk@npm:4.1.2" - dependencies: - ansi-styles: "npm:^4.1.0" - supports-color: "npm:^7.1.0" - checksum: 10/cb3f3e594913d63b1814d7ca7c9bafbf895f75fbf93b92991980610dfd7b48500af4e3a5d4e3a8f337990a96b168d7eb84ee55efdce965e2ee8efc20f8c8f139 - languageName: node - linkType: hard - "chalk@npm:^5.2.0": version: 5.3.0 resolution: "chalk@npm:5.3.0" @@ -17490,16 +17516,16 @@ __metadata: languageName: node linkType: hard -"cli-color@npm:^2.0.2": - version: 2.0.3 - resolution: "cli-color@npm:2.0.3" +"cli-color@npm:^2.0.2, cli-color@npm:^2.0.4": + version: 2.0.4 + resolution: "cli-color@npm:2.0.4" dependencies: d: "npm:^1.0.1" - es5-ext: "npm:^0.10.61" + es5-ext: "npm:^0.10.64" es6-iterator: "npm:^2.0.3" memoizee: "npm:^0.4.15" timers-ext: "npm:^0.1.7" - checksum: 10/35244ba10cd7e5e38df02fbe54128dd11362f0114fdcaf44ee5a59c6af8b7680258fee4954de114cc3f824ed5bf7337270098b15e05bde6ae3877a4f67558b41 + checksum: 10/6706fbb98f5db62c47deaba7116a1e37470c936dc861b84a180b5ce1a58fbf50ae6582b30a65e4b30ddb39e0469d3bac6851a9d925ded02b7e0c1c00858ef14b languageName: node linkType: hard @@ -17885,6 +17911,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^12.0.0": + version: 12.1.0 + resolution: "commander@npm:12.1.0" + checksum: 10/cdaeb672d979816853a4eed7f1310a9319e8b976172485c2a6b437ed0db0a389a44cfb222bfbde772781efa9f215bdd1b936f80d6b249485b465c6cb906e1f93 + languageName: node + linkType: hard + "commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -17920,10 +17953,10 @@ __metadata: languageName: node linkType: hard -"commander@npm:^9.4.1": - version: 9.4.1 - resolution: "commander@npm:9.4.1" - checksum: 10/9d0d1d7e816545cf5ebf25e303533e45af2f941731063587d04917ac9fb6c81f59690aa8bda60d9b88d8aac018fdef6735ed953e72fdab08bb8b778bd4e0ef95 +"commander@npm:^9.3.0, commander@npm:^9.4.1": + version: 9.5.0 + resolution: "commander@npm:9.5.0" + checksum: 10/41c49b3d0f94a1fbeb0463c85b13f15aa15a9e0b4d5e10a49c0a1d58d4489b549d62262b052ae0aa6cfda53299bee487bfe337825df15e342114dde543f82906 languageName: node linkType: hard @@ -18873,6 +18906,13 @@ __metadata: languageName: node linkType: hard +"cubic2quad@npm:^1.2.1": + version: 1.2.1 + resolution: "cubic2quad@npm:1.2.1" + checksum: 10/a8a613d7e6566dbd21935b236801cfd26fc09095c21c89351629c8620d244e2aa61c9bf6ddc75edf3c2e2e453fd574592a0076db93374b9d7797eaba73bd3624 + languageName: node + linkType: hard + "custom-event@npm:~1.0.0": version: 1.0.1 resolution: "custom-event@npm:1.0.1" @@ -21066,7 +21106,7 @@ __metadata: languageName: node linkType: hard -"es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.46, es5-ext@npm:^0.10.50, es5-ext@npm:^0.10.53, es5-ext@npm:^0.10.61, es5-ext@npm:^0.10.62, es5-ext@npm:~0.10.14, es5-ext@npm:~0.10.2, es5-ext@npm:~0.10.46": +"es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.46, es5-ext@npm:^0.10.50, es5-ext@npm:^0.10.53, es5-ext@npm:^0.10.62, es5-ext@npm:^0.10.64, es5-ext@npm:~0.10.14, es5-ext@npm:~0.10.2, es5-ext@npm:~0.10.46": version: 0.10.64 resolution: "es5-ext@npm:0.10.64" dependencies: @@ -22964,6 +23004,27 @@ __metadata: languageName: node linkType: hard +"fantasticon@npm:3.0.0": + version: 3.0.0 + resolution: "fantasticon@npm:3.0.0" + dependencies: + case: "npm:^1.6.3" + cli-color: "npm:^2.0.4" + commander: "npm:^12.0.0" + glob: "npm:^10.3.12" + handlebars: "npm:^4.7.8" + slugify: "npm:^1.6.6" + svg2ttf: "npm:^6.0.3" + svgicons2svgfont: "npm:^12.0.0" + ttf2eot: "npm:^3.1.0" + ttf2woff: "npm:^3.0.0" + ttf2woff2: "npm:^5.0.0" + bin: + fantasticon: bin/fantasticon + checksum: 10/26e22d7055457c2ed7f83bec669d878f7b7c54e0143924fcf51b277cc9059d3973934b5cfc2254d7f058e632c7dd773cdbe0b12068dbd0bbce31f5c0c8cfa4d7 + languageName: node + linkType: hard + "fast-copy@npm:^3.0.2": version: 3.0.2 resolution: "fast-copy@npm:3.0.2" @@ -24731,12 +24792,12 @@ __metadata: languageName: node linkType: hard -"handlebars@npm:^4.7.7": - version: 4.7.7 - resolution: "handlebars@npm:4.7.7" +"handlebars@npm:^4.7.7, handlebars@npm:^4.7.8": + version: 4.7.8 + resolution: "handlebars@npm:4.7.8" dependencies: minimist: "npm:^1.2.5" - neo-async: "npm:^2.6.0" + neo-async: "npm:^2.6.2" source-map: "npm:^0.6.1" uglify-js: "npm:^3.1.4" wordwrap: "npm:^1.0.0" @@ -24745,7 +24806,7 @@ __metadata: optional: true bin: handlebars: bin/handlebars - checksum: 10/617b1e689b7577734abc74564bdb8cdaddf8fd48ce72afdb489f426e9c60a7d6ee2a2707c023720c4059070128243c948bded8f2716e4543378033e3971b85ea + checksum: 10/bd528f4dd150adf67f3f857118ef0fa43ff79a153b1d943fa0a770f2599e38b25a7a0dbac1a3611a4ec86970fd2325a81310fb788b5c892308c9f8743bd02e11 languageName: node linkType: hard @@ -29291,7 +29352,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.11, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0": +"lodash@npm:^4.17.10, lodash@npm:^4.17.11, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532 @@ -30705,6 +30766,13 @@ __metadata: languageName: node linkType: hard +"microbuffer@npm:^1.0.0": + version: 1.0.0 + resolution: "microbuffer@npm:1.0.0" + checksum: 10/1c18d7fd9f0e7553f91ae19b5a21694ca16c84fa21da91f61bf688f86b07447f584bb145bf1c4c0fe2037d9aa9c1f9bb44827063d49987a31bdca44619e02eb8 + languageName: node + linkType: hard + "micromark-core-commonmark@npm:^1.0.0, micromark-core-commonmark@npm:^1.0.1": version: 1.1.0 resolution: "micromark-core-commonmark@npm:1.1.0" @@ -32205,12 +32273,12 @@ __metadata: languageName: node linkType: hard -"nan@npm:^2.13.2, nan@npm:^2.14.0": - version: 2.18.0 - resolution: "nan@npm:2.18.0" +"nan@npm:^2.13.2, nan@npm:^2.14.0, nan@npm:^2.14.2": + version: 2.22.0 + resolution: "nan@npm:2.22.0" dependencies: node-gyp: "npm:latest" - checksum: 10/5520e22c64e2b5b495b1d765d6334c989b848bbe1502fec89c5857cabcc7f9f0474563377259e7574bff1c8a041d3b90e9ffa1f5e15502ffddee7b2550cc26a0 + checksum: 10/ab165ba910e549fcc21fd561a33f534d86e81ae36c97b1019dcfe506b09692ff867c97794a54b49c9a83b8b485f529f0f58d24966c3a11863c97dc70814f4d50 languageName: node linkType: hard @@ -32305,7 +32373,7 @@ __metadata: languageName: node linkType: hard -"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.2": +"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2": version: 2.6.2 resolution: "neo-async@npm:2.6.2" checksum: 10/1a7948fea86f2b33ec766bc899c88796a51ba76a4afc9026764aedc6e7cde692a09067031e4a1bf6db4f978ccd99e7f5b6c03fe47ad9865c3d4f99050d67e002 @@ -33593,6 +33661,13 @@ __metadata: languageName: node linkType: hard +"pako@npm:^1.0.0, pako@npm:~1.0.5": + version: 1.0.11 + resolution: "pako@npm:1.0.11" + checksum: 10/1ad07210e894472685564c4d39a08717e84c2a68a70d3c1d9e657d32394ef1670e22972a433cbfe48976cb98b154ba06855dcd3fcfba77f60f1777634bec48c0 + languageName: node + linkType: hard + "pako@npm:^2.1.0": version: 2.1.0 resolution: "pako@npm:2.1.0" @@ -33600,13 +33675,6 @@ __metadata: languageName: node linkType: hard -"pako@npm:~1.0.5": - version: 1.0.11 - resolution: "pako@npm:1.0.11" - checksum: 10/1ad07210e894472685564c4d39a08717e84c2a68a70d3c1d9e657d32394ef1670e22972a433cbfe48976cb98b154ba06855dcd3fcfba77f60f1777634bec48c0 - languageName: node - linkType: hard - "param-case@npm:^3.0.4": version: 3.0.4 resolution: "param-case@npm:3.0.4" @@ -39832,6 +39900,13 @@ __metadata: languageName: node linkType: hard +"svg-pathdata@npm:^6.0.3": + version: 6.0.3 + resolution: "svg-pathdata@npm:6.0.3" + checksum: 10/ed20b3fd20fd2f9dfa519fee2a690ec6bff84be00882c04b1461d6e5a250da3e37236c1f3abe2dae9c8dae841cc33f2700396186f894e1953dc6c0149201ac21 + languageName: node + linkType: hard + "svg-tags@npm:^1.0.0": version: 1.0.0 resolution: "svg-tags@npm:1.0.0" @@ -39839,6 +39914,36 @@ __metadata: languageName: node linkType: hard +"svg2ttf@npm:^6.0.3": + version: 6.0.3 + resolution: "svg2ttf@npm:6.0.3" + dependencies: + "@xmldom/xmldom": "npm:^0.7.2" + argparse: "npm:^2.0.1" + cubic2quad: "npm:^1.2.1" + lodash: "npm:^4.17.10" + microbuffer: "npm:^1.0.0" + svgpath: "npm:^2.1.5" + bin: + svg2ttf: svg2ttf.js + checksum: 10/94b7d36df599fc9cd2eeb5a98fbfb284dbf89593bbf95ddd5222f30111d7a3369aaa22a0493b8cdbbb5601ef416ebb9fd8815c8eb382d4073c65dfec985216b3 + languageName: node + linkType: hard + +"svgicons2svgfont@npm:^12.0.0": + version: 12.0.0 + resolution: "svgicons2svgfont@npm:12.0.0" + dependencies: + commander: "npm:^9.3.0" + glob: "npm:^8.0.3" + sax: "npm:^1.2.4" + svg-pathdata: "npm:^6.0.3" + bin: + svgicons2svgfont: bin/svgicons2svgfont.js + checksum: 10/e862295988c269ef7c8e07011dc3e683908243f7b5d0392f12e173ea70dad08f4e3df9af47581ab7855c56ff7642e4f63278ab1c8522fa671d46a74227c9a304 + languageName: node + linkType: hard + "svgo@npm:3.2.0, svgo@npm:^3.2.0": version: 3.2.0 resolution: "svgo@npm:3.2.0" @@ -39856,6 +39961,13 @@ __metadata: languageName: node linkType: hard +"svgpath@npm:^2.1.5": + version: 2.6.0 + resolution: "svgpath@npm:2.6.0" + checksum: 10/88533d11fe44eae7db3751def85f72687554bf60224e7e8fd7cd40564c3c58cb93cf6f32470cb28a2fc29b4ba43273c478f0461f9be07f7233454740ee117873 + languageName: node + linkType: hard + "swarm-js@npm:^0.1.40": version: 0.1.42 resolution: "swarm-js@npm:0.1.42" @@ -40968,6 +41080,43 @@ __metadata: languageName: node linkType: hard +"ttf2eot@npm:^3.1.0": + version: 3.1.0 + resolution: "ttf2eot@npm:3.1.0" + dependencies: + argparse: "npm:^2.0.1" + bin: + ttf2eot: ttf2eot.js + checksum: 10/1660d713c207779af73c8dcb2bbcbb6ff795e7d5edbf5b02d94e3f044932b573ec77764329ad50f57f6567cbe594a0ad2cf3bdc67c2bea4acea2a29138f54ff7 + languageName: node + linkType: hard + +"ttf2woff2@npm:^5.0.0": + version: 5.0.0 + resolution: "ttf2woff2@npm:5.0.0" + dependencies: + bindings: "npm:^1.5.0" + bufferstreams: "npm:^3.0.0" + nan: "npm:^2.14.2" + node-gyp: "npm:^9.0.0" + bin: + ttf2woff2: bin/ttf2woff2.js + checksum: 10/dddf81d16cd192025efbb966677db02a95b0f6f173303daa8fa44b08d69f424c5b81edd06e447603cf2816e9d207e234602607f4e2bbccd3c6bced2ed05c517b + languageName: node + linkType: hard + +"ttf2woff@npm:^3.0.0": + version: 3.0.0 + resolution: "ttf2woff@npm:3.0.0" + dependencies: + argparse: "npm:^2.0.1" + pako: "npm:^1.0.0" + bin: + ttf2woff: ttf2woff.js + checksum: 10/c8fca24616e1d4356c4141c7ec2e3d7f839185b7b6f3baf0bfb13f2eebba64e5ab3620f9f882161ac71e7c36980a70c6fc2548599ea2f66876e5947acaf65765 + languageName: node + linkType: hard + "tty-browserify@npm:0.0.0": version: 0.0.0 resolution: "tty-browserify@npm:0.0.0"