fix(trade): last transactions design

trezor · Dec 1, 2024 · f454923 · f454923
1 parent 41fec8f
commit f454923
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 23 deletions.
diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketIcon.tsx 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 (
+        <CoinmarketIconWrapper $isDark={currentTheme === 'dark'}>
+            <Box margin={spacings.xxxs} height={iconSizes.mediumLarge}>
+                <Image imageSrc={iconUrl} width={iconSizes.mediumLarge} alt="" />
+            </Box>
+        </CoinmarketIconWrapper>
+    );
+};
diff --git 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) => (
     <Row gap={spacings.xs}>
-        {method && <img width="24px" src={invityAPI.getPaymentMethodUrl(method)} alt="" />}
+        {method && <CoinmarketIcon iconUrl={invityAPI.getPaymentMethodUrl(method)} />}
         <CoinmarketPaymentPlainType method={method} methodName={methodName} />
     </Row>
 );
diff --git 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 (
         <Row data-testid="@coinmarket/form/info/provider" gap={spacings.xs}>
-            {!exchange && 'Unknown provider'}
-            {!provider && exchange}
-            {provider && (
+            {!exchange && <Translation id="TR_COINMARKET_UNKNOWN_PROVIDER" />}
+            {provider ? (
                 <>
                     {provider.logo && (
-                        <img
-                            width="16px"
-                            src={invityAPI.getProviderLogoUrl(provider.logo)}
-                            alt=""
-                        />
+                        <CoinmarketIcon iconUrl={invityAPI.getProviderLogoUrl(provider.logo)} />
                     )}
-                    {provider.brandName || provider.companyName}
+                    {provider.brandName ?? provider.companyName}
                 </>
+            ) : (
+                <Text margin={{ left: spacings.xxl }}>{exchange}</Text>
             )}
         </Row>
     );

diff --git a/...et/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx b/...et/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionContainer.tsx
@@ -16,13 +16,9 @@ export const CoinmarketTransactionContainer = ({
     const isMobile = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.SM})`);
 
     return (
-        <Card fillType="none">
+        <Card fillType="none" margin={{ bottom: spacings.lg }}>
             <Row flexWrap={isBelowDesktop ? 'wrap' : undefined}>
-                <Column
-                    alignItems="flex-start"
-                    flex="auto"
-                    width={isBelowDesktop ? 'calc(100% - 180px)' : '100%'}
-                >
+                <Column flex="auto" width={isBelowDesktop ? 'calc(100% - 180px)' : '100%'}>
                     {TradeDetail}
                 </Column>
                 <Column

diff --git a/...nmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionInfo.tsx b/...nmarket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionInfo.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@trezor/components';
+import { InfoSegments } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 import { FormattedDate } from 'src/components/suite';
@@ -26,9 +26,10 @@ export const CoinmarketTransactionInfo = ({ trade }: CoinmarketTransactionInfoPr
     const tradeType = translationString(translationKeys[trade.tradeType]).toUpperCase();
 
     return (
-        <Text margin={{ top: spacings.xs }} variant="tertiary" typographyStyle="label" as="div">
-            {tradeType} • <FormattedDate value={date} date time /> •{' '}
+        <InfoSegments variant="tertiary" typographyStyle="label" margin={{ top: spacings.xs }}>
+            {tradeType}
+            <FormattedDate value={date} date time />
             <CoinmarketTransactionStatus trade={trade} />
-        </Text>
+        </InfoSegments>
     );
 };
diff --git a/...arket/common/CoinmarketTransactions/CoinmarketTransaction/CoinmarketTransactionStatus.tsx b/...arket/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 (
-        <Row margin={{ left: spacings.xxs }}>
+        <Row>
             <Icon color={data.color} size={10} name={data.icon} margin={{ right: 4 }} />
             <Text color={data.color} data-testid="@coinmarket/transaction/status">
                 <Translation id={data.statusMessageId} />