-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: custom watchlist kyberAI (#2236)
- Loading branch information
Showing
89 changed files
with
3,979 additions
and
1,578 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
src/components/Announcement/PrivateAnnoucement/InboxItemKyberAIWatchList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
src/components/Announcement/PrivateAnnoucement/NotificationCenter/KyberAIWatchlist.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.