From 1814b7cb3327b61b4f281e8d2efa7af478126916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?=
 <33005392+nguyenhoaidanh@users.noreply.github.com>
Date: Fri, 11 Aug 2023 23:23:54 +0700
Subject: [PATCH 1/7] update: color for light theme token security info (#2161)

---
 src/components/swapv2/TokenInfo/SecurityInfo/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
index 67447e3e75..bae066644b 100644
--- a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
+++ b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
@@ -11,6 +11,7 @@ import { ReactComponent as TreadingSecurity } from 'assets/svg/security_trading.
 import { CollapseItem } from 'components/Collapse'
 import { getSecurityTokenInfo } from 'components/swapv2/TokenInfo/utils'
 import useTheme from 'hooks/useTheme'
+import { useIsDarkMode } from 'state/user/hooks'
 
 import { Container } from '../index'
 import Content from './Content'
@@ -18,8 +19,13 @@ import Header from './Header'
 
 export default function SecurityInfo({ token }: { token: Token | undefined }) {
   const theme = useTheme()
-  const style: CSSProperties = { background: rgba(theme.black, 0.2), borderRadius: '16px', padding: '0' }
-  const headerStyle: CSSProperties = { background: rgba(theme.black, 0.48) }
+  const isDarkMode = useIsDarkMode()
+  const style: CSSProperties = {
+    background: isDarkMode ? rgba(theme.black, 0.2) : rgba(theme.subText, 0.04),
+    borderRadius: '16px',
+    padding: '0',
+  }
+  const headerStyle: CSSProperties = { background: isDarkMode ? rgba(theme.black, 0.48) : rgba(theme.subText, 0.08) }
   const arrowStyle: CSSProperties = { marginRight: '6px', color: theme.subText }
   const { data, isLoading } = useGetSecurityTokenInfoQuery(
     { chainId: token?.chainId as ChainId, address: token?.address ?? '' },

From 896c678d91baf0141d4e7c3be95256143ab9cf02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?=
 <33005392+nguyenhoaidanh@users.noreply.github.com>
Date: Mon, 14 Aug 2023 10:39:07 +0700
Subject: [PATCH 2/7] fix: some minor ui issues (#2165)

---
 src/components/Header/index.tsx                |  2 +-
 src/components/WalletPopup/WalletView.tsx      | 17 ++++++++++++-----
 .../swapv2/TokenInfo/SecurityInfo/index.tsx    |  4 ++--
 src/hooks/useTokenInfo.ts                      | 18 +++++++++++++-----
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index bad526a90b..6a7a81f210 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -141,7 +141,7 @@ const IconImage = styled.img<{ isChristmas?: boolean }>`
 `
 
 const BlogWrapper = styled.span`
-  @media (max-width: 1440px) {
+  @media (max-width: 1600px) {
     display: none;
   }
 `
diff --git a/src/components/WalletPopup/WalletView.tsx b/src/components/WalletPopup/WalletView.tsx
index 6456c9c52e..9a7b32821c 100644
--- a/src/components/WalletPopup/WalletView.tsx
+++ b/src/components/WalletPopup/WalletView.tsx
@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronLeft, FileText, LogOut, StopCircle, X } from 'react-feather'
@@ -10,6 +10,7 @@ import { ReactComponent as DragHandleIcon } from 'assets/svg/wallet_drag_handle.
 import CopyHelper from 'components/Copy'
 import SendIcon from 'components/Icons/SendIcon'
 import Row from 'components/Row'
+import { MouseoverTooltip } from 'components/Tooltip'
 import AccountInfo from 'components/WalletPopup/AccountInfo'
 import MyAssets from 'components/WalletPopup/MyAssets'
 import PinButton from 'components/WalletPopup/PinButton'
@@ -323,7 +324,7 @@ export default function WalletView({
                 </Flex>
               </>
             ) : (
-              <Flex alignItems={'center'} style={{ gap: 5 }} color={theme.subText}>
+              <Flex alignItems={'center'} style={{ gap: 8 }} color={theme.subText}>
                 {walletKey && (
                   <IconWrapper>
                     <img
@@ -336,9 +337,15 @@ export default function WalletView({
                 <Text as="span" fontWeight="500">
                   {shortenAddress(chainId, account, 5, false)}
                 </Text>
-                <CopyHelper toCopy={account} />
-                <ExternalLinkIcon href={getEtherscanLink(chainId, account, 'address')} color={theme.subText} />
-                <LogOutIcon size={16} onClick={disconnectWallet} />
+                <MouseoverTooltip text={t`Copy wallet address`} width="fit-content" placement="top">
+                  <CopyHelper toCopy={account} />
+                </MouseoverTooltip>
+                <MouseoverTooltip text={t`Open scan explorer`} width="fit-content" placement="top">
+                  <ExternalLinkIcon href={getEtherscanLink(chainId, account, 'address')} color={theme.subText} />
+                </MouseoverTooltip>
+                <MouseoverTooltip text={t`Disconnect wallet`} width="fit-content" placement="top">
+                  <LogOutIcon size={16} onClick={disconnectWallet} />
+                </MouseoverTooltip>
               </Flex>
             )}
             <Flex style={{ gap: 20 }} alignItems="center">
diff --git a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
index bae066644b..c0cbe01509 100644
--- a/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
+++ b/src/components/swapv2/TokenInfo/SecurityInfo/index.tsx
@@ -27,13 +27,13 @@ export default function SecurityInfo({ token }: { token: Token | undefined }) {
   }
   const headerStyle: CSSProperties = { background: isDarkMode ? rgba(theme.black, 0.48) : rgba(theme.subText, 0.08) }
   const arrowStyle: CSSProperties = { marginRight: '6px', color: theme.subText }
-  const { data, isLoading } = useGetSecurityTokenInfoQuery(
+  const { data, isLoading, error } = useGetSecurityTokenInfoQuery(
     { chainId: token?.chainId as ChainId, address: token?.address ?? '' },
     { skip: !token?.address },
   )
 
   const { contractData, tradingData, totalWarningContract, totalWarningTrading, totalRiskContract, totalRiskTrading } =
-    useMemo(() => getSecurityTokenInfo(data), [data])
+    useMemo(() => getSecurityTokenInfo(error ? undefined : data), [data, error])
 
   return (
     <Container>
diff --git a/src/hooks/useTokenInfo.ts b/src/hooks/useTokenInfo.ts
index bbe0090ecc..2f16a46d77 100644
--- a/src/hooks/useTokenInfo.ts
+++ b/src/hooks/useTokenInfo.ts
@@ -18,20 +18,28 @@ export interface TokenInfo {
   name: string
 }
 
-export default function useTokenInfo(token: Token | undefined): { data: TokenInfo; loading: boolean; error: any } {
+export default function useTokenInfo(token: Token | undefined): {
+  data: TokenInfo
+  loading: boolean
+  error: any
+} {
   const { isSolana, chainId: currentChain } = useActiveWeb3React()
   const chainId = token?.chainId || currentChain
   const coingeckoAPI = useCoingeckoAPI()
 
   const tokenAddress = isSolana ? token?.address || '' : (token?.address || '').toLowerCase()
-  const { data, error } = useGetMarketTokenInfoQuery(
+  const {
+    data: rawData,
+    error,
+    isFetching,
+  } = useGetMarketTokenInfoQuery(
     { chainId, address: tokenAddress, coingeckoAPI },
     { skip: !tokenAddress, pollingInterval: 60_000 },
   )
 
-  const loading = !data
+  const data = error ? {} : rawData
 
-  const result = {
+  const result: TokenInfo = {
     price: data?.market_data?.current_price?.usd || 0,
     marketCap: data?.market_data?.market_cap?.usd || 0,
     marketCapRank: data?.market_data?.market_cap_rank || 0,
@@ -44,5 +52,5 @@ export default function useTokenInfo(token: Token | undefined): { data: TokenInf
     name: data?.name || '',
   }
 
-  return { data: result, loading, error }
+  return { data: result, loading: isFetching, error }
 }

From b82873d1d054d2aa44a40ae661967bc9acd772b0 Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Mon, 14 Aug 2023 17:18:35 +0700
Subject: [PATCH 3/7] add new static farm contract (#2166)

---
 src/components/TradeRouting/index.tsx         |  4 +-
 src/constants/networks/matic.ts               |  6 +-
 .../ElasticFarmv2/components/FarmCard.tsx     |  6 +-
 .../ElasticFarmv2/components/ListView.tsx     | 81 ++++++++++---------
 4 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/src/components/TradeRouting/index.tsx b/src/components/TradeRouting/index.tsx
index 904e18abf1..ff0b8ebf6b 100644
--- a/src/components/TradeRouting/index.tsx
+++ b/src/components/TradeRouting/index.tsx
@@ -197,11 +197,11 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
 }
 
 const TokenRoute = ({ token }: { token: Token }) => {
-  const currency = useCurrencyV2(token.address)
+  const currency = useCurrencyV2(token.wrapped.address)
   return (
     <StyledToken
       style={{ marginRight: 0 }}
-      href={getEtherscanLink(token.chainId, token?.address, 'token')}
+      href={getEtherscanLink(token.chainId, token?.wrapped.address, 'token')}
       target="_blank"
     >
       <CurrencyLogo currency={currency} size="16px" />
diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts
index 331ea3dfe7..b0b30c262b 100644
--- a/src/constants/networks/matic.ts
+++ b/src/constants/networks/matic.ts
@@ -68,7 +68,11 @@ const maticInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0x3C2E9227A6d3779e5b469E425CAa7067b40Ff124',
diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
index 8e9e2006e0..3ad2d138bc 100644
--- a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
+++ b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
@@ -34,6 +34,7 @@ import { useFarmV2Action, useUserFarmV2Info } from 'state/farms/elasticv2/hooks'
 import { ElasticFarmV2 } from 'state/farms/elasticv2/types'
 import { getFormattedTimeFromSecond } from 'utils/formatTime'
 import { formatDollarAmount } from 'utils/numbers'
+import { getTokenSymbolWithHardcode } from 'utils/tokenInfo'
 
 import { convertTickToPrice } from '../utils'
 
@@ -107,7 +108,7 @@ function FarmCard({
   isApproved: boolean
 }) {
   const theme = useTheme()
-  const { account, networkInfo } = useActiveWeb3React()
+  const { account, networkInfo, chainId } = useActiveWeb3React()
   const [activeRangeIndex, setActiveRangeIndex] = useState(farm.ranges[0].index)
 
   const [, setSharePoolAddress] = useShareFarmAddress()
@@ -213,7 +214,8 @@ function FarmCard({
                 }}
               >
                 <Text fontSize="16px" lineHeight="20px" color={theme.primary}>
-                  {`${farm.token0.symbol} - ${farm.token1.symbol}`}
+                  {getTokenSymbolWithHardcode(chainId, farm.token0.wrapped.address, farm.token0.symbol)} -{' '}
+                  {getTokenSymbolWithHardcode(chainId, farm.token1.wrapped.address, farm.token1.symbol)}
                 </Text>
               </Link>
               <IconButton>
diff --git a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
index 58913087ee..e002f9263b 100644
--- a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
+++ b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
@@ -19,7 +19,6 @@ import HorizontalScroll from 'components/HorizontalScroll'
 import HoverInlineText from 'components/HoverInlineText'
 import { TwoWayArrow } from 'components/Icons'
 import Harvest from 'components/Icons/Harvest'
-import { RowBetween } from 'components/Row'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { ButtonColorScheme, MinimalActionButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
@@ -154,11 +153,12 @@ export const ListView = ({
   const maxFarmAPR = Math.max(...farm.ranges.map(r => r.apr || 0))
 
   const mixpanelPayload = { farm_pool_address: farm.poolAddress, farm_id: farm.id, farm_fid: farm.fId }
+  const above1500 = useMedia('(min-width: 1500px)')
 
   return (
     <Wrapper isDeposited={!!stakedPos.length}>
-      <RowBetween gap="1rem">
-        <Flex alignItems="center" justifyContent="space-between">
+      <Flex justifyContent="space-between" sx={{ gap: '1rem' }}>
+        <Flex alignItems="center" justifyContent="space-between" width="max-content">
           <DoubleCurrencyLogo currency0={farm.token0} currency1={farm.token1} />
           <Link
             to={addliquidityElasticPool}
@@ -193,41 +193,48 @@ export const ListView = ({
           </Flex>
         </Flex>
 
-        <HorizontalScroll
-          style={{ gap: '8px', justifyContent: 'flex-end' }}
-          noShadow
-          items={['-1'].concat(farm.ranges.map(item => item.index.toString()))}
-          renderItem={(item, index) => {
-            if (item === '-1')
-              return (
-                <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
-                  <Trans>Available Farming Range</Trans>
-                </Text>
-              )
-            const range = farm.ranges.find(r => r.index === +item)
-            if (!range) return null
-            return (
-              <Flex
-                alignItems="center"
-                sx={{ gap: '2px' }}
-                color={range.isRemoved ? theme.warning : theme.subText}
-                fontSize={12}
-                fontWeight="500"
-              >
-                {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
-                <TwoWayArrow />
-                {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+        <Flex sx={{ gap: '8px' }} alignItems="center">
+          <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
+            <Trans>Available Farming Range</Trans>
+          </Text>
 
-                {index !== farm.ranges.length && (
-                  <Text paddingLeft="6px" color={theme.subText}>
-                    |
-                  </Text>
-                )}
-              </Flex>
-            )
-          }}
-        />
-      </RowBetween>
+          <div style={{ maxWidth: above1500 ? '900px' : 'calc(100vw - 500px)' }}>
+            <HorizontalScroll
+              style={{ gap: '8px' }}
+              noShadow
+              items={farm.ranges.map(item => item.index.toString())}
+              renderItem={(item, index) => {
+                const range = farm.ranges.find(r => r.index === +item)
+                if (!range) return null
+                return (
+                  <Flex
+                    alignItems="center"
+                    minWidth="fit-content"
+                    sx={{ gap: '2px' }}
+                    color={range.isRemoved ? theme.warning : theme.subText}
+                    fontSize={12}
+                    fontWeight="500"
+                  >
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
+                    </Text>
+                    <TwoWayArrow />
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+                    </Text>
+
+                    {index !== farm.ranges.length - 1 && (
+                      <Text paddingLeft="6px" color={theme.subText}>
+                        |
+                      </Text>
+                    )}
+                  </Flex>
+                )
+              }}
+            />
+          </div>
+        </Flex>
+      </Flex>
       <ElasticFarmV2TableRow>
         <Text textAlign="left">{formatDollarAmount(farm.tvl)}</Text>
         <Text

From 629739b7f8323d683caf87a39de5a556de0be86b Mon Sep 17 00:00:00 2001
From: XiaoYhun <xiaoyhun@gmail.com>
Date: Mon, 14 Aug 2023 17:23:24 +0700
Subject: [PATCH 4/7] improve token list (#2157)

* improve token list

* revert tooltip text
---
 .../components/TokenListVariants.tsx          | 35 +++++++++++++++
 .../TrueSightV2/components/table/index.tsx    | 23 ++--------
 .../TrueSightV2/pages/TechnicalAnalysis.tsx   |  1 +
 .../TrueSightV2/pages/TokenAnalysisList.tsx   | 45 ++++++++++---------
 src/pages/TrueSightV2/types/index.tsx         |  2 +-
 5 files changed, 64 insertions(+), 42 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..f973dd7276 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 = {
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index e73fb5bbd4..d63429edc5 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,7 +551,7 @@ 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
@@ -559,7 +561,7 @@ const TokenRow = ({
             hideOnMobile
           >
             <StarWithAnimation
-              key={token.sourceTokenId}
+              key={token.SourceTokenID}
               watched={isWatched}
               loading={loadingStar}
               onClick={handleWatchlistClick}
@@ -586,23 +588,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 +870,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 +1060,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 4919c362b7a7b948818115d21ac01a0763fa402d Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Mon, 14 Aug 2023 17:37:17 +0700
Subject: [PATCH 5/7] fix: reward is wrapped token (#2167)

---
 src/state/farms/elasticv2/updater.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/state/farms/elasticv2/updater.tsx b/src/state/farms/elasticv2/updater.tsx
index 87c6a14ef7..8eab30a27d 100644
--- a/src/state/farms/elasticv2/updater.tsx
+++ b/src/state/farms/elasticv2/updater.tsx
@@ -170,9 +170,9 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
         const prices = await fetchPrices(tokens)
 
         const formattedData: ElasticFarmV2[] = data.farmV2S.map((farm: SubgraphFarmV2) => {
-          const getToken = (t: SubgraphToken) => {
+          const getToken = (t: SubgraphToken, keepWrapped = false) => {
             const address = isAddressString(chainId, t.id)
-            return address === WETH[chainId].address || address === ZERO_ADDRESS
+            return (keepWrapped ? false : address === WETH[chainId].address) || address === ZERO_ADDRESS
               ? NativeCurrencies[chainId]
               : new Token(
                   chainId,
@@ -211,7 +211,9 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
             Number(tvlToken0.toExact() || '0') * (prices[farm.pool.token0.id] || 0) +
             Number(tvlToken1.toExact() || '0') * (prices[farm.pool.token1.id] || 0)
 
-          const totalRewards = farm.rewards.map(item => CurrencyAmount.fromRawAmount(getToken(item.token), item.amount))
+          const totalRewards = farm.rewards.map(item =>
+            CurrencyAmount.fromRawAmount(getToken(item.token, true), item.amount),
+          )
 
           return {
             id: farm.id,

From e2dbb831365dcc5899e98cc7b1e06f3f0fe84021 Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Mon, 14 Aug 2023 18:33:15 +0700
Subject: [PATCH 6/7] update new contract (#2168)

---
 src/constants/networks/arbitrum.ts | 6 +++++-
 src/constants/networks/avax.ts     | 6 +++++-
 src/constants/networks/optimism.ts | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/constants/networks/arbitrum.ts b/src/constants/networks/arbitrum.ts
index ea98d4b3cd..cca6c6a575 100644
--- a/src/constants/networks/arbitrum.ts
+++ b/src/constants/networks/arbitrum.ts
@@ -64,7 +64,11 @@ const arbitrumInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xE44ec65521B85612fa7BC45d842645Fb4B690E4b', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xE44ec65521B85612fa7BC45d842645Fb4B690E4b',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     production: '0x227B0c196eA8db17A665EA6824D972A64202E936',
diff --git a/src/constants/networks/avax.ts b/src/constants/networks/avax.ts
index 43803b97f6..995c07a098 100644
--- a/src/constants/networks/avax.ts
+++ b/src/constants/networks/avax.ts
@@ -73,7 +73,11 @@ const avaxInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3d6afe2fb73ffed2e3dd00c501a174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3d6afe2fb73ffed2e3dd00c501a174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0x1877Ec0770901cc6886FDA7E7525a78c2Ed4e975',
diff --git a/src/constants/networks/optimism.ts b/src/constants/networks/optimism.ts
index 8f3a1e941e..958bd399cc 100644
--- a/src/constants/networks/optimism.ts
+++ b/src/constants/networks/optimism.ts
@@ -59,7 +59,11 @@ const optimismInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0xAF800D3EB207BAFBadE540554DF8bDCe561166f8',

From 814c39e6146e331b30c16c8c28c49c051f6bbeb4 Mon Sep 17 00:00:00 2001
From: Nguyen Van Viet <vietnv1304@gmail.com>
Date: Mon, 14 Aug 2023 22:45:39 +0700
Subject: [PATCH 7/7] fix(farm-v2): user info does not show (#2169)

---
 src/state/farms/elasticv2/updater.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/state/farms/elasticv2/updater.tsx b/src/state/farms/elasticv2/updater.tsx
index 8eab30a27d..b6aaa41b27 100644
--- a/src/state/farms/elasticv2/updater.tsx
+++ b/src/state/farms/elasticv2/updater.tsx
@@ -352,9 +352,11 @@ export default function ElasticFarmV2Updater({ interval = true }: { interval?: b
               const infos = res.reduce((acc: UserFarmV2Info[], item) => {
                 const farm = formattedData.find(
                   farm =>
+                    farm.farmAddress === farmAddresses[index] &&
                     farm.poolAddress.toLowerCase() === nftInfos[item.nftId.toString()].poolAddress.toLowerCase() &&
                     +farm.fId === +item.fId.toString(),
                 )
+
                 if (!farm) return acc
 
                 const position = new Position({