@rango-dev/widget-embedded 0.50.1-next.3 → 0.50.1-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.50.1-next.3",
+  "version": "0.50.1-next.5",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.52.1-next.2",
     "@rango-dev/queue-manager-react": "^0.32.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.53.1-next.2",
+    "@rango-dev/ui": "^0.53.1-next.4",
     "@rango-dev/wallets-core": "^0.49.1-next.2",
     "@rango-dev/wallets-react": "^0.36.1-next.2",
     "@rango-dev/wallets-shared": "^0.50.1-next.2",

package/src/components/CustomTokenModal/CustomTokenModal.styles.ts

@@ -1,4 +1,4 @@
-import { Button, darkTheme, styled } from '@rango-dev/ui';
+import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
 
 export const StyledLink = styled('a', {
   textDecoration: 'none',
@@ -59,3 +59,16 @@ export const Container = styled('div', {
 export const StyledButton = styled(Button, {
   minHeight: '$40',
 });
+
+export const TokenSymbolText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '96px',
+});
+
+export const FlexCenteredContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -1,7 +1,14 @@
 import type { PropTypes } from './CustomTokenModal.types';
 
 import { i18n } from '@lingui/core';
-import { Divider, ExternalLinkIcon, Image, Typography } from '@rango-dev/ui';
+import {
+  Divider,
+  ExternalLinkIcon,
+  Image,
+  InfoIcon,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
 import React from 'react';
 
 import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
@@ -10,8 +17,15 @@ import { WatermarkedModal } from '../common/WatermarkedModal';
 
 import { CUSTOM_TOKEN_LEARN_MORE_LINK } from './CustomTokenModal.constants';
 import { generateExplorerLink } from './CustomTokenModal.helpers';
-import { Container, StyledButton, StyledLink } from './CustomTokenModal.styles';
+import {
+  Container,
+  FlexCenteredContainer,
+  StyledButton,
+  StyledLink,
+  TokenSymbolText,
+} from './CustomTokenModal.styles';
 
+const MAX_SYMBOL_LENGTH_THRESHOLD = 9;
 export function CustomTokenModal(props: PropTypes) {
   const { open, onClose, token, onExit, onSubmitClick, blockchain } = props;
 
@@ -35,9 +49,17 @@ export function CustomTokenModal(props: PropTypes) {
           type="circular"
         />
         <Divider size={4} />
-        <Typography variant="title" size="medium">
-          {token.symbol}
-        </Typography>
+        <FlexCenteredContainer>
+          <TokenSymbolText variant="title" size="medium">
+            {token.symbol}
+          </TokenSymbolText>
+          {token.symbol.length > MAX_SYMBOL_LENGTH_THRESHOLD && (
+            <Tooltip content={token.symbol} container={getContainer()}>
+              <InfoIcon size={12} color="gray" />
+            </Tooltip>
+          )}
+        </FlexCenteredContainer>
+
         <Typography variant="body" size="small" className="_blockchain-name">
           {blockchain.displayName}
         </Typography>

package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts

@@ -25,12 +25,6 @@ export const quoteSummaryItemStyles = css({
   alignItems: 'center',
 });
 
-export const tokenAmountStyles = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
 export const costStyles = css({
   paddingTop: '$15',
   display: 'flex',

package/src/components/Quote/Quote.styles.ts

@@ -196,17 +196,6 @@ export const rowStyles = css({
     marginLeft: '-$8',
   },
 });
-export const basicInfoStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  '.usd-value': {
-    $$color: '$colors$neutral600',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral700',
-    },
-    color: '$$color',
-  },
-});
 
 export const Trigger = styled(Collapsible.Trigger, {
   display: 'flex',
@@ -343,23 +332,28 @@ export const HorizontalSeparator = styled('div', {
   borderColor: '$$color',
 });
 
-export const FrameIcon = styled('div', {
-  width: '$16',
-  height: '$16',
-  justifyContent: 'center',
-  alignItems: 'center',
+export const BasicInfoOutput = styled('div', {
   display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: '$2',
+  flex: '1 1 auto',
+  minWidth: 0,
 });
 
-export const BasicInfoOutput = styled(Typography, {
+export const TokenNameText = styled(Typography, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  letterSpacing: 0.4,
+  whiteSpace: 'nowrap',
+  maxWidth: '$30',
 });
 
-export const ContainerInfoOutput = styled('div', {
-  display: 'flex',
-  flexWrap: 'wrap',
+export const AmountText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  minWidth: 0,
+  flex: '0 1 auto',
 });
 
 export const MoreStep = styled('div', {
@@ -396,3 +390,12 @@ export const Line = styled('div', {
     borderTopColor: '$neutral800',
   },
 });
+
+export const UsdValueText = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flex: '0 1 auto',
+  minWidth: 0,
+  flexShrink: 3,
+});

package/src/components/Quote/Quote.tsx

@@ -13,6 +13,7 @@ import {
   StepDetails,
   TokenAmount,
   Typography,
+  useIsTruncated,
 } from '@rango-dev/ui';
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
@@ -57,11 +58,9 @@ import { getTotalFeeInUsd, getUsdFeeOfStep } from '../../utils/swap';
 
 import {
   AllRoutesButton,
+  AmountText,
   BasicInfoOutput,
-  basicInfoStyles,
-  ContainerInfoOutput,
   Content,
-  FrameIcon,
   HorizontalSeparator,
   Line,
   QuoteContainer,
@@ -70,6 +69,8 @@ import {
   summaryHeaderStyles,
   summaryStyles,
   TagContainer,
+  TokenNameText,
+  UsdValueText,
 } from './Quote.styles';
 import { QuoteCostDetails } from './QuoteCostDetails';
 import { QuoteSummary } from './QuoteSummary';
@@ -97,11 +98,6 @@ export function Quote(props: QuoteProps) {
   const userSlippage = customSlippage || slippage;
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
-  const roundedInput = numberToString(
-    input.value,
-    TOKEN_AMOUNT_MIN_DECIMALS,
-    TOKEN_AMOUNT_MAX_DECIMALS
-  );
   const roundedOutput = numberToString(
     output.value,
     TOKEN_AMOUNT_MIN_DECIMALS,
@@ -241,6 +237,7 @@ export function Quote(props: QuoteProps) {
                         <Typography
                           size="xsmall"
                           variant="body"
+                          className="from-amount-text"
                           color="neutral900">
                           {i18n.t({
                             id: 'Yours: {amount} {symbol}',
@@ -328,6 +325,15 @@ export function Quote(props: QuoteProps) {
   const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
   const timeWarning =
     totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
+  const inputValueRef = useRef<HTMLSpanElement | null>(null);
+  const isInputValueTruncated = useIsTruncated(input.value, inputValueRef);
+  const outputValueRef = useRef<HTMLSpanElement | null>(null);
+  const isOutputValueTruncated = useIsTruncated(output.value, outputValueRef);
+  const usdValueRef = useRef<HTMLSpanElement | null>(null);
+  const isUsdValueTruncated = useIsTruncated(
+    roundedOutputUsdValue,
+    usdValueRef
+  );
 
   const lastStep = steps[numberOfSteps - 1];
   const firstStep = steps[0];
@@ -428,31 +434,52 @@ export function Quote(props: QuoteProps) {
           )}
         </div>
         {type === 'basic' && (
-          <div className={basicInfoStyles()}>
-            <FrameIcon>
-              <InfoIcon size={12} color="gray" />
-            </FrameIcon>
-            <ContainerInfoOutput>
-              <BasicInfoOutput size="small" variant="body">
-                {`${roundedInput} ${firstStep.from.token.displayName} = `}
-              </BasicInfoOutput>
+          <BasicInfoOutput>
+            <AmountText ref={inputValueRef} size="small" variant="body">
+              {input.value}
+            </AmountText>
+            {isInputValueTruncated && (
+              <NumericTooltip
+                content={input.value}
+                container={container}
+                open={!input.value ? false : undefined}>
+                <InfoIcon size={12} color="gray" />
+              </NumericTooltip>
+            )}
+            <TokenNameText size="small" variant="body">
+              {steps[0]?.from.token.displayName}
+            </TokenNameText>
+            <Typography size="small" variant="body">
+              =
+            </Typography>
+            <AmountText ref={outputValueRef} size="small" variant="body">
+              {output.value}
+            </AmountText>
+            {isOutputValueTruncated && (
               <NumericTooltip
                 content={output.value}
                 container={container}
                 open={!output.value ? false : undefined}>
-                <BasicInfoOutput size="small" variant="body">
-                  &nbsp;
-                  {`${roundedOutput} ${lastStep.to.token.displayName}`}
-                </BasicInfoOutput>
+                <InfoIcon size={12} color="gray" />
               </NumericTooltip>
-            </ContainerInfoOutput>
-            <NumericTooltip content={output.usdValue} container={container}>
-              <Divider size={2} direction="horizontal" />
-              <Typography color="$neutral600" size="xsmall" variant="body">
-                {`($${roundedOutputUsdValue})`}
-              </Typography>
-            </NumericTooltip>
-          </div>
+            )}
+            <TokenNameText size="small" variant="body">
+              {lastStep?.to.token.displayName}
+            </TokenNameText>
+            <Divider size={2} direction="horizontal" />
+            <UsdValueText
+              ref={usdValueRef}
+              color="$neutral600"
+              size="xsmall"
+              variant="body">
+              {`($${roundedOutputUsdValue})`}
+            </UsdValueText>
+            {isUsdValueTruncated && (
+              <NumericTooltip content={output.usdValue} container={container}>
+                <InfoIcon size={12} color="gray" />
+              </NumericTooltip>
+            )}
+          </BasicInfoOutput>
         )}
         {type === 'list-item' && (
           <TokenAmount

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -16,8 +16,6 @@ import {
   GAS_FEE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
 import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
@@ -41,11 +39,7 @@ export function HighValueLossWarningModal(props: Props) {
   const highValueLossData = [
     {
       title: i18n.t('Swapping'),
-      value: numberToString(
-        warning.inputUsdValue,
-        USD_VALUE_MIN_DECIMALS,
-        USD_VALUE_MAX_DECIMALS
-      ),
+      value: numberToString(warning.inputUsdValue),
     },
     {
       title: i18n.t('Gas cost'),
@@ -57,11 +51,7 @@ export function HighValueLossWarningModal(props: Props) {
     },
     {
       title: i18n.t('Receiving'),
-      value: numberToString(
-        warning.outputUsdValue,
-        USD_VALUE_MIN_DECIMALS,
-        USD_VALUE_MAX_DECIMALS
-      ),
+      value: numberToString(warning.outputUsdValue),
     },
     {
       title: i18n.t('Price impact'),

package/src/components/QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx

@@ -1,24 +1,40 @@
 import type { ModalContentData } from './QuoteWarningsAndErrors.types';
 
-import { Typography } from '@rango-dev/ui';
+import { InfoIcon, Tooltip, Typography } from '@rango-dev/ui';
 import React from 'react';
 
-import { Item } from './QuoteWarningsAndErrors.styles';
+import { getContainer } from '../../utils/common';
+
+import {
+  Item,
+  ValueContent,
+  ValueTypography,
+} from './QuoteWarningsAndErrors.styles';
+
+const VALUE_LENGTH_THRESHOLD = 35;
 
 export function QuoteErrorsModalItem(props: ModalContentData) {
   const { title, value, valueColor } = props;
+  const container = getContainer();
 
   return (
     <Item>
       <Typography size="medium" variant="label" className="_title">
         {title}
       </Typography>
-      <Typography
-        size="large"
-        variant="label"
-        color={valueColor || 'foreground'}>
-        {`${valueColor ? '%' : '$'}${value}`}
-      </Typography>
+      <ValueContent>
+        <ValueTypography
+          size="large"
+          variant="label"
+          color={valueColor || 'foreground'}>
+          {`${valueColor ? '%' : '$'}${value}`}
+        </ValueTypography>
+        {value.length > VALUE_LENGTH_THRESHOLD && (
+          <Tooltip content={value} container={container}>
+            <InfoIcon size={12} color="gray" />
+          </Tooltip>
+        )}
+      </ValueContent>
     </Item>
   );
 }

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { Button, darkTheme, styled } from '@rango-dev/ui';
+import { Button, darkTheme, styled, Typography } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -27,6 +27,20 @@ export const Item = styled('div', {
   },
 });
 
+export const ValueContent = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '$2',
+});
+
+export const ValueTypography = styled(Typography, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '250px',
+});
+
 export const Action = styled('div', {
   padding: '$2',
   alignSelf: 'flex-start',

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -109,6 +109,7 @@ export const ErrorMessages = styled('div', {
   flexDirection: 'column',
   gap: '$5',
 });
+
 export const MessageText = styled(Typography, {
   wordBreak: 'break-word',
 });

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -20,7 +20,7 @@ import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 
-import { ProfileBanner } from './SwapDetailsModal.styles';
+import { ProfileBanner, wordWrap } from './SwapDetailsModal.styles';
 
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
@@ -68,6 +68,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           />
           <Divider size={12} />
           <Typography
+            className={wordWrap()}
             variant="body"
             size="medium"
             color="neutral700"

package/src/components/SwapDetailsModal/SwapDetailsModal.styles.ts

@@ -1,16 +1,8 @@
-import { darkTheme, styled } from '@rango-dev/ui';
+import { css, darkTheme, styled } from '@rango-dev/ui';
 
-export const WalletContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-});
-
-export const TooltipErrorContent = styled('div', {
-  maxWidth: 280,
-  '& ._typography': {
-    wordWrap: 'break-word',
-    display: 'block',
-  },
+export const wordWrap = css({
+  wordWrap: 'break-word',
+  display: 'block',
 });
 
 export const ProfileBanner = styled('img', {

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -82,7 +82,6 @@ export function DerivationPath(props: PropTypes) {
 
   return (
     <>
-      <Divider size={20} />
       <MessageBox
         type="info"
         title={i18n.t('Select Derivation Path')}
@@ -95,8 +94,12 @@ export function DerivationPath(props: PropTypes) {
         icon={<Image src={image} size={45} />}
       />
 
-      <InputsContainer>
-        <InputLabel variant="body" size="xsmall" color="$neutral600">
+      <InputsContainer className="_derivation_path_inputs_container">
+        <InputLabel
+          variant="body"
+          size="xsmall"
+          color="$neutral600"
+          className="_derivation_path_input_label">
           {i18n.t('Choose Derivation Path Template')}
         </InputLabel>
         <Select
@@ -111,7 +114,11 @@ export function DerivationPath(props: PropTypes) {
           styles={{ trigger: derivationPathInputStyles }}
         />
         <Divider size={20} />
-        <InputLabel variant="body" size="xsmall" color="$neutral600">
+        <InputLabel
+          variant="body"
+          size="xsmall"
+          color="$neutral600"
+          className="_derivation_path_input_label">
           {isCustomOptionSelected
             ? i18n.t('Enter Path')
             : i18n.t('Enter Index')}

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -8,6 +8,9 @@ export const QuoteContainer = styled('div', {
 });
 export const FooterStepAlarm = styled('div', {
   paddingBottom: '$15',
+  '& .from-amount-text': {
+    wordBreak: 'break-word',
+  },
   variants: {
     dense: {
       true: {