update gas fee note

src/components/SwapForm/GasPriceNote.tsx

@@ -1,41 +1,54 @@
 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 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)
+
+  if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET)
+    return <PriceImpactNote priceImpact={priceImpact} isDegenMode={isDegenMode} showLimitOrderLink />
 
+  const limitOrderLink = (
+    <Trans>
+      Do you want to make a{' '}
+      <Text as="span" sx={{ cursor: 'pointer', fontWeight: 'bold' }} color={theme.primary} onClick={switchToLimitOrder}>
+        Limit Order
+      </Text>{' '}
+      instead?
+    </Trans>
+  )
   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>
+          )}{' '}
+          {limitOrderLink}
         </Text>
       }
     />
   )
 }
 
-export default GasPriceNote
+export default GasFeeAndPriceImpactNote

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}