@rango-dev/ui 0.45.1-next.8 → 0.46.0

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

@@ -1,11 +1,15 @@
 import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles.js';
-import { Button } from '../../components/index.js';
+import {
+  Button,
+  type TooltipPropTypes,
+  Typography,
+} from '../../components/index.js';
 import { css, darkTheme, styled } from '../../theme.js';
 
 export const Container = styled(Button, {
+  width: '100%',
   maxWidth: '180px',
   minWidth: '130px',
-  flexGrow: 1,
   backgroundColor: 'transparent',
   borderRadius: '$xs',
 
@@ -39,11 +43,16 @@ export const Container = styled(Button, {
       backgroundColor: '$$color !important',
     },
   },
+
+  '& > span': {
+    width: '100%',
+  },
 });
 
 export const chainNameStyles = css();
 
 export const TokenSectionContainer = styled('div', {
+  width: '100%',
   maxWidth: '170px',
   padding: '$2 $5',
   display: 'flex',
@@ -68,6 +77,8 @@ export const tokenChainStyles = css({
   paddingLeft: '$10',
   flexGrow: 1,
   textAlign: 'left',
+  width: '100%',
+  overflow: 'hidden',
 });
 
 export const skeletonStyles = css({
@@ -76,8 +87,30 @@ export const skeletonStyles = css({
 });
 
 export const TitleContainer = styled('div', {
+  width: '100%',
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
-  flexWrap: 'wrap',
+});
+
+export const Title = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const SymbolTooltipStyles: TooltipPropTypes['styles'] = {
+  content: {
+    padding: '$10',
+  },
+  root: {
+    zIndex: 10,
+    maxWidth: 'calc(100% - 18px)',
+    display: 'flex',
+    justifyContent: 'start',
+  },
+};
+
+export const SymbolTooltipContent = styled(Typography, {
+  maxWidth: 217,
+  lineBreak: 'anywhere',
 });

package/src/containers/SwapInput/TokenSection.tsx

@@ -8,6 +8,7 @@ import {
   ChainToken,
   Divider,
   Skeleton,
+  Tooltip,
   Typography,
 } from '../../components/index.js';
 
@@ -15,6 +16,9 @@ import {
   chainNameStyles,
   Container,
   skeletonStyles,
+  SymbolTooltipContent,
+  SymbolTooltipStyles,
+  Title,
   TitleContainer,
   tokenChainStyles,
   TokenSectionContainer,
@@ -33,6 +37,9 @@ export function TokenSection(props: TokenSectionProps) {
     warning,
     tooltipContainer,
   } = props;
+
+  const tokenSelected = !error && !loading && !!tokenSymbol;
+
   return (
     <Container variant="default" disabled={error || loading} onClick={onClick}>
       <TokenSectionContainer>
@@ -54,11 +61,28 @@ export function TokenSection(props: TokenSectionProps) {
           ) : (
             <>
               <TitleContainer>
-                <Typography variant="title" size="medium">
-                  {error || (!loading && !tokenSymbol)
-                    ? i18n.t('Select Token')
-                    : tokenSymbol}
-                </Typography>
+                {tokenSelected ? (
+                  <Tooltip
+                    styles={SymbolTooltipStyles}
+                    align="start"
+                    side="bottom"
+                    alignOffset={-15}
+                    sideOffset={15}
+                    container={tooltipContainer}
+                    content={
+                      <SymbolTooltipContent variant="body" size="xsmall">
+                        {tokenSymbol}
+                      </SymbolTooltipContent>
+                    }>
+                    <Title variant="title" size="medium">
+                      {tokenSymbol}
+                    </Title>
+                  </Tooltip>
+                ) : (
+                  <Typography variant="title" size="medium">
+                    {i18n.t('Select Token')}
+                  </Typography>
+                )}
                 {warning && (
                   <>
                     <Divider size={4} direction="horizontal" />