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

package/src/containers/SwapInput/SwapInput.tsx

@@ -23,8 +23,6 @@ import {
   MaxButton,
   textStyles,
   TokenSectionContainer,
-  UsdPrice,
-  ValueTypography,
 } from './SwapInput.styles.js';
 import { TokenSection } from './TokenSection.js';
 
@@ -40,13 +38,6 @@ export function SwapInput(props: SwapInputPropTypes) {
     'balance' in props && (props.loading || props.loadingBalance);
   const price = props.price;
 
-  const isUsdValueZeroOrFalsy =
-    !props.price.usdValue || props.price.usdValue === '0';
-
-  const displayUsdValue =
-    props.price.error ||
-    (isUsdValueZeroOrFalsy ? '0.00' : `~$${props.price.usdValue}`);
-
   return (
     <Container
       id={
@@ -144,32 +135,24 @@ export function SwapInput(props: SwapInputPropTypes) {
                   })}
                 />
               </NumericTooltip>
-              {'percentageChange' in props ? (
-                <PriceImpact
-                  size="medium"
-                  tooltipProps={{
-                    container: props.tooltipContainer,
-                    side: 'bottom',
-                  }}
-                  outputUsdValue={price.usdValue}
-                  realOutputUsdValue={price.realUsdValue}
-                  error={price.error}
-                  percentageChange={props.percentageChange}
-                  warningLevel={props.warningLevel}
-                />
-              ) : (
-                <NumericTooltip
-                  content={price.realUsdValue}
-                  container={props.tooltipContainer}
-                  open={isUsdValueZeroOrFalsy ? false : undefined}
-                  side="bottom">
-                  <ValueTypography hasWarning={!!price.error}>
-                    <UsdPrice variant="body" size="medium">
-                      {displayUsdValue}
-                    </UsdPrice>
-                  </ValueTypography>
-                </NumericTooltip>
-              )}
+              <PriceImpact
+                size="medium"
+                tooltipProps={{
+                  container: props.tooltipContainer,
+                  side: 'bottom',
+                }}
+                outputUsdValue={price.usdValue}
+                realOutputUsdValue={price.realUsdValue}
+                percentageChange={
+                  'percentageChange' in props
+                    ? props.percentageChange
+                    : undefined
+                }
+                warningLevel={
+                  'percentageChange' in props ? props.warningLevel : undefined
+                }
+                error={price.error}
+              />
             </>
           )}
         </div>

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

@@ -114,3 +114,10 @@ export const SymbolTooltipContent = styled(Typography, {
   maxWidth: 217,
   lineBreak: 'anywhere',
 });
+
+export const BlockChainTypography = styled(Typography, {
+  maxWidth: 96,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { useCopyToClipboard } from './useCopyToClipboard.js';
+export { useIsTruncated } from './useIsTruncated.js';

package/src/hooks/useIsTruncated.tsx

@@ -0,0 +1,27 @@
+import { type RefObject, useEffect, useState } from 'react';
+
+/*
+ * This hook checks whether the text (or content) inside a React element fits within its width.
+ * In other words, it determines if the content is truncated or fully visible.
+ */
+
+export function useIsTruncated(
+  content: string,
+  ref: RefObject<HTMLElement>
+): boolean {
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (element.scrollWidth > element.clientWidth) {
+      setIsTruncated(true);
+    } else {
+      setIsTruncated(false);
+    }
+  }, [content, ref.current]);
+
+  return isTruncated;
+}