Fix Slippage for auto

QuickSwap · Jan 23, 2025 · 597cc7e · 597cc7e
1 parent 0302a00
commit 597cc7e
Show file tree

Hide file tree

Showing 16 changed files with 130 additions and 58 deletions.
diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -40,6 +40,7 @@ import {
   useIsExpertMode,
   useUserSlippageTolerance,
   useAmlScore,
+  useUserSlippageAuto,
 } from 'state/user/hooks';
 import {
   maxAmountSpend,
@@ -57,7 +58,6 @@ import { useDerivedSwapInfo } from 'state/swap/hooks';
 import { useParams } from 'react-router-dom';
 import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
 import usePoolsRedirect from 'hooks/usePoolsRedirect';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { TransactionType } from 'models/enums';
 
 const AddLiquidity: React.FC<{
@@ -78,9 +78,9 @@ const AddLiquidity: React.FC<{
   const [showConfirm, setShowConfirm] = useState(false);
   const [attemptingTxn, setAttemptingTxn] = useState(false);
   const [txPending, setTxPending] = useState(false);
+  const [userSlippageAuto] = useUserSlippageAuto();
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
 
   const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
 

diff --git a/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx b/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx
@@ -22,7 +22,10 @@ import {
   useBurnActionHandlers,
 } from 'state/burn/hooks';
 import { Field } from 'state/burn/actions';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import {
   useTransactionAdder,
   useTransactionFinalizer,
@@ -46,7 +49,6 @@ import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/RemoveLiquidityModal.scss';
 import { useTranslation } from 'react-i18next';
 import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { TransactionType } from 'models/enums';
 
 interface RemoveLiquidityModalProps {
@@ -90,10 +92,10 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
   const deadline = useTransactionDeadline();
   const { onUserInput: _onUserInput } = useBurnActionHandlers();
   const { autoSlippage } = useDerivedSwapInfo();
+  const [userSlippageAuto] = useUserSlippageAuto();
 
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
 
   const onUserInput = useCallback(
     (field: Field, typedValue: string) => {

diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx
@@ -15,13 +15,14 @@ import {
   useUserSlippageTolerance,
   useBonusRouterManager,
   useSlippageManuallySet,
+  useUserSlippageAuto,
   useUserSingleHopOnly,
   useIsInfiniteApproval,
 } from 'state/user/hooks';
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 import 'components/styles/SettingsModal.scss';
 import { useTranslation } from 'react-i18next';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
+import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
 import { isMobile } from 'react-device-detect';
 import { LiquidityHubSettings } from 'components/Swap/orbs/LiquidityHub/Components';
 
@@ -64,6 +65,9 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
     slippageManuallySet,
     setSlippageManuallySet,
   ] = useSlippageManuallySet();
+
+  const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto();
+
   const [ttl, setTtl] = useUserTransactionTTL();
   const { onChangeRecipient } = useSwapActionHandlers();
   const [expertMode, toggleExpertMode] = useExpertModeManager();
@@ -84,18 +88,24 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
     deadlineInput === '' || (ttl / 60).toString() === deadlineInput;
 
   const slippageError = useMemo(() => {
+    if (userSlippageAuto) {
+      return undefined;
+    }
     if (slippageInput !== '' && !slippageInputIsValid) {
       return SlippageError.InvalidInput;
-    } else if (userSlippageTolerance === SLIPPAGE_AUTO) {
-      return undefined;
     } else if (slippageInputIsValid && userSlippageTolerance < 50) {
       return SlippageError.RiskyLow;
     } else if (slippageInputIsValid && userSlippageTolerance > 500) {
       return SlippageError.RiskyHigh;
     } else {
       return undefined;
     }
-  }, [slippageInput, userSlippageTolerance, slippageInputIsValid]);
+  }, [
+    slippageInput,
+    userSlippageTolerance,
+    slippageInputIsValid,
+    userSlippageAuto,
+  ]);
 
   const slippageAlert =
     !!slippageInput &&
@@ -112,7 +122,6 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
 
   const parseCustomSlippage = (value: string) => {
     setSlippageInput(value);
-
     try {
       const valueAsIntFromRoundedFloat = Number.parseInt(
         (Number.parseFloat(value) * 100).toString(),
@@ -122,6 +131,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
         valueAsIntFromRoundedFloat < 5000
       ) {
         setUserslippageTolerance(valueAsIntFromRoundedFloat);
+        setUserSlippageAuto(false);
         if (userSlippageTolerance !== valueAsIntFromRoundedFloat) {
           setSlippageManuallySet(true);
         }
@@ -198,14 +208,15 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
           <Box className='flex items-center'>
             <Box
               className={`slippageButton${
-                userSlippageTolerance === SLIPPAGE_AUTO
+                userSlippageTolerance === SLIPPAGE_DEFAULT && userSlippageAuto
                   ? ' activeSlippageButton'
                   : ''
               }`}
               onClick={() => {
                 setSlippageInput('');
-                setUserslippageTolerance(SLIPPAGE_AUTO);
-                if (userSlippageTolerance !== SLIPPAGE_AUTO) {
+                setUserslippageTolerance(SLIPPAGE_DEFAULT);
+                setUserSlippageAuto(true);
+                if (userSlippageTolerance !== SLIPPAGE_DEFAULT) {
                   setSlippageManuallySet(true);
                 }
               }}
@@ -219,6 +230,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(10);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 10) {
                   setSlippageManuallySet(true);
                 }
@@ -228,11 +240,14 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
             </Box>
             <Box
               className={`slippageButton${
-                userSlippageTolerance === 50 ? ' activeSlippageButton' : ''
+                userSlippageTolerance === 50 && !userSlippageAuto
+                  ? ' activeSlippageButton'
+                  : ''
               }`}
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(50);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 50) {
                   setSlippageManuallySet(true);
                 }
@@ -247,6 +262,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
               onClick={() => {
                 setSlippageInput('');
                 setUserslippageTolerance(100);
+                setUserSlippageAuto(false);
                 if (userSlippageTolerance !== 100) {
                   setSlippageManuallySet(true);
                 }

diff --git a/src/components/Swap/AdvancedSwapDetails.tsx b/src/components/Swap/AdvancedSwapDetails.tsx
@@ -3,7 +3,10 @@ import React, { useState } from 'react';
 import { Box } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'state/swap/actions';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import {
   computeSlippageAdjustedAmounts,
   computeTradePriceBreakdown,
@@ -17,7 +20,6 @@ import {
 import { ReactComponent as EditIcon } from 'assets/images/EditIcon.svg';
 import { formatTokenAmount } from 'utils';
 import { useDerivedSwapInfo } from 'state/swap/hooks';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 
 interface TradeSummaryProps {
   trade: Trade;
@@ -124,15 +126,14 @@ export const AdvancedSwapDetails: React.FC<AdvancedSwapDetailsProps> = ({
 }) => {
   const [allowedSlippage] = useUserSlippageTolerance();
   const { autoSlippage } = useDerivedSwapInfo();
+  const [userSlippageAuto] = useUserSlippageAuto();
 
   return (
     <>
       {trade && (
         <TradeSummary
           trade={trade}
-          allowedSlippage={
-            allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage
-          }
+          allowedSlippage={userSlippageAuto ? autoSlippage : allowedSlippage}
         />
       )}
     </>

diff --git a/src/components/Swap/BestTradeAdvancedSwapDetails.tsx b/src/components/Swap/BestTradeAdvancedSwapDetails.tsx
@@ -2,7 +2,10 @@ import { Currency, Fraction, Percent } from '@uniswap/sdk';
 import React, { useState } from 'react';
 import { Box } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import { computePriceImpact } from 'utils/prices';
 import {
   QuestionHelper,
@@ -15,7 +18,6 @@ import { basisPointsToPercent } from 'utils';
 import { OptimalRate, SwapSide } from '@paraswap/sdk';
 import { ONE } from 'v3lib/utils';
 import { useAutoSlippageToleranceBestTrade } from 'hooks/useAutoSlippageTolerance';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { InfomationHelper } from 'components/QuestionHelper';
 import { ReactComponent as SettingsIcon } from 'assets/images/icons/cog-fill.svg';
 
@@ -40,13 +42,15 @@ export const BestTradeSummary: React.FC<TradeSummaryProps> = ({
   const isExactIn = optimalRate.side === SwapSide.SELL;
   const currency = isExactIn ? outputCurrency : inputCurrency;
   const autoSlippage = useAutoSlippageToleranceBestTrade(optimalRate);
+  const [userSlippageAuto] = useUserSlippageAuto();
+
   const tradeAmount = isExactIn
     ? new Fraction(ONE)
-        .add(userSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage)
+        .add(userSlippageAuto ? autoSlippage : allowedSlippage)
         .invert()
         .multiply(optimalRate.destAmount).quotient
     : new Fraction(ONE)
-        .add(userSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage)
+        .add(userSlippageAuto ? autoSlippage : allowedSlippage)
         .multiply(optimalRate.srcAmount).quotient;
 
   return (
@@ -77,7 +81,7 @@ export const BestTradeSummary: React.FC<TradeSummaryProps> = ({
           className='swapSlippage'
         >
           <small>
-            {userSlippage === SLIPPAGE_AUTO
+            {userSlippageAuto
               ? Number(autoSlippage.toSignificant())
               : Number(allowedSlippage.toSignificant())}
             %

diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
@@ -23,6 +23,7 @@ import {
   useExpertModeManager,
   useUserSlippageTolerance,
   useAmlScore,
+  useUserSlippageAuto,
 } from 'state/user/hooks';
 import { Field, SwapDelay } from 'state/swap/actions';
 import {
@@ -67,7 +68,6 @@ import { getConfig } from 'config/index';
 import { wrappedCurrency } from 'utils/wrappedCurrency';
 import { useUSDCPriceFromAddress } from 'utils/useUSDCPrice';
 import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { useWalletInfo } from '@web3modal/ethers5/react';
 import { useAppDispatch } from 'state';
 import { updateUserBalance } from 'state/balance/actions';
@@ -152,9 +152,10 @@ const Swap: React.FC<{
     onChangeRecipient,
   } = useSwapActionHandlers();
   const { address: recipientAddress } = useENSAddress(recipient);
+  const [userSlippageAuto] = useUserSlippageAuto();
+
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
   const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
 
   const [approving, setApproving] = useState(false);

diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx
@@ -26,6 +26,7 @@ import {
   useExpertModeManager,
   useUserSlippageTolerance,
   useAmlScore,
+  useUserSlippageAuto,
 } from 'state/user/hooks';
 import { Field } from 'state/swap/actions';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -88,7 +89,6 @@ import useNativeConvertCallback, {
   ConvertType,
 } from 'hooks/useNativeConvertCallback';
 import { useApproveCallback } from 'hooks/useApproveCallback';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import arrowDown from 'assets/images/icons/arrow-down.png';
 import chart from 'assets/images/icons/chart.svg';
 import SignUp from './SignUp';
@@ -194,9 +194,10 @@ const SwapBestTrade: React.FC<{
     onSetSwapDelay,
   } = useSwapActionHandlers();
   const { address: recipientAddress } = useENSAddress(recipient);
+  const [userSlippageAuto] = useUserSlippageAuto();
+
   let [allowedSlippage] = useUserSlippageTolerance();
-  allowedSlippage =
-    allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
+  allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
   const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
 
   const pct = basisPointsToPercent(allowedSlippage);

diff --git a/src/components/Swap/orbs/LiquidityHub/Components.tsx b/src/components/Swap/orbs/LiquidityHub/Components.tsx
@@ -3,10 +3,12 @@ import { Box, Divider } from '@material-ui/core';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as PriceExchangeIcon } from 'assets/images/PriceExchangeIcon.svg';
-import { useUserSlippageTolerance } from 'state/user/hooks';
+import {
+  useUserSlippageAuto,
+  useUserSlippageTolerance,
+} from 'state/user/hooks';
 import { FormattedPriceImpact } from 'components/ConfirmSwapModal';
 import SettingsModal from 'components/SettingsModal';
-import { SLIPPAGE_AUTO } from 'state/user/reducer';
 import { Quote } from '@orbs-network/liquidity-hub-sdk';
 import { useDerivedSwapInfo } from 'state/swap/hooks';
 import useUSDCPrice from 'utils/useUSDCPrice';
@@ -231,6 +233,7 @@ const Slippage = () => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
   const [userSlippage] = useUserSlippageTolerance();
+  const [userSlippageAuto] = useUserSlippageAuto();
 
   return (
     <>
@@ -240,7 +243,7 @@ const Slippage = () => {
           <small>{t('slippage')}</small>
         </Box>
         <Box onClick={() => setOpen(true)} className='swapSlippage'>
-          <small>{userSlippage === SLIPPAGE_AUTO ? 0.5 : userSlippage}%</small>
+          <small>{userSlippageAuto ? 0.5 : userSlippage}%</small>
           <SettingsIcon />
         </Box>
       </Box>

diff --git a/src/pages/PoolsPage/SupplyLiquidity.tsx b/src/pages/PoolsPage/SupplyLiquidity.tsx
@@ -3,6 +3,7 @@ import { Box } from '@material-ui/core';
 import { ReactComponent as SettingsIcon } from 'assets/images/SettingsIcon.svg';
 import { QuestionHelper, SettingsModal } from 'components';
 import { useTranslation } from 'react-i18next';
+import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
 const AddLiquidity = lazy(() => import('components/AddLiquidity'));
 
 const SupplyLiquidity: React.FC = () => {
@@ -15,7 +16,7 @@ const SupplyLiquidity: React.FC = () => {
         <SettingsModal
           open={openSettingsModal}
           onClose={() => setOpenSettingsModal(false)}
-          defaultSlippage={50}
+          defaultSlippage={SLIPPAGE_DEFAULT}
         />
       )}
       <Box className='flex justify-between items-center'>

diff --git a/src/pages/PoolsPage/v3/SupplyLiquidityV3/index.tsx b/src/pages/PoolsPage/v3/SupplyLiquidityV3/index.tsx
@@ -46,6 +46,7 @@ import { SelectDepositType } from 'pages/PoolsPage/v3/SupplyLiquidityV3/containe
 import { useSingleTokenVault } from 'state/singleToken/hooks';
 import { SingleTokenSupplyLiquidity } from 'pages/PoolsPage/SingleToken/SupplyLiquidity';
 import { getConfig } from 'config/index';
+import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
 
 const useStyles = makeStyles(() => ({
   formControl: {
@@ -352,7 +353,7 @@ export function SupplyLiquidityV3() {
         <SettingsModal
           open={openSettingsModal}
           onClose={() => setOpenSettingsModal(false)}
-          defaultSlippage={50}
+          defaultSlippage={SLIPPAGE_DEFAULT}
         />
       )}
       <Box className='flex justify-between items-center'>