Skip to content

Commit

Permalink
improve token list
Browse files Browse the repository at this point in the history
  • Loading branch information
@XiaoYhun
XiaoYhun committed Aug 10, 2023
1 parent 00e2eea commit c44599d
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 49 deletions.
35 changes: 35 additions & 0 deletions src/pages/TrueSightV2/components/TokenListVariants.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Icon from 'components/Icons/Icon'

export default function TokenListVariants({
tokens,
iconSize = 12,
}: {
tokens: Array<{ address: string; logo: string; chain: string }>
iconSize?: number
}) {
return (
<>
{tokens.map((item, index) => {
const key = item.address + '_' + index
switch (item.chain) {
case 'ethereum':
return <Icon key={key} id="eth-mono" size={iconSize} title="Ethereum" />
case 'bsc':
return <Icon key={key} id="bnb-mono" size={iconSize} title="Binance" />
case 'avalanche':
return <Icon key={key} id="ava-mono" size={iconSize} title="Avalanche" />
case 'polygon':
return <Icon key={key} id="matic-mono" size={iconSize} title="Polygon" />
case 'arbitrum':
return <Icon key={key} id="arbitrum-mono" size={iconSize} title="Arbitrum" />
case 'fantom':
return <Icon key={key} id="fantom-mono" size={iconSize} title="Fantom" />
case 'optimism':
return <Icon key={key} id="optimism-mono" size={iconSize} title="Optimism" />
default:
return <></>
}
})}
</>
)
}
23 changes: 3 additions & 20 deletions src/pages/TrueSightV2/components/table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import SimpleTooltip from '../SimpleTooltip'
import SmallKyberScoreMeter from '../SmallKyberScoreMeter'
import TimeFrameLegend from '../TimeFrameLegend'
import TokenChart from '../TokenChartSVG'
import TokenListVariants from '../TokenListVariants'
import { StarWithAnimation } from '../WatchlistStar'

const TableWrapper = styled.div`
Expand Down Expand Up @@ -698,16 +699,7 @@ const WidgetTokenRow = ({
{token.symbol}
</Text>{' '}
<RowFit gap="6px" color={theme.text}>
{token.tokens.map(item => {
if (item.chain === 'ethereum') return <Icon id="eth-mono" size={10} title="Ethereum" />
if (item.chain === 'bsc') return <Icon id="bnb-mono" size={10} title="Binance" />
if (item.chain === 'avalanche') return <Icon id="ava-mono" size={10} title="Avalanche" />
if (item.chain === 'polygon') return <Icon id="matic-mono" size={10} title="Polygon" />
if (item.chain === 'arbitrum') return <Icon id="arbitrum-mono" size={10} title="Arbitrum" />
if (item.chain === 'fantom') return <Icon id="fantom-mono" size={10} title="Fantom" />
if (item.chain === 'optimism') return <Icon id="optimism-mono" size={10} title="Optimism" />
return <></>
})}
<TokenListVariants tokens={token.tokens} iconSize={10} />
</RowFit>
</Column>
</RowFit>
Expand Down Expand Up @@ -757,16 +749,7 @@ const WidgetTokenRow = ({
<Column gap="4px" style={{ cursor: 'pointer', alignItems: 'flex-start' }}>
<Text style={{ textTransform: 'uppercase' }}>{token.symbol}</Text>{' '}
<RowFit gap="6px" color={theme.text}>
{token.tokens.map(item => {
if (item.chain === 'ethereum') return <Icon id="eth-mono" size={12} title="Ethereum" />
if (item.chain === 'bsc') return <Icon id="bnb-mono" size={12} title="Binance" />
if (item.chain === 'avalanche') return <Icon id="ava-mono" size={12} title="Avalanche" />
if (item.chain === 'polygon') return <Icon id="matic-mono" size={12} title="Polygon" />
if (item.chain === 'arbitrum') return <Icon id="arbitrum-mono" size={12} title="Arbitrum" />
if (item.chain === 'fantom') return <Icon id="fantom-mono" size={12} title="Fantom" />
if (item.chain === 'optimism') return <Icon id="optimism-mono" size={12} title="Optimism" />
return <></>
})}
<TokenListVariants tokens={token.tokens} />
</RowFit>
</Column>
</Row>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { defaultExplorePageToken } from './SingleToken'
const Wrapper = styled.div`
padding: 20px 0;
width: 100%;
position: relative;
`

type TechnicalAnalysisContextProps = {
Expand Down Expand Up @@ -87,7 +88,7 @@ export default function TechnicalAnalysis() {
const [showSRLevels, setShowSRLevels] = useState(true)
const [priceChartResolution, setPriceChartResolution] = useState('1h')
const now = Math.floor(Date.now() / 60000) * 60
const { data, isLoading } = useChartingDataQuery({
const { data, isLoading, isFetching } = useChartingDataQuery({

Check warning on line 91 in src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx

View workflow job for this annotation

GitHub Actions / cypress-test 

'isFetching' is assigned a value but never used

Check warning on line 91 in src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx

View workflow job for this annotation

GitHub Actions / build 

'isFetching' is assigned a value but never used
chain: chain || defaultExplorePageToken.chain,
address: address || defaultExplorePageToken.address,
from: now - ({ '1h': 1080000, '4h': 4320000, '1d': 12960000 }[priceChartResolution] || 1080000),
Expand Down
52 changes: 25 additions & 27 deletions src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
import { ButtonGray, ButtonLight, ButtonOutlined } from 'components/Button'
import Column from 'components/Column'
import Icon from 'components/Icons/Icon'
import AnimatedLoader from 'components/Loader/AnimatedLoader'
import Pagination from 'components/Pagination'
import Row, { RowBetween, RowFit } from 'components/Row'
import { APP_PATHS, ICON_ID } from 'constants/index'
Expand All @@ -34,6 +35,7 @@ import NetworkSelect from '../components/NetworkSelect'
import SimpleTooltip from '../components/SimpleTooltip'
import SmallKyberScoreMeter from '../components/SmallKyberScoreMeter'
import TokenChart from '../components/TokenChartSVG'
import TokenListVariants from '../components/TokenListVariants'
import { StarWithAnimation } from '../components/WatchlistStar'
import KyberScoreChart from '../components/chart/KyberScoreChart'
import TokenAnalysisListShareContent from '../components/shareContent/TokenAnalysisListShareContent'
Expand Down Expand Up @@ -549,17 +551,12 @@ const TokenRow = ({

const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
return (
<tr key={token.sourceTokenId} ref={rowRef} onClick={handleRowClick} style={{ position: 'relative' }}>
<tr key={token.SourceTokenID} ref={rowRef} onClick={handleRowClick} style={{ position: 'relative' }}>
<td>
<RowFit gap="6px">
<SimpleTooltip
text={
isWatched ? t`Remove from watchlist` : reachedMaxLimit ? t`Reached 30 tokens limit` : t`Add to watchlist`
}
hideOnMobile
>
<SimpleTooltip text={token.SourceTokenID} hideOnMobile>
<StarWithAnimation
key={token.sourceTokenId}
key={token.SourceTokenID}
watched={isWatched}
loading={loadingStar}
onClick={handleWatchlistClick}
Expand All @@ -586,23 +583,7 @@ const TokenRow = ({
<Column gap="8px" style={{ cursor: 'pointer', alignItems: 'flex-start' }}>
<Text style={{ textTransform: 'uppercase' }}>{token.symbol}</Text>{' '}
<RowFit gap="6px" color={theme.text}>
{token.tokens.map(item => {
if (item.chain === 'ethereum')
return <Icon key={'eth-mono' + index} id="eth-mono" size={12} title="Ethereum" />
if (item.chain === 'bsc')
return <Icon key={'bnb-mono' + index} id="bnb-mono" size={12} title="Binance" />
if (item.chain === 'avalanche')
return <Icon key={'ava-mono' + index} id="ava-mono" size={12} title="Avalanche" />
if (item.chain === 'polygon')
return <Icon key={'matic-mono' + index} id="matic-mono" size={12} title="Polygon" />
if (item.chain === 'arbitrum')
return <Icon key={'arbitrum-mono' + index} id="arbitrum-mono" size={12} title="Arbitrum" />
if (item.chain === 'fantom')
return <Icon key={'fantom-mono' + index} id="fantom-mono" size={12} title="Fantom" />
if (item.chain === 'optimism')
return <Icon key={'optimism-mono' + index} id="optimism-mono" size={12} title="Optimism" />
return <></>
})}
<TokenListVariants tokens={token.tokens} />
</RowFit>
</Column>
</Row>
Expand Down Expand Up @@ -884,7 +865,24 @@ export default function TokenAnalysisList() {
<NetworkSelect filter={Number(chain) as ChainId} setFilter={handleChainChange} />
</RowFit>
</RowBetween>
<Column gap="0px">
<Column gap="0px" style={{ position: 'relative' }}>
{isFetching && (
<div
style={{
position: 'absolute',
inset: '0 0 0 0',
background: theme.background,
opacity: 0.8,
zIndex: 100,
borderRadius: '20px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<AnimatedLoader />
</div>
)}
<TableWrapper ref={wrapperRef}>
<Table ref={tableRef}>
<colgroup>
Expand Down Expand Up @@ -1057,7 +1055,7 @@ export default function TokenAnalysisList() {
listData.map((token: ITokenList, index: number) => (
<TokenRow
token={token}
key={token.sourceTokenId}
key={token.SourceTokenID + '_' + (pageSize * (page - 1) + index + 1)}
currentTab={listType}
index={pageSize * (page - 1) + index + 1}
isScrolling={isScrolling}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/TrueSightV2/types/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface ITokenOverview {
export interface ITokenList {
symbol: string
name: string
sourceTokenId: string
SourceTokenID: string
tokens: Array<{ address: string; logo: string; chain: string }>
price: number
percent_change_24h: number
Expand Down

0 comments on commit c44599d

Please sign in to comment.