diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx new file mode 100644 index 00000000000..88d2ec4cb0d --- /dev/null +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +import { Box, iconSizes, Image } from '@trezor/components'; +import { borders, spacings } from '@trezor/theme'; + +import { useSelector } from 'src/hooks/suite'; + +const CoinmarketIconWrapper = styled.div<{ $isDark: boolean }>` + ${({ $isDark }) => $isDark && `background-color: #fff;`} + border-radius: ${borders.radii.xxs}; +`; + +interface CoinmarketIconProps { + iconUrl: string; +} + +export const CoinmarketIcon = ({ iconUrl }: CoinmarketIconProps) => { + const currentTheme = useSelector(state => state.suite.settings.theme.variant); + + return ( + + + + + + ); +}; diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketPaymentType.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketPaymentType.tsx index 39451a06630..51f187afee1 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketPaymentType.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketPaymentType.tsx @@ -4,6 +4,7 @@ import { spacings } from '@trezor/theme'; import invityAPI from 'src/services/suite/invityAPI'; import { CoinmarketPaymentPlainType } from 'src/views/wallet/coinmarket/common/CoinmarketPaymentPlainType'; import { CoinmarketPaymentMethodType } from 'src/types/coinmarket/coinmarket'; +import { CoinmarketIcon } from 'src/views/wallet/coinmarket/common/CoinmarketIcon'; interface CoinmarketPaymentTypeProps { method?: CoinmarketPaymentMethodType; @@ -12,7 +13,7 @@ interface CoinmarketPaymentTypeProps { export const CoinmarketPaymentType = ({ method, methodName }: CoinmarketPaymentTypeProps) => ( - {method && } + {method && } ); diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx index c937d0f0392..fe66f45a706 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketProviderInfo.tsx @@ -1,7 +1,9 @@ -import { Row } from '@trezor/components'; +import { Row, Text } from '@trezor/components'; import { spacings } from '@trezor/theme'; +import { Translation } from 'src/components/suite'; import invityAPI from 'src/services/suite/invityAPI'; +import { CoinmarketIcon } from 'src/views/wallet/coinmarket/common/CoinmarketIcon'; export interface CoinmarketProviderInfoProps { exchange?: string; @@ -19,19 +21,16 @@ export const CoinmarketProviderInfo = ({ exchange, providers }: CoinmarketProvid return ( - {!exchange && 'Unknown provider'} - {!provider && exchange} - {provider && ( + {!exchange && } + {provider ? ( <> {provider.logo && ( - + )} - {provider.brandName || provider.companyName} + {provider.brandName ?? provider.companyName} + ) : ( + {exchange} )} ); diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx index edea042e0b5..c3ccb8b769a 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx @@ -16,13 +16,9 @@ export const CoinmarketTransactionContainer = ({ const isMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`); return ( - + - + {TradeDetail} - {tradeType} • •{' '} + + {tradeType} + - + ); }; diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx index da29aff29e9..7f6467cc9a0 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx @@ -2,7 +2,6 @@ import { DefaultTheme, useTheme } from 'styled-components'; import { BuyTradeStatus, ExchangeTradeStatus, SellTradeStatus } from 'invity-api'; import { Icon, Row, Text } from '@trezor/components'; -import { spacings } from '@trezor/theme'; import { Translation } from 'src/components/suite'; import { getStatusMessage as getBuyStatusMessage } from 'src/utils/wallet/coinmarket/buyUtils'; @@ -131,7 +130,7 @@ export const CoinmarketTransactionStatus = ({ trade }: CoinmarketTransactionStat if (!data) return null; return ( - +