Skip to content

Commit

Permalink
update custom watchlist for list page
Browse files Browse the repository at this point in the history
  • Loading branch information
@XiaoYhun
XiaoYhun committed Aug 22, 2023
1 parent c47ae30 commit a0dcc0b
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 150 deletions.
2 changes: 1 addition & 1 deletion src/components/Popover/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const PopoverContainer = styled.div<{ show: boolean; opacity?: number }>`
`

const ReferenceElement = styled.div`
display: inline-block;
display: block;
`

const Arrow = styled.div`
Expand Down
39 changes: 21 additions & 18 deletions src/pages/TrueSightV2/components/WatchlistButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { Trans, t } from '@lingui/macro'
import { AnimatePresence, Reorder, useDragControls } from 'framer-motion'
import { useEffect, useRef, useState } from 'react'
import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
import { Check, Plus, X } from 'react-feather'
import { useMedia } from 'react-use'
import { Text } from 'rebass'
import styled, { css, useTheme } from 'styled-components'

Expand All @@ -14,7 +13,6 @@ import Modal from 'components/Modal'
import Popover from 'components/Popover'
import Row, { RowBetween, RowFit } from 'components/Row'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import { MEDIA_WIDTHS } from 'theme'

import SimpleTooltip from './SimpleTooltip'
import { StarWithAnimation } from './WatchlistStar'
Expand Down Expand Up @@ -45,7 +43,7 @@ const MenuOption = styled(Row)`
const ReorderWrapper = styled.div`
gap: 16px;
height: 280px;
overflow: scroll;
::-webkit-scrollbar {
-webkit-appearance: button;
width: 7px;
Expand Down Expand Up @@ -104,10 +102,12 @@ const options = [

function WatchlistItem({
item,
wrapperRef,
onValueChange,
onRemove,
}: {
item: IOption
wrapperRef: React.RefObject<HTMLDivElement>
onValueChange?: (newValue: string) => void
onRemove?: () => void
}) {
Expand Down Expand Up @@ -163,6 +163,8 @@ function WatchlistItem({
value={item}
dragListener={false}
dragControls={controls}
dragConstraints={wrapperRef}
dragElastic={0}
initial={{ opacity: 0, scale: 1 }}
animate={{
opacity: 1,
Expand Down Expand Up @@ -280,14 +282,15 @@ const CreateListInput = ({ onCreate, disabled }: { onCreate: (listName: string)
)
}

export default function WatchlistButton() {
export default function WatchlistButton({ size, wrapperStyle }: { size?: number; wrapperStyle?: CSSProperties }) {
const [openMenu, setOpenMenu] = useState(false)
const [openManageModal, setOpenManageModal] = useState(false)
const [listOptions, setListOptions] = useState(options)

const theme = useTheme()
const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
// const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
const ref = useRef<HTMLDivElement>(null)
const reorderWrapperRef = useRef<HTMLDivElement>(null)
useOnClickOutside(ref, () => {
setOpenMenu(false)
})
Expand All @@ -305,8 +308,12 @@ export default function WatchlistButton() {
const id = Math.max(...listOptions.map(i => i.id)) + 1
setListOptions([{ id: id, text: newListName, watched: false }, ...listOptions])
}

const watched = useMemo(() => {
return listOptions.some(t => t.watched)
}, [listOptions])
return (
<>
<div onClick={e => e.stopPropagation()}>
<Popover
show={openMenu}
style={{ backgroundColor: theme.tableHeader, borderRadius: '20px' }}
Expand Down Expand Up @@ -347,27 +354,22 @@ export default function WatchlistButton() {
>
<StarWithAnimation
loading={false}
watched={false}
watched={watched}
onClick={() => setOpenMenu(prev => !prev)}
wrapperStyle={{
color: theme.subText,
backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
height: above768 ? '36px' : '32px',
width: above768 ? '36px' : '32px',
borderRadius: '100%',
}}
wrapperStyle={wrapperStyle}
size={size}
/>
</Popover>
<Modal isOpen={openManageModal} width="380px">
<ModalWrapper>
<ModalWrapper onClick={e => e.stopPropagation()}>
<RowBetween>
<Text>Manage Watchlists</Text>
<ButtonAction onClick={() => setOpenManageModal(false)}>
<X />
</ButtonAction>
</RowBetween>
<CreateListInput onCreate={handleCreateNewList} disabled={listOptions.length >= 5} />
<ReorderWrapper>
<ReorderWrapper ref={reorderWrapperRef}>
<Reorder.Group
axis="y"
values={listOptions}
Expand All @@ -378,6 +380,7 @@ export default function WatchlistButton() {
<AnimatePresence>
{listOptions.map((item, i) => (
<WatchlistItem
wrapperRef={reorderWrapperRef}
key={item.id}
item={item}
onValueChange={newValue => handleSingleValueChange(newValue, i)}
Expand All @@ -389,6 +392,6 @@ export default function WatchlistButton() {
</ReorderWrapper>
</ModalWrapper>
</Modal>
</>
</div>
)
}
126 changes: 48 additions & 78 deletions src/pages/TrueSightV2/components/table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Trans, t } from '@lingui/macro'
import dayjs from 'dayjs'
import { BigNumber } from 'ethers'
import { formatUnits } from 'ethers/lib/utils'
import { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import { ReactNode, useCallback, useContext, useMemo, useRef, useState } from 'react'
import { isMobile } from 'react-device-detect'
import { Info } from 'react-feather'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
Expand All @@ -19,19 +19,10 @@ import AnimatedLoader from 'components/Loader/AnimatedLoader'
import Pagination from 'components/Pagination'
import Row, { RowFit } from 'components/Row'
import { APP_PATHS } from 'constants/index'
import { useActiveWeb3React } from 'hooks'
import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import useTheme from 'hooks/useTheme'
import { NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
import useIsReachMaxLimitWatchedToken from 'pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken'
import {
useAddToWatchlistMutation,
useFundingRateQuery,
useHolderListQuery,
useLiveDexTradesQuery,
useRemoveFromWatchlistMutation,
} from 'pages/TrueSightV2/hooks/useKyberAIData'
import { useFundingRateQuery, useHolderListQuery, useLiveDexTradesQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
import useKyberAITokenOverview from 'pages/TrueSightV2/hooks/useKyberAITokenOverview'
import { TechnicalAnalysisContext } from 'pages/TrueSightV2/pages/TechnicalAnalysis'
import { IHolderList, IKyberScoreChart, ILiveTrade, ITokenList, KyberAITimeframe } from 'pages/TrueSightV2/types'
Expand All @@ -48,12 +39,11 @@ import { getProxyTokenLogo } from 'utils/tokenInfo'
import ChevronIcon from '../ChevronIcon'
import { WidgetTab } from '../KyberAIWidget'
import MultipleChainDropdown from '../MultipleChainDropdown'
import SimpleTooltip from '../SimpleTooltip'
import SmallKyberScoreMeter from '../SmallKyberScoreMeter'
import TimeFrameLegend from '../TimeFrameLegend'
import TokenChart from '../TokenChartSVG'
import TokenListVariants from '../TokenListVariants'
import { StarWithAnimation } from '../WatchlistStar'
import WatchlistButton from '../WatchlistButton'

const TableWrapper = styled.div`
overflow-x: scroll;
Expand Down Expand Up @@ -580,29 +570,29 @@ const WidgetTableWrapper = styled(Table)`
const WidgetTokenRow = ({
token,
onClick,
activeTab,
index,
}: {
}: // activeTab,
// index,
{
token: ITokenList
onClick?: () => void
activeTab: WidgetTab
index: number
}) => {
const theme = useTheme()
const navigate = useNavigate()
const { account } = useActiveWeb3React()
const mixpanelHandler = useMixpanelKyberAI()
const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)
// const { account } = useActiveWeb3React()
// const mixpanelHandler = useMixpanelKyberAI()
// const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)

const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
const hasMutipleChain = token?.tokens?.length > 1
const [showMenu, setShowMenu] = useState(false)
const [showSwapMenu, setShowSwapMenu] = useState(false)
const [menuLeft, setMenuLeft] = useState<number | undefined>(undefined)
const [isWatched, setIsWatched] = useState(!!token.isWatched)
const [loadingStar, setLoadingStar] = useState(false)
const [addToWatchlist] = useAddToWatchlistMutation()
const [removeFromWatchlist] = useRemoveFromWatchlistMutation()
// const [isWatched, setIsWatched] = useState(!!token.isWatched)
// const [loadingStar, setLoadingStar] = useState(false)
// const [addToWatchlist] = useAddToWatchlistMutation()
// const [removeFromWatchlist] = useRemoveFromWatchlistMutation()

const rowRef = useRef<HTMLTableRowElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
Expand Down Expand Up @@ -643,40 +633,40 @@ const WidgetTokenRow = ({
navigateToSwapPage({ address, chain })
}

const handleWatchlistClick = (e: any) => {
e.stopPropagation()
if (!account) return
setLoadingStar(true)
if (isWatched) {
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
token_name: token.symbol?.toUpperCase(),
source: activeTab,
ranking_order: index,
option: 'remove',
})
Promise.all(token.tokens.map(t => removeFromWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
setIsWatched(false)
setLoadingStar(false)
})
} else {
if (!isWatched) {
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
token_name: token.symbol?.toUpperCase(),
source: activeTab,
ranking_order: index,
option: 'add',
})
Promise.all(token.tokens.map(t => addToWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
setIsWatched(true)
setLoadingStar(false)
})
}
}
}
// const handleWatchlistClick = (e: any) => {
// e.stopPropagation()
// if (!account) return
// setLoadingStar(true)
// if (isWatched) {
// mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
// token_name: token.symbol?.toUpperCase(),
// source: activeTab,
// ranking_order: index,
// option: 'remove',
// })
// Promise.all(token.tokens.map(t => removeFromWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
// setIsWatched(false)
// setLoadingStar(false)
// })
// } else {
// if (!isWatched) {
// mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
// token_name: token.symbol?.toUpperCase(),
// source: activeTab,
// ranking_order: index,
// option: 'add',
// })
// Promise.all(token.tokens.map(t => addToWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
// setIsWatched(true)
// setLoadingStar(false)
// })
// }
// }
// }

useEffect(() => {
setIsWatched(token.isWatched)
}, [token.isWatched])
// useEffect(() => {
// setIsWatched(token.isWatched)
// }, [token.isWatched])

return (
<tr onClick={handleRowClick} style={{ position: 'relative' }} ref={rowRef}>
Expand All @@ -685,12 +675,7 @@ const WidgetTokenRow = ({
<td>
<Column gap="4px">
<RowFit gap="6px">
<StarWithAnimation
watched={isWatched}
loading={loadingStar}
onClick={handleWatchlistClick}
disabled={!isWatched && reachedMaxLimit}
/>
<WatchlistButton />
<img
alt="tokenInList"
src={token.tokens[0].logo}
Expand Down Expand Up @@ -726,22 +711,7 @@ const WidgetTokenRow = ({
<>
<td>
<RowFit gap="6px">
<SimpleTooltip
text={
isWatched
? t`Remove from watchlist`
: reachedMaxLimit
? t`Reached 30 tokens limit`
: t`Add to watchlist`
}
>
<StarWithAnimation
watched={isWatched}
loading={loadingStar}
onClick={handleWatchlistClick}
disabled={!isWatched && reachedMaxLimit}
/>
</SimpleTooltip>
<WatchlistButton />
<Row gap="8px" style={{ position: 'relative', width: '24px', height: '24px' }}>
<img
alt="tokenInList"
Expand Down
10 changes: 9 additions & 1 deletion src/pages/TrueSightV2/pages/SingleToken.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,15 @@ const TokenNameGroup = ({ token, isLoading }: { token?: ITokenOverview; isLoadin
<ChevronLeft size={24} />
</ButtonIcon>
</SimpleTooltip>
<WatchlistButton />
<WatchlistButton
wrapperStyle={{
color: theme.subText,
backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
height: above768 ? '36px' : '32px',
width: above768 ? '36px' : '32px',
borderRadius: '100%',
}}
/>
<div style={{ position: 'relative' }}>
<div style={{ borderRadius: '50%', overflow: 'hidden' }}>
<img
Expand Down
Loading

0 comments on commit a0dcc0b

Please sign in to comment.