Skip to content

Commit fa2f0e5

Browse files
mikasackermnmikasackermn
committed
fix: handle long names and numbers
1 parent 8f40ee6 commit fa2f0e5

File tree

17 files changed

+404
-126
lines changed

17 files changed

+404
-126
lines changed

‎widget/embedded/src/components/Quote/Quote.styles.ts

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -343,18 +343,25 @@ export const HorizontalSeparator = styled('div', {
343343
borderColor: '$$color',
344344
});
345345

346-
export const FrameIcon = styled('div', {
347-
width: '$16',
348-
height: '$16',
349-
justifyContent: 'center',
350-
alignItems: 'center',
346+
export const BasicInfoOutput = styled('div', {
351347
display: 'flex',
348+
flexDirection: 'row',
349+
gap: '$2',
350+
});
351+
export const TokenNameText = styled(Typography, {
352+
overflow: 'hidden',
353+
textOverflow: 'ellipsis',
354+
letterSpacing: 0.4,
355+
whiteSpace: 'nowrap',
356+
maxWidth: '$40',
352357
});
353358

354-
export const BasicInfoOutput = styled(Typography, {
359+
export const AmountText = styled(Typography, {
355360
overflow: 'hidden',
356361
textOverflow: 'ellipsis',
357362
letterSpacing: 0.4,
363+
whiteSpace: 'nowrap',
364+
maxWidth: '82.5px',
358365
});
359366

360367
export const ContainerInfoOutput = styled('div', {

‎widget/embedded/src/components/Quote/Quote.tsx

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
TOKEN_AMOUNT_MIN_DECIMALS,
3232
USD_VALUE_MAX_DECIMALS,
3333
USD_VALUE_MIN_DECIMALS,
34+
VALUE_LENGTH_THRESHOLD,
3435
} from '../../constants/routing';
3536
import {
3637
FooterAlert,
@@ -57,11 +58,11 @@ import { getTotalFeeInUsd, getUsdFeeOfStep } from '../../utils/swap';
5758

5859
import {
5960
AllRoutesButton,
61+
AmountText,
6062
BasicInfoOutput,
6163
basicInfoStyles,
6264
ContainerInfoOutput,
6365
Content,
64-
FrameIcon,
6566
HorizontalSeparator,
6667
Line,
6768
QuoteContainer,
@@ -70,6 +71,7 @@ import {
7071
summaryHeaderStyles,
7172
summaryStyles,
7273
TagContainer,
74+
TokenNameText,
7375
} from './Quote.styles';
7476
import { QuoteCostDetails } from './QuoteCostDetails';
7577
import { QuoteSummary } from './QuoteSummary';
@@ -97,11 +99,6 @@ export function Quote(props: QuoteProps) {
9799
const userSlippage = customSlippage || slippage;
98100
const [expanded, setExpanded] = useState(props.expanded);
99101
const quoteRef = useRef<HTMLButtonElement | null>(null);
100-
const roundedInput = numberToString(
101-
input.value,
102-
TOKEN_AMOUNT_MIN_DECIMALS,
103-
TOKEN_AMOUNT_MAX_DECIMALS
104-
);
105102
const roundedOutput = numberToString(
106103
output.value,
107104
TOKEN_AMOUNT_MIN_DECIMALS,
@@ -422,24 +419,40 @@ export function Quote(props: QuoteProps) {
422419
</div>
423420
{type === 'basic' && (
424421
<div className={basicInfoStyles()}>
425-
<FrameIcon>
426-
<InfoIcon size={12} color="gray" />
427-
</FrameIcon>
428422
<ContainerInfoOutput>
429-
<BasicInfoOutput size="small" variant="body">
430-
{`${roundedInput} ${steps[0].from.token.displayName} = `}
423+
<BasicInfoOutput>
424+
<AmountText size="small" variant="body">
425+
{input.value}
426+
</AmountText>
427+
{input.value.length > VALUE_LENGTH_THRESHOLD && (
428+
<NumericTooltip
429+
content={input.value}
430+
container={container}
431+
open={!input.value ? false : undefined}>
432+
<InfoIcon size={12} color="gray" />
433+
</NumericTooltip>
434+
)}
435+
<TokenNameText size="small" variant="body">
436+
{steps[0].from.token.displayName}
437+
</TokenNameText>
438+
<Typography size="small" variant="body">
439+
=
440+
</Typography>
441+
<AmountText size="small" variant="body">
442+
{output.value}
443+
</AmountText>
444+
{output.value.length > VALUE_LENGTH_THRESHOLD && (
445+
<NumericTooltip
446+
content={output.value}
447+
container={container}
448+
open={!output.value ? false : undefined}>
449+
<InfoIcon size={12} color="gray" />
450+
</NumericTooltip>
451+
)}
452+
<TokenNameText size="small" variant="body">
453+
{steps[steps.length - 1].to.token.displayName}
454+
</TokenNameText>
431455
</BasicInfoOutput>
432-
<NumericTooltip
433-
content={output.value}
434-
container={container}
435-
open={!output.value ? false : undefined}>
436-
<BasicInfoOutput size="small" variant="body">
437-
&nbsp;
438-
{`${roundedOutput} ${
439-
steps[steps.length - 1].to.token.displayName
440-
}`}
441-
</BasicInfoOutput>
442-
</NumericTooltip>
443456
</ContainerInfoOutput>
444457
<NumericTooltip content={output.usdValue} container={container}>
445458
<Divider size={2} direction="horizontal" />

‎widget/embedded/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,7 @@ export function HighValueLossWarningModal(props: Props) {
4141
const highValueLossData = [
4242
{
4343
title: i18n.t('Swapping'),
44-
value: numberToString(
45-
warning.inputUsdValue,
46-
USD_VALUE_MIN_DECIMALS,
47-
USD_VALUE_MAX_DECIMALS
48-
),
44+
value: numberToString(warning.inputUsdValue),
4945
},
5046
{
5147
title: i18n.t('Gas cost'),

‎widget/embedded/src/components/QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
11
import type { ModalContentData } from './QuoteWarningsAndErrors.types';
22

3-
import { Typography } from '@rango-dev/ui';
3+
import { InfoIcon, Tooltip, Typography } from '@rango-dev/ui';
44
import React from 'react';
55

6-
import { Item } from './QuoteWarningsAndErrors.styles';
6+
import { getContainer } from '../../utils/common';
7+
8+
import {
9+
Item,
10+
ValueContent,
11+
ValueTypography,
12+
} from './QuoteWarningsAndErrors.styles';
13+
14+
const VALUE_LENGTH_THRESHOLD = 35;
715

816
export function QuoteErrorsModalItem(props: ModalContentData) {
917
const { title, value, valueColor } = props;
18+
const container = getContainer();
1019

1120
return (
1221
<Item>
1322
<Typography size="medium" variant="label" className="_title">
1423
{title}
1524
</Typography>
16-
<Typography
17-
size="large"
18-
variant="label"
19-
color={valueColor || 'foreground'}>
20-
{`${valueColor ? '%' : '$'}${value}`}
21-
</Typography>
25+
<ValueContent>
26+
<ValueTypography
27+
size="large"
28+
variant="label"
29+
color={valueColor || 'foreground'}>
30+
{`${valueColor ? '%' : '$'}${value}`}
31+
</ValueTypography>
32+
{value.length > VALUE_LENGTH_THRESHOLD && (
33+
<Tooltip content={value} container={container}>
34+
<InfoIcon size={12} color="gray" />
35+
</Tooltip>
36+
)}
37+
</ValueContent>
2238
</Item>
2339
);
2440
}

‎widget/embedded/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, darkTheme, styled } from '@rango-dev/ui';
1+
import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
22

33
export const Alerts = styled('div', {
44
width: '100%',
@@ -27,6 +27,21 @@ export const Item = styled('div', {
2727
},
2828
});
2929

30+
export const ValueContent = styled('div', {
31+
display: 'flex',
32+
justifyContent: 'center',
33+
alignItems: 'center',
34+
gap: '$2',
35+
});
36+
37+
export const ValueTypography = styled(Typography, {
38+
overflow: 'hidden',
39+
textOverflow: 'ellipsis',
40+
letterSpacing: 0.4,
41+
whiteSpace: 'nowrap',
42+
maxWidth: '250px',
43+
});
44+
3045
export const Action = styled('div', {
3146
padding: '$2',
3247
alignSelf: 'flex-start',

‎widget/embedded/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useUiStore } from '../../store/ui';
2020
import { getContainer } from '../../utils/common';
2121
import { WatermarkedModal } from '../common/WatermarkedModal';
2222

23-
import { ProfileBanner } from './SwapDetailsModal.styles';
23+
import { ProfileBanner, wordWrap } from './SwapDetailsModal.styles';
2424

2525
export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
2626
const {
@@ -68,6 +68,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
6868
/>
6969
<Divider size={12} />
7070
<Typography
71+
className={wordWrap()}
7172
variant="body"
7273
size="medium"
7374
color="neutral700"

‎widget/embedded/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from '@rango-dev/ui';
1+
import { css, styled } from '@rango-dev/ui';
22

33
export const WalletContainer = styled('div', {
44
display: 'flex',
@@ -16,3 +16,8 @@ export const TooltipErrorContent = styled('div', {
1616
export const ProfileBanner = styled('img', {
1717
width: '100%',
1818
});
19+
20+
export const wordWrap = css({
21+
whiteSpace: 'normal',
22+
wordBreak: 'break-all',
23+
});

‎widget/embedded/src/constants/routing.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,5 @@ export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
1515

1616
export const BALANCE_MIN_DECIMALS = 8;
1717
export const BALANCE_MAX_DECIMALS = 8;
18+
19+
export const VALUE_LENGTH_THRESHOLD = 11;

‎widget/ui/src/components/Alert/Alert.styles.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ export const Main = styled('div', {
9595
display: 'flex',
9696
alignItems: 'center',
9797
alignSelf: 'stretch',
98+
whiteSpace: 'normal',
99+
wordBreak: 'break-all',
100+
98101
variants: {
99102
variant: {
100103
regular: {

‎widget/ui/src/components/PriceImpact/PriceImpact.styles.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const ValueTypography = styled('div', {
1313
overflow: 'hidden',
1414
textOverflow: 'ellipsis',
1515
'& ._typography': {
16+
maxWidth: '71px',
1617
$$color: '$colors$neutral600',
1718
[`.${darkTheme} &`]: {
1819
$$color: '$colors$neutral700',

0 commit comments

Comments
 (0)