From c44599d3a03e1d6f841eb6c6e31af349da94bd3d Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Thu, 10 Aug 2023 20:45:12 +0700
Subject: [PATCH 1/2] improve token list

---
 .../components/TokenListVariants.tsx          | 35 +++++++++++++
 .../TrueSightV2/components/table/index.tsx    | 23 ++------
 .../TrueSightV2/pages/TechnicalAnalysis.tsx   |  3 +-
 .../TrueSightV2/pages/TokenAnalysisList.tsx   | 52 +++++++++----------
 src/pages/TrueSightV2/types/index.tsx         |  2 +-
 5 files changed, 66 insertions(+), 49 deletions(-)
 create mode 100644 src/pages/TrueSightV2/components/TokenListVariants.tsx

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 <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 <></>
+        }
+      })}
+    </>
+  )
+}
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}
                   </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>
@@ -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>
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 (
-    <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}
@@ -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>
@@ -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>
@@ -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}
diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx
index 613101d388..484ba9439a 100644
--- a/src/pages/TrueSightV2/types/index.tsx
+++ b/src/pages/TrueSightV2/types/index.tsx
@@ -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

From eb4d56be7c55c45739ee297e2723c315250999b2 Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Mon, 14 Aug 2023 08:49:15 +0700
Subject: [PATCH 2/2] revert tooltip text

---
 src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx | 2 +-
 src/pages/TrueSightV2/pages/TokenAnalysisList.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx b/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx
index 9ccc07e5e3..f973dd7276 100644
--- a/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx
+++ b/src/pages/TrueSightV2/pages/TechnicalAnalysis.tsx
@@ -88,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, isFetching } = useChartingDataQuery({
+  const { data, isLoading } = 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 861f44d407..d63429edc5 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -554,7 +554,12 @@ const TokenRow = ({
     <tr key={token.SourceTokenID} ref={rowRef} onClick={handleRowClick} style={{ position: 'relative' }}>
       <td>
         <RowFit gap="6px">
-          <SimpleTooltip text={token.SourceTokenID} hideOnMobile>
+          <SimpleTooltip
+            text={
+              isWatched ? t`Remove from watchlist` : reachedMaxLimit ? t`Reached 30 tokens limit` : t`Add to watchlist`
+            }
+            hideOnMobile
+          >
             <StarWithAnimation
               key={token.SourceTokenID}
               watched={isWatched}