diff --git a/packages/product-components/src/components/CoinLogo/CoinLogo.stories.tsx b/packages/product-components/src/components/CoinLogo/CoinLogo.stories.tsx index 26cbbd05368..d80f30ec39d 100644 --- a/packages/product-components/src/components/CoinLogo/CoinLogo.stories.tsx +++ b/packages/product-components/src/components/CoinLogo/CoinLogo.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import styled from 'styled-components'; -import { CoinLogoProps } from './CoinLogo'; +import { COIN_LOGO_TYPE, CoinLogoProps } from './CoinLogo'; import { COINS } from './coins'; import { CoinLogo as CoinLogoComponent } from '../../index'; @@ -19,9 +19,9 @@ const meta: Meta = { export default meta; export const CoinLogo: StoryObj = { - render: ({ symbol, size }) => ( + render: ({ symbol, size, type }) => (
- +
), args: { @@ -37,5 +37,11 @@ export const CoinLogo: StoryObj = { type: 'select', }, }, + type: { + options: COIN_LOGO_TYPE, + control: { + type: 'select', + }, + }, }, }; diff --git a/packages/product-components/src/components/CoinLogo/CoinLogo.tsx b/packages/product-components/src/components/CoinLogo/CoinLogo.tsx index 397bbeeae28..4d5d9245f0e 100644 --- a/packages/product-components/src/components/CoinLogo/CoinLogo.tsx +++ b/packages/product-components/src/components/CoinLogo/CoinLogo.tsx @@ -9,6 +9,9 @@ import { borders } from '@trezor/theme'; import { COINS, LegacyNetworkSymbol } from './coins'; import { NETWORK_ICONS } from './networks'; +export const COIN_LOGO_TYPE = ['token', 'network', 'tokenWithNetwork'] as const; +export type CoinLogoType = (typeof COIN_LOGO_TYPE)[number]; + const DEFAULT_SIZE = 32; const getSize = (size?: number, border = 0, divisor = 1) => @@ -16,7 +19,7 @@ const getSize = (size?: number, border = 0, divisor = 1) => export interface CoinLogoProps extends ImgHTMLAttributes { symbol: NetworkSymbol | LegacyNetworkSymbol; - type?: 'coin' | 'network' | 'badge'; + type?: CoinLogoType; className?: string; size?: number; index?: number; @@ -42,19 +45,30 @@ const SvgWrapper = styled.div<{ $size?: number }>` height: ${({ $size }) => getSize($size, 1, 3)}; line-height: 0; border-radius: ${borders.radii.xxs}; - border: 1px solid white; - background-color: white; + border-width: 1px; + border-style: solid; + border-color: ${({ theme }) => theme.backgroundTertiaryDefaultOnElevation0}; + background-color: ${({ theme }) => theme.backgroundTertiaryDefaultOnElevation0}; - @media (prefers-color-scheme: dark) { - border: 1px solid black; - background-color: black; + div { + line-height: 0; + } + } + + svg { + .bg { + fill: ${({ theme }) => theme.logoBg}; + } + + .fg { + fill: ${({ theme }) => theme.logoFg}; } } `; export const CoinLogo = ({ symbol, - type = 'coin', + type = 'token', className, size = DEFAULT_SIZE, ...rest @@ -62,15 +76,20 @@ export const CoinLogo = ({ let symbolSrc; let badge; - if (type === 'coin') { + if (type === 'token') { symbolSrc = COINS[symbol]; } else if (type === 'network') { symbolSrc = NETWORK_ICONS[symbol as NetworkSymbol]; } else { // TODO: should be changed, this is hacky way - const networkSymbol = getNetworkDisplaySymbol( - symbol as NetworkSymbol, - )?.toLowerCase() as NetworkSymbol; + let networkSymbol; + try { + networkSymbol = getNetworkDisplaySymbol( + symbol as NetworkSymbol, + ).toLowerCase() as NetworkSymbol; + } catch { + networkSymbol = symbol as NetworkSymbol; + } badge = networkSymbol !== symbol ? NETWORK_ICONS[symbol as NetworkSymbol] : null; symbolSrc = COINS[networkSymbol !== symbol ? networkSymbol : symbol]; diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx index 931f498c303..2a2f9b32ffa 100644 --- a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx +++ b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx @@ -45,7 +45,9 @@ export const AssetItem = ({ 'data-testid': dataTestId, }: AssetItemProps) => { const getCoinLogo = () => - isCoinSymbol(symbol) ? : null; + isCoinSymbol(symbol) ? ( + + ) : null; const displaySymbol = getDisplaySymbol(ticker, contractAddress); return ( diff --git a/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx b/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx index b291da6535c..6fe83c0a0b8 100644 --- a/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx +++ b/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx @@ -97,7 +97,7 @@ export const NetworkTabs = ({ > {network.tradeCryptoId && ( - + )} {network.name} diff --git a/packages/product-components/src/images/networks/ada.svg b/packages/product-components/src/images/networks/ada.svg index 468139fc3eb..883d17ddcd9 100644 --- a/packages/product-components/src/images/networks/ada.svg +++ b/packages/product-components/src/images/networks/ada.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/arb.svg b/packages/product-components/src/images/networks/arb.svg index 3bbfc5aba1b..ad9e5f39619 100644 --- a/packages/product-components/src/images/networks/arb.svg +++ b/packages/product-components/src/images/networks/arb.svg @@ -1,21 +1,4 @@ - - - - - - - - - - - + + + diff --git a/packages/product-components/src/images/networks/base.svg b/packages/product-components/src/images/networks/base.svg index 2f70793c5b2..d45e3e763e4 100644 --- a/packages/product-components/src/images/networks/base.svg +++ b/packages/product-components/src/images/networks/base.svg @@ -1,14 +1,4 @@ - - - - - \ No newline at end of file + + + + diff --git a/packages/product-components/src/images/networks/bch.svg b/packages/product-components/src/images/networks/bch.svg index 027fb15bc7d..e70dd3c3d4e 100644 --- a/packages/product-components/src/images/networks/bch.svg +++ b/packages/product-components/src/images/networks/bch.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/bsc.svg b/packages/product-components/src/images/networks/bsc.svg index e6df7e4592e..512a7fdfe31 100644 --- a/packages/product-components/src/images/networks/bsc.svg +++ b/packages/product-components/src/images/networks/bsc.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/btc.svg b/packages/product-components/src/images/networks/btc.svg index 84ced3e4414..663d86901cc 100644 --- a/packages/product-components/src/images/networks/btc.svg +++ b/packages/product-components/src/images/networks/btc.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/btc_test.svg b/packages/product-components/src/images/networks/btc_test.svg index 0a59ad0db7f..e5ed8e195b5 100644 --- a/packages/product-components/src/images/networks/btc_test.svg +++ b/packages/product-components/src/images/networks/btc_test.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/btg.svg b/packages/product-components/src/images/networks/btg.svg index 34797671c28..7d98b33571e 100644 --- a/packages/product-components/src/images/networks/btg.svg +++ b/packages/product-components/src/images/networks/btg.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/packages/product-components/src/images/networks/dash.svg b/packages/product-components/src/images/networks/dash.svg index d781eb6c44e..403bc307ca9 100644 --- a/packages/product-components/src/images/networks/dash.svg +++ b/packages/product-components/src/images/networks/dash.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/dgb.svg b/packages/product-components/src/images/networks/dgb.svg index 487e166ef31..9862d534593 100644 --- a/packages/product-components/src/images/networks/dgb.svg +++ b/packages/product-components/src/images/networks/dgb.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/doge.svg b/packages/product-components/src/images/networks/doge.svg index 2e024e2c5c3..83e69fb333d 100644 --- a/packages/product-components/src/images/networks/doge.svg +++ b/packages/product-components/src/images/networks/doge.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/dsol.svg b/packages/product-components/src/images/networks/dsol.svg index c4b312a96bc..97e5e0ef220 100644 --- a/packages/product-components/src/images/networks/dsol.svg +++ b/packages/product-components/src/images/networks/dsol.svg @@ -1,11 +1,4 @@ - - - - - - - - - - + + + diff --git a/packages/product-components/src/images/networks/eos.svg b/packages/product-components/src/images/networks/eos.svg index aaebbea5b0a..f32ecd156eb 100644 --- a/packages/product-components/src/images/networks/eos.svg +++ b/packages/product-components/src/images/networks/eos.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/etc.svg b/packages/product-components/src/images/networks/etc.svg index a0f62625760..ba3cb06df71 100644 --- a/packages/product-components/src/images/networks/etc.svg +++ b/packages/product-components/src/images/networks/etc.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/eth.svg b/packages/product-components/src/images/networks/eth.svg index 948403e5a37..caec711820b 100644 --- a/packages/product-components/src/images/networks/eth.svg +++ b/packages/product-components/src/images/networks/eth.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/ltc.svg b/packages/product-components/src/images/networks/ltc.svg index f282ef852aa..043e8d8624d 100644 --- a/packages/product-components/src/images/networks/ltc.svg +++ b/packages/product-components/src/images/networks/ltc.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/nem.svg b/packages/product-components/src/images/networks/nem.svg index cbaa60b69f2..f2c0d1746c7 100644 --- a/packages/product-components/src/images/networks/nem.svg +++ b/packages/product-components/src/images/networks/nem.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/packages/product-components/src/images/networks/nmc.svg b/packages/product-components/src/images/networks/nmc.svg index ccd6e56584a..d12759fe854 100644 --- a/packages/product-components/src/images/networks/nmc.svg +++ b/packages/product-components/src/images/networks/nmc.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/op.svg b/packages/product-components/src/images/networks/op.svg index a7859358977..ea07a64315e 100644 --- a/packages/product-components/src/images/networks/op.svg +++ b/packages/product-components/src/images/networks/op.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/pol.svg b/packages/product-components/src/images/networks/pol.svg index 5f982ed84b2..61f2df3f25d 100644 --- a/packages/product-components/src/images/networks/pol.svg +++ b/packages/product-components/src/images/networks/pol.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/product-components/src/images/networks/sol.svg b/packages/product-components/src/images/networks/sol.svg index 3f939d81b0d..0609b896197 100644 --- a/packages/product-components/src/images/networks/sol.svg +++ b/packages/product-components/src/images/networks/sol.svg @@ -1,21 +1,4 @@ - - - - - - - - - - - + + + diff --git a/packages/product-components/src/images/networks/tada.svg b/packages/product-components/src/images/networks/tada.svg index 364bffeaa37..7be68d19c4c 100644 --- a/packages/product-components/src/images/networks/tada.svg +++ b/packages/product-components/src/images/networks/tada.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/thol.svg b/packages/product-components/src/images/networks/thol.svg index 73a79773ccd..87004c57497 100644 --- a/packages/product-components/src/images/networks/thol.svg +++ b/packages/product-components/src/images/networks/thol.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/tsep.svg b/packages/product-components/src/images/networks/tsep.svg index 73a79773ccd..87004c57497 100644 --- a/packages/product-components/src/images/networks/tsep.svg +++ b/packages/product-components/src/images/networks/tsep.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/txrp.svg b/packages/product-components/src/images/networks/txrp.svg index 11ccb8c11b7..d8ab776d345 100644 --- a/packages/product-components/src/images/networks/txrp.svg +++ b/packages/product-components/src/images/networks/txrp.svg @@ -1,12 +1,4 @@ - - - - - - - - - - - + + + diff --git a/packages/product-components/src/images/networks/vtc.svg b/packages/product-components/src/images/networks/vtc.svg index c6cf99b2bed..1cc2404d04a 100644 --- a/packages/product-components/src/images/networks/vtc.svg +++ b/packages/product-components/src/images/networks/vtc.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/xlm.svg b/packages/product-components/src/images/networks/xlm.svg index ea0b8c6576c..a8bf671a7f7 100644 --- a/packages/product-components/src/images/networks/xlm.svg +++ b/packages/product-components/src/images/networks/xlm.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/xrp.svg b/packages/product-components/src/images/networks/xrp.svg index 85970bc0145..55a74e7e20a 100644 --- a/packages/product-components/src/images/networks/xrp.svg +++ b/packages/product-components/src/images/networks/xrp.svg @@ -1,22 +1,4 @@ - - - - - - - - - - - - + + + diff --git a/packages/product-components/src/images/networks/xtz.svg b/packages/product-components/src/images/networks/xtz.svg index e6a3537283e..95636d9507a 100644 --- a/packages/product-components/src/images/networks/xtz.svg +++ b/packages/product-components/src/images/networks/xtz.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/packages/product-components/src/images/networks/zec.svg b/packages/product-components/src/images/networks/zec.svg index 45e02085608..070528d0c16 100644 --- a/packages/product-components/src/images/networks/zec.svg +++ b/packages/product-components/src/images/networks/zec.svg @@ -1,14 +1,4 @@ - - - - + + + diff --git a/packages/suite/src/components/suite/CoinList/Coin.tsx b/packages/suite/src/components/suite/CoinList/Coin.tsx index f77ef6aa345..e803768fb9e 100644 --- a/packages/suite/src/components/suite/CoinList/Coin.tsx +++ b/packages/suite/src/components/suite/CoinList/Coin.tsx @@ -201,7 +201,7 @@ export const Coin = ({ data-active={toggled} > - + diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx index e58436c6cef..63f34772d03 100644 --- a/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx +++ b/packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx @@ -109,7 +109,7 @@ export const AccountDetails = ({ selectedAccount, isBalanceShown }: AccountDetai return ( - +
- + { shouldTryToFetch={isTokenKnown} /> ) : ( - + )} diff --git a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx index 21cecc40f94..bf362fe34b7 100644 --- a/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx +++ b/packages/suite/src/views/wallet/transactions/TradeBox/TradeBox.tsx @@ -78,7 +78,7 @@ export const TradeBox = ({ account }: TradeBoxProps) => { gap={isBelowMobile ? spacings.md : spacings.xxxl} > - + = { textPrimaryPressed: palette.darkPrimaryForest900, textSecondaryHighlight: palette.darkSecondaryGreen800, textSubdued: palette.darkGray700, + logoBg: palette.darkGray900, + logoFg: palette.darkGray100, } as Colors, } as const;