Skip to content

Commit

Permalink
fix(suite): fix colors and icons in Tx detail
Browse files Browse the repository at this point in the history
  • Loading branch information
@MiroslavProchazka @komret
MiroslavProchazka authored and komret committed Oct 3, 2024
1 parent 1dccfc1 commit a864485
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 71 deletions.
3 changes: 0 additions & 3 deletions packages/suite/src/components/suite/FormattedDateWithBullet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,10 @@ import { FormattedDate, FormattedDateProps } from './FormattedDate';
const Bullet = styled.span`
margin-left: 0.5ch;
margin-right: 0.5ch;
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
`;

const HourWrapper = styled.div<{ $timeLightColor?: boolean }>`
display: inline-flex;
color: ${({ theme, $timeLightColor }) =>
$timeLightColor ? theme.legacy.TYPE_LIGHT_GREY : 'inherit'};
`;

const Timestamp = styled.span`
Expand Down
4 changes: 2 additions & 2 deletions ...rc/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ export const TransactionReviewSummary = ({
{!!tx.feeLimit && network.networkType !== 'solana' && (
<LeftDetailsRow>
<ReviewLeftDetailsLineLeft>
<Icon size={12} color={theme.iconSubdued} name="gas" />
<Icon size={12} color={theme.iconSubdued} name="gasPump" />
<Translation id="TR_GAS_LIMIT" />
</ReviewLeftDetailsLineLeft>

Expand All @@ -304,7 +304,7 @@ export const TransactionReviewSummary = ({
)}
<LeftDetailsRow>
<ReviewLeftDetailsLineLeft>
<Icon size={12} color={theme.iconSubdued} name="gas" />
<Icon size={12} color={theme.iconSubdued} name="gasPump" />
<Translation
id={feeLabelTranslationIdByNetworkTypeMap[network.networkType]}
/>
Expand Down
76 changes: 49 additions & 27 deletions .../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Wrapper = styled.div<{ $elevation: Elevation }>`

const Confirmations = styled.div`
display: flex;
color: ${({ theme }) => theme.textSubdued};
color: ${({ theme }) => theme.textDefault};
${typography.hint}
`;

Expand Down Expand Up @@ -82,12 +82,6 @@ const Value = styled.div`
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
`;

const TxidValue = styled.div`
color: ${({ theme }) => theme.textDefault};
${typography.label}
`;

const IconWrapper = styled.div<{ $elevation: Elevation }>`
background-color: ${mapElevationToBorder};
border-radius: ${borders.radii.full};
Expand Down Expand Up @@ -145,18 +139,13 @@ const ConfirmationStatus = styled.div<{ $confirmed: boolean; $tiny?: boolean }>`
const Circle = styled.div`
margin-left: ${spacingsPx.xxs};
margin-right: ${spacingsPx.xxs};
color: ${({ theme }) => theme.textSubdued};
color: ${({ theme }) => theme.textDefault};
`;

const Timestamp = styled.span`
white-space: nowrap;
`;

const IconPlaceholder = styled.span`
min-width: 10px;
margin-right: ${spacingsPx.xs};
`;

interface BasicTxDetailsProps {
tx: WalletAccountTransaction;
network: Network;
Expand Down Expand Up @@ -229,7 +218,12 @@ export const BasicTxDetails = ({
<Grid>
{/* MINED TIME */}
<Title>
<Icon name="calendar" size={10} margin={{ right: spacings.xs }} />
<Icon
name="calendar"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
{isConfirmed ? (
<Translation id="TR_MINED_TIME" />
) : (
Expand All @@ -252,23 +246,31 @@ export const BasicTxDetails = ({

{/* TX ID */}
<Title>
<Icon name="biometric" size={10} margin={{ right: spacings.xs }} />
<Icon
name="biometric"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
<Translation id="TR_TXID" />
</Title>

<TxidValue>
<IOAddress
txAddress={tx.txid}
explorerUrl={explorerUrl}
explorerUrlQueryString={explorerUrlQueryString}
/>
</TxidValue>
<IOAddress
txAddress={tx.txid}
explorerUrl={explorerUrl}
explorerUrlQueryString={explorerUrlQueryString}
/>

{network.networkType === 'bitcoin' && (
<>
{/* Fee level */}
<Title>
<Icon margin={{ right: spacings.xs }} name="gas" size={10} />
<Icon
margin={{ right: spacings.xs }}
name="gas"
size={15}
variant="tertiary"
/>
<Translation id="TR_FEE_RATE" />
</Title>

Expand All @@ -287,13 +289,23 @@ export const BasicTxDetails = ({
{tx.ethereumSpecific && (
<>
<Title>
<Icon name="gas" size={10} margin={{ right: spacings.xs }} />
<Icon
name="gasPump"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
<Translation id="TR_GAS_LIMIT" />
</Title>
<Value>{tx.ethereumSpecific.gasLimit}</Value>

<Title>
<Icon name="gas" size={10} margin={{ right: spacings.xs }} />
<Icon
name="gasPump"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
<Translation id="TR_GAS_USED" />
</Title>
<Value>
Expand All @@ -305,15 +317,25 @@ export const BasicTxDetails = ({
</Value>

<Title>
<Icon name="gas" size={10} margin={{ right: spacings.xs }} />
<Icon
name="gasPump"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
<Translation id="TR_GAS_PRICE" />
</Title>
<Value>{`${fromWei(tx.ethereumSpecific?.gasPrice ?? '0', 'gwei')} ${getFeeUnits(
'ethereum',
)}`}</Value>

<Title>
<IconPlaceholder>#</IconPlaceholder>
<Icon
name="hash"
size={15}
margin={{ right: spacings.xs }}
variant="tertiary"
/>
<Translation id="TR_NONCE" />
</Title>
<Value>{tx.ethereumSpecific?.nonce}</Value>
Expand Down
79 changes: 40 additions & 39 deletions ...suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/IOAddress.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { HiddenPlaceholder } from 'src/components/suite/HiddenPlaceholder';
import { Icon, Link } from '@trezor/components';
import { Icon, Link, Paragraph } from '@trezor/components';
import { useState } from 'react';
import { copyToClipboard } from '@trezor/dom-utils';
import styled, { css, useTheme } from 'styled-components';
Expand Down Expand Up @@ -34,7 +34,6 @@ const TextOverflowContainer = styled.div<{ $shouldAllowCopy?: boolean }>`
align-items: center;
max-width: 100%;
overflow: hidden;
color: ${({ theme }) => theme.textSubdued};
cursor: ${({ $shouldAllowCopy }) => ($shouldAllowCopy ? 'pointer' : 'cursor')};
user-select: none;
Expand Down Expand Up @@ -95,42 +94,44 @@ export const IOAddress = ({

// HiddenPlaceholder disableKeepingWidth: it isn't needed (no numbers to redact), but inline-block disrupts overflow behavior
return (
<HiddenPlaceholder disableKeepingWidth>
<TextOverflowContainer
onMouseLeave={() => setIsClicked(false)}
data-testid="@tx-detail/txid-value"
id={txAddress}
$shouldAllowCopy={shouldAllowCopy}
>
{txAddress.length <= 5 ? (
<SpanTextEnd onClick={copy}>{txAddress}</SpanTextEnd>
) : (
<>
<SpanTextStart onClick={copy}>{txAddress.slice(0, -4)}</SpanTextStart>
<SpanTextEnd onClick={copy}>{txAddress.slice(-4)}</SpanTextEnd>
</>
)}
{shouldAllowCopy ? (
<IconWrapper onClick={copy}>
<Icon
name={isClicked ? 'check' : 'copy'}
size={12}
color={theme.iconOnPrimary}
/>
</IconWrapper>
) : null}
{explorerUrl ? (
<IconWrapper>
<Link
type="label"
variant="nostyle"
href={`${explorerUrl}${txAddress}${explorerUrlQueryString}`}
>
<Icon name="arrowUpRight" size={12} color={theme.iconOnPrimary} />
</Link>
</IconWrapper>
) : null}
</TextOverflowContainer>
</HiddenPlaceholder>
<Paragraph typographyStyle="label" variant="default">
<HiddenPlaceholder disableKeepingWidth>
<TextOverflowContainer
onMouseLeave={() => setIsClicked(false)}
data-testid="@tx-detail/txid-value"
id={txAddress}
$shouldAllowCopy={shouldAllowCopy}
>
{txAddress.length <= 5 ? (
<SpanTextEnd onClick={copy}>{txAddress}</SpanTextEnd>
) : (
<>
<SpanTextStart onClick={copy}>{txAddress.slice(0, -4)}</SpanTextStart>
<SpanTextEnd onClick={copy}>{txAddress.slice(-4)}</SpanTextEnd>
</>
)}
{shouldAllowCopy ? (
<IconWrapper onClick={copy}>
<Icon
name={isClicked ? 'check' : 'copy'}
size={12}
color={theme.iconOnPrimary}
/>
</IconWrapper>
) : null}
{explorerUrl ? (
<IconWrapper>
<Link
type="label"
variant="nostyle"
href={`${explorerUrl}${txAddress}${explorerUrlQueryString}`}
>
<Icon name="arrowUpRight" size={12} color={theme.iconOnPrimary} />
</Link>
</IconWrapper>
) : null}
</TextOverflowContainer>
</HiddenPlaceholder>
</Paragraph>
);
};

0 comments on commit a864485

Please sign in to comment.