Merge remote-tracking branch 'origin/main' into lo-double-signature

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/Farm/ElasticFarmCombination.tsx

@@ -102,11 +102,7 @@ export const ElasticFarmCombination: FC = () => {
 
       {type === FARM_TAB.ENDED && tab !== VERSION.CLASSIC && (
         <Text fontStyle="italic" fontSize={12} marginBottom="1rem" color={theme.subText}>
-          <Trans>
-            Your rewards may be automatically harvested a few days after the farm ends. Please check the{' '}
-            <StyledInternalLink to={`${APP_PATHS.FARMS}/${networkInfo.route}?type=vesting`}>Vesting</StyledInternalLink>{' '}
-            tab to see your rewards
-          </Trans>
+          <Trans>Your rewards may be automatically harvested a few days after the farm ends.</Trans>
         </Text>
       )}
 
@@ -117,11 +113,11 @@ export const ElasticFarmCombination: FC = () => {
             <Text as="span" color={theme.warning}>
               multiple phases
             </Text>
-            . Once the current phase ends, you can harvest your rewards from the farm in the{' '}
+            If you haven’t harvested your rewards for ended farms, you still can access them via the{' '}
             <StyledInternalLink to={`${APP_PATHS.FARMS}/${networkInfo.route}?type=${FARM_TAB.ENDED}`}>
               Ended
             </StyledInternalLink>{' '}
-            tab. To continue earning rewards in the new phase, you must restake your NFT position into the active farm
+            tab. To continue earning rewards in the new phase, you must retake your NFT position into the active farm
           </Trans>
         </Text>
       )}

src/pages/Farm/ElasticFarmv2/components/NewRangesNotiModal.tsx

@@ -81,8 +81,8 @@ export default function NewRangesNotiModal({ updatedFarms }: { updatedFarms: Ela
           {hasIdleRange && hasNewRange ? (
             <Trans>
               One or more of the Elastic static farm ranges you were participating in have become idle and have new
-              farming ranges. You are still earning farming rewards from this idle farm range. However, to continue
-              earning more rewards, please stake your liquidity into the other ranges instead
+              farming ranges. You are still earning farming rewards from this idle farm range. However, to keep earning
+              fees, please stake your liquidity that is in-range position
             </Trans>
           ) : hasNewRange ? (
             <Trans>
@@ -92,8 +92,8 @@ export default function NewRangesNotiModal({ updatedFarms }: { updatedFarms: Ela
           ) : (
             <Trans>
               One or more of the Elastic static farm ranges you were participating in have become idle. You are still
-              earning farming rewards from this idle farm range. However, to continue earning more rewards, please stake
-              your liquidity into the other active ranges instead
+              earning farming rewards from this idle farm range. However, to keep earning fees, please stake your
+              liquidity that is in-range position{' '}
             </Trans>
           )}
         </Text>

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,
@@ -11,8 +10,9 @@ import {
   SubscribeBarsCallback,
 } 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 { defaultExplorePageToken } from 'pages/TrueSightV2/pages/SingleToken'
 import { IAssetOverview, OHLCData } from 'pages/TrueSightV2/types'
 
 const configurationData = {
@@ -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 () => {
@@ -84,8 +84,8 @@ export const useDatafeed = (isBTC: boolean, token?: IAssetOverview) => {
         const candleSize = { 60: '1h', 240: '4h', '1D': '1d', '4D': '1d' }[resolution as string] || '1h'
 
         const { data } = await getChartingData({
-          chain: chain || defaultExplorePageToken.chain,
-          address: address || defaultExplorePageToken.address,
+          chain: chain || DEFAULT_EXPLORE_PAGE_TOKEN.chain,
+          address: address || DEFAULT_EXPLORE_PAGE_TOKEN.address,
           from: periodParams.from,
           to: periodParams.to,
           candleSize: candleSize,
@@ -122,8 +122,8 @@ export const useDatafeed = (isBTC: boolean, token?: IAssetOverview) => {
           const candleSize = { 60: '1h', 240: '4h', '1D': '1d' }[resolution as string] || '1h'
 
           const { data } = await getChartingData({
-            chain: chain || defaultExplorePageToken.chain,
-            address: address || defaultExplorePageToken.address,
+            chain: chain || DEFAULT_EXPLORE_PAGE_TOKEN.chain,
+            address: address || DEFAULT_EXPLORE_PAGE_TOKEN.address,
             from: now - 345600,
             to: now,
             candleSize: candleSize,

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

@@ -38,7 +38,7 @@ import {
 import { getTradingViewTimeZone } from 'components/TradingViewChart/utils'
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
-import { KYBERAI_CHART_ID, NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
+import { DEFAULT_EXPLORE_PAGE_TOKEN, KYBERAI_CHART_ID, NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
 import { CHART_STATES_ACTION_TYPE, useChartStatesContext } from 'pages/TrueSightV2/hooks/useChartStatesReducer'
 import useKyberAIAssetOverview from 'pages/TrueSightV2/hooks/useKyberAIAssetOverview'
 import {
@@ -50,7 +50,6 @@ import {
   useTradingVolumeQuery,
   useTransferInformationQuery,
 } from 'pages/TrueSightV2/hooks/useKyberAIData'
-import { defaultExplorePageToken } from 'pages/TrueSightV2/pages/SingleToken'
 import { TechnicalAnalysisContext } from 'pages/TrueSightV2/pages/TechnicalAnalysis'
 import {
   ChartTab,
@@ -649,8 +648,8 @@ export const TradingVolumeChart = ({ noAnimation }: { noAnimation?: boolean }) =
     return [from, now, timerange]
   }, [timeframe])
   const { data, isLoading } = useTradingVolumeQuery({
-    chain: chain || defaultExplorePageToken.chain,
-    address: address || defaultExplorePageToken.address,
+    chain: chain || DEFAULT_EXPLORE_PAGE_TOKEN.chain,
+    address: address || DEFAULT_EXPLORE_PAGE_TOKEN.address,
     params: { from, to },
   })
 
@@ -975,8 +974,8 @@ export const NetflowToWhaleWallets = ({ tab, noAnimation }: { tab?: ChartTab; no
   }, [timeframe])
 
   const { data, isLoading } = useNetflowToWhaleWalletsQuery({
-    chain: chain || defaultExplorePageToken.chain,
-    address: address || defaultExplorePageToken.address,
+    chain: chain || DEFAULT_EXPLORE_PAGE_TOKEN.chain,
+    address: address || DEFAULT_EXPLORE_PAGE_TOKEN.address,
     from,
     to,
   })
@@ -1418,8 +1417,8 @@ export const NetflowToCentralizedExchanges = ({ tab, noAnimation }: { tab?: Char
   }, [timeframe])
 
   const { data, isLoading } = useNetflowToCEXQuery({
-    chain: chain || defaultExplorePageToken.chain,
-    address: address || defaultExplorePageToken.address,
+    chain: chain || DEFAULT_EXPLORE_PAGE_TOKEN.chain,
+    address: address || DEFAULT_EXPLORE_PAGE_TOKEN.address,
     from,
     to,
   })

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/constants/index.tsx

@@ -69,3 +69,9 @@ export enum KYBERAI_CHART_ID {
   PRICE_CHART = 'priceChart',
   LIQUID_ON_CEX = 'liquidOnCEX',
 }
+
+export const DEFAULT_EXPLORE_PAGE_TOKEN = {
+  chain: 'ethereum',
+  address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+  assetId: 32895,
+}

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

@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { ChevronLeft } from 'react-feather'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -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'
@@ -29,7 +28,7 @@ import SwitchVariantDropdown from '../components/SwitchVariantDropdown'
 import { TokenOverview } from '../components/TokenOverview'
 import { StarWithAnimation } from '../components/WatchlistStar'
 import ExploreShareContent from '../components/shareContent/ExploreTopShareContent'
-import { MIXPANEL_KYBERAI_TAG, NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from '../constants'
+import { DEFAULT_EXPLORE_PAGE_TOKEN, MIXPANEL_KYBERAI_TAG, NETWORK_IMAGE_URL, NETWORK_TO_CHAINID } from '../constants'
 import useChartStatesReducer, { ChartStatesContext } from '../hooks/useChartStatesReducer'
 import useIsReachMaxLimitWatchedToken from '../hooks/useIsReachMaxLimitWatchedToken'
 import useKyberAIAssetOverview from '../hooks/useKyberAIAssetOverview'
@@ -154,12 +153,6 @@ const TabButton = styled.div<{ active?: boolean }>`
   `}
 `
 
-export const defaultExplorePageToken = {
-  chain: 'ethereum',
-  address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
-  assetId: 19277,
-}
-
 const StyledTokenDescription = styled.span<{ show?: boolean }>`
   text-overflow: ellipsis;
   overflow: hidden;
@@ -255,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()
@@ -268,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(),
@@ -563,7 +555,7 @@ export default function SingleToken() {
 
   useEffect(() => {
     if (!assetId) {
-      navigate(APP_PATHS.KYBERAI_EXPLORE + `/${defaultExplorePageToken.assetId}`)
+      navigate(APP_PATHS.KYBERAI_EXPLORE + `/${DEFAULT_EXPLORE_PAGE_TOKEN.assetId}`)
       setTimeout(() => {
         const element = document.querySelector('#kyberai-search') as HTMLInputElement
         element?.focus({

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',