From 8073d6f3163995159319a0f4a8b0ad9cd32b087e Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Wed, 27 Sep 2023 17:58:35 +0700
Subject: [PATCH] fix: when asset too small

---
 .../NotificationCenter/KyberAIWatchlist.tsx                 | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx
index a73cd70f13..c077f940ef 100644
--- a/src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx
+++ b/src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx
@@ -31,6 +31,8 @@ export default function AnnouncementItem({
   const theme = useTheme()
   const navigate = useNavigate()
   const [expand, setExpand] = useState(false)
+  const slice = 3
+  const minimalAssets = assets.slice(0, slice)
 
   return (
     <Wrapper onClick={() => setExpand(!expand)}>
@@ -49,10 +51,10 @@ export default function AnnouncementItem({
       <Desc style={{ gap: 6, flexWrap: 'wrap', color: theme.subText }}>
         <Trans>Here is an update on the tokens in your watchlist:</Trans>
         {!expand &&
-          assets.slice(0, 3).map((token, i) => (
+          minimalAssets.map((token, i) => (
             <Fragment key={i}>
               <TokenInfo token={token} showPrice={false} key={i} logoSize={'14px'} />
-              {i === 2 ? ', ...' : ', '}
+              {i === minimalAssets.length - 1 ? (minimalAssets.length < slice ? '' : ', ...') : ', '}
             </Fragment>
           ))}
       </Desc>