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 (
-
+