Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface in…

…to feat/zkevm

src/components/Header/groups/AboutNavGroup.tsx

@@ -4,13 +4,14 @@ import { Flex } from 'rebass'
 import styled from 'styled-components'
 
 import { APP_PATHS } from 'constants/index'
+import { THRESHOLD_HEADER } from 'constants/styles'
 
 import { DropdownTextAnchor, StyledNavLink } from '../styleds'
 import NavGroup from './NavGroup'
 
 const AboutWrapper = styled.span`
   display: inline-flex;
-  @media (max-width: 1440px) {
+  @media (max-width: ${THRESHOLD_HEADER.ABOUT}) {
     display: none;
   }
 `

src/components/Header/groups/AnalyticNavGroup.tsx

@@ -3,6 +3,7 @@ import { Flex } from 'rebass'
 import styled from 'styled-components'
 
 import { AGGREGATOR_ANALYTICS_URL, PROMM_ANALYTICS_URL } from 'constants/index'
+import { THRESHOLD_HEADER } from 'constants/styles'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 
@@ -12,7 +13,7 @@ import NavGroup from './NavGroup'
 const AnalyticsWrapper = styled.span`
   display: flex;
   align-items: center;
-  @media (max-width: 1320px) {
+  @media (max-width: ${THRESHOLD_HEADER.ANALYTIC}) {
     display: none;
   }
 `

src/components/Header/groups/KyberDaoGroup.tsx

@@ -9,14 +9,15 @@ import StakeIcon from 'components/Icons/Stake'
 import VoteIcon from 'components/Icons/Vote'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
 import { APP_PATHS } from 'constants/index'
+import { THRESHOLD_HEADER } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 
 import { DropdownTextAnchor, StyledNavExternalLink, StyledNavLink } from '../styleds'
 import NavGroup from './NavGroup'
 
 const KyberDaoWrapper = styled.span`
   display: inline-flex;
-  @media (max-width: 1040px) {
+  @media (max-width: ${THRESHOLD_HEADER.KYBERDAO}) {
     display: none;
   }
 `

src/components/Header/index.tsx

@@ -12,7 +12,7 @@ import SignWallet from 'components/Header/web3/SignWallet'
 import Menu from 'components/Menu'
 import Row, { RowFixed } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
-import { Z_INDEXS } from 'constants/styles'
+import { THRESHOLD_HEADER, Z_INDEXS } from 'constants/styles'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
@@ -141,7 +141,7 @@ const IconImage = styled.img<{ isChristmas?: boolean }>`
 `
 
 const BlogWrapper = styled.span`
-  @media (max-width: 1600px) {
+  @media (max-width: ${THRESHOLD_HEADER.BLOG}) {
     display: none;
   }
 `

src/components/Menu/index.tsx

@@ -40,6 +40,7 @@ import { AGGREGATOR_ANALYTICS_URL, APP_PATHS, DMM_ANALYTICS_URL, TERM_FILES_PATH
 import { getLocaleLabel } from 'constants/locales'
 import { FAUCET_NETWORKS } from 'constants/networks'
 import { EVMNetworkInfo } from 'constants/networks/type'
+import { THRESHOLD_HEADER } from 'constants/styles'
 import { ENV_TYPE } from 'constants/type'
 import { useActiveWeb3React } from 'hooks'
 import useClaimReward from 'hooks/useClaimReward'
@@ -246,9 +247,10 @@ export default function Menu() {
     toggle()
   }
 
-  const under1440 = useMedia('(max-width: 1440px)')
-  const above1321 = useMedia('(min-width: 1321px)')
-  const under1040 = useMedia('(max-width: 1040px)')
+  const showAbout = useMedia(`(max-width: ${THRESHOLD_HEADER.ABOUT})`)
+  const showBlog = useMedia(`(max-width: ${THRESHOLD_HEADER.BLOG})`)
+  const showAnalytics = useMedia(`(max-width: ${THRESHOLD_HEADER.ANALYTIC})`)
+  const showKyberDao = useMedia(`(max-width: ${THRESHOLD_HEADER.KYBERDAO})`)
 
   const bridgeLink = networkInfo.bridgeURL
   const toggleClaimPopup = useToggleModal(ApplicationModal.CLAIM_POPUP)
@@ -392,7 +394,7 @@ export default function Menu() {
               />
             </MenuItem>
 
-            {under1440 && (
+            {showAbout && (
               <MenuItem>
                 <NavDropDown
                   icon={<Info />}
@@ -405,7 +407,7 @@ export default function Menu() {
                 />
               </MenuItem>
             )}
-            {under1040 && (
+            {showKyberDao && (
               <MenuItem>
                 <NavDropDown
                   icon={<Info />}
@@ -420,7 +422,7 @@ export default function Menu() {
                 />
               </MenuItem>
             )}
-            {!above1321 && (
+            {!showAnalytics && (
               <MenuItem>
                 <NavDropDown
                   icon={<PieChart />}
@@ -475,7 +477,7 @@ export default function Menu() {
               </ExternalLink>
             </MenuItem>
 
-            {under1440 && (
+            {showBlog && (
               <MenuItem>
                 <ExternalLink href="https://blog.kyberswap.com">
                   <BlogIcon />

src/components/SearchModal/CurrencySearch.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, KeyboardEvent, ReactNode, useCallback, useEffect, useMemo,
 import { Trash } from 'react-feather'
 import { usePrevious } from 'react-use'
 import { Flex, Text } from 'rebass'
+import { useImportTokenMutation } from 'services/ksSetting'
 import styled from 'styled-components'
 
 import Column from 'components/Column'
@@ -33,7 +34,7 @@ import { useRemoveUserAddedToken, useUserAddedTokens, useUserFavoriteTokens } fr
 import { ButtonText, CloseIcon, TYPE } from 'theme'
 import { filterTruthy, isAddress } from 'utils'
 import { filterTokens } from 'utils/filtering'
-import { importTokensToKsSettings, isTokenNative } from 'utils/tokenInfo'
+import { isTokenNative } from 'utils/tokenInfo'
 
 import CommonBases from './CommonBases'
 import CurrencyList from './CurrencyList'
@@ -311,6 +312,7 @@ export function CurrencySearch({
   }, [fetchFavoriteTokenFromAddress])
 
   const abortControllerRef = useRef(new AbortController())
+  const [importTokensToKsSettings] = useImportTokenMutation()
   const fetchListTokens = useCallback(
     async (page?: number) => {
       const nextPage = (page ?? pageCount) + 1
@@ -340,7 +342,9 @@ export function CurrencySearch({
                 chainId: String(rawToken.chainId),
                 address: rawToken.address,
               },
-            ])
+            ]).catch(err => {
+              console.error('import token err', err)
+            })
           }
         } else if (tokens.length === 0 && isQueryValidSolanaAddress) {
           // TODO: query tokens from Solana token db
@@ -361,6 +365,7 @@ export function CurrencySearch({
       isQueryValidEVMAddress,
       isQueryValidSolanaAddress,
       pageCount,
+      importTokensToKsSettings,
     ],
   )
 

src/components/SwapForm/AddMEVProtectionModal.tsx

@@ -1,6 +1,5 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
-import { Connector } from '@web3-react/types'
 import { darken } from 'polished'
 import { useCallback, useState } from 'react'
 import { X } from 'react-feather'
@@ -14,12 +13,12 @@ import { NotificationType } from 'components/Announcement/type'
 import { ButtonEmpty, ButtonOutlined, ButtonPrimary } from 'components/Button'
 import Modal from 'components/Modal'
 import Row, { RowBetween } from 'components/Row'
-import { didUserReject } from 'constants/connectors/utils'
 import { Z_INDEXS } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useNotify } from 'state/application/hooks'
 import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { friendlyError } from 'utils/errorMessage'
 
 const Wrapper = styled.div`
   padding: 20px;
@@ -113,10 +112,9 @@ export default function AddMEVProtectionModal({ isOpen, onClose }: { isOpen: boo
         onClose?.()
         mixpanelHandler(MIXPANEL_TYPE.MEV_ADD_RESULT, { type: addingOption.name, result: 'success' })
       },
-      (connector: Connector, error: Error) => {
-        let reason = error?.message || 'Unknown reason'
-        if (didUserReject(connector, error)) reason = 'User rejected'
-        mixpanelHandler(MIXPANEL_TYPE.MEV_ADD_RESULT, { type: addingOption.name, result: 'fail', reason })
+      (error: Error) => {
+        const message = friendlyError(error)
+        mixpanelHandler(MIXPANEL_TYPE.MEV_ADD_RESULT, { type: addingOption.name, result: 'fail', reason: message })
       },
     )
   }, [addNewNetwork, notify, onClose, selectedOption, mixpanelHandler])

src/components/SwapForm/SwapModal/index.tsx

@@ -30,6 +30,7 @@ type Props = {
 const SwapModal: React.FC<Props> = props => {
   const { isOpen, tokenAddToMetaMask, onDismiss, swapCallback, buildResult, isBuildingRoute } = props
   const { chainId, account } = useActiveWeb3React()
+
   const dispatch = useDispatch()
   // modal and loading
   const [{ error, isAttemptingTx, txHash }, setSwapState] = useState<{
@@ -48,7 +49,7 @@ const SwapModal: React.FC<Props> = props => {
 
   const amountOut = currencyOut && CurrencyAmount.fromRawAmount(currencyOut, buildResult?.data?.amountOut || '0')
   // text to show while loading
-  const pendingText = `Swapping ${routeSummary?.parsedAmountIn?.toSignificant(6)} ${
+  const pendingText = t`Swapping ${routeSummary?.parsedAmountIn?.toSignificant(6)} ${
     currencyIn?.symbol
   } for ${amountOut?.toSignificant(6)} ${currencyOut?.symbol}`
 
@@ -107,9 +108,8 @@ const SwapModal: React.FC<Props> = props => {
       const hash = await swapCallback()
       handleTxSubmitted(hash)
     } catch (e) {
-      if (e?.code !== 4001 && e?.code !== 'ACTION_REJECTED') captureSwapError(e)
-      const msg = t`Something went wrong. Please try again`
-      handleError(e.message === '[object Object]' ? msg : e.message || msg)
+      captureSwapError(e)
+      handleError(e.message)
     }
   }
 

src/components/TransactionConfirmationModal/index.tsx

@@ -22,7 +22,7 @@ import { VIEW_MODE } from 'state/user/reducer'
 import { ExternalLink } from 'theme'
 import { CloseIcon } from 'theme/components'
 import { getEtherscanLink, getTokenLogoURL } from 'utils'
-import { errorFriendly } from 'utils/dmm'
+import { friendlyError } from 'utils/errorMessage'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -280,9 +280,9 @@ export function TransactionErrorContent({
             lineHeight={'24px'}
             style={{ textAlign: 'center', width: '85%' }}
           >
-            {errorFriendly(message)}
+            {friendlyError(message)}
           </Text>
-          {message !== errorFriendly(message) && (
+          {message !== friendlyError(message) && (
             <AutoColumn justify="center" style={{ width: '100%' }}>
               <Text
                 color={theme.primary}

src/components/WalletPopup/SendToken/index.tsx

@@ -26,7 +26,7 @@ import { useCurrencyBalance } from 'state/wallet/hooks'
 import { useCheckAddressSolana } from 'state/wallet/solanaHooks'
 import { TransactionFlowState } from 'types/TransactionFlowState'
 import { formattedNum, shortenAddress } from 'utils'
-import { errorFriendly } from 'utils/dmm'
+import { friendlyError } from 'utils/errorMessage'
 import { maxAmountSpend } from 'utils/maxAmountSpend'
 
 const Label = styled.label<{ color?: string }>`
@@ -142,7 +142,7 @@ export default function SendToken({
       setFlowState(state => ({
         ...state,
         attemptingTxn: false,
-        errorMessage: errorFriendly(error?.message ?? 'Error occur, please try again'),
+        errorMessage: friendlyError(error),
       }))
     }
   }

src/components/swapv2/LimitOrder/helpers.ts

@@ -132,6 +132,7 @@ export const calcPercentFilledOrder = (value: string, total: string, decimals: n
   }
 }
 
+// todo: move to friendlyError
 export const getErrorMessage = (error: any) => {
   console.error('Limit order error: ', error)
   const errorCode: string = error?.response?.data?.code || error.code || ''

src/components/swapv2/TokenInfoV2/SingleTokenInfo.tsx

@@ -13,6 +13,7 @@ import useTheme from 'hooks/useTheme'
 import { TokenInfo } from 'hooks/useTokenInfo'
 import { formattedNum } from 'utils'
 import { formatDollarAmount } from 'utils/numbers'
+import { escapeScriptHtml } from 'utils/string'
 
 const NOT_AVAILABLE = '--'
 
@@ -270,7 +271,7 @@ const SingleTokenInfo = ({
         className="desc"
         ref={ref}
         dangerouslySetInnerHTML={{
-          __html: description.replace(/\r\n\r\n/g, '<br><br>'),
+          __html: escapeScriptHtml(description.replace(/\r\n\r\n/g, '<br><br>')),
         }}
       />
       <InfoRowWrapper>

src/components/swapv2/styleds.tsx

@@ -8,7 +8,7 @@ import { AutoColumn } from 'components/Column'
 import Modal, { ModalProps } from 'components/Modal'
 import { Z_INDEXS } from 'constants/styles'
 import useTheme from 'hooks/useTheme'
-import { errorFriendly } from 'utils/dmm'
+import { friendlyError } from 'utils/errorMessage'
 
 export const PageWrapper = styled.div`
   display: flex;
@@ -136,9 +136,9 @@ export function SwapCallbackError({ error, style = {} }: { error: string; style?
       <Alert style={{ marginBottom: 'auto' }} />
       <AutoColumn style={{ flexBasis: '100%', margin: '10px 0 auto 8px' }}>
         <Text fontSize="16px" fontWeight="500" color={theme.red} lineHeight={'24px'}>
-          {errorFriendly(error)}
+          {friendlyError(error)}
         </Text>
-        {error !== errorFriendly(error) && (
+        {error !== friendlyError(error) && (
           <Text
             color={theme.primary}
             fontSize="12px"

src/constants/connectors/utils.ts

@@ -1,6 +1,3 @@
-import { Connector } from '@web3-react/types'
-
-import { coinbaseWallet, walletConnectV2 } from 'constants/connectors/evm'
 import checkForBraveBrowser from 'utils/checkForBraveBrowser'
 
 export const getIsInjected = () => Boolean(window.ethereum)
@@ -51,21 +48,24 @@ export enum ErrorCode {
   MM_ALREADY_PENDING = -32002,
 
   ACTION_REJECTED = 'ACTION_REJECTED',
-  WC_MODAL_CLOSED = 'Error: User closed modal',
-  CB_REJECTED_REQUEST = 'Error: User denied account authorization',
-  ALPHA_WALLET_USER_REJECTED_REQUEST = -32050,
+  WALLETCONNECT_MODAL_CLOSED = 'Error: User closed modal',
+  WALLETCONNECT_CANCELED = 'The transaction was cancelled',
+  COINBASE_REJECTED_REQUEST = 'Error: User denied account authorization',
+  ALPHA_WALLET_REJECTED_CODE = -32050,
   ALPHA_WALLET_REJECTED = 'Request rejected',
-  CANCELED = 'The transaction was cancelled',
 }
 
-export function didUserReject(connector: Connector, error: any): boolean {
+const rejectedPhrases: string[] = ['user rejected transaction', 'user denied transaction', 'you must accept']
+
+export function didUserReject(error: any): boolean {
   return (
     error?.code === ErrorCode.USER_REJECTED_REQUEST ||
     error?.code === ErrorCode.ACTION_REJECTED ||
-    error?.code === ErrorCode.ALPHA_WALLET_USER_REJECTED_REQUEST ||
+    error?.code === ErrorCode.ALPHA_WALLET_REJECTED_CODE ||
     error?.message === ErrorCode.ALPHA_WALLET_REJECTED ||
-    (connector === walletConnectV2 && error?.toString?.() === ErrorCode.WC_MODAL_CLOSED) ||
-    (connector === walletConnectV2 && error?.message === ErrorCode.CANCELED) ||
-    (connector === coinbaseWallet && error?.toString?.() === ErrorCode.CB_REJECTED_REQUEST)
+    error?.message === ErrorCode.WALLETCONNECT_MODAL_CLOSED ||
+    error?.message === ErrorCode.WALLETCONNECT_CANCELED ||
+    error?.message === ErrorCode.WALLETCONNECT_MODAL_CLOSED ||
+    rejectedPhrases.some(phrase => error?.message?.toLowerCase?.()?.includes?.(phrase.toLowerCase()))
   )
 }

src/constants/networks/arbitrum.ts

@@ -2,7 +2,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
 
 import EthereumLogo from 'assets/images/ethereum-logo.png'
 import ARBITRUM from 'assets/networks/arbitrum-network.svg'
-import { KS_SETTING_API } from 'constants/env'
 import { EVMNetworkInfo } from 'constants/networks/type'
 
 const EMPTY = ''
@@ -24,7 +23,6 @@ const arbitrumInfo: EVMNetworkInfo = {
   defaultBlockSubgraph: 'https://api.thegraph.com/subgraphs/name/kybernetwork/arbitrum-blocks',
   etherscanUrl: 'https://arbiscan.io',
   etherscanName: 'Arbiscan',
-  tokenListUrl: `${KS_SETTING_API}/v1/tokens?chainIds=${ChainId.ARBITRUM}&isWhitelisted=${true}`,
   bridgeURL: EMPTY,
   nativeToken: {
     symbol: 'ETH',

src/constants/networks/aurora.ts

@@ -2,7 +2,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
 
 import EthereumLogo from 'assets/images/ethereum-logo.png'
 import AURORA from 'assets/networks/aurora-network.svg'
-import { KS_SETTING_API } from 'constants/env'
 import { EVMNetworkInfo } from 'constants/networks/type'
 
 const EMPTY = ''
@@ -24,7 +23,6 @@ const auroraInfo: EVMNetworkInfo = {
   defaultBlockSubgraph: 'https://aurora-graph.kyberengineering.io/subgraphs/name/kybernetwork/aurora-blocks',
   etherscanUrl: 'https://aurorascan.dev',
   etherscanName: 'Aurora Explorer',
-  tokenListUrl: `${KS_SETTING_API}/v1/tokens?chainIds=${ChainId.AURORA}&isWhitelisted=${true}`,
   bridgeURL: EMPTY,
   nativeToken: {
     symbol: 'ETH',