From 58ebca89ad860be4f606bedb091223d1901cdd28 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Wed, 27 Sep 2023 02:30:38 +0700 Subject: [PATCH] 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 | 14 ++++++-------- src/pages/TrueSightV2/components/NetworkSelect.tsx | 1 - .../TrueSightV2/components/chart/datafeed.tsx | 4 ++-- src/pages/TrueSightV2/components/table/index.tsx | 3 --- src/pages/TrueSightV2/hooks/useKyberAIData.tsx | 2 ++ src/pages/TrueSightV2/pages/SingleToken.tsx | 4 +--- src/pages/TrueSightV2/pages/TokenAnalysisList.tsx | 10 ++++++---- 7 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/hooks/web3/useSyncNetworkParamWithStore.ts b/src/hooks/web3/useSyncNetworkParamWithStore.ts index 1b24eb12ec..b6ab8d067b 100644 --- a/src/hooks/web3/useSyncNetworkParamWithStore.ts +++ b/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]) diff --git a/src/pages/TrueSightV2/components/NetworkSelect.tsx b/src/pages/TrueSightV2/components/NetworkSelect.tsx index d85924efcd..25864a03be 100644 --- a/src/pages/TrueSightV2/components/NetworkSelect.tsx +++ b/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) diff --git a/src/pages/TrueSightV2/components/chart/datafeed.tsx b/src/pages/TrueSightV2/components/chart/datafeed.tsx index 4772508182..f2afcaf88f 100644 --- a/src/pages/TrueSightV2/components/chart/datafeed.tsx +++ b/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() - const { chain, address } = useParams() + const { chain, address } = useKyberAIAssetOverview() const [getChartingData, { isLoading }] = useLazyChartingDataQuery() useEffect(() => { return () => { diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx index 61b88974ae..3d0974102a 100644 --- a/src/pages/TrueSightV2/components/table/index.tsx +++ b/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, { diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx index 7f28e3e64a..6b16322d33 100644 --- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx +++ b/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`, diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx index 0d55268d6f..b6a9ec5a55 100644 --- a/src/pages/TrueSightV2/pages/SingleToken.tsx +++ b/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(), diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx index 91b60f8b62..f16b3ccb95 100644 --- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx +++ b/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() { ) : ( - +