feat: handle price impact is very high

KyberNetwork · Feb 20, 2025 · 93e8012 · 93e8012
1 parent 1a2d59a
commit 93e8012
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/components/SwapForm/SwapActionButton/SwapButtonWithPriceImpact.tsx b/src/components/SwapForm/SwapActionButton/SwapButtonWithPriceImpact.tsx
@@ -29,7 +29,6 @@ export const SwapButtonWithPriceImpact = ({
   showLoading,
   onClick,
   priceImpact,
-  isApproved,
   route,
   disabled,
   showNoteGetRoute,
@@ -77,7 +76,7 @@ export const SwapButtonWithPriceImpact = ({
   }
 
   const shouldDisableByPriceImpact = checkShouldDisableByPriceImpact(isDegenMode, priceImpact)
-  const shouldDisable = !route || !isApproved || disabled
+  const shouldDisable = !route || disabled
 
   if ((priceImpactResult.isVeryHigh || priceImpactResult.isInvalid) && isDegenMode) {
     return (
@@ -104,7 +103,13 @@ export const SwapButtonWithPriceImpact = ({
         }
       }}
       $minimal={minimal}
-      style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+        background: shouldDisableByPriceImpact ? theme.red : undefined,
+        color: shouldDisableByPriceImpact ? theme.text : undefined,
+      }}
     >
       {shouldDisableByPriceImpact && showTooltipPriceImpact ? (
         <MouseoverTooltip

diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx
@@ -1,6 +1,7 @@
 import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
 import { Flex } from 'rebass'
 import styled from 'styled-components'
 
@@ -22,6 +23,7 @@ import { WrapType } from 'hooks/useWrapCallback'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useWalletModalToggle } from 'state/application/hooks'
 import { DetailedRouteSummary } from 'types/route'
+import { checkPriceImpact } from 'utils/prices'
 
 import { Props as SwapOnlyButtonProps } from './SwapOnlyButton'
 
@@ -151,9 +153,20 @@ const SwapActionButton: React.FC<Props> = ({
     if (!showApproveFlow) setLoading(false)
   }, [showApproveFlow])
 
+  const { priceImpact } = routeSummary || {}
+  const priceImpactResult = checkPriceImpact(priceImpact)
+
+  const [searchParams, setSearchParams] = useSearchParams()
   const [approvalType, setApprovalType] = useState(AllowanceType.INFINITE)
   const [autoShowPreview, setAutoShowPreview] = useState(false)
+
   const handleApproveClick = () => {
+    if (!isDegenMode && (priceImpactResult.isVeryHigh || priceImpactResult.isInvalid)) {
+      searchParams.set('enableDegenMode', 'true')
+      setSearchParams(searchParams)
+      return
+    }
+
     setLoading(true)
     approveCallback(
       approvalType === AllowanceType.EXACT && parsedAmountFromTypedValue ? parsedAmountFromTypedValue : undefined,
@@ -272,7 +285,7 @@ const SwapActionButton: React.FC<Props> = ({
 
     const Approvebtn = permitState === PermitState.NOT_SIGNED ? ButtonLight : ButtonPrimary
 
-    if (showApproveFlow) {
+    if (showApproveFlow && (isDegenMode ? true : !priceImpactResult.isInvalid && !priceImpactResult.isVeryHigh)) {
       return (
         <div>
           <RowBetween style={{ gap: '1rem' }}>
@@ -317,6 +330,12 @@ const SwapActionButton: React.FC<Props> = ({
               style={{
                 border: 'none',
                 flex: 1,
+                ...(priceImpactResult.isVeryHigh || priceImpactResult.isInvalid
+                  ? {
+                      background: theme.red,
+                      color: loading || approval === ApprovalState.PENDING ? theme.subText : theme.text,
+                    }
+                  : {}),
               }}
             >
               {approval === ApprovalState.PENDING ? (
@@ -326,11 +345,17 @@ const SwapActionButton: React.FC<Props> = ({
               ) : (
                 <RowFit gap="4px">
                   <InfoHelper
-                    color={!loading && permitState === PermitState.NOT_SIGNED ? theme.primary : theme.textReverse}
+                    color={
+                      priceImpactResult.isVeryHigh || priceImpactResult.isInvalid
+                        ? theme.text
+                        : !loading && permitState === PermitState.NOT_SIGNED
+                        ? theme.primary
+                        : theme.textReverse
+                    }
                     placement="top"
                     text={approveTooltipText()}
                   />
-                  <Trans>Approve & Swap</Trans>
+                  Approve & Swap
                 </RowFit>
               )}
             </Approvebtn>