add: new type of Inbox - kyber AI watch list

src/components/Announcement/AnnoucementView.tsx

@@ -252,7 +252,7 @@ export default function AnnouncementView({
                     height={height}
                     width={width}
                     itemCount={itemCount}
-                    itemSize={isMyInboxTab ? 116 : 126}
+                    itemSize={isMyInboxTab ? 120 : 126}
                     onItemsRendered={onItemsRendered}
                     ref={ref}
                   >

src/components/Announcement/PrivateAnnoucement/Icon.tsx

@@ -25,6 +25,7 @@ const mapIcon: Partial<{ [type in PrivateAnnouncementType]: ReactNode }> = {
   [PrivateAnnouncementType.LIMIT_ORDER]: <LimitOrderIcon />,
   [PrivateAnnouncementType.ELASTIC_POOLS]: <LiquidityIcon />,
   [PrivateAnnouncementType.KYBER_AI]: <ApeIcon size={18} />,
+  [PrivateAnnouncementType.KYBER_AI_WATCHLIST]: <ApeIcon size={18} />,
   [PrivateAnnouncementType.PRICE_ALERT]: <AlarmIcon style={{ width: 17, height: 17 }} />,
   [PrivateAnnouncementType.DIRECT_MESSAGE]: <Bell style={{ width: 17, height: 17 }} />,
 }

src/components/Announcement/PrivateAnnoucement/InboxItemTrendingSoon.tsx → src/components/Announcement/PrivateAnnoucement/InboxItemKyberAI.tsx

@@ -1,14 +1,15 @@
 import { Trans } from '@lingui/macro'
 import { useNavigate } from 'react-router-dom'
+import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
-import { AnnouncementTemplateTrendingSoon } from 'components/Announcement/type'
+import { AnnouncementTemplateKyberAI } from 'components/Announcement/type'
 import DiscoverIcon from 'components/Icons/DiscoverIcon'
 import Icon from 'components/Icons/Icon'
-import DeltaTokenAmount from 'components/WalletPopup/Transactions/DeltaTokenAmount'
+import { TokenLogoWithShadow } from 'components/Logo'
 import { APP_PATHS } from 'constants/index'
 import useTheme from 'hooks/useTheme'
 
@@ -18,12 +19,31 @@ const ItemWrapper = styled.div<{ color: string }>`
   gap: 4px;
   color: ${({ color }) => color};
 `
+const TokenDetail = ({
+  color,
+  symbol,
+  logoURL,
+  fontSize,
+}: {
+  color: string
+  logoURL: string
+  symbol: string
+  fontSize: string
+}) => (
+  <Flex color={color} alignItems={'center'} sx={{ gap: '4px', fontSize }}>
+    <TokenLogoWithShadow srcs={[logoURL]} size={fontSize} />
+    {symbol}
+  </Flex>
+)
+
 export const TokenInfo = ({
   templateBody,
   type,
+  fontSize = '12px',
 }: {
-  templateBody: AnnouncementTemplateTrendingSoon
+  templateBody: AnnouncementTemplateKyberAI
   type: 'bullish' | 'bearish' | 'trending'
+  fontSize?: string
 }) => {
   const theme = useTheme()
   const {
@@ -41,9 +61,12 @@ export const TokenInfo = ({
     case 'bullish':
       return (
         <ItemWrapper color={theme.apr}>
-          <Icon id="bullish" size={14} /> <Trans>Bullish:</Trans>
-          <DeltaTokenAmount
-            amount={null}
+          <Icon id="bullish" size={14} />{' '}
+          <Text as="span" fontSize={fontSize}>
+            <Trans>Bullish:</Trans>
+          </Text>
+          <TokenDetail
+            fontSize={fontSize}
             logoURL={bullishTokenLogoURL}
             color={theme.text}
             symbol={`${bullishTokenSymbol} (${bullishTokenScore})`}
@@ -53,9 +76,12 @@ export const TokenInfo = ({
     case 'bearish':
       return (
         <ItemWrapper color={theme.red}>
-          <Icon id="bearish" size={12} /> <Trans>Bearish:</Trans>
-          <DeltaTokenAmount
-            amount={null}
+          <Icon id="bearish" size={12} />{' '}
+          <Text as="span" fontSize={fontSize}>
+            <Trans>Bearish:</Trans>
+          </Text>
+          <TokenDetail
+            fontSize={fontSize}
             logoURL={bearishTokenLogoURL}
             color={theme.text}
             symbol={`${bearishTokenSymbol} (${bearishTokenScore})`}
@@ -65,9 +91,12 @@ export const TokenInfo = ({
     case 'trending':
       return (
         <ItemWrapper color={theme.text}>
-          <DiscoverIcon size={12} /> <Trans>Trending Soon:</Trans>
-          <DeltaTokenAmount
-            amount={null}
+          <DiscoverIcon size={12} />{' '}
+          <Text as="span" fontSize={fontSize}>
+            <Trans>Trending Soon:</Trans>
+          </Text>
+          <TokenDetail
+            fontSize={fontSize}
             logoURL={trendingSoonTokenLogoURL}
             color={theme.text}
             symbol={`${trendingSoonTokenSymbol} (${trendingSoonTokenScore})`}
@@ -83,7 +112,7 @@ function InboxItemBridge({
   style,
   time,
   title,
-}: PrivateAnnouncementProp<AnnouncementTemplateTrendingSoon>) {
+}: PrivateAnnouncementProp<AnnouncementTemplateKyberAI>) {
   const { templateBody, isRead, templateType } = announcement
 
   const navigate = useNavigate()

src/components/Announcement/PrivateAnnoucement/InboxItemKyberAIWatchList.tsx

@@ -0,0 +1,97 @@
+import { useNavigate } from 'react-router-dom'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+
+import { PrivateAnnouncementProp } from 'components/Announcement/PrivateAnnoucement'
+import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
+import { Dot, InboxItemRow, InboxItemWrapper, RowItem, Title } from 'components/Announcement/PrivateAnnoucement/styled'
+import { AnnouncementTemplateKyberAIWatchlist, TokenInfoWatchlist } from 'components/Announcement/type'
+import Column from 'components/Column'
+import { TokenLogoWithShadow } from 'components/Logo'
+import { APP_PATHS } from 'constants/index'
+import useTheme from 'hooks/useTheme'
+import { calculateValueToColor, getTypeByKyberScore } from 'pages/TrueSightV2/utils'
+import { formatDisplayNumber } from 'utils/numbers'
+
+const ItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`
+export const TokenInfo = ({
+  showPrice = true,
+  logoSize = '12px',
+  token,
+}: {
+  showPrice?: boolean
+  logoSize?: string
+  token: TokenInfoWatchlist
+}) => {
+  const theme = useTheme()
+  const { logoURL, symbol, price, priceChange, kyberScore } = token || {}
+  return (
+    <ItemWrapper>
+      <TokenLogoWithShadow srcs={[logoURL]} size={logoSize} />
+      <Column gap="4px" fontSize={logoSize}>
+        <Text color={theme.text}>
+          {symbol}{' '}
+          <Text as="span" color={calculateValueToColor(+kyberScore, theme)}>
+            {kyberScore} ({getTypeByKyberScore(+kyberScore)})
+          </Text>
+        </Text>
+        {showPrice && (
+          <Text>
+            <Text as="span" color={theme.text}>
+              {formatDisplayNumber(price, { style: 'currency', significantDigits: 4 })}
+            </Text>{' '}
+            <Text as="span" color={+priceChange > 0 ? theme.apr : theme.red}>
+              ({+priceChange > 0 && '+'}
+              {formatDisplayNumber(+priceChange / 100, { style: 'percent', fractionDigits: 2, allowNegative: true })})
+            </Text>
+          </Text>
+        )}
+      </Column>
+    </ItemWrapper>
+  )
+}
+
+function InboxItemBridge({
+  announcement,
+  onRead,
+  style,
+  time,
+  title,
+}: PrivateAnnouncementProp<AnnouncementTemplateKyberAIWatchlist>) {
+  const { templateBody, isRead, templateType } = announcement
+  const { assets = [] } = templateBody || {}
+  const [token1, token2, token3] = assets
+
+  const navigate = useNavigate()
+  const onClick = () => {
+    navigate(APP_PATHS.KYBERAI_RANKINGS)
+    onRead(announcement, 'kyberAI_watchlist')
+  }
+
+  return (
+    <InboxItemWrapper isRead={isRead} onClick={onClick} style={{ ...style, paddingTop: '8px', gap: '6px' }}>
+      <InboxItemRow>
+        <RowItem>
+          <InboxIcon type={templateType} />
+          <Title isRead={isRead}>{title}</Title>
+          {!isRead && <Dot />}
+        </RowItem>
+      </InboxItemRow>
+
+      <InboxItemRow>
+        {token1 && <TokenInfo token={token1} />}
+        {token2 && <TokenInfo token={token2} />}
+      </InboxItemRow>
+
+      <InboxItemRow style={{ alignItems: 'center' }}>
+        {token3 ? <TokenInfo token={token3} /> : <div />}
+        {time}
+      </InboxItemRow>
+    </InboxItemWrapper>
+  )
+}
+export default InboxItemBridge

src/components/Announcement/PrivateAnnoucement/NotificationCenter/TrendingSoon.tsx → src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAI.tsx

@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom'
 import { Flex } from 'rebass'
 
 import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
-import { TokenInfo } from 'components/Announcement/PrivateAnnoucement/InboxItemTrendingSoon'
+import { TokenInfo } from 'components/Announcement/PrivateAnnoucement/InboxItemKyberAI'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
-import { AnnouncementTemplateTrendingSoon } from 'components/Announcement/type'
+import { AnnouncementTemplateKyberAI } from 'components/Announcement/type'
 import { APP_PATHS } from 'constants/index'
 import useTheme from 'hooks/useTheme'
 import { formatTime } from 'utils/time'
@@ -15,7 +15,7 @@ import { Desc, Time, Title, Wrapper } from './styled'
 export default function AnnouncementItem({
   announcement,
   title,
-}: PrivateAnnouncementPropCenter<AnnouncementTemplateTrendingSoon>) {
+}: PrivateAnnouncementPropCenter<AnnouncementTemplateKyberAI>) {
   const { sentAt, templateType, templateBody } = announcement
   const theme = useTheme()
   const navigate = useNavigate()
@@ -32,10 +32,10 @@ export default function AnnouncementItem({
         </Flex>
       </Flex>
       <Desc style={{ gap: 6, flexWrap: 'wrap', color: theme.subText }}>
-        <Trans>Here are our top tokens by KyberAI</Trans>
-        <TokenInfo templateBody={templateBody} type="bullish" />,
-        <TokenInfo templateBody={templateBody} type="bearish" />,
-        <TokenInfo templateBody={templateBody} type="trending" />
+        <Trans>Here are our top tokens by KyberAI:</Trans>
+        <TokenInfo templateBody={templateBody} type="bullish" fontSize="14px" />,
+        <TokenInfo templateBody={templateBody} type="bearish" fontSize="14px" />,
+        <TokenInfo templateBody={templateBody} type="trending" fontSize="14px" />
       </Desc>
     </Wrapper>
   )

src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx

@@ -0,0 +1,70 @@
+import { Trans } from '@lingui/macro'
+import { Fragment, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Flex } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
+import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
+import { TokenInfo } from 'components/Announcement/PrivateAnnoucement/InboxItemKyberAIWatchList'
+import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
+import { AnnouncementTemplateKyberAIWatchlist } from 'components/Announcement/type'
+import { APP_PATHS } from 'constants/index'
+import useTheme from 'hooks/useTheme'
+import { formatTime } from 'utils/time'
+
+import { ArrowWrapper, Desc, Time, Title, Wrapper } from './styled'
+
+const Detail = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+`
+
+export default function AnnouncementItem({
+  announcement,
+  title,
+}: PrivateAnnouncementPropCenter<AnnouncementTemplateKyberAIWatchlist>) {
+  const { sentAt, templateType, templateBody } = announcement
+  const { assets = [] } = templateBody || {}
+  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)}>
+      <Flex justifyContent="space-between" width="100%">
+        <Title onClick={() => navigate(APP_PATHS.KYBERAI_RANKINGS)}>
+          <InboxIcon type={templateType} />
+          {title}
+        </Title>
+        <Flex alignItems={'center'}>
+          <Time>{formatTime(sentAt)} </Time>
+          <ArrowWrapper data-expanded={expand}>
+            <DropdownSVG />
+          </ArrowWrapper>
+        </Flex>
+      </Flex>
+      <Desc style={{ gap: 6, flexWrap: 'wrap', color: theme.subText }}>
+        <Trans>Here is an update on the tokens in your watchlist:</Trans>
+        {!expand &&
+          minimalAssets.map((token, i) => (
+            <Fragment key={i}>
+              <TokenInfo token={token} showPrice={false} key={i} logoSize={'14px'} />
+              {i === minimalAssets.length - 1 ? (minimalAssets.length < slice ? '' : ', ...') : ', '}
+            </Fragment>
+          ))}
+      </Desc>
+      {expand && (
+        <Detail>
+          {assets.map((token, i) => (
+            <TokenInfo token={token} key={i} showPrice logoSize={'14px'} />
+          ))}
+        </Detail>
+      )}
+    </Wrapper>
+  )
+}

src/components/Announcement/PrivateAnnoucement/NotificationCenter/PoolPosition.tsx

@@ -16,24 +16,7 @@ import { NETWORKS_INFO } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
 import { formatTime } from 'utils/time'
 
-import { Desc, Time, Title, Wrapper } from './styled'
-
-const ArrowWrapper = styled.div`
-  width: 20px;
-  height: 20px;
-  color: ${({ theme }) => theme.subText};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  svg {
-    transition: all 150ms ease-in-out;
-  }
-  &[data-expanded='true'] {
-    svg {
-      transform: rotate(180deg);
-    }
-  }
-`
+import { ArrowWrapper, Desc, Time, Title, Wrapper } from './styled'
 
 const Detail = styled(Desc)`
   flex-direction: column;

src/components/Announcement/PrivateAnnoucement/NotificationCenter/index.tsx

@@ -5,11 +5,12 @@ import { AnnouncementTemplate, PrivateAnnouncement, PrivateAnnouncementType } fr
 
 import Bridge from './Bridge'
 import CrossChain from './CrossChain'
+import KyberAI from './KyberAI'
+import KyberAIWatchlist from './KyberAIWatchlist'
 import LimitOrder from './LimitOrder'
 import PoolPosition from './PoolPosition'
 import PriceAlert from './PriceAlert'
 import PrivateMessage from './PrivateMessage'
-import TrendingSoon from './TrendingSoon'
 
 export type PrivateAnnouncementPropCenter<T extends AnnouncementTemplate = AnnouncementTemplate> = {
   announcement: PrivateAnnouncement<T>
@@ -24,7 +25,8 @@ const ANNOUNCEMENT_MAP_IN_CENTER = {
   [PrivateAnnouncementType.LIMIT_ORDER]: LimitOrder,
   [PrivateAnnouncementType.BRIDGE_ASSET]: Bridge,
   [PrivateAnnouncementType.CROSS_CHAIN]: CrossChain,
-  [PrivateAnnouncementType.KYBER_AI]: TrendingSoon,
+  [PrivateAnnouncementType.KYBER_AI]: KyberAI,
+  [PrivateAnnouncementType.KYBER_AI_WATCHLIST]: KyberAIWatchlist,
   [PrivateAnnouncementType.PRICE_ALERT]: PriceAlert,
   [PrivateAnnouncementType.DIRECT_MESSAGE]: PrivateMessage,
 } as PrivateAnnouncementCenterMap