diff --git a/src/pages/TrueSightV2/components/TokenListVariants.tsx b/src/pages/TrueSightV2/components/TokenListVariants.tsx new file mode 100644 index 0000000000..0bc5a4c6e0 --- /dev/null +++ b/src/pages/TrueSightV2/components/TokenListVariants.tsx @@ -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 + case 'bsc': + return + case 'avalanche': + return + case 'polygon': + return + case 'arbitrum': + return + case 'fantom': + return + case 'optimism': + return + default: + return <> + } + })} + + ) +} diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx index 2b08cc48d0..72d73dfd80 100644 --- a/src/pages/TrueSightV2/components/table/index.tsx +++ b/src/pages/TrueSightV2/components/table/index.tsx @@ -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` @@ -698,16 +699,7 @@ const WidgetTokenRow = ({ {token.symbol} {' '} - {token.tokens.map(item => { - if (item.chain === 'ethereum') return - if (item.chain === 'bsc') return - if (item.chain === 'avalanche') return - if (item.chain === 'polygon') return - if (item.chain === 'arbitrum') return - if (item.chain === 'fantom') return - if (item.chain === 'optimism') return - return <> - })} + @@ -757,16 +749,7 @@ const WidgetTokenRow = ({ {token.symbol}{' '} - {token.tokens.map(item => { - if (item.chain === 'ethereum') return - if (item.chain === 'bsc') return - if (item.chain === 'avalanche') return - if (item.chain === 'polygon') return - if (item.chain === 'arbitrum') return - if (item.chain === 'fantom') return - if (item.chain === 'optimism') return - return <> - })} + diff --git a/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx b/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx index 02439370ed..9ccc07e5e3 100644 --- a/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx +++ b/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx @@ -31,6 +31,7 @@ import { defaultExplorePageToken } from './SingleToken' const Wrapper = styled.div` padding: 20px 0; width: 100%; + position: relative; ` type TechnicalAnalysisContextProps = { @@ -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({ chain: chain || defaultExplorePageToken.chain, address: address || defaultExplorePageToken.address, from: now - ({ '1h': 1080000, '4h': 4320000, '1d': 12960000 }[priceChartResolution] || 1080000), diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx index e73fb5bbd4..861f44d407 100644 --- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx +++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx @@ -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' @@ -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' @@ -549,17 +551,12 @@ const TokenRow = ({ const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1] return ( - + - + {token.symbol}{' '} - {token.tokens.map(item => { - if (item.chain === 'ethereum') - return - if (item.chain === 'bsc') - return - if (item.chain === 'avalanche') - return - if (item.chain === 'polygon') - return - if (item.chain === 'arbitrum') - return - if (item.chain === 'fantom') - return - if (item.chain === 'optimism') - return - return <> - })} + @@ -884,7 +865,24 @@ export default function TokenAnalysisList() { - + + {isFetching && ( +
+ +
+ )} @@ -1057,7 +1055,7 @@ export default function TokenAnalysisList() { listData.map((token: ITokenList, index: number) => ( price: number percent_change_24h: number