fix: long nft folder names wrapping in nft details (#1146)

* fix: long nft folder names wrapping in nft details

* refactor: use ellipsis component

Author: Shawn

packages/common/src/ui/lib/add-ellipsis.ts

@@ -8,11 +8,11 @@ export const truncate = (text: string, partOneLength: number, partTwoLength: num
   return `${text.slice(0, partOneLength)}${text.slice(text.length - partTwoLength)}`;
 };
 
-export const addEllipsis = (text: string, partOnelength: number, partTwoLength: number): string => {
-  const textMinLenght = partOnelength + partTwoLength + addedLength;
-  if (text.length <= textMinLenght) return text;
+export const addEllipsis = (text: string, partOneLength: number, partTwoLength: number): string => {
+  const textMinLength = partOneLength + partTwoLength + addedLength;
+  if (text.length <= textMinLength) return text;
 
-  return `${text.slice(0, partOnelength)}...${text.slice(text.length - partTwoLength)}`;
+  return `${text.slice(0, partOneLength)}...${text.slice(text.length - partTwoLength)}`;
 };
 
 const getCssStyle = (element: HTMLElement, prop: string) => window.getComputedStyle(element).getPropertyValue(prop);

packages/core/src/ui/components/Nft/NftDetail.tsx

@@ -1,4 +1,4 @@
-import { InlineInfoList, LabeledInfo } from '@lace/common';
+import { Ellipsis, InlineInfoList, LabeledInfo } from '@lace/common';
 import React, { ReactNode } from 'react';
 import styles from './NftDetail.module.scss';
 import { NftImage } from './NftImage';
@@ -74,13 +74,17 @@ export const NftDetail = ({
                     <FolderOutlined />
                     <span>Root</span>
                   </Breadcrumb.Item>
-                  {folder && <Breadcrumb.Item>{folder}</Breadcrumb.Item>}
+                  {folder && (
+                    <Breadcrumb.Item>
+                      <Ellipsis text={folder} beforeEllipsis={5} afterEllipsis={5} />
+                    </Breadcrumb.Item>
+                  )}
                 </Breadcrumb>
               ) : (
                 <Flex justifyContent="space-between" gap="$1">
                   <Box>Root</Box>
                   {folder && <Box px="$8">{'>'}</Box>}
-                  {folder && <Box>{folder}</Box>}
+                  {folder && <Ellipsis text={folder} beforeEllipsis={5} afterEllipsis={5} />}
                 </Flex>
               )
             }