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.

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
Merged
Changes from 1 commit
Commits
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 committed Dec 3, 2024
commit c27f9895fefcb137228d70476441d1099ab18aec
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
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
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>
);
};
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