Merge remote-tracking branch 'origin/main' into inbox-watchlist

src/components/AddressInputPanel/index.tsx

@@ -174,6 +174,9 @@ export default function AddressInputPanel({
             <ExternalLink
               href={getEtherscanLink(chainId, name ?? address, 'address')}
               style={{ fontSize: '12px', marginLeft: '4px' }}
+              onClick={e => {
+                e.stopPropagation()
+              }}
             >
               ({networkInfo.etherscanName})
             </ExternalLink>

src/components/SwapForm/hooks/useBuildRoute.tsx

@@ -8,6 +8,7 @@ import { useRouteApiDomain } from 'components/SwapForm/hooks/useGetRoute'
 import { AGGREGATOR_API_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
+import useENS from 'hooks/useENS'
 import { useKyberswapGlobalConfig } from 'hooks/useKyberSwapConfig'
 
 export type BuildRouteResult =
@@ -35,6 +36,8 @@ const useBuildRoute = (args: Args) => {
   const { isEnableAuthenAggregator } = useKyberswapGlobalConfig()
   const [buildRoute] = routeApi.useBuildRouteMutation()
   const aggregatorDomain = useRouteApiDomain()
+  const recipientLookup = useENS(recipient)
+  const to: string | null = (recipient === '' ? account : recipientLookup.address) ?? null
 
   const fetcher = useCallback(async (): Promise<BuildRouteResult> => {
     if (!account) {
@@ -54,7 +57,7 @@ const useBuildRoute = (args: Args) => {
       deadline: Math.floor(Date.now() / 1000) + transactionTimeout,
       slippageTolerance: slippage,
       sender: account,
-      recipient: recipient || account,
+      recipient: to || account,
       source: 'kyberswap',
       skipSimulateTx: false,
       permit,
@@ -90,7 +93,7 @@ const useBuildRoute = (args: Args) => {
     account,
     aggregatorDomain,
     chainId,
-    recipient,
+    to,
     routeSummary,
     slippage,
     transactionTimeout,

src/components/SwapForm/hooks/useGetInputError.tsx

@@ -39,7 +39,7 @@ const useGetInputError = (args: Args): string | undefined => {
   if (!to || !formattedTo) {
     inputError = inputError ?? t`Enter a recipient`
   } else {
-    if (BAD_RECIPIENT_ADDRESSES.indexOf(formattedTo) !== -1) {
+    if (BAD_RECIPIENT_ADDRESSES.has(formattedTo)) {
       inputError = inputError ?? t`Invalid recipient`
     }
   }

src/components/TransactionSettings/AdvanceModeModal.tsx

@@ -14,7 +14,7 @@ const ModalContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 24px 24px 28px;
+  padding: 20px;
   background-color: ${({ theme }) => theme.tableHeader};
 `
 
@@ -23,7 +23,9 @@ const StyledInput = styled.input`
   background: ${({ theme }) => theme.buttonBlack};
   border-radius: 999px;
   padding: 8px 16px;
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: 500px;
+  line-height: 20px;
   outline: none;
   color: ${({ theme }) => theme.text};
   border: none;
@@ -33,8 +35,8 @@ const StyledInput = styled.input`
 `
 
 const StyledCloseIcon = styled(X)`
-  height: 28px;
-  width: 28px;
+  height: 24px;
+  width: 24px;
   :hover {
     cursor: pointer;
   }
@@ -44,6 +46,12 @@ const StyledCloseIcon = styled(X)`
   }
 `
 
+const ConfirmText = styled.span`
+  color: ${({ theme }) => theme.warning};
+  cursor: not-allowed;
+  user-select: none;
+`
+
 function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boolean) => void }) {
   const [, toggleDegenMode] = useDegenModeManager()
   const [confirmText, setConfirmText] = useState('')
@@ -69,32 +77,33 @@ function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boole
         setShow(false)
       }}
       maxHeight={100}
+      width="480px"
+      maxWidth="unset"
     >
       <ModalContentWrapper>
         <Flex alignItems="center" justifyContent="space-between">
-          <Text fontSize="20px" fontWeight={500}>
+          <Text fontSize="20px" fontWeight={500} lineHeight="24px">
             <Trans>Are you sure?</Trans>
           </Text>
 
           <StyledCloseIcon onClick={() => setShow(false)} />
         </Flex>
 
-        <Text marginTop="28px">
+        <Text marginTop="24px" fontSize={14} fontWeight={500} lineHeight="20px" color={theme.subText}>
           <Trans>
             Turn this on to make trades with very high price impact or to set very high slippage tolerance. This can
             result in bad rates and loss of funds. Be cautious.
           </Trans>
         </Text>
 
-        <Text marginTop="20px">
+        <Text marginTop="24px" fontSize={14} fontWeight={400} lineHeight="24px" color={theme.text}>
           <Trans>
-            Please type the word &apos;confirm&apos; below to enable{' '}
-            <span style={{ color: theme.warning }}>Degen Mode</span>
+            Please type the word <ConfirmText>Confirm</ConfirmText> below to enable Degen Mode
           </Trans>
         </Text>
 
         <StyledInput
-          placeholder="confirm"
+          placeholder="Confirm"
           value={confirmText}
           onChange={e => setConfirmText(e.target.value)}
           onKeyUp={e => {
@@ -104,7 +113,7 @@ function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boole
           }}
         />
 
-        <Flex sx={{ gap: '16px' }} marginTop="28px" justifyContent={'center'}>
+        <Flex sx={{ gap: '16px' }} marginTop="24px" justifyContent={'center'}>
           <ButtonOutlined
             style={{
               flex: 1,

src/constants/index.ts

@@ -7,20 +7,38 @@ import { TransactionFlowState } from 'types/TransactionFlowState'
 
 import { CAMPAIGN_BASE_URL as CAMPAIGN_BASE_DOMAIN } from './env'
 import * as ENV from './env'
-import { EVM_NETWORK, NETWORKS_INFO, SUPPORTED_NETWORKS, isEVM } from './networks'
+import { EVM_MAINNET_NETWORKS, EVM_NETWORK, NETWORKS_INFO, SUPPORTED_NETWORKS, isEVM } from './networks'
 
 export const EMPTY_OBJECT: any = {}
 export const EMPTY_ARRAY: any[] = []
 export const EMPTY_FUNCTION = () => {
   // empty
 }
 
-export const BAD_RECIPIENT_ADDRESSES: string[] = [
-  NETWORKS_INFO[ChainId.MAINNET].classic.static.factory,
-  NETWORKS_INFO[ChainId.MAINNET].classic.static.router,
-  NETWORKS_INFO[ChainId.MAINNET].classic.static.factory,
-  NETWORKS_INFO[ChainId.MAINNET].classic.static.router,
-]
+export const BAD_RECIPIENT_ADDRESSES: Set<string> = new Set(
+  EVM_MAINNET_NETWORKS.map(chainId => [
+    ...Object.values(NETWORKS_INFO[chainId].classic.static || {}),
+    ...Object.values(NETWORKS_INFO[chainId].classic.oldStatic || {}),
+    ...Object.values(NETWORKS_INFO[chainId].classic.dynamic || {}),
+    ...Object.values(NETWORKS_INFO[chainId].classic.fairlaunchV2 || {}),
+    ...Object.values(NETWORKS_INFO[chainId].elastic.farms || {}),
+    ...Object.values(NETWORKS_INFO[chainId].elastic.farmV2S || {}),
+    ...([
+      NETWORKS_INFO[chainId].classic.claimReward,
+      NETWORKS_INFO[chainId].elastic.coreFactory,
+      NETWORKS_INFO[chainId].elastic.nonfungiblePositionManager,
+      NETWORKS_INFO[chainId].elastic.tickReader,
+      NETWORKS_INFO[chainId].elastic.quoter,
+      NETWORKS_INFO[chainId].elastic.routers,
+      NETWORKS_INFO[chainId].elastic.farmv2Quoter,
+      NETWORKS_INFO[chainId].kyberDAO?.staking,
+      NETWORKS_INFO[chainId].kyberDAO?.dao,
+      NETWORKS_INFO[chainId].kyberDAO?.rewardsDistributor,
+      NETWORKS_INFO[chainId].kyberDAO?.KNCAddress,
+      NETWORKS_INFO[chainId].kyberDAO?.KNCLAddress,
+    ].filter(s => typeof s === 'string') as string[]),
+  ]).flat(),
+)
 
 export class AbortedError extends Error {}
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'

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()
@@ -261,7 +259,7 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
   const [removeFromWatchlist, { isLoading: loadingRemovefromWatchlist }] = useRemoveFromWatchlistMutation()
   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',

src/state/swap/hooks.ts

@@ -250,7 +250,7 @@ function useDerivedSwapInfo(): {
     inputError = inputError ?? t`Enter a recipient`
   } else {
     if (
-      BAD_RECIPIENT_ADDRESSES.indexOf(formattedTo) !== -1 ||
+      BAD_RECIPIENT_ADDRESSES.has(formattedTo) ||
       (bestTradeExactIn && involvesAddress(bestTradeExactIn, formattedTo))
     ) {
       inputError = inputError ?? t`Invalid recipient`

src/state/swap/useAggregator.ts

@@ -96,7 +96,7 @@ export function useDerivedSwapInfoV2(): {
   if (!to || !formattedTo) {
     inputError = inputError ?? t`Enter a recipient`
   } else {
-    if (BAD_RECIPIENT_ADDRESSES.indexOf(formattedTo) !== -1) {
+    if (BAD_RECIPIENT_ADDRESSES.has(formattedTo)) {
       inputError = inputError ?? t`Invalid recipient`
     }
   }