Refactor TruncatedText & introduce TruncatedMultiLinesText components

GemWallet · Aug 13, 2023 · 2721b72 · 2721b72
1 parent 6611661
commit 2721b72
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx b/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
@@ -0,0 +1,32 @@
+import { ComponentProps } from 'react';
+
+import Typography from '@mui/material/Typography';
+
+type TruncatedMultiLinesTextProps = ComponentProps<typeof Typography> & {
+  text?: string;
+  maxLines?: string;
+};
+
+export const TruncatedMultiLinesText = ({
+  text = '',
+  maxLines = '4',
+  sx,
+  variant = 'body1'
+}: TruncatedMultiLinesTextProps) => {
+  return (
+    <Typography
+      sx={{
+        overflow: 'hidden',
+        display: '-webkit-box',
+        width: '100%',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': maxLines /* start showing ellipsis when X line is reached */,
+        'white-space': 'pre-wrap' /* let the text wrap preserving spaces */,
+        ...sx
+      }}
+      variant={variant}
+    >
+      {text}
+    </Typography>
+  );
+};
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts b/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedMultiLinesText';
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -1,18 +1,17 @@
-import { ComponentProps, FC } from 'react';
+import { ComponentProps } 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;
-
+export const TruncatedText = ({
+  text = '',
+  sx,
+  variant = 'body1',
+  ...rest
+}: TruncatedTextProps) => {
   return (
     <Typography
       sx={{
@@ -23,9 +22,9 @@ export const TruncatedText: FC<TruncatedTextProps> = ({ text, maxLength, sx, ...
         ...sx
       }}
       {...rest}
-      variant="body1"
+      variant={variant}
     >
-      {displayedText}
+      {text}
     </Typography>
   );
 };
diff --git a/packages/extension/src/components/atoms/index.ts b/packages/extension/src/components/atoms/index.ts
@@ -7,5 +7,6 @@ export * from './PrivateRoute';
 export * from './TileLoader';
 export * from './TokenLoader';
 export * from './Tokens';
+export * from './TruncatedMultiLinesText';
 export * from './TruncatedText';
 export * from './WalletIcon';
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx
@@ -11,7 +11,7 @@ const mockNFT = {
   Issuer: 'rDGh681kc6V1GKkQB378XhiM1tzkYrnFwQ',
   NFTokenID: '000B0000867AD7165A812436FBFA175555413C26162BCF380000099A00000000',
   NFTokenTaxon: 1,
-  URI: '697066733A2F2F6261667962656965356A626736336A6164676979736337796B6B6A64737170777732746A6D786D7935377077716F6A697666356562366B6D6D79612F312E6A736F6E',
+  URI: '697066733A2F2F6261667962656965356A626736336A6164676979736337796B6B6A64737170777732746A6D786D7935377077716F6A697666356562366B6D6D79612F312E6A736F6E', // Hex: ipfs://bafybeie5jbg63jadgiysc7ykkjdsqpww2tjmxmy57pwqojivf5eb6kmmya/1.json
   nft_serial: 0
 };
 
@@ -54,7 +54,7 @@ const renderNFTCard = (props: NFTCardProps) => {
 
 describe('NFTCard', () => {
   test('renders NFTCard component correctly', async () => {
-    mockGetNFTData.mockReturnValue({
+    mockGetNFTData.mockReturnValueOnce({
       ...mockNFTData
     });
 
@@ -74,7 +74,9 @@ describe('NFTCard', () => {
 
     await waitFor(() => expect(mockGetNFTData).toHaveBeenCalled());
 
-    // Check that the NFT data is not displayed when an error occurs
-    expect(screen.queryByTestId('nft_name')).not.toBeInTheDocument();
+    // Check that the NFT data description is set to convertHexToString(URI) when an error occurs
+    expect(
+      screen.getByText('ipfs://bafybeie5jbg63jadgiysc7ykkjdsqpww2tjmxmy57pwqojivf5eb6kmmya/1.json')
+    ).toBeInTheDocument();
   });
 });
diff --git a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -9,8 +9,7 @@ import { convertHexToString } from 'xrpl';
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { useLedger } from '../../../contexts';
-import { NFTImage } from '../../atoms';
-import { TruncatedText } from '../../atoms';
+import { NFTImage, TruncatedText, TruncatedMultiLinesText } from '../../atoms';
 import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
@@ -108,10 +107,9 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
             sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
             data-testid="nft_name"
           />
-          <TruncatedText
+          <TruncatedMultiLinesText
             text={NFTData.description}
             sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
-            maxLength={200}
           />
           <Button
             variant="outlined"