Skip to content

Commit

Permalink
feat: custom watchlist kyberAI (#2236)
Browse files Browse the repository at this point in the history
  • Loading branch information
XiaoYhun authored and namgold committed Oct 11, 2023
1 parent 042e2ef commit 10d5396
Show file tree
Hide file tree
Showing 89 changed files with 3,979 additions and 1,578 deletions.
1 change: 1 addition & 0 deletions .github/workflows/pr.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ jobs:
NODE_OPTIONS: '--max_old_space_size=4096'
run: yarn build-prod


- name: Docker build and push
uses: docker/build-push-action@v2
with:
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 46 additions & 35 deletions src/assets/svg/sprite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Announcement/AnnoucementView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
1 change: 1 addition & 0 deletions src/components/Announcement/PrivateAnnoucement/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }} />,
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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 {
Expand All @@ -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})`}
Expand All @@ -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})`}
Expand All @@ -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})`}
Expand All @@ -83,7 +112,7 @@ function InboxItemBridge({
style,
time,
title,
}: PrivateAnnouncementProp<AnnouncementTemplateTrendingSoon>) {
}: PrivateAnnouncementProp<AnnouncementTemplateKyberAI>) {
const { templateBody, isRead, templateType } = announcement

const navigate = useNavigate()
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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()
Expand All @@ -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>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down
Loading

0 comments on commit 10d5396

Please sign in to comment.