@rango-dev/ui 0.53.1-next.3 → 0.53.1-next.5

package/src/components/StepDetails/StepDetails.styles.ts

@@ -1,6 +1,7 @@
 import { css } from '@stitches/react';
 
 import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
 
 export const Container = styled('div', {
   width: '100%',
@@ -127,6 +128,20 @@ export const StepSeparator = styled('div', {
   },
 });
 
+export const TokenNameText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '38px',
+});
+
+export const ValueTypography = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '60px',
+});
+
 export const tokensContainerStyles = css({
   width: '100%',
   overflow: 'hidden',

package/src/components/StepDetails/StepDetails.tsx

@@ -4,7 +4,7 @@ import { i18n } from '@lingui/core';
 import React, { forwardRef, Fragment, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/index.js';
-import { NextIcon } from '../../icons/index.js';
+import { InfoIcon, NextIcon } from '../../icons/index.js';
 import { Image } from '../common/index.js';
 import { Divider } from '../Divider/index.js';
 import { NumericTooltip } from '../Tooltip/index.js';
@@ -20,11 +20,14 @@ import {
   swapperItemStyles,
   SwapperSeparator,
   swappersStyles,
+  TokenNameText,
   tokensContainerStyles,
   tokensStyles,
+  ValueTypography,
 } from './StepDetails.styles.js';
 
 const HIGHT_OF_STICKY_HEADER = 45;
+const VALUE_LENGTH_THRESHOLD = 9;
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
   (props, parentRef) => {
@@ -149,11 +152,25 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 content={step.from.price.realValue}
                 container={tooltipContainer}>
                 <Divider direction="horizontal" size={4} />
-                <Typography
+                <ValueTypography
                   size="small"
                   color="$neutral700"
-                  variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+                  variant="body">{`${step.from.price.realValue}`}</ValueTypography>
+
+                {step.from.price.realValue &&
+                  step.from.price.realValue.length > VALUE_LENGTH_THRESHOLD && (
+                    <>
+                      <Divider direction="horizontal" size={2} />
+                      <InfoIcon size={12} color="gray" />
+                    </>
+                  )}
+                <Divider direction="horizontal" size={2} />
+
+                <TokenNameText size="small" color="$neutral700" variant="body">
+                  {step.from.token.displayName}
+                </TokenNameText>
               </NumericTooltip>
+
               <Divider direction="horizontal" size={4} />
 
               <NextIcon color="gray" />
@@ -168,11 +185,19 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 container={tooltipContainer}>
                 <Divider direction="horizontal" size={4} />
 
-                <Typography size="small" color="$neutral700" variant="body">{`${
-                  isCompleted ? '' : '~'
-                }${step.to.price.value} ${
-                  step.to.token.displayName
-                }`}</Typography>
+                <ValueTypography
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${isCompleted ? '' : '~'}${
+                  step.to.price.value
+                }`}</ValueTypography>
+                <Divider direction="horizontal" size={2} />
+                {step.to.price.value.length + (isCompleted ? 0 : 1) >
+                  VALUE_LENGTH_THRESHOLD && <InfoIcon size={12} color="gray" />}
+                <Divider direction="horizontal" size={2} />
+                <TokenNameText size="small" color="$neutral700" variant="body">
+                  {step.to.token.displayName}
+                </TokenNameText>
               </NumericTooltip>
             </div>
             <Alerts pb={hasSeparator && type === 'quote-details'}>

package/src/components/SwapListItem/SwapToken.styles.ts

@@ -1,4 +1,5 @@
 import { styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
 
 export const TokenContainer = styled('div', {
   display: 'flex',
@@ -61,9 +62,9 @@ export const LayoutLoading = styled('div', {
 });
 
 export const IconLoading = styled('div', {
-  display: 'flex',
   width: '$24',
   height: '$24',
+  display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
@@ -74,3 +75,17 @@ export const LoadingContainer = styled('div', {
   alignItems: 'center',
   gap: 25,
 });
+
+export const TokenNameText = styled(Typography, {
+  maxWidth: '97px',
+});
+
+export const AmountText = styled(Typography, {
+  maxWidth: '$48',
+});
+
+export const FlexCenteredContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/SwapListItem/SwapToken.tsx

@@ -3,14 +3,17 @@ import type { PropTypes } from './SwapToken.types.js';
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { NextIcon } from '../../icons/index.js';
+import { InfoIcon, NextIcon } from '../../icons/index.js';
 import { ChainToken } from '../ChainToken/index.js';
 import { Divider } from '../Divider/index.js';
 import { Skeleton } from '../Skeleton/index.js';
-import { NumericTooltip } from '../Tooltip/index.js';
+import { textTruncate } from '../TokenAmount/TokenAmount.styles.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
 import { Typography } from '../Typography/index.js';
 
 import {
+  AmountText,
+  FlexCenteredContainer,
   Icon,
   IconLoading,
   Images,
@@ -18,9 +21,13 @@ import {
   LayoutLoading,
   TokenContainer,
   TokenInfo,
+  TokenNameText,
   TopSection,
 } from './SwapToken.styles.js';
 
+const TOKEN_NAME_TOOLTIP_THRESHOLD = 10;
+const TOKEN_AMOUNT_TOOLTIP_THRESHOLD = 6;
+
 export function SwapToken(props: PropTypes) {
   if ('isLoading' in props) {
     return (
@@ -65,7 +72,6 @@ export function SwapToken(props: PropTypes) {
       },
       to: {
         token: toToken,
-        amount: toAmount,
         blockchain: toBlockchain,
         realAmount: toRealAmount,
       },
@@ -99,15 +105,35 @@ export function SwapToken(props: PropTypes) {
       {status === 'running' ? (
         <Layout direction="column">
           <TopSection>
-            <Typography size="medium" variant="title">
+            <TokenNameText
+              className={textTruncate()}
+              size="medium"
+              variant="title">
               {fromToken.displayName}
-            </Typography>
+            </TokenNameText>
+            {fromToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+              <Tooltip
+                content={fromToken.displayName}
+                container={tooltipContainer}>
+                <InfoIcon size={12} color="gray" />
+              </Tooltip>
+            )}
             <Icon>
               <NextIcon size={24} color="black" />
             </Icon>
-            <Typography size="medium" variant="title">
+            <TokenNameText
+              className={textTruncate()}
+              size="medium"
+              variant="title">
               {toToken.displayName}
-            </Typography>
+            </TokenNameText>
+            {toToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+              <Tooltip
+                content={toToken.displayName}
+                container={tooltipContainer}>
+                <InfoIcon size={12} color="gray" />
+              </Tooltip>
+            )}
           </TopSection>
           <Typography size="small" variant="body" color="neutral700">
             {currentStep?.fromBlockchain === currentStep?.toBlockchain
@@ -118,31 +144,77 @@ export function SwapToken(props: PropTypes) {
       ) : (
         <Layout direction="row">
           <TokenInfo>
-            <Typography size="medium" variant="title">
-              {fromToken.displayName}
-            </Typography>
+            <FlexCenteredContainer>
+              <TokenNameText
+                className={textTruncate()}
+                size="medium"
+                variant="title">
+                {fromToken.displayName}
+              </TokenNameText>
+              {fromToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+                <Tooltip
+                  content={fromToken.displayName}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              )}
+            </FlexCenteredContainer>
+
             {!!fromAmount && (
-              <NumericTooltip
-                content={fromRealAmount}
-                container={tooltipContainer}>
-                <Typography size="small" variant="body" color="neutral700">
-                  {fromAmount}
-                </Typography>
-              </NumericTooltip>
+              <FlexCenteredContainer>
+                <AmountText
+                  className={textTruncate()}
+                  size="small"
+                  variant="body"
+                  color="neutral700">
+                  {fromRealAmount}
+                </AmountText>
+
+                {fromRealAmount.length > TOKEN_AMOUNT_TOOLTIP_THRESHOLD && (
+                  <NumericTooltip
+                    content={fromRealAmount}
+                    container={tooltipContainer}>
+                    <InfoIcon size={12} color="gray" />
+                  </NumericTooltip>
+                )}
+              </FlexCenteredContainer>
             )}
           </TokenInfo>
           <Icon>
             <NextIcon size={24} color="black" />
           </Icon>
           <TokenInfo>
-            <Typography size="medium" variant="title">
-              {toToken.displayName}
-            </Typography>
-            <NumericTooltip content={toRealAmount} container={tooltipContainer}>
-              <Typography size="small" variant="body" color="neutral700">
-                {toAmount}
-              </Typography>
-            </NumericTooltip>
+            <FlexCenteredContainer>
+              <TokenNameText
+                className={textTruncate()}
+                size="medium"
+                variant="title">
+                {toToken.displayName}
+              </TokenNameText>
+              {toToken.displayName.length > TOKEN_NAME_TOOLTIP_THRESHOLD && (
+                <Tooltip
+                  content={toToken.displayName}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              )}
+            </FlexCenteredContainer>
+            <FlexCenteredContainer>
+              <AmountText
+                className={textTruncate()}
+                size="small"
+                variant="body"
+                color="neutral700">
+                {toRealAmount}
+              </AmountText>
+              {toRealAmount.length > TOKEN_AMOUNT_TOOLTIP_THRESHOLD && (
+                <NumericTooltip
+                  content={toRealAmount}
+                  container={tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </NumericTooltip>
+              )}
+            </FlexCenteredContainer>
           </TokenInfo>
         </Layout>
       )}

package/src/components/Toast/Toast.styles.ts

@@ -333,6 +333,8 @@ export const AlertFlexContainer = styled('div', {
 });
 
 export const StyledTypography = styled(Typography, {
+  overflowWrap: 'break-word',
+  wordBreak: 'break-word',
   variants: {
     hasColor: {
       false: {

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -1,8 +1,10 @@
 import { css, styled } from '../../theme.js';
+import { Typography } from '../Typography/Typography.js';
 
 export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
+  gap: '$8',
   variants: {
     direction: {
       vertical: {
@@ -17,17 +19,73 @@ export const Container = styled('div', {
   },
 });
 
-export const tokenAmountStyles = css({
+export const centeredFlexBox = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
 
+export const TokenAmountWrapper = styled('div', {
+  flex: '1 1 0',
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  flexDirection: 'row',
+  variants: {
+    direction: {
+      vertical: {
+        maxWidth: 320,
+      },
+      horizontal: { maxWidth: 254 },
+    },
+  },
+});
+
 export const usdValueStyles = css({
   display: 'flex',
-  paddingTop: '$5',
+  paddingBottom: '$5',
+  minWidth: 0,
+  flex: '0 1 auto',
 });
 
 export const tooltipRootStyle = {
   width: 'fit-content',
 };
+
+export const TokenNameText = styled(Typography, {
+  maxWidth: '64px',
+});
+
+export const textTruncate = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const flexShrinkFix = css({
+  minWidth: 0,
+});
+
+export const usdValueText = css({
+  '& .output-usd-value': {
+    maxWidth: 77,
+  },
+  maxWidth: 88,
+});
+export const verticalUsdValueText = css({
+  '& .output-usd-value': {
+    maxWidth: 300,
+  },
+  maxWidth: 320,
+});
+
+export const flexShrink = css({
+  flexShrink: 1,
+});
+
+export const TokenInfoRow = styled('div', {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});

package/src/components/TokenAmount/TokenAmount.tsx

@@ -1,28 +1,52 @@
 import type { PropTypes } from './TokenAmount.types.js';
 
-import React from 'react';
+import React, { useRef } from 'react';
+import { useIsTruncated } from 'src/hooks/useIsTruncated.js';
+import { InfoIcon } from 'src/icons/index.js';
 
 import { ChainToken } from '../ChainToken/index.js';
 import { Divider } from '../Divider/index.js';
 import { PriceImpact } from '../PriceImpact/index.js';
 import { ValueTypography } from '../PriceImpact/PriceImpact.styles.js';
-import { NumericTooltip } from '../Tooltip/index.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
 import { Typography } from '../Typography/index.js';
 
 import {
   Container,
-  tokenAmountStyles,
+  flexShrink,
+  flexShrinkFix,
+  textTruncate,
+  TokenAmountWrapper,
+  TokenInfoRow,
+  TokenNameText,
   tooltipRootStyle,
   usdValueStyles,
+  usdValueText,
+  verticalUsdValueText,
 } from './TokenAmount.styles.js';
 
 export function TokenAmount(props: PropTypes) {
+  const realValueRef = useRef<HTMLSpanElement | null>(null);
+  const isRealValueTruncated = useIsTruncated(
+    props.price?.realValue || '',
+    realValueRef
+  );
+  const realUSdValueRef = useRef<HTMLSpanElement | null>(null);
+  const isRealUsedValueTruncated = useIsTruncated(
+    props.price?.realUsdValue || '',
+    realUSdValueRef
+  );
+  const displayNameRef = useRef<HTMLSpanElement | null>(null);
+  const isDisplayNameTruncated = useIsTruncated(
+    props.token.displayName,
+    displayNameRef
+  );
   return (
     <Container
       direction={props.direction}
       centerAlign={props.centerAlign}
       id={props.id}>
-      <div className={tokenAmountStyles()}>
+      <TokenAmountWrapper direction={props.direction}>
         <ChainToken
           chainImage={props.chain.image}
           tokenImage={props.token.image}
@@ -30,50 +54,86 @@ export function TokenAmount(props: PropTypes) {
         />
 
         <Divider direction="horizontal" size={4} />
-        <div>
+        <div className={flexShrinkFix()}>
           {props.label && (
             <Typography size="xsmall" variant="body" color="$neutral700">
               {props.label}
             </Typography>
           )}
-          <div>
-            <NumericTooltip
-              styles={{ root: tooltipRootStyle }}
-              content={props.price.realValue}
-              open={!props.price.realValue ? false : undefined}
-              container={props.tooltipContainer}>
-              <Typography
-                size="medium"
-                variant="title"
-                style={{ fontWeight: 600 }}>
-                {props.price.value}
-              </Typography>
-              <Divider direction="horizontal" size={8} />
-              <Typography
-                size="medium"
-                variant="title"
-                style={{ fontWeight: 400 }}>
-                {props.token.displayName}
-              </Typography>
-            </NumericTooltip>
-          </div>
+          <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} />
+
+                <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} />
+                <Tooltip
+                  content={props.token.displayName}
+                  container={props.tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </Tooltip>
+              </>
+            )}
+          </TokenInfoRow>
         </div>
-      </div>
+      </TokenAmountWrapper>
       {props.price.usdValue && props.price.usdValue !== '0' && (
         <div className={usdValueStyles()}>
-          <NumericTooltip
-            content={props.price.realUsdValue}
-            container={props.tooltipContainer}>
-            {props.type === 'input' && (
-              <ValueTypography>
-                <Typography size="small" variant="body">
-                  {`~$${props.price.usdValue}`}
-                </Typography>
-              </ValueTypography>
-            )}
-          </NumericTooltip>
+          {props.type === 'input' && (
+            <ValueTypography className={usdValueText()}>
+              <Typography
+                ref={realUSdValueRef}
+                className={textTruncate()}
+                size="small"
+                variant="body">
+                {`~$${props.price.realUsdValue}`}
+              </Typography>
+              {isRealUsedValueTruncated && (
+                <NumericTooltip
+                  content={props.price.realUsdValue}
+                  container={props.tooltipContainer}>
+                  <InfoIcon size={12} color="gray" />
+                </NumericTooltip>
+              )}
+            </ValueTypography>
+          )}
           {props.type === 'output' && (
             <PriceImpact
+              className={`${
+                props.direction === 'horizontal'
+                  ? usdValueText()
+                  : verticalUsdValueText()
+              } ${flexShrinkFix()} ${flexShrink()}`}
+              style={{
+                ...(props.direction === 'horizontal' && { flexWrap: 'wrap' }),
+              }}
               size="small"
               tooltipProps={{ container: props.tooltipContainer, side: 'top' }}
               outputUsdValue={props.price.usdValue}

package/src/components/Typography/Typography.tsx

@@ -5,26 +5,26 @@ import React from 'react';
 
 import { TypographyContainer } from './Typography.styles.js';
 
-export function Typography({
-  children,
-  id,
-  className,
-  color,
-  ...props
-}: PropsWithChildren<TypographyPropTypes>) {
+export const Typography = React.forwardRef<
+  HTMLSpanElement,
+  PropsWithChildren<TypographyPropTypes>
+>((props, ref) => {
+  const { children, id, className, color, ...rest } = props;
+
   const customCss = color
-    ? {
-        color: color.startsWith('$') ? color : `$${color}`,
-      }
-    : {
-        color: '$foreground',
-      };
+    ? { color: color.startsWith('$') ? color : `$${color}` }
+    : { color: '$foreground' };
+
   return (
     <TypographyContainer
+      id={id}
       className={`_typography _text ${className || ''}`}
       css={customCss}
-      {...props}>
+      ref={ref}
+      {...rest}>
       {children}
     </TypographyContainer>
   );
-}
+});
+
+Typography.displayName = 'Typography';

package/src/components/Wallet/index.ts

@@ -1,4 +1,7 @@
 export * from './Wallet.js';
 export type { WalletInfo } from './Wallet.types.js';
 export { WalletState } from './Wallet.types.js';
-export { SelectableWalletButton } from './Wallet.styles.js';
+export {
+  SelectableWalletButton,
+  WalletImageContainer,
+} from './Wallet.styles.js';

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -107,7 +107,7 @@ export const balanceStyles = css({
 });
 
 export const amountStyles = css({
-  width: '45%',
+  width: '48%',
   maxWidth: '170px',
   display: 'flex',
   flexDirection: 'column',
@@ -126,4 +126,5 @@ export const UsdPrice = styled(Typography, {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
+  maxWidth: 147,
 });