try fix chain param issue (#2267)

* try fix chain param issue

* remove account checks for watchlist button

* fix warning

* fit min height for list

* fix bug price chart get wrong chain address

* fix fail

src/hooks/web3/useSyncNetworkParamWithStore.ts

@@ -21,7 +21,7 @@ export function useSyncNetworkParamWithStore() {
   const tried = triedEager.current
 
   useEffect(() => {
-    if (!paramChainId) {
+    if (!networkParam || !paramChainId) {
       triedSync.current = true
       return
     }
@@ -36,16 +36,14 @@ export function useSyncNetworkParamWithStore() {
      */
     ;(async () => {
       if (triedSync.current) return
-      triedSync.current = true
       setRequestingNetwork(networkParam)
       await changeNetwork(paramChainId, undefined, () => {
-        if (networkParam) {
-          navigate(
-            { ...location, pathname: location.pathname.replace(networkParam, networkInfo.route) },
-            { replace: true },
-          )
-        }
+        navigate(
+          { ...location, pathname: location.pathname.replace(networkParam, networkInfo.route) },
+          { replace: true },
+        )
       })
+      triedSync.current = true
     })()
   }, [changeNetwork, location, navigate, networkInfo.route, networkParam, paramChainId, tried])
 

src/pages/TrueSightV2/components/NetworkSelect.tsx

@@ -60,7 +60,6 @@ const DropdownItem = styled(Row)`
 `
 
 const NetworkSelect = ({ filter, setFilter }: { filter?: string; setFilter: (c?: string) => void }) => {
-  console.log('🚀 ~ file: NetworkSelect.tsx:63 ~ NetworkSelect ~ filter:', filter)
   const theme = useTheme()
 
   const [isShowOptions, setIsShowOptions] = useState(false)

src/pages/TrueSightV2/components/chart/datafeed.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { useParams } from 'react-router-dom'
 
 import {
   ErrorCallback,
@@ -12,6 +11,7 @@ import {
 } from 'components/TradingViewChart/charting_library'
 import { getTradingViewTimeZone } from 'components/TradingViewChart/utils'
 import { DEFAULT_EXPLORE_PAGE_TOKEN } from 'pages/TrueSightV2/constants'
+import useKyberAIAssetOverview from 'pages/TrueSightV2/hooks/useKyberAIAssetOverview'
 import { useLazyChartingDataQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { IAssetOverview, OHLCData } from 'pages/TrueSightV2/types'
 
@@ -21,7 +21,7 @@ const configurationData = {
 
 export const useDatafeed = (isBTC: boolean, token?: IAssetOverview) => {
   const intervalRef = useRef<any>()
-  const { chain, address } = useParams()
+  const { chain, address } = useKyberAIAssetOverview()
   const [getChartingData, { isLoading }] = useLazyChartingDataQuery()
   useEffect(() => {
     return () => {

src/pages/TrueSightV2/components/table/index.tsx

@@ -19,7 +19,6 @@ import AnimatedLoader from 'components/Loader/AnimatedLoader'
 import Pagination from 'components/Pagination'
 import Row, { RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
@@ -589,7 +588,6 @@ const WidgetTokenRow = ({
 }) => {
   const theme = useTheme()
   const navigate = useNavigate()
-  const { account } = useActiveWeb3React()
   const mixpanelHandler = useMixpanelKyberAI()
   const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)
 
@@ -627,7 +625,6 @@ const WidgetTokenRow = ({
 
   const handleWatchlistClick = (e: any) => {
     e.stopPropagation()
-    if (!account) return
     setLoadingStar(true)
     if (isWatched) {
       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {

src/pages/TrueSightV2/hooks/useKyberAIData.tsx

@@ -57,6 +57,7 @@ const kyberAIApi = createApi({
       },
       providesTags: (result, error, arg) => (arg.watchlist === true ? ['myWatchList', 'tokenList'] : ['tokenList']),
     }),
+    //2.
     addToWatchlist: builder.mutation({
       query: (params: { tokenAddress: string; chain: string }) => ({
         url: `/watchlist`,
@@ -65,6 +66,7 @@ const kyberAIApi = createApi({
       }),
       invalidatesTags: (res, err, params) => [{ type: 'tokenOverview', id: params.tokenAddress }, 'myWatchList'],
     }),
+    //3.
     removeFromWatchlist: builder.mutation({
       query: (params: { tokenAddress: string; chain: string }) => ({
         url: `/watchlist`,

src/pages/TrueSightV2/pages/SingleToken.tsx

@@ -14,7 +14,6 @@ import Column from 'components/Column'
 import Icon from 'components/Icons/Icon'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
@@ -249,7 +248,6 @@ const TokenDescription = ({ description }: { description: string }) => {
 }
 
 const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoading?: boolean }) => {
-  const { account } = useActiveWeb3React()
   const theme = useTheme()
   const mixpanelHandler = useMixpanelKyberAI()
   const navigate = useNavigate()
@@ -262,7 +260,7 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
   const [isWatched, setIsWatched] = useState(false)
 
   const handleStarClick = () => {
-    if (!token || !chain || !address || !account) return
+    if (!token || !chain || !address) return
     if (isWatched) {
       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
         token_name: token.symbol?.toUpperCase(),

src/pages/TrueSightV2/pages/TokenAnalysisList.tsx

@@ -20,7 +20,6 @@ import Row, { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltipDesktopOnly } from 'components/Tooltip'
 import { APP_PATHS, ICON_ID } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
-import { useActiveWeb3React } from 'hooks'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
@@ -51,12 +50,15 @@ const TableWrapper = styled.div`
   border-bottom: none;
   transition: all 0.15s ease;
   overflow: hidden;
+  min-height: 500px;
+  background-color: ${({ theme }) => theme.background};
   @media only screen and (max-width: 1080px) {
     margin-left: -16px;
     margin-right: -16px;
     border-radius: 0px;
     border: none;
     overflow-x: scroll;
+    min-height: 250px;
   }
 `
 const PaginationWrapper = styled.div`
@@ -67,6 +69,8 @@ const PaginationWrapper = styled.div`
   overflow: hidden;
   min-height: 50px;
   background-color: ${({ theme }) => theme.background};
+  border-top: 1px solid ${({ theme }) => theme.border};
+
   @media only screen and (max-width: 1080px) {
     margin-left: -16px;
     margin-right: -16px;
@@ -475,7 +479,6 @@ const TokenRow = React.memo(function TokenRow({
   const navigate = useNavigate()
   const location = useLocation()
   const mixpanelHandler = useMixpanelKyberAI()
-  const { account } = useActiveWeb3React()
   const theme = useTheme()
   const reachedMaxLimit = useIsReachMaxLimitWatchedToken()
   const [showSwapMenu, setShowSwapMenu] = useState(false)
@@ -501,7 +504,6 @@ const TokenRow = React.memo(function TokenRow({
 
   const handleWatchlistClick = (e: any) => {
     e.stopPropagation()
-    if (!account) return
     setLoadingStar(true)
     if (isWatched) {
       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
@@ -991,7 +993,7 @@ export default function TokenAnalysisList() {
                       </td>
                     </tr>
                   ) : (
-                    <tr style={{ height: '201px' }}>
+                    <tr style={{ height: '250px' }}>
                       <Row
                         style={{
                           position: 'absolute',