From 993d8a658c32c48581d908fdc55545b81c3e5f87 Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Fri, 22 Sep 2023 10:30:26 +0700
Subject: [PATCH] fix hide button not works

---
 src/pages/TrueSightV2/pages/SingleToken.tsx | 54 +++++++++++++--------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx
index d6b1059b42..487cbb5a1d 100644
--- a/src/pages/TrueSightV2/pages/SingleToken.tsx
+++ b/src/pages/TrueSightV2/pages/SingleToken.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
-import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { ChevronLeft } from 'react-feather'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -160,7 +160,7 @@ export const defaultExplorePageToken = {
   assetId: 1,
 }
 
-const StyledTokenDescription = styled.div<{ show?: boolean }>`
+const StyledTokenDescription = styled.span<{ show?: boolean }>`
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: 12px;
@@ -188,11 +188,16 @@ const TokenDescription = ({ description }: { description: string }) => {
   const theme = useTheme()
   const [show, setShow] = useState(true)
   const [isTextExceeded, setIsTextExceeded] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
+  console.log('🚀 ~ file: SingleToken.tsx:191 ~ TokenDescription ~ isTextExceeded:', isTextExceeded)
 
-  useLayoutEffect(() => {
-    setIsTextExceeded((!!description && ref.current && ref.current?.clientWidth <= ref.current?.scrollWidth) || false)
-  }, [description])
+  const ref = useCallback(
+    (el: HTMLDivElement) => {
+      if (el && !!description) {
+        setIsTextExceeded(el.clientHeight > 18 || el.scrollWidth > el.clientWidth || false)
+      }
+    },
+    [description],
+  )
 
   useEffect(() => {
     const hideBtn = document.getElementById('hide-token-description-span')
@@ -205,19 +210,30 @@ const TokenDescription = ({ description }: { description: string }) => {
 
   return (
     <Row style={{ position: 'relative' }}>
-      <StyledTokenDescription
-        ref={ref}
-        show={show}
-        dangerouslySetInnerHTML={{
-          __html:
-            linkify(description) +
-            (isTextExceeded
-              ? `<span style="color:${
-                  theme.primary
-                }; cursor:pointer; margin-left:4px;" id="hide-token-description-span">${t`Hide`}</span>`
-              : ''),
-        }}
-      />
+      <StyledTokenDescription ref={ref} show={show}>
+        <span
+          dangerouslySetInnerHTML={{
+            __html: linkify(description),
+          }}
+        />
+        {isTextExceeded && show && (
+          <Text
+            as="span"
+            fontSize="12px"
+            color={theme.primary}
+            width="fit-content"
+            style={{
+              padding: '0 6px',
+              cursor: 'pointer',
+              flexBasis: 'fit-content',
+              whiteSpace: 'nowrap',
+            }}
+            onClick={() => setShow(false)}
+          >
+            Hide
+          </Text>
+        )}
+      </StyledTokenDescription>
       {isTextExceeded && !show && (
         <Text
           as="span"