From 0139fd5e3cf06e4ea3fe1d66aa03bc784a005338 Mon Sep 17 00:00:00 2001
From: thibautbremand <thibaut.bremand@gmail.com>
Date: Mon, 14 Aug 2023 14:33:31 +0200
Subject: [PATCH] Refactor TruncatedText component

---
 .../TruncatedMultiLinesText.tsx               | 32 -----------------
 .../atoms/TruncatedMultiLinesText/index.ts    |  1 -
 .../atoms/TruncatedText/TruncatedText.tsx     | 36 ++++++++++++++++---
 .../extension/src/components/atoms/index.ts   |  1 -
 .../components/molecules/NFTCard/NFTCard.tsx  |  5 +--
 5 files changed, 34 insertions(+), 41 deletions(-)
 delete mode 100644 packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
 delete mode 100644 packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts

diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx b/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
deleted file mode 100644
index ac4d2b8ae..000000000
--- a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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', // defaults to 4 max lines
-  sx,
-  ...rest
-}: TruncatedMultiLinesTextProps) => {
-  return (
-    <Typography
-      sx={{
-        overflow: 'hidden',
-        display: '-webkit-box',
-        width: '100%', // if the string is very long without spaces, it will not overflow the view
-        '-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
-      }}
-      {...rest}
-    >
-      {text}
-    </Typography>
-  );
-};
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts b/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
deleted file mode 100644
index b159c2074..000000000
--- a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './TruncatedMultiLinesText';
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
index 7b6cfd847..aec71a307 100644
--- a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
+++ b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -4,16 +4,42 @@ import { Typography } from '@mui/material';
 
 type TruncatedTextProps = ComponentProps<typeof Typography> & {
   text?: string;
+  isMultiline?: boolean;
+  maxLines?: string;
 };
 
-export const TruncatedText = ({ text = '', sx, ...rest }: TruncatedTextProps) => {
+export const TruncatedText = ({
+  text = '',
+  isMultiline = false,
+  maxLines = '4', // defaults to 4 max lines
+  sx,
+  ...rest
+}: TruncatedTextProps) => {
+  let styleProps: {};
+
+  if (isMultiline) {
+    styleProps = {
+      overflow: 'hidden',
+      display: '-webkit-box',
+      width: '100%', // if the string is very long without spaces, it will not overflow the view
+      '-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
+    };
+  } else {
+    // mode is 'width'
+    styleProps = {
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: '100%'
+    };
+  }
+
   return (
     <Typography
       sx={{
-        display: 'block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        width: '100%',
+        ...styleProps,
         ...sx
       }}
       {...rest}
diff --git a/packages/extension/src/components/atoms/index.ts b/packages/extension/src/components/atoms/index.ts
index d43119367..3005b574c 100644
--- a/packages/extension/src/components/atoms/index.ts
+++ b/packages/extension/src/components/atoms/index.ts
@@ -6,6 +6,5 @@ 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.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
index e6e0d9cbf..5e2986220 100644
--- a/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
+++ b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx
@@ -9,7 +9,7 @@ import { convertHexToString } from 'xrpl';
 import { AccountNFToken, NFTData } from '@gemwallet/constants';
 
 import { useLedger } from '../../../contexts';
-import { NFTImage, TruncatedText, TruncatedMultiLinesText } from '../../atoms';
+import { NFTImage, TruncatedText } from '../../atoms';
 import { NFTDetails } from '../../organisms';
 
 export interface NFTCardProps {
@@ -107,9 +107,10 @@ export const NFTCard: FC<NFTCardProps> = ({ NFT }) => {
             sx={{ fontSize: '16px', color: 'white', marginTop: '10px' }}
             data-testid="nft_name"
           />
-          <TruncatedMultiLinesText
+          <TruncatedText
             text={NFTData.description}
             sx={{ fontSize: '14px', color: 'grey', marginTop: '10px' }}
+            isMultiline={true}
           />
           <Button
             variant="outlined"