Skip to content

fix: handle long names and numbers issues #1263

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

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

fix: handle long names and numbers issues #1263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 11 additions & 1 deletion widget/embedded/src/components/CustomTokenModal/CustomTokenModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,17 @@ export function CustomTokenModal(props: PropTypes) {
{token.symbol}
</TokenSymbolText>
{token.symbol.length > MAX_SYMBOL_LENGTH_THRESHOLD && (
<Tooltip content={token.symbol} container={getContainer()}>
<Tooltip
styles={{
content: {
maxWidth: 250,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}}
content={token.symbol}
container={getContainer()}>
<InfoIcon size={12} color="gray" />
</Tooltip>
)}
Expand Down
5 changes: 3 additions & 2 deletions widget/embedded/src/components/Quote/Quote.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,6 @@ export const TokenNameText = styled(Typography, {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '$30',
});

export const AmountText = styled(Typography, {
Expand All @@ -354,6 +353,9 @@ export const AmountText = styled(Typography, {
whiteSpace: 'nowrap',
minWidth: 0,
flex: '0 1 auto',
'&.input-amount-text': {
flexShrink: 3,
},
});

export const MoreStep = styled('div', {
Expand Down Expand Up @@ -397,5 +399,4 @@ export const UsdValueText = styled(Typography, {
whiteSpace: 'nowrap',
flex: '0 1 auto',
minWidth: 0,
flexShrink: 3,
});
6 changes: 5 additions & 1 deletion widget/embedded/src/components/Quote/Quote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,11 @@ export function Quote(props: QuoteProps) {
</div>
{type === 'basic' && (
<BasicInfoOutput>
<AmountText ref={inputValueRef} size="small" variant="body">
<AmountText
className="input-amount-text"
ref={inputValueRef}
size="small"
variant="body">
{input.value}
</AmountText>
{isInputValueTruncated && (
Expand Down
2 changes: 2 additions & 0 deletions widget/embedded/src/constants/routing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;

export const BALANCE_MIN_DECIMALS = 8;
export const BALANCE_MAX_DECIMALS = 8;

export const USD_VALUE_DEFAULT_DECIMALS = 12;
11 changes: 5 additions & 6 deletions widget/embedded/src/containers/Inputs/Inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import {
PERCENTAGE_CHANGE_MIN_DECIMALS,
TOKEN_AMOUNT_MAX_DECIMALS,
TOKEN_AMOUNT_MIN_DECIMALS,
USD_VALUE_MAX_DECIMALS,
USD_VALUE_MIN_DECIMALS,
USD_VALUE_DEFAULT_DECIMALS,
} from '../../constants/routing';
import { useSwapMode } from '../../hooks/useSwapMode';
import { useAppStore } from '../../store/AppStore';
Expand Down Expand Up @@ -101,8 +100,8 @@ export function Inputs(props: PropTypes) {
? undefined
: numberToString(
inputUsdValue,
USD_VALUE_MIN_DECIMALS,
USD_VALUE_MAX_DECIMALS
USD_VALUE_DEFAULT_DECIMALS,
USD_VALUE_DEFAULT_DECIMALS
),
realUsdValue: priceImpactInputCanNotBeComputed
? undefined
Expand Down Expand Up @@ -164,8 +163,8 @@ export function Inputs(props: PropTypes) {
? undefined
: numberToString(
outputUsdValue,
USD_VALUE_MIN_DECIMALS,
USD_VALUE_MAX_DECIMALS
USD_VALUE_DEFAULT_DECIMALS,
USD_VALUE_DEFAULT_DECIMALS
),
realValue: outputAmount?.toString(),
realUsdValue: priceImpactOutputCanNotBeComputed
Expand Down
5 changes: 5 additions & 0 deletions widget/ui/src/components/PriceImpact/PriceImpact.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const Container = styled('div', {
alignItems: 'center',
overflow: 'hidden',
minWidth: 0,
gap: 4,
});

export const ValueTypography = styled('div', {
Expand All @@ -17,6 +18,10 @@ export const ValueTypography = styled('div', {
flexShrink: 1,
maxWidth: '100%',
},
'& .percentage-value': {
flex: '1 1 0',
minWidth: 0,
},
'& ._typography': {
$$color: '$colors$neutral600',
[`.${darkTheme} &`]: {
Expand Down
26 changes: 22 additions & 4 deletions widget/ui/src/components/PriceImpact/PriceImpact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React, { useRef } from 'react';
import { useIsTruncated } from 'src/hooks/useIsTruncated.js';
import { InfoIcon } from 'src/icons/index.js';

import { Divider, NumericTooltip, Typography } from '../index.js';
import { NumericTooltip, Typography } from '../index.js';
import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';

import { Container, ValueTypography } from './PriceImpact.styles.js';
Expand All @@ -19,6 +19,7 @@ export function PriceImpact(props: PriceImpactPropTypes) {
warningLevel,
error,
tooltipProps,
style,
...rest
} = props;

Expand All @@ -29,8 +30,22 @@ export function PriceImpact(props: PriceImpactPropTypes) {
realOutputUsdValue || '',
realOutputUsdValueRef
);

const percentageValueRef = useRef<HTMLSpanElement | null>(null);
const isPercentageValueTruncated = useIsTruncated(
`(-${percentageChange}%)`,
percentageValueRef
);

return (
<Container {...rest}>
<Container
{...rest}
style={{
...style,
...(isPercentageValueTruncated && {
flexWrap: 'wrap',
}),
}}>
{outputUsdValue && (
<ValueTypography className={textTruncate()}>
<Typography
Expand All @@ -53,8 +68,11 @@ export function PriceImpact(props: PriceImpactPropTypes) {
)}
{((outputUsdValue && percentageChange) || !outputUsdValue) && (
<ValueTypography hasError={hasError} hasWarning={hasWarning}>
<Divider direction="horizontal" size={4} />
<Typography size={size} variant="body">
<Typography
ref={percentageValueRef}
className="percentage-value"
size={size}
variant="body">
{outputUsdValue &&
percentageChange &&
`(${
Expand Down
46 changes: 40 additions & 6 deletions widget/ui/src/components/TokenAmount/TokenAmount.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { css, styled } from '../../theme.js';
import { Typography } from '../Typography/Typography.js';
import { ValueTypography } from '../PriceImpact/PriceImpact.styles.js';

export const Container = styled('div', {
display: 'flex',
justifyContent: 'space-between',
overflow: 'hidden',
gap: '$8',
variants: {
direction: {
Expand All @@ -26,7 +27,7 @@ export const centeredFlexBox = css({
});

export const TokenAmountWrapper = styled('div', {
flex: '1 1 0',
flex: '1 1 auto',
minWidth: 0,
display: 'flex',
alignItems: 'center',
Expand All @@ -47,31 +48,62 @@ export const usdValueStyles = css({
paddingBottom: '$5',
minWidth: 0,
flex: '0 1 auto',
[`& ${ValueTypography}`]: {
minWidth: 0,
},
});

export const tooltipRootStyle = {
width: 'fit-content',
};

export const TokenNameText = styled(Typography, {
maxWidth: '64px',
export const RealAmountWrapper = styled('div', {
display: 'flex',
gap: 2,
minWidth: 0,
alignItems: 'center',
flex: '1 1 0%',
'& svg': {
flex: '0 0 auto',
},
});

export const TokenNameWrapper = styled('div', {
maxWidth: '78px',
display: 'flex',
gap: 2,
minWidth: 0,
flex: '0 1 auto',
alignItems: 'center',
'& svg': {
flex: '0 0 auto',
},
'& .token-name-text': {
maxWidth: '64px',
},
});

export const textTruncate = css({
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%',
display: 'block',
whiteSpace: 'nowrap',
minWidth: 0,
});

export const flexShrinkFix = css({
minWidth: 0,
});

export const usdValueText = css({
maxWidth: 88,
});

export const horizontalUsdValueText = css({
'& .output-usd-value': {
maxWidth: 77,
maxWidth: 88,
},
maxWidth: 88,
});
export const verticalUsdValueText = css({
'& .output-usd-value': {
Expand All @@ -88,4 +120,6 @@ export const TokenInfoRow = styled('div', {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
flex: 1,
gap: 8,
});
75 changes: 39 additions & 36 deletions widget/ui/src/components/TokenAmount/TokenAmount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ import {
Container,
flexShrink,
flexShrinkFix,
horizontalUsdValueText,
RealAmountWrapper,
textTruncate,
TokenAmountWrapper,
TokenInfoRow,
TokenNameText,
TokenNameWrapper,
tooltipRootStyle,
usdValueStyles,
usdValueText,
Expand Down Expand Up @@ -61,46 +63,50 @@ export function TokenAmount(props: PropTypes) {
</Typography>
)}
<TokenInfoRow className={flexShrinkFix()}>
<Typography
size="medium"
variant="title"
ref={realValueRef}
className={`${textTruncate()} ${flexShrinkFix()}`}
style={{ fontWeight: 600 }}>
{props.price.realValue}
</Typography>
{props.price.realValue && isRealValueTruncated && (
<>
<Divider direction="horizontal" size={2} />

<RealAmountWrapper>
<Typography
size="medium"
variant="title"
ref={realValueRef}
className={`${textTruncate()} ${flexShrinkFix()}`}
style={{ fontWeight: 600 }}>
{props.price.realValue}
</Typography>
{props.price.realValue && isRealValueTruncated && (
<NumericTooltip
styles={{ root: tooltipRootStyle }}
content={props.price.realValue}
open={!props.price.realValue ? false : undefined}
container={props.tooltipContainer}>
<InfoIcon size={12} color="gray" />
</NumericTooltip>
</>
)}
<Divider direction="horizontal" size={8} />
<TokenNameText
size="medium"
variant="title"
className={textTruncate()}
ref={displayNameRef}
style={{ fontWeight: 400 }}>
{props.token.displayName}
</TokenNameText>
{isDisplayNameTruncated && (
<>
<Divider direction="horizontal" size={2} />
)}
</RealAmountWrapper>
<TokenNameWrapper>
<Typography
size="medium"
variant="title"
className={`${textTruncate()} token-name-text`}
ref={displayNameRef}
style={{ fontWeight: 400 }}>
{props.token.displayName}
</Typography>
{isDisplayNameTruncated && (
<Tooltip
content={props.token.displayName}
container={props.tooltipContainer}>
container={props.tooltipContainer}
styles={{
content: {
maxWidth: 250,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}}>
<InfoIcon size={12} color="gray" />
</Tooltip>
</>
)}
)}
</TokenNameWrapper>
</TokenInfoRow>
</div>
</TokenAmountWrapper>
Expand All @@ -127,13 +133,10 @@ export function TokenAmount(props: PropTypes) {
{props.type === 'output' && (
<PriceImpact
className={`${
props.direction === 'horizontal'
? usdValueText()
: verticalUsdValueText()
props.direction === 'vertical'
? verticalUsdValueText()
: horizontalUsdValueText()
} ${flexShrinkFix()} ${flexShrink()}`}
style={{
...(props.direction === 'horizontal' && { flexWrap: 'wrap' }),
}}
size="small"
tooltipProps={{ container: props.tooltipContainer, side: 'top' }}
outputUsdValue={props.price.usdValue}
Expand Down
9 changes: 9 additions & 0 deletions widget/ui/src/containers/SwapInput/SwapInput.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,12 @@ export const UsdPrice = styled(Typography, {
textOverflow: 'ellipsis',
maxWidth: 147,
});

export const textTruncate = css({
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '100%',
display: 'block',
whiteSpace: 'nowrap',
minWidth: 0,
});
Loading