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
|