limit order: update gas fee note + add tracking event

.nvmrc

@@ -1 +1 @@
-v18.15.0
+v20.9.0

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<Props> = ({ gasUsd = 0 }) => {
+const GasFeeAndPriceImpactNote: FC<Props> = ({ 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 <PriceImpactNote priceImpact={priceImpact} isDegenMode={isDegenMode} showLimitOrderLink />
 
+  const limitOrderLink = (
+    <Text>
+      <Trans>
+        Do you want to make a{' '}
+        <Text
+          as="span"
+          sx={{ cursor: 'pointer', fontWeight: 'bold' }}
+          color={theme.primary}
+          onClick={() => {
+            mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP)
+            switchToLimitOrder()
+          }}
+        >
+          Limit Order
+        </Text>{' '}
+        instead?
+      </Trans>
+    </Text>
+  )
   return (
     <WarningNote
-      shortText={t`Gas fee is higher than $${GAS_USD_THRESHOLD}.`}
-      longText={
+      shortText={
         <Text>
-          <Trans>
-            Do you want to make a{' '}
-            <Text as="b" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={switchToLimitOrder}>
-              Limit Order
-            </Text>{' '}
-            instead?
-          </Trans>
+          {isHigh || isVeryHigh ? (
+            <Trans>Gas fees and Price Impact are very high. You will lose your funds.</Trans>
+          ) : (
+            <Trans>Gas fees is very high. You will lose your funds.</Trans>
+          )}
         </Text>
       }
+      longText={limitOrderLink}
     />
   )
 }
 
-export default GasPriceNote
+export default GasFeeAndPriceImpactNote

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<Props> = ({ 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<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
     <Text>
       <Trans>
         Do you want to make a{' '}
-        <Text as="b" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={switchToLimitOrder}>
+        <Text
+          as="b"
+          sx={{ cursor: 'pointer' }}
+          color={theme.primary}
+          onClick={() => {
+            mixpanelHandler(MIXPANEL_TYPE.LO_CLICK_WARNING_IN_SWAP)
+            switchToLimitOrder()
+          }}
+        >
           Limit Order
         </Text>{' '}
         instead?
@@ -108,6 +118,7 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
         }
         longText={
           <Column gap="4px">
+            {limitOrderNote}
             <Text>
               {isDegenMode ? (
                 <Trans>
@@ -120,7 +131,6 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
                 </Trans>
               )}
             </Text>
-            {limitOrderNote}
           </Column>
         }
       />

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<SwapFormProps> = props => {
 
           {!isWrapOrUnwrap && <SlippageWarningNote rawSlippage={slippage} isStablePairSwap={isStablePairSwap} />}
 
-          <PriceImpactNote priceImpact={routeSummary?.priceImpact} isDegenMode={isDegenMode} showLimitOrderLink />
-
-          <GasPriceNote gasUsd={routeSummary?.gasUsd} />
+          <GasFeeAndPriceImpactNote
+            gasUsd={routeSummary?.gasUsd}
+            priceImpact={routeSummary?.priceImpact}
+            isDegenMode={isDegenMode}
+          />
 
           <SwapActionButton
             isGettingRoute={isGettingRoute}

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')