From 597cc7e3f7d0f506b951ead0f027a88fe67d77c6 Mon Sep 17 00:00:00 2001 From: brianshattuck Date: Thu, 23 Jan 2025 06:59:35 -0800 Subject: [PATCH] Fix Slippage for auto --- src/components/AddLiquidity/AddLiquidity.tsx | 6 ++-- .../RemoveLiquidityModal.tsx | 10 +++--- .../SettingsModal/SettingsModal.tsx | 34 ++++++++++++++----- src/components/Swap/AdvancedSwapDetails.tsx | 11 +++--- .../Swap/BestTradeAdvancedSwapDetails.tsx | 14 +++++--- src/components/Swap/Swap.tsx | 7 ++-- src/components/Swap/SwapBestTrade.tsx | 7 ++-- .../Swap/orbs/LiquidityHub/Components.tsx | 9 +++-- src/pages/PoolsPage/SupplyLiquidity.tsx | 3 +- .../PoolsPage/v3/SupplyLiquidityV3/index.tsx | 3 +- src/pages/SwapPage/SlippageWrapper.tsx | 10 +++--- src/state/swap/hooks.ts | 22 ++++++------ src/state/swap/v3/hooks.ts | 15 ++++---- src/state/user/actions.ts | 5 +++ src/state/user/hooks.tsx | 23 +++++++++++++ src/state/user/reducer.ts | 9 ++++- 16 files changed, 130 insertions(+), 58 deletions(-) diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx index 0755fb583..ed6e0b729 100755 --- 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 index 18512b89f..fc0bad457 100644 --- 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 = ({ 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 index 30ab5b873..c704f4187 100644 --- 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 = ({ slippageManuallySet, setSlippageManuallySet, ] = useSlippageManuallySet(); + + const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto(); + const [ttl, setTtl] = useUserTransactionTTL(); const { onChangeRecipient } = useSwapActionHandlers(); const [expertMode, toggleExpertMode] = useExpertModeManager(); @@ -84,10 +88,11 @@ const SettingsModal: React.FC = ({ 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) { @@ -95,7 +100,12 @@ const SettingsModal: React.FC = ({ } else { return undefined; } - }, [slippageInput, userSlippageTolerance, slippageInputIsValid]); + }, [ + slippageInput, + userSlippageTolerance, + slippageInputIsValid, + userSlippageAuto, + ]); const slippageAlert = !!slippageInput && @@ -112,7 +122,6 @@ const SettingsModal: React.FC = ({ const parseCustomSlippage = (value: string) => { setSlippageInput(value); - try { const valueAsIntFromRoundedFloat = Number.parseInt( (Number.parseFloat(value) * 100).toString(), @@ -122,6 +131,7 @@ const SettingsModal: React.FC = ({ valueAsIntFromRoundedFloat < 5000 ) { setUserslippageTolerance(valueAsIntFromRoundedFloat); + setUserSlippageAuto(false); if (userSlippageTolerance !== valueAsIntFromRoundedFloat) { setSlippageManuallySet(true); } @@ -198,14 +208,15 @@ const SettingsModal: React.FC = ({ { 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 = ({ onClick={() => { setSlippageInput(''); setUserslippageTolerance(10); + setUserSlippageAuto(false); if (userSlippageTolerance !== 10) { setSlippageManuallySet(true); } @@ -228,11 +240,14 @@ const SettingsModal: React.FC = ({ { setSlippageInput(''); setUserslippageTolerance(50); + setUserSlippageAuto(false); if (userSlippageTolerance !== 50) { setSlippageManuallySet(true); } @@ -247,6 +262,7 @@ const SettingsModal: React.FC = ({ 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 index 59537029e..e4984980c 100755 --- 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 = ({ }) => { const [allowedSlippage] = useUserSlippageTolerance(); const { autoSlippage } = useDerivedSwapInfo(); + const [userSlippageAuto] = useUserSlippageAuto(); return ( <> {trade && ( )} diff --git a/src/components/Swap/BestTradeAdvancedSwapDetails.tsx b/src/components/Swap/BestTradeAdvancedSwapDetails.tsx index 04a6c983a..d1f571aff 100644 --- 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 = ({ 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 = ({ className='swapSlippage' > - {userSlippage === SLIPPAGE_AUTO + {userSlippageAuto ? Number(autoSlippage.toSignificant()) : Number(allowedSlippage.toSignificant())} % diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx index 512fe123e..b32e39c81 100644 --- 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 index e1b6721a9..164a4782f 100644 --- 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 index 338e48a25..d00c8b662 100644 --- 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 = () => { {t('slippage')} setOpen(true)} className='swapSlippage'> - {userSlippage === SLIPPAGE_AUTO ? 0.5 : userSlippage}% + {userSlippageAuto ? 0.5 : userSlippage}% diff --git a/src/pages/PoolsPage/SupplyLiquidity.tsx b/src/pages/PoolsPage/SupplyLiquidity.tsx index dcce97e28..82fda032e 100644 --- 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 = () => { setOpenSettingsModal(false)} - defaultSlippage={50} + defaultSlippage={SLIPPAGE_DEFAULT} /> )} diff --git a/src/pages/PoolsPage/v3/SupplyLiquidityV3/index.tsx b/src/pages/PoolsPage/v3/SupplyLiquidityV3/index.tsx index 173f7fe60..098e133cf 100644 --- 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() { setOpenSettingsModal(false)} - defaultSlippage={50} + defaultSlippage={SLIPPAGE_DEFAULT} /> )} diff --git a/src/pages/SwapPage/SlippageWrapper.tsx b/src/pages/SwapPage/SlippageWrapper.tsx index 66aaf0828..b0b9d9fa9 100644 --- a/src/pages/SwapPage/SlippageWrapper.tsx +++ b/src/pages/SwapPage/SlippageWrapper.tsx @@ -1,8 +1,10 @@ import useParsedQueryString from 'hooks/useParsedQueryString'; import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useUserSlippageTolerance } from 'state/user/hooks'; -import { SLIPPAGE_AUTO } from 'state/user/reducer'; +import { + useUserSlippageAuto, + useUserSlippageTolerance, +} from 'state/user/hooks'; export const SlippageWrapper: React.FC = () => { const { t } = useTranslation(); @@ -14,6 +16,7 @@ export const SlippageWrapper: React.FC = () => { allowedSlippage, setUserSlippageTolerance, ] = useUserSlippageTolerance(); + const [userSlippageAuto] = useUserSlippageAuto(); useEffect(() => { if (swapSlippage) { @@ -24,8 +27,7 @@ export const SlippageWrapper: React.FC = () => { return ( - {allowedSlippage === SLIPPAGE_AUTO ? 'Auto' : allowedSlippage / 100 + '%'}{' '} - {t('slippage')} + {userSlippageAuto ? 'Auto' : allowedSlippage / 100 + '%'} {t('slippage')} ); }; diff --git a/src/state/swap/hooks.ts b/src/state/swap/hooks.ts index 033cbcccd..a73303210 100644 --- a/src/state/swap/hooks.ts +++ b/src/state/swap/hooks.ts @@ -34,12 +34,12 @@ import { import { SwapState } from './reducer'; import { useSlippageManuallySet, + useUserSlippageAuto, useUserSlippageTolerance, } from 'state/user/hooks'; import { computeSlippageAdjustedAmounts } from 'utils/prices'; import { GlobalData, RouterTypes, SmartRouter } from 'constants/index'; import useFindBestRoute from 'hooks/useFindBestRoute'; -import { SLIPPAGE_AUTO } from 'state/user/reducer'; import { useAutoSlippageTolerance } from 'hooks/useAutoSlippageTolerance'; import { formatAdvancedPercent } from 'utils/numbers'; @@ -262,18 +262,18 @@ export function useDerivedSwapInfo(): { setUserSlippageTolerance, ] = useUserSlippageTolerance(); const [slippageManuallySet] = useSlippageManuallySet(); + const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto(); const autoSlippageAmount = useAutoSlippageTolerance( v2Trade ? v2Trade : undefined, ); - const autoSlippage = - allowedSlippage === SLIPPAGE_AUTO - ? Math.ceil( - Number( - parseFloat(formatAdvancedPercent(autoSlippageAmount)).toFixed(2), - ) * 100, - ) - : allowedSlippage; + const autoSlippage = userSlippageAuto + ? Math.ceil( + Number( + parseFloat(formatAdvancedPercent(autoSlippageAmount)).toFixed(2), + ) * 100, + ) + : allowedSlippage; const slippageAdjustedAmounts = v2Trade && @@ -310,7 +310,8 @@ export function useDerivedSwapInfo(): { ) { setUserSlippageTolerance(10); } else { - setUserSlippageTolerance(SLIPPAGE_AUTO); + setUserSlippageTolerance(0); + setUserSlippageAuto(true); } } }, [ @@ -320,6 +321,7 @@ export function useDerivedSwapInfo(): { chainIdToUse, slippageManuallySet, swapSlippage, + setUserSlippageAuto, ]); return { diff --git a/src/state/swap/v3/hooks.ts b/src/state/swap/v3/hooks.ts index 7d21a1e11..d5c7cc0e6 100644 --- a/src/state/swap/v3/hooks.ts +++ b/src/state/swap/v3/hooks.ts @@ -34,13 +34,13 @@ import { useCurrency } from 'hooks/v3/Tokens'; import { useCurrencyBalances } from 'state/wallet/v3/hooks'; import { useSlippageManuallySet, + useUserSlippageAuto, useUserSlippageTolerance, } from 'state/user/hooks'; import { WrappedTokenInfo } from 'state/lists/v3/wrappedTokenInfo'; import { ChainId } from '@uniswap/sdk'; import { GlobalData } from 'constants/index'; import { useAutoSlippageTolerance } from 'hooks/useAutoSlippageTolerance'; -import { SLIPPAGE_AUTO } from 'state/user/reducer'; export function useSwapState(): AppState['swapV3'] { return useAppSelector((state) => { @@ -237,11 +237,12 @@ export function useDerivedSwapInfo(): { setUserSlippageTolerance, ] = useUserSlippageTolerance(); const [slippageManuallySet] = useSlippageManuallySet(); + const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto(); + const autoSlippage = useAutoSlippageTolerance(v3Trade.trade); - const allowedSlippage = - allowedSlippageNum === SLIPPAGE_AUTO - ? autoSlippage - : new Percent(JSBI.BigInt(allowedSlippageNum), JSBI.BigInt(10000)); + const allowedSlippage = userSlippageAuto + ? autoSlippage + : new Percent(JSBI.BigInt(allowedSlippageNum), JSBI.BigInt(10000)); // compare input balance to max input based on version const [balanceIn, amountIn] = [ @@ -272,7 +273,8 @@ export function useDerivedSwapInfo(): { ) { setUserSlippageTolerance(10); } else { - setUserSlippageTolerance(SLIPPAGE_AUTO); + setUserSlippageTolerance(0); + setUserSlippageAuto(true); } } }, [ @@ -282,6 +284,7 @@ export function useDerivedSwapInfo(): { chainIdToUse, slippageManuallySet, swapSlippage, + setUserSlippageAuto, ]); return { diff --git a/src/state/user/actions.ts b/src/state/user/actions.ts index 93b2022e1..cb6bae42a 100755 --- a/src/state/user/actions.ts +++ b/src/state/user/actions.ts @@ -28,6 +28,11 @@ export const updateUserSlippageTolerance = createAction<{ export const updateSlippageManuallySet = createAction<{ slippageManuallySet: boolean; }>('user/updateSlippageManuallySet'); + +export const updateUserSlippageAuto = createAction<{ + userSlippageAuto: boolean; +}>('user/updateUserSlippageAuto'); + export const updateUserDeadline = createAction<{ userDeadline: number }>( 'user/updateUserDeadline', ); diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index decc8c43a..ded41b15b 100755 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -23,6 +23,7 @@ import { updateUserZapSlippage, updateIsInfiniteApproval, updateUserAmlScore, + updateUserSlippageAuto, } from './actions'; import { V2_BASES_TO_TRACK_LIQUIDITY_FOR, @@ -164,6 +165,28 @@ export function useSlippageManuallySet(): [ return [slippageManuallySet, setSlippageManuallySet]; } +export function useUserSlippageAuto(): [ + boolean, + (userSlippageAuto: boolean) => void, +] { + const dispatch = useDispatch(); + const userSlippageAuto = useSelector< + AppState, + AppState['user']['userSlippageAuto'] + >((state) => { + return state.user.userSlippageAuto; + }); + + const setUserSlippageAuto = useCallback( + (userSlippageAuto: boolean) => { + dispatch(updateUserSlippageAuto({ userSlippageAuto })); + }, + [dispatch], + ); + + return [userSlippageAuto, setUserSlippageAuto]; +} + export function useUserTransactionTTL(): [number, (slippage: number) => void] { const dispatch = useDispatch(); const userDeadline = useSelector( diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts index a3df23094..9b62d1d76 100755 --- a/src/state/user/reducer.ts +++ b/src/state/user/reducer.ts @@ -17,6 +17,7 @@ import { updateUserSingleHopOnly, updateUserBonusRouter, updateSlippageManuallySet, + updateUserSlippageAuto, updateUserLiquidityHub, updateUserZapSlippage, updateIsInfiniteApproval, @@ -25,7 +26,7 @@ import { const currentTimestamp = () => new Date().getTime(); export const INITIAL_ZAP_SLIPPAGE = 100; -export const SLIPPAGE_AUTO = 0; +export const SLIPPAGE_DEFAULT = 50; export interface UserState { // the timestamp of the last updateVersion action @@ -39,6 +40,7 @@ export interface UserState { // user defined slippage tolerance in bips, used in all txns userSlippageTolerance: number; + userSlippageAuto: boolean; slippageManuallySet: boolean; userLiquidityHubDisabled: boolean; @@ -78,6 +80,7 @@ export const initialState: UserState = { userExpertMode: false, userBonusRouterDisabled: false, userSlippageTolerance: GlobalConst.utils.INITIAL_ALLOWED_SLIPPAGE, + userSlippageAuto: false, slippageManuallySet: false, userLiquidityHubDisabled: false, userDeadline: GlobalConst.utils.DEFAULT_DEADLINE_FROM_NOW, @@ -178,6 +181,10 @@ export default createReducer(initialState, (builder) => .addCase(updateUserBonusRouter, (state, action) => { state.userBonusRouterDisabled = action.payload.userBonusRouterDisabled; }) + .addCase(updateUserSlippageAuto, (state, action) => { + state.userSlippageAuto = action.payload.userSlippageAuto; + }) + .addCase(updateSlippageManuallySet, (state, action) => { state.slippageManuallySet = action.payload.slippageManuallySet; })