diff --git a/src/components/AddressInputPanel/index.tsx b/src/components/AddressInputPanel/index.tsx index abcf43078a..6d35ddf137 100644 --- a/src/components/AddressInputPanel/index.tsx +++ b/src/components/AddressInputPanel/index.tsx @@ -174,6 +174,9 @@ export default function AddressInputPanel({ { + e.stopPropagation() + }} > ({networkInfo.etherscanName}) diff --git a/src/components/SwapForm/hooks/useBuildRoute.tsx b/src/components/SwapForm/hooks/useBuildRoute.tsx index 458c784ab8..4b759650af 100644 --- a/src/components/SwapForm/hooks/useBuildRoute.tsx +++ b/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 => { 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, diff --git a/src/components/SwapForm/hooks/useGetInputError.tsx b/src/components/SwapForm/hooks/useGetInputError.tsx index 17390ceb99..1b0cade1d7 100644 --- a/src/components/SwapForm/hooks/useGetInputError.tsx +++ b/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` } } diff --git a/src/components/TransactionSettings/AdvanceModeModal.tsx b/src/components/TransactionSettings/AdvanceModeModal.tsx index 21f7d0abe1..7b050ba13a 100644 --- a/src/components/TransactionSettings/AdvanceModeModal.tsx +++ b/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" > - + Are you sure? setShow(false)} /> - + 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. - + - Please type the word 'confirm' below to enable{' '} - Degen Mode + Please type the word Confirm below to enable Degen Mode setConfirmText(e.target.value)} onKeyUp={e => { @@ -104,7 +113,7 @@ function AdvanceModeModal({ show, setShow }: { show: boolean; setShow: (v: boole }} /> - + { // 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 = 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' 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 b08878756f..77d9acdb9d 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() @@ -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(), diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx index 02b460f8f6..c297df907e 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() { ) : ( - +