fix: set max char width for account dropdown in receive (#11076)

Author: premiumjibles

src/components/AccountDropdown/AccountChildOption.tsx

@@ -1,10 +1,17 @@
 import type { MenuItemOptionProps } from '@chakra-ui/react'
-import { forwardRef, MenuItemOption, Stack, useColorModeValue } from '@chakra-ui/react'
+import {
+  forwardRef,
+  MenuItemOption,
+  Stack,
+  useBreakpointValue,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import type { AccountId } from '@shapeshiftoss/caip'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import { Amount } from '@/components/Amount/Amount'
 import { RawText } from '@/components/Text'
+import { trimWithEndEllipsis } from '@/lib/utils'
 
 type AccountChildRowProps = {
   accountId: AccountId
@@ -18,12 +25,14 @@ export const AccountChildOption = forwardRef<AccountChildRowProps, 'button'>(
   ({ accountId, title, cryptoBalance, symbol, children, onOptionClick, ...props }, ref) => {
     const color = useColorModeValue('black', 'white')
     const handleClick = useCallback(() => onOptionClick(accountId), [accountId, onOptionClick])
+    const maxLength = useBreakpointValue({ base: 25, md: 50 })
+    const truncatedTitle = useMemo(() => trimWithEndEllipsis(title, maxLength), [title, maxLength])
 
     return (
       <MenuItemOption ref={ref} color={color} onClick={handleClick} {...props}>
         <Stack direction='row' fontSize='sm' spacing={4} width='full'>
           <RawText fontWeight='bold' whiteSpace='nowrap' flex={1}>
-            {title}
+            {truncatedTitle}
           </RawText>
           <Amount.Crypto
             whiteSpace='nowrap'

src/components/AccountDropdown/AccountSegement.tsx

@@ -1,27 +1,37 @@
-import { Stack } from '@chakra-ui/react'
+import { Stack, useBreakpointValue } from '@chakra-ui/react'
 import type { FC } from 'react'
+import { useMemo } from 'react'
 
 import { RawText } from '@/components/Text'
+import { trimWithEndEllipsis } from '@/lib/utils'
 
 type AccountGroupProps = {
   title: string
   subtitle?: string
 }
 
-export const AccountSegment: FC<AccountGroupProps> = ({ title, subtitle }) => (
-  <Stack
-    direction='row'
-    color='text.subtle'
-    fontSize='sm'
-    alignItems='center'
-    justifyContent='space-between'
-    width='full'
-  >
-    <RawText>{title}</RawText>
-    {subtitle && (
-      <RawText fontFamily='monospace' fontWeight='bold'>
-        {subtitle}
-      </RawText>
-    )}
-  </Stack>
-)
+export const AccountSegment: FC<AccountGroupProps> = ({ title, subtitle }) => {
+  const maxLength = useBreakpointValue({ base: 25, md: 50 })
+  const truncatedSubtitle = useMemo(
+    () => trimWithEndEllipsis(subtitle, maxLength),
+    [subtitle, maxLength],
+  )
+
+  return (
+    <Stack
+      direction='row'
+      color='text.subtle'
+      fontSize='sm'
+      alignItems='center'
+      justifyContent='space-between'
+      width='full'
+    >
+      <RawText>{title}</RawText>
+      {subtitle && (
+        <RawText fontFamily='monospace' fontWeight='bold'>
+          {truncatedSubtitle}
+        </RawText>
+      )}
+    </Stack>
+  )
+}

src/lib/utils/index.ts

@@ -24,7 +24,7 @@ export const trimWithEndEllipsis = (content?: string, trimmedContentLength?: num
 
   if (!trimmedContentLength) return content
 
-  if (content.length < trimmedContentLength) return content
+  if (content.length <= trimmedContentLength) return content
 
   return content.slice(0, trimmedContentLength).concat('...')
 }

src/state/slices/portfolioSlice/utils/index.test.ts

@@ -154,4 +154,10 @@ describe('trimWithEndEllipsis', () => {
     expect(trimWithEndEllipsis('abcdef', 191)).toEqual('abcdef')
     expect(trimWithEndEllipsis(LongFoxDescription, 191)).toEqual(ExpectedTrimmedFoxDescription)
   })
+
+  it('should not add ellipsis when content length equals max length', () => {
+    const exactly50Chars = 'BlackRock USD Institutional Digital Liquidity Fund'
+    expect(exactly50Chars.length).toEqual(50)
+    expect(trimWithEndEllipsis(exactly50Chars, 50)).toEqual(exactly50Chars)
+  })
 })