diff --git a/.nvmrc b/.nvmrc index 2f3b977c5b..c946e1df49 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.15.0 \ No newline at end of file +v20.9.0 \ No newline at end of file diff --git a/src/components/SwapForm/GasPriceNote.tsx b/src/components/SwapForm/GasPriceNote.tsx index d2a22dbf6e..1ba62568cd 100644 --- a/src/components/SwapForm/GasPriceNote.tsx +++ b/src/components/SwapForm/GasPriceNote.tsx @@ -1,41 +1,66 @@ import { ChainId } from '@kyberswap/ks-sdk-core' -import { Trans, t } from '@lingui/macro' +import { Trans } from '@lingui/macro' import { FC } from 'react' import { Text } from 'rebass' +import PriceImpactNote from 'components/SwapForm/PriceImpactNote' import WarningNote from 'components/WarningNote' import { useActiveWeb3React } from 'hooks' +import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { useSwitchPairToLimitOrder } from 'state/swap/hooks' +import { checkPriceImpact } from 'utils/prices' type Props = { gasUsd?: string + priceImpact?: number + isDegenMode: boolean } const GAS_USD_THRESHOLD = 20 -const GasPriceNote: FC = ({ gasUsd = 0 }) => { +const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenMode }) => { const theme = useTheme() - const { chainId } = useActiveWeb3React() const switchToLimitOrder = useSwitchPairToLimitOrder() - if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) return null + const { isHigh, isVeryHigh } = checkPriceImpact(priceImpact) + const { mixpanelHandler } = useMixpanel() + + if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) + return + const limitOrderLink = ( + + + Do you want to make a{' '} + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > + Limit Order + {' '} + instead? + + + ) return ( - - Do you want to make a{' '} - - Limit Order - {' '} - instead? - + {isHigh || isVeryHigh ? ( + Gas fees and Price Impact are very high. You will lose your funds. + ) : ( + Gas fees is very high. You will lose your funds. + )} } + longText={limitOrderLink} /> ) } -export default GasPriceNote +export default GasFeeAndPriceImpactNote diff --git a/src/components/SwapForm/PriceImpactNote.tsx b/src/components/SwapForm/PriceImpactNote.tsx index 00921740ed..87c3b4350e 100644 --- a/src/components/SwapForm/PriceImpactNote.tsx +++ b/src/components/SwapForm/PriceImpactNote.tsx @@ -6,6 +6,7 @@ import styled from 'styled-components' import Column from 'components/Column' import Row from 'components/Row' import WarningNote from 'components/WarningNote' +import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { useSwitchPairToLimitOrder } from 'state/swap/hooks' import { checkPriceImpact } from 'utils/prices' @@ -38,6 +39,7 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi const priceImpactResult = checkPriceImpact(priceImpact) const theme = useTheme() const switchToLimitOrder = useSwitchPairToLimitOrder() + const { mixpanelHandler } = useMixpanel() if (typeof priceImpact !== 'number') { return null @@ -81,7 +83,15 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi Do you want to make a{' '} - + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > Limit Order {' '} instead? @@ -108,6 +118,7 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi } longText={ + {limitOrderNote} {isDegenMode ? ( @@ -120,7 +131,6 @@ const PriceImpactNote: FC = ({ isDegenMode, priceImpact, showLimitOrderLi )} - {limitOrderNote} } /> diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx index ead77a20ae..cf2b33be39 100644 --- a/src/components/SwapForm/index.tsx +++ b/src/components/SwapForm/index.tsx @@ -13,7 +13,7 @@ import AddressInputPanel from 'components/AddressInputPanel' import { Clock } from 'components/Icons' import { AutoRow } from 'components/Row' import SlippageWarningNote from 'components/SlippageWarningNote' -import GasPriceNote from 'components/SwapForm/GasPriceNote' +import GasFeeAndPriceImpactNote from 'components/SwapForm/GasPriceNote' import InputCurrencyPanel from 'components/SwapForm/InputCurrencyPanel' import OutputCurrencyPanel from 'components/SwapForm/OutputCurrencyPanel' import SlippageSettingGroup from 'components/SwapForm/SlippageSettingGroup' @@ -37,7 +37,6 @@ import { MEDIA_WIDTHS } from 'theme' import { DetailedRouteSummary } from 'types/route' import { currencyId } from 'utils/currencyId' -import PriceImpactNote from './PriceImpactNote' import RefreshButton from './RefreshButton' import ReverseTokenSelectionButton from './ReverseTokenSelectionButton' import SwapActionButton from './SwapActionButton' @@ -260,9 +259,11 @@ const SwapForm: React.FC = props => { {!isWrapOrUnwrap && } - - - +