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 db227fa227..a5aff7143a 100644 --- a/src/components/SwapForm/GasPriceNote.tsx +++ b/src/components/SwapForm/GasPriceNote.tsx @@ -6,6 +6,7 @@ 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' @@ -22,6 +23,7 @@ const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenM const { chainId } = useActiveWeb3React() const switchToLimitOrder = useSwitchPairToLimitOrder() const { isHigh, isVeryHigh } = checkPriceImpact(priceImpact) + const { mixpanelHandler } = useMixpanel() if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) return @@ -29,7 +31,15 @@ const GasFeeAndPriceImpactNote: FC = ({ gasUsd = 0, priceImpact, isDegenM const limitOrderLink = ( Do you want to make a{' '} - + { + mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP) + switchToLimitOrder() + }} + > Limit Order {' '} instead? 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/hooks/useMixpanel.ts b/src/hooks/useMixpanel.ts index 9a01ed4a96..6a319c0b11 100644 --- a/src/hooks/useMixpanel.ts +++ b/src/hooks/useMixpanel.ts @@ -206,6 +206,7 @@ export enum MIXPANEL_TYPE { LO_CLICK_CANCEL_TYPE, LO_CLICK_UPDATE_TYPE, LO_CLICK_GET_STARTED, + LO_CLICK_WARNING_IN_SWAP, // Wallet UI WUI_WALLET_CLICK, @@ -1138,6 +1139,10 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency } mixpanel.track('Limit Order - Get Started Click', payload) break } + case MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP: { + mixpanel.track('Limit Order - Warning in Swap Click', payload) + break + } case MIXPANEL_TYPE.WUI_WALLET_CLICK: { mixpanel.track('Wallet UI - Wallet Click')