fix: guh character length truncation is useless

shapeshift · Sep 16, 2024 · bfc5377 · bfc5377
1 parent 29b39d4
commit bfc5377
Showing 1 changed file with 35 additions and 12 deletions.
diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
@@ -1,10 +1,9 @@
 import { ChevronRightIcon } from '@chakra-ui/icons'
 import type { ButtonProps } from '@chakra-ui/react'
-import { Button, SkeletonCircle, SkeletonText, Tooltip } from '@chakra-ui/react'
+import { Box, Button, SkeletonCircle, SkeletonText, Tooltip } from '@chakra-ui/react'
 import type { Asset } from '@shapeshiftoss/types'
-import { useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { trimWithEndEllipsis } from 'lib/utils'
 
 import { Amount } from './Amount/Amount'
 import { AssetIcon } from './AssetIcon'
@@ -19,8 +18,9 @@ type AccountCardProps = {
   onClick?: () => void
 } & ButtonProps
 
-const chevronRightIcon = <ChevronRightIcon boxSize={6} />
-const maxLabelLength = 40
+const leftIconBoxSize = '40px'
+const rightIconBoxSize = 6
+const chevronRightIcon = <ChevronRightIcon boxSize={rightIconBoxSize} />
 
 export const AccountCard = ({
   asset,
@@ -34,14 +34,21 @@ export const AccountCard = ({
   const translate = useTranslate()
   const buttonLeftIcon = useMemo(
     () => (
-      <SkeletonCircle isLoaded={isLoaded} boxSize='40px'>
-        <AssetIcon assetId={asset.assetId} boxSize='40px' />
+      <SkeletonCircle isLoaded={isLoaded} boxSize={leftIconBoxSize}>
+        <AssetIcon assetId={asset.assetId} boxSize={leftIconBoxSize} />
       </SkeletonCircle>
     ),
     [asset.assetId, isLoaded],
   )
 
-  const willOverflow = useMemo(() => asset.name.length > maxLabelLength, [asset.name])
+  const [willOverflow, setWillOverflow] = useState(false)
+
+  const checkOverflow = useCallback((el: HTMLElement | null) => {
+    if (el) {
+      const isOverflowing = el.scrollWidth > el.clientWidth
+      setWillOverflow(isOverflowing)
+    }
+  }, [])
 
   return (
     <Button
@@ -55,11 +62,27 @@ export const AccountCard = ({
       rightIcon={chevronRightIcon}
       {...rest}
     >
-      <SkeletonText noOfLines={2} isLoaded={isLoaded} mr='auto'>
+      <SkeletonText
+        noOfLines={2}
+        isLoaded={isLoaded}
+        mr='auto'
+        flexGrow={1}
+        width={`calc(100% - ${leftIconBoxSize} - var(--chakra-sizes-${rightIconBoxSize}))`}
+      >
         <Tooltip label={asset.name} isDisabled={!willOverflow}>
-          <RawText lineHeight='1' mb={1} data-test='account-card-asset-name-label'>
-            {trimWithEndEllipsis(asset.name, maxLabelLength)}
-          </RawText>
+          <Box overflow='hidden'>
+            <RawText
+              lineHeight='1'
+              mb={1}
+              data-test='account-card-asset-name-label'
+              overflow='hidden'
+              textOverflow='ellipsis'
+              whiteSpace='nowrap'
+              ref={checkOverflow}
+            >
+              {asset.name}
+            </RawText>
+          </Box>
         </Tooltip>
         {showCrypto ? (
           <Amount.Crypto