Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display all tokens in a multitoken tx #15457

Merged
merged 5 commits into from
Dec 3, 2024
+498 −393
Merged

Display all tokens in a multitoken tx #15457

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c27f989
feat(suite): display multitoken value and adjust styles
enjojoy Dec 2, 2024
c2a8f78
fix(suite): nits and remove custom styles
enjojoy Dec 2, 2024
686e102
feat(suite): blur urls in transaction heading
enjojoy Dec 2, 2024
1aab6cd
fix(suite): fix typography style of link and blur urls
enjojoy Dec 2, 2024
ae569e6
fix(suite): fix e2e
enjojoy Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(suite): display multitoken value and adjust styles
@enjojoy
enjojoy committed Dec 3, 2024
commit c27f9895fefcb137228d70476441d1099ab18aec
6 changes: 5 additions & 1 deletion packages/components/src/components/typography/Link/Link.tsx
View file
Original file line number Diff line number Diff line change
@@ -22,12 +22,13 @@ type AllowedLinkTextProps = Pick<TextPropsCommon, (typeof allowedLinkTextProps)[

type AProps = TransientProps<AllowedLinkTextProps> & {
$variant?: 'default' | 'nostyle' | 'underline';
$color?: string;
};

const A = styled.a<AProps>`
text-decoration: none;
cursor: pointer;
color: ${({ theme }) => theme.textDefault};
color: ${({ $color, theme }) => $color || theme.textDefault};
font-weight: 500;
display: inline-flex;
align-items: center;
@@ -68,6 +69,7 @@ type LinkProps = AllowedLinkTextProps & {
className?: string;
variant?: 'default' | 'nostyle' | 'underline'; // Todo: refactor, variant has different meaning in our design system
icon?: IconName;
color?: string;
'data-testid'?: string;
};

@@ -78,6 +80,7 @@ const Link = ({
onClick,
'data-testid': dataTest,
children,
color,
className,
variant,
typographyStyle = 'body',
@@ -99,6 +102,7 @@ const Link = ({
$variant={variant}
className={className}
{...textProps}
$color={color}
>
{children}
{icon && <Icon size={iconSize} name={icon} />}
24 changes: 12 additions & 12 deletions packages/suite/src/components/suite/FormattedCryptoAmount.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import {
networkAmountToSmallestUnit,
} from '@suite-common/wallet-utils';
import { isSignValuePositive } from '@suite-common/formatters';
import { Row } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { useBitcoinAmountUnit } from 'src/hooks/wallet/useBitcoinAmountUnit';
import { useSelector } from 'src/hooks/suite';
@@ -17,10 +19,6 @@ import { BlurUrls } from 'src/views/wallet/tokens/common/BlurUrls';

import { RedactNumericalValue } from './RedactNumericalValue';

const Container = styled.span`
max-width: 100%;
`;

const Value = styled.span`
font-variant-numeric: tabular-nums;
overflow: hidden;
@@ -45,8 +43,8 @@ export const FormattedCryptoAmount = ({
signValue,
disableHiddenPlaceholder,
isRawString,
'data-testid': dataTest,
className,
'data-testid': dataTest,
}: FormattedCryptoAmountProps) => {
const locale = useSelector(selectLanguage);

@@ -97,23 +95,25 @@ export const FormattedCryptoAmount = ({
}

const content = (
<Container className={className}>
{!!signValue && <Sign value={signValue} />}
<Value data-testid={dataTest}>
<RedactNumericalValue value={formattedValue} />
</Value>
<Row width="100%" gap={spacings.xxs} className={className}>
<Row>
{!!signValue && <Sign value={signValue} />}
<Value data-testid={dataTest}>
<RedactNumericalValue value={formattedValue} />
</Value>
</Row>
{formattedSymbol && (
<>
{' '}
<BlurUrls text={formattedSymbol} />
</>
)}
</Container>
</Row>
);

if (disableHiddenPlaceholder) {
return content;
}

return <HiddenPlaceholder className={className}>{content}</HiddenPlaceholder>;
return <HiddenPlaceholder>{content}</HiddenPlaceholder>;
};
147 changes: 93 additions & 54 deletions packages/suite/src/components/suite/FormattedNftAmount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,128 @@
import styled from 'styled-components';
import { useTheme } from 'styled-components';

import { SignValue } from '@suite-common/suite-types';
import { getNftTokenId } from '@suite-common/wallet-utils';
import { isNftMultitokenTransfer } from '@suite-common/wallet-utils';
import { TokenTransfer } from '@trezor/connect';
import { variables } from '@trezor/components';
import { Box, Column, Row, Text } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { HiddenPlaceholder, Sign } from 'src/components/suite';
import { HiddenPlaceholder, Sign, Translation } from 'src/components/suite';
// importing directly, otherwise unit tests fail, seems to be a styled-components issue
import { TrezorLink } from 'src/components/suite/TrezorLink';
import { useSelector } from 'src/hooks/suite/useSelector';

const Container = styled.div`
max-width: 100%;
display: flex;
`;

const Symbol = styled.div`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
`;

const StyledTrezorLink = styled(TrezorLink)`
color: ${({ theme }) => theme.legacy.TYPE_GREEN};
text-decoration: underline;
display: flex;
font-size: ${variables.FONT_SIZE.TINY};
line-height: initial;
align-items: center;
`;

const NoLink = styled.div`
display: flex;
`;

const Id = styled.div`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 145px;
`;
import { useTranslation } from 'src/hooks/suite';
import { BlurUrls } from 'src/views/wallet/tokens/common/BlurUrls';

export interface FormattedNftAmountProps {
transfer: TokenTransfer;
signValue?: SignValue;
className?: string;
isWithLink?: boolean;
alignMultitoken?: 'flex-end' | 'flex-start';
}

export const FormattedNftAmount = ({
transfer,
signValue,
className,
isWithLink,
alignMultitoken = 'flex-end',
}: FormattedNftAmountProps) => {
const id = getNftTokenId(transfer);

const theme = useTheme();
const { translationString } = useTranslation();
const { selectedAccount } = useSelector(state => state.wallet);
const { network } = selectedAccount;
const explorerUrl =
network?.networkType === 'ethereum'
? `${network?.explorer.nft}/${transfer.contract}/${id}`
: undefined;

const idComponent = <Id>{id}</Id>;
const symbolComponent = transfer.symbol ? <Symbol>&nbsp;{transfer.symbol}</Symbol> : null;
const symbolComponent = transfer.symbol ? (
<Text maxWidth={120} ellipsisLineCount={1}>
{transfer.symbol}
</Text>
) : null;

const isMultitoken = isNftMultitokenTransfer(transfer);

if (isMultitoken) {
const tokens = transfer.multiTokenValues;

return (
<HiddenPlaceholder>
<Column alignItems={alignMultitoken}>
{tokens?.map((token, index) => (
<Row key={`${token.id}-${index}`} gap={spacings.xxs}>
<Row>
{signValue ? <Sign value={signValue} /> : null}
{transfer.name ? (
<BlurUrls
text={translationString('TR_COLLECTION_NAME_OF_TOKEN_ID', {
tokenValue: token.value,
collectionName: transfer.name,
})}
/>
) : (
<Row gap={spacings.xxs}>
<Row>{token.value}x</Row>
<Translation id="TR_TOKEN_ID" />
</Row>
)}
</Row>
{isWithLink && network?.networkType === 'ethereum' ? (
<TrezorLink
href={`${network?.explorer.nft}/${transfer.contract}/${token.id}`}
color={theme.textSecondaryHighlight}
variant="underline"
typographyStyle="label"
>
<Text maxWidth={145} ellipsisLineCount={1}>
{token.id}
</Text>
</TrezorLink>
) : (
<Text maxWidth={145} ellipsisLineCount={1}>
{token.id}
</Text>
)}
</Row>
))}
</Column>
</HiddenPlaceholder>
);
}

return (
<HiddenPlaceholder>
<Container className={className}>
<Row className={className}>
{signValue ? <Sign value={signValue} /> : null}
ID:&nbsp;
<Box margin={{ right: spacings.xxs }}>
<Translation id="TR_TOKEN_ID" />
</Box>
{isWithLink ? (
<StyledTrezorLink href={explorerUrl}>
{idComponent}
{symbolComponent}
</StyledTrezorLink>
<TrezorLink
href={
network?.networkType === 'ethereum'
? `${network?.explorer.nft}/${transfer.contract}/${transfer.amount}`
: undefined
}
color={theme.textSecondaryHighlight}
variant="underline"
typographyStyle="label"
>
<Row gap={spacings.zero}>
<Text maxWidth={145} ellipsisLineCount={1}>
{transfer.amount}
</Text>
&nbsp;
{symbolComponent}
</Row>
</TrezorLink>
) : (
<NoLink>
{idComponent}
<Row gap={spacings.xxs}>
<Text maxWidth={145} ellipsisLineCount={1}>
{transfer.amount}
</Text>
{symbolComponent}
</NoLink>
</Row>
)}
</Container>
</Row>
</HiddenPlaceholder>
);
};
25 changes: 12 additions & 13 deletions packages/suite/src/components/suite/graph/TransactionsGraph/GraphTooltipAccount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import styled from 'styled-components';
import { TooltipProps } from 'recharts';

import { NetworkSymbol } from '@suite-common/wallet-config';
import { Formatters, useFormatters } from '@suite-common/formatters';
import { SignOperator } from '@suite-common/suite-types';
import { Row } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { FormattedCryptoAmount } from 'src/components/suite/FormattedCryptoAmount';
import { CommonAggregatedHistory, GraphRange } from 'src/types/wallet/graph';

import type { CryptoGraphProps } from './TransactionsGraph';
import { GraphTooltipBase } from './GraphTooltipBase';

const StyledCryptoAmount = styled(FormattedCryptoAmount)`
margin-right: 2px;
`;

const formatAmount = (
amount: string | undefined,
symbol: NetworkSymbol,
@@ -26,14 +23,16 @@ const formatAmount = (
const { FiatAmountFormatter } = formatters;

return (
<>
<Row>
{amount && (
<StyledCryptoAmount
value={amount}
symbol={symbol}
signValue={sign}
disableHiddenPlaceholder
/>
<Row margin={{ right: spacings.xxs }}>
<FormattedCryptoAmount
value={amount}
symbol={symbol}
signValue={sign}
disableHiddenPlaceholder
/>
</Row>
)}

{fiatAmount && localCurrency && (
@@ -42,7 +41,7 @@ const formatAmount = (
<FiatAmountFormatter currency={localCurrency} value={fiatAmount} />)
</>
)}
</>
</Row>
);
};

Loading