From ad919026abd4101707377554f327a1223f3754d0 Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Wed, 2 Aug 2023 15:07:12 +0530
Subject: [PATCH] UX Improvement: Fixed tooltip for token-list-item (#20258)

* updated tooltip for token-list-item

* updated snapshot
---
 .../__snapshots__/token-cell.test.js.snap     | 19 ++++---------
 .../token-list-item.test.js.snap              |  8 ++----
 .../token-list-item/token-list-item.js        | 28 +++++++++++++------
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index 6013ae4af..a4426da49 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -43,20 +43,11 @@ exports[`Token Cell should match snapshot 1`] = `
           <div
             class="mm-box mm-box--width-1/3"
           >
-            <div>
-              <div
-                class=""
-                style="display: inline;"
-                tabindex="0"
-                title=""
-              >
-                <p
-                  class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
-                >
-                  TEST
-                </p>
-              </div>
-            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+            >
+              TEST
+            </p>
           </div>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
index 20c4e2caa..d0fe06997 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -43,11 +43,9 @@ exports[`TokenListItem should render correctly 1`] = `
           <div
             class="mm-box mm-box--width-1/3"
           >
-            <div>
-              <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
-              />
-            </div>
+            <p
+              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
+            />
           </div>
           <p
             class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 8c4e861c9..08da2575e 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -48,6 +48,7 @@ export const TokenListItem = ({
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
   const trackEvent = useContext(MetaMetricsContext);
   const chainId = useSelector(getCurrentChainId);
+  const tokenTitle = title === 'ETH' ? t('networkNameEthereum') : title;
 
   // Used for badge icon
   const currentNetwork = useSelector(getCurrentNetwork);
@@ -121,21 +122,30 @@ export const TokenListItem = ({
             gap={1}
           >
             <Box width={BlockSize.OneThird}>
-              <Tooltip
-                position="bottom"
-                interactive
-                html={title}
-                disabled={title?.length < 12}
-                tooltipInnerClassName="multichain-token-list-item__tooltip"
-              >
+              {title?.length > 12 ? (
+                <Tooltip
+                  position="bottom"
+                  interactive
+                  html={title}
+                  tooltipInnerClassName="multichain-token-list-item__tooltip"
+                >
+                  <Text
+                    fontWeight={FontWeight.Medium}
+                    variant={TextVariant.bodyMd}
+                    ellipsis
+                  >
+                    {tokenTitle}
+                  </Text>
+                </Tooltip>
+              ) : (
                 <Text
                   fontWeight={FontWeight.Medium}
                   variant={TextVariant.bodyMd}
                   ellipsis
                 >
-                  {title === 'ETH' ? t('networkNameEthereum') : title}
+                  {tokenTitle}
                 </Text>
-              </Tooltip>
+              )}
             </Box>
             <Text
               fontWeight={FontWeight.Medium}