Introduce TruncatedText component

GemWallet · Aug 11, 2023 · 4f2f5f2 · 4f2f5f2
1 parent 3b0a950
commit 4f2f5f2
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 70 deletions.
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -0,0 +1,31 @@
+import { ComponentProps, FC } from 'react';
+
+import { Typography } from '@mui/material';
+
+type TruncatedTextProps = ComponentProps<typeof Typography> & {
+  text?: string;
+  maxLength?: number;
+};
+
+export const TruncatedText: FC<TruncatedTextProps> = ({ text, maxLength, sx, ...rest }) => {
+  if (!text) return null;
+
+  const displayedText =
+    maxLength && text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+
+  return (
+    <Typography
+      sx={{
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: '100%',
+        ...sx
+      }}
+      {...rest}
+      variant="body1"
+    >
+      {displayedText}
+    </Typography>
+  );
+};
diff --git a/packages/extension/src/components/atoms/TruncatedText/index.ts b/packages/extension/src/components/atoms/TruncatedText/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedText';
diff --git a/packages/extension/src/components/atoms/index.ts b/packages/extension/src/components/atoms/index.ts
@@ -7,4 +7,5 @@ export * from './PrivateRoute';
 export * from './TileLoader';
 export * from './TokenLoader';
 export * from './Tokens';
+export * from './TruncatedText';
 export * from './WalletIcon';
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -9,8 +9,8 @@ import { convertHexToString } from 'xrpl';
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { useLedger } from '../../../contexts';
-import { truncateStringOnLongWord } from '../../../utils';
 import { NFTImage } from '../../atoms';
+import { TruncatedText } from '../../atoms';
 import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
@@ -27,8 +27,6 @@ const Transition = forwardRef(function Transition(
 });
 
 export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
-  const MAX_STRING_LENGTH = 30;
-
   const { getNFTData } = useLedger();
   const [NFTData, setNFTData] = useState<NFTData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -99,31 +97,22 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
             <NFTImage imageURL={NFTData.image} height={150} width={150} />
           )}
           <Tooltip title={NFTData.NFTokenID}>
-            <div
-              style={{
-                fontSize: '14px',
-                color: 'grey',
-                marginTop: '10px',
-                cursor: 'pointer'
-              }}
+            <TruncatedText
               onClick={() => handleTokenIdClick(NFTData.NFTokenID)}
-            >
-              {truncateStringOnLongWord(NFTData.NFTokenID, MAX_STRING_LENGTH)}
-            </div>
+              text={NFTData.NFTokenID}
+              sx={{ fontSize: '14px', color: 'grey', marginTop: '10px', cursor: 'pointer' }}
+            />
           </Tooltip>
-          {NFTData.name ? (
-            <div
-              style={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
-              data-testid="nft_name"
-            >
-              {truncateStringOnLongWord(NFTData.name, MAX_STRING_LENGTH)}
-            </div>
-          ) : null}
-          {NFTData.description ? (
-            <div style={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}>
-              {truncateStringOnLongWord(NFTData.description, MAX_STRING_LENGTH)}
-            </div>
-          ) : null}
+          <TruncatedText
+            text={NFTData.name}
+            sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
+            data-testid="nft_name"
+          />
+          <TruncatedText
+            text={NFTData.description}
+            sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
+            maxLength={200}
+          />
           <Button
             variant="outlined"
             style={{ marginTop: '10px', fontSize: '14px', gap: '10px' }}

diff --git a/packages/extension/src/utils/format.test.ts b/packages/extension/src/utils/format.test.ts
@@ -5,7 +5,6 @@ import {
   formatCurrencyName,
   formatFlags,
   formatFlagsToNumber,
-  truncateStringOnLongWord,
   formatToken,
   formatTransferFee
 } from './format';
@@ -162,24 +161,3 @@ describe('formatCurrencyName', () => {
     expect(formattedCurrency).toEqual('ETH');
   });
 });
-
-describe('truncateStringOnLongWord', () => {
-  it('should return the string as it is if its length is lower than or equal to the given length', () => {
-    expect(truncateStringOnLongWord('Test string', 11)).toEqual('Test string');
-    expect(truncateStringOnLongWord('Test string', 12)).toEqual('Test string');
-  });
-
-  it('should return the string truncated with "..." at the end if there is no space within the given length', () => {
-    expect(truncateStringOnLongWord('Teststring', 8)).toEqual('Teststri...');
-  });
-
-  it('should return the string truncated with "..." at the end if there is a word with a length bigger than the given length', () => {
-    expect(
-      truncateStringOnLongWord('This is a supercalifragilisticexpialidocious test', 15)
-    ).toEqual('This is a super...');
-  });
-
-  it('should return the string raw if there is a space within the given length and no words longer than the length', () => {
-    expect(truncateStringOnLongWord('This is a test', 10)).toEqual('This is a test');
-  });
-});
diff --git a/packages/extension/src/utils/format.ts b/packages/extension/src/utils/format.ts
@@ -93,25 +93,3 @@ export const formatFlagsToNumber = (tx: Transaction) => {
 export const formatTransferFee = (fee: number) => {
   return fee / 1000;
 };
-
-// When we display some strings to the UI, we want to make sure that they are not too long and will not break the UI.
-// To do so, we truncate the string only if:
-// - There is one word with a length bigger than the given length
-// otherwise, we return the string as is.
-// We do not need to truncate the string if there is no word with a length bigger than the given length because in this
-// case, the string will be correctly displayed in multiple lines, and will not break the UI.
-export const truncateStringOnLongWord = (str: string, length: number) => {
-  // If the length of the given string is lower than the length, return it
-  if (str.length <= length) {
-    return str;
-  }
-
-  // If there is a word with a length bigger than the given length, return the string truncated
-  const words = str.split(' ');
-  const longWordExists = words.some((word) => word.length > length);
-  if (longWordExists) {
-    return str.substring(0, length) + '...';
-  }
-
-  return str;
-};