Skip to content

Commit 9a75562

Browse files
sameepsisameepsi
authored
Merge pull request #1655 from QuickSwap/fix-slippage-auto
Update the slippage flow for auto
2 parents 3214ec2 + 5db5f48 commit 9a75562

16 files changed

Lines changed: 132 additions & 58 deletions

File tree

‎src/components/AddLiquidity/AddLiquidity.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
useIsExpertMode,
4141
useUserSlippageTolerance,
4242
useAmlScore,
43+
useUserSlippageAuto,
4344
} from 'state/user/hooks';
4445
import {
4546
maxAmountSpend,
@@ -57,7 +58,6 @@ import { useDerivedSwapInfo } from 'state/swap/hooks';
5758
import { useParams } from 'react-router-dom';
5859
import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
5960
import usePoolsRedirect from 'hooks/usePoolsRedirect';
60-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
6161
import { TransactionType } from 'models/enums';
6262

6363
const AddLiquidity: React.FC<{
@@ -78,9 +78,9 @@ const AddLiquidity: React.FC<{
7878
const [showConfirm, setShowConfirm] = useState(false);
7979
const [attemptingTxn, setAttemptingTxn] = useState(false);
8080
const [txPending, setTxPending] = useState(false);
81+
const [userSlippageAuto] = useUserSlippageAuto();
8182
let [allowedSlippage] = useUserSlippageTolerance();
82-
allowedSlippage =
83-
allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
83+
allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
8484

8585
const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
8686

‎src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ import {
2222
useBurnActionHandlers,
2323
} from 'state/burn/hooks';
2424
import { Field } from 'state/burn/actions';
25-
import { useUserSlippageTolerance } from 'state/user/hooks';
25+
import {
26+
useUserSlippageAuto,
27+
useUserSlippageTolerance,
28+
} from 'state/user/hooks';
2629
import {
2730
useTransactionAdder,
2831
useTransactionFinalizer,
@@ -46,7 +49,6 @@ import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
4649
import 'components/styles/RemoveLiquidityModal.scss';
4750
import { useTranslation } from 'react-i18next';
4851
import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
49-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
5052
import { TransactionType } from 'models/enums';
5153

5254
interface RemoveLiquidityModalProps {
@@ -90,10 +92,10 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
9092
const deadline = useTransactionDeadline();
9193
const { onUserInput: _onUserInput } = useBurnActionHandlers();
9294
const { autoSlippage } = useDerivedSwapInfo();
95+
const [userSlippageAuto] = useUserSlippageAuto();
9396

9497
let [allowedSlippage] = useUserSlippageTolerance();
95-
allowedSlippage =
96-
allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
98+
allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
9799

98100
const onUserInput = useCallback(
99101
(field: Field, typedValue: string) => {

‎src/components/SettingsModal/SettingsModal.tsx‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ import {
1515
useUserSlippageTolerance,
1616
useBonusRouterManager,
1717
useSlippageManuallySet,
18+
useUserSlippageAuto,
1819
useUserSingleHopOnly,
1920
useIsInfiniteApproval,
2021
} from 'state/user/hooks';
2122
import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
2223
import 'components/styles/SettingsModal.scss';
2324
import { useTranslation } from 'react-i18next';
24-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
25+
import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
2526
import { isMobile } from 'react-device-detect';
2627
import { LiquidityHubSettings } from 'components/Swap/orbs/LiquidityHub/Components';
2728

@@ -64,6 +65,9 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
6465
slippageManuallySet,
6566
setSlippageManuallySet,
6667
] = useSlippageManuallySet();
68+
69+
const [userSlippageAuto, setUserSlippageAuto] = useUserSlippageAuto();
70+
6771
const [ttl, setTtl] = useUserTransactionTTL();
6872
const { onChangeRecipient } = useSwapActionHandlers();
6973
const [expertMode, toggleExpertMode] = useExpertModeManager();
@@ -84,18 +88,24 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
8488
deadlineInput === '' || (ttl / 60).toString() === deadlineInput;
8589

8690
const slippageError = useMemo(() => {
91+
if (userSlippageAuto) {
92+
return undefined;
93+
}
8794
if (slippageInput !== '' && !slippageInputIsValid) {
8895
return SlippageError.InvalidInput;
89-
} else if (userSlippageTolerance === SLIPPAGE_AUTO) {
90-
return undefined;
9196
} else if (slippageInputIsValid && userSlippageTolerance < 50) {
9297
return SlippageError.RiskyLow;
9398
} else if (slippageInputIsValid && userSlippageTolerance > 500) {
9499
return SlippageError.RiskyHigh;
95100
} else {
96101
return undefined;
97102
}
98-
}, [slippageInput, userSlippageTolerance, slippageInputIsValid]);
103+
}, [
104+
slippageInput,
105+
userSlippageTolerance,
106+
slippageInputIsValid,
107+
userSlippageAuto,
108+
]);
99109

100110
const slippageAlert =
101111
!!slippageInput &&
@@ -112,7 +122,6 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
112122

113123
const parseCustomSlippage = (value: string) => {
114124
setSlippageInput(value);
115-
116125
try {
117126
const valueAsIntFromRoundedFloat = Number.parseInt(
118127
(Number.parseFloat(value) * 100).toString(),
@@ -122,6 +131,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
122131
valueAsIntFromRoundedFloat < 5000
123132
) {
124133
setUserslippageTolerance(valueAsIntFromRoundedFloat);
134+
setUserSlippageAuto(false);
125135
if (userSlippageTolerance !== valueAsIntFromRoundedFloat) {
126136
setSlippageManuallySet(true);
127137
}
@@ -198,14 +208,15 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
198208
<Box className='flex items-center'>
199209
<Box
200210
className={`slippageButton${
201-
userSlippageTolerance === SLIPPAGE_AUTO
211+
userSlippageTolerance === SLIPPAGE_DEFAULT && userSlippageAuto
202212
? ' activeSlippageButton'
203213
: ''
204214
}`}
205215
onClick={() => {
206216
setSlippageInput('');
207-
setUserslippageTolerance(SLIPPAGE_AUTO);
208-
if (userSlippageTolerance !== SLIPPAGE_AUTO) {
217+
setUserslippageTolerance(SLIPPAGE_DEFAULT);
218+
setUserSlippageAuto(true);
219+
if (userSlippageTolerance !== SLIPPAGE_DEFAULT) {
209220
setSlippageManuallySet(true);
210221
}
211222
}}
@@ -219,6 +230,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
219230
onClick={() => {
220231
setSlippageInput('');
221232
setUserslippageTolerance(10);
233+
setUserSlippageAuto(false);
222234
if (userSlippageTolerance !== 10) {
223235
setSlippageManuallySet(true);
224236
}
@@ -228,11 +240,14 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
228240
</Box>
229241
<Box
230242
className={`slippageButton${
231-
userSlippageTolerance === 50 ? ' activeSlippageButton' : ''
243+
userSlippageTolerance === 50 && !userSlippageAuto
244+
? ' activeSlippageButton'
245+
: ''
232246
}`}
233247
onClick={() => {
234248
setSlippageInput('');
235249
setUserslippageTolerance(50);
250+
setUserSlippageAuto(false);
236251
if (userSlippageTolerance !== 50) {
237252
setSlippageManuallySet(true);
238253
}
@@ -247,6 +262,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
247262
onClick={() => {
248263
setSlippageInput('');
249264
setUserslippageTolerance(100);
265+
setUserSlippageAuto(false);
250266
if (userSlippageTolerance !== 100) {
251267
setSlippageManuallySet(true);
252268
}

‎src/components/Swap/AdvancedSwapDetails.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import React, { useState } from 'react';
33
import { Box } from '@material-ui/core';
44
import { useTranslation } from 'react-i18next';
55
import { Field } from 'state/swap/actions';
6-
import { useUserSlippageTolerance } from 'state/user/hooks';
6+
import {
7+
useUserSlippageAuto,
8+
useUserSlippageTolerance,
9+
} from 'state/user/hooks';
710
import {
811
computeSlippageAdjustedAmounts,
912
computeTradePriceBreakdown,
@@ -17,7 +20,6 @@ import {
1720
import { ReactComponent as EditIcon } from 'assets/images/EditIcon.svg';
1821
import { formatTokenAmount } from 'utils';
1922
import { useDerivedSwapInfo } from 'state/swap/hooks';
20-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
2123

2224
interface TradeSummaryProps {
2325
trade: Trade;
@@ -124,15 +126,14 @@ export const AdvancedSwapDetails: React.FC<AdvancedSwapDetailsProps> = ({
124126
}) => {
125127
const [allowedSlippage] = useUserSlippageTolerance();
126128
const { autoSlippage } = useDerivedSwapInfo();
129+
const [userSlippageAuto] = useUserSlippageAuto();
127130

128131
return (
129132
<>
130133
{trade && (
131134
<TradeSummary
132135
trade={trade}
133-
allowedSlippage={
134-
allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage
135-
}
136+
allowedSlippage={userSlippageAuto ? autoSlippage : allowedSlippage}
136137
/>
137138
)}
138139
</>

‎src/components/Swap/BestTradeAdvancedSwapDetails.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import { Currency, Fraction, Percent } from '@uniswap/sdk';
22
import React, { useState } from 'react';
33
import { Box } from '@material-ui/core';
44
import { useTranslation } from 'react-i18next';
5-
import { useUserSlippageTolerance } from 'state/user/hooks';
5+
import {
6+
useUserSlippageAuto,
7+
useUserSlippageTolerance,
8+
} from 'state/user/hooks';
69
import { computePriceImpact } from 'utils/prices';
710
import {
811
QuestionHelper,
@@ -15,7 +18,6 @@ import { basisPointsToPercent } from 'utils';
1518
import { OptimalRate, SwapSide } from '@paraswap/sdk';
1619
import { ONE } from 'v3lib/utils';
1720
import { useAutoSlippageToleranceBestTrade } from 'hooks/useAutoSlippageTolerance';
18-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
1921
import { InfomationHelper } from 'components/QuestionHelper';
2022
import { ReactComponent as SettingsIcon } from 'assets/images/icons/cog-fill.svg';
2123

@@ -40,13 +42,15 @@ export const BestTradeSummary: React.FC<TradeSummaryProps> = ({
4042
const isExactIn = optimalRate.side === SwapSide.SELL;
4143
const currency = isExactIn ? outputCurrency : inputCurrency;
4244
const autoSlippage = useAutoSlippageToleranceBestTrade(optimalRate);
45+
const [userSlippageAuto] = useUserSlippageAuto();
46+
4347
const tradeAmount = isExactIn
4448
? new Fraction(ONE)
45-
.add(userSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage)
49+
.add(userSlippageAuto ? autoSlippage : allowedSlippage)
4650
.invert()
4751
.multiply(optimalRate.destAmount).quotient
4852
: new Fraction(ONE)
49-
.add(userSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage)
53+
.add(userSlippageAuto ? autoSlippage : allowedSlippage)
5054
.multiply(optimalRate.srcAmount).quotient;
5155

5256
return (
@@ -77,7 +81,7 @@ export const BestTradeSummary: React.FC<TradeSummaryProps> = ({
7781
className='swapSlippage'
7882
>
7983
<small>
80-
{userSlippage === SLIPPAGE_AUTO
84+
{userSlippageAuto
8185
? Number(autoSlippage.toSignificant())
8286
: Number(allowedSlippage.toSignificant())}
8387
%

‎src/components/Swap/Swap.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
useExpertModeManager,
2424
useUserSlippageTolerance,
2525
useAmlScore,
26+
useUserSlippageAuto,
2627
} from 'state/user/hooks';
2728
import { Field, SwapDelay } from 'state/swap/actions';
2829
import {
@@ -67,7 +68,6 @@ import { getConfig } from 'config/index';
6768
import { wrappedCurrency } from 'utils/wrappedCurrency';
6869
import { useUSDCPriceFromAddress } from 'utils/useUSDCPrice';
6970
import { V2_ROUTER_ADDRESS } from 'constants/v3/addresses';
70-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
7171
import { useWalletInfo } from '@web3modal/ethers5/react';
7272
import { useAppDispatch } from 'state';
7373
import { updateUserBalance } from 'state/balance/actions';
@@ -152,9 +152,10 @@ const Swap: React.FC<{
152152
onChangeRecipient,
153153
} = useSwapActionHandlers();
154154
const { address: recipientAddress } = useENSAddress(recipient);
155+
const [userSlippageAuto] = useUserSlippageAuto();
156+
155157
let [allowedSlippage] = useUserSlippageTolerance();
156-
allowedSlippage =
157-
allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
158+
allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
158159
const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
159160

160161
const [approving, setApproving] = useState(false);

‎src/components/Swap/SwapBestTrade.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
useExpertModeManager,
2727
useUserSlippageTolerance,
2828
useAmlScore,
29+
useUserSlippageAuto,
2930
} from 'state/user/hooks';
3031
import { Field } from 'state/swap/actions';
3132
import { useHistory, useLocation } from 'react-router-dom';
@@ -88,7 +89,6 @@ import useNativeConvertCallback, {
8889
ConvertType,
8990
} from 'hooks/useNativeConvertCallback';
9091
import { useApproveCallback } from 'hooks/useApproveCallback';
91-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
9292
import arrowDown from 'assets/images/icons/arrow-down.png';
9393
import chart from 'assets/images/icons/chart.svg';
9494
import SignUp from './SignUp';
@@ -194,9 +194,10 @@ const SwapBestTrade: React.FC<{
194194
onSetSwapDelay,
195195
} = useSwapActionHandlers();
196196
const { address: recipientAddress } = useENSAddress(recipient);
197+
const [userSlippageAuto] = useUserSlippageAuto();
198+
197199
let [allowedSlippage] = useUserSlippageTolerance();
198-
allowedSlippage =
199-
allowedSlippage === SLIPPAGE_AUTO ? autoSlippage : allowedSlippage;
200+
allowedSlippage = userSlippageAuto ? autoSlippage : allowedSlippage;
200201
const { isLoading: isAmlScoreLoading, score: amlScore } = useAmlScore();
201202

202203
const pct = basisPointsToPercent(allowedSlippage);

‎src/components/Swap/orbs/LiquidityHub/Components.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { Box, Divider } from '@material-ui/core';
33
import { useCallback, useMemo, useState } from 'react';
44
import { useTranslation } from 'react-i18next';
55
import { ReactComponent as PriceExchangeIcon } from 'assets/images/PriceExchangeIcon.svg';
6-
import { useUserSlippageTolerance } from 'state/user/hooks';
6+
import {
7+
useUserSlippageAuto,
8+
useUserSlippageTolerance,
9+
} from 'state/user/hooks';
710
import { FormattedPriceImpact } from 'components/ConfirmSwapModal';
811
import SettingsModal from 'components/SettingsModal';
9-
import { SLIPPAGE_AUTO } from 'state/user/reducer';
1012
import { Quote } from '@orbs-network/liquidity-hub-sdk';
1113
import { useDerivedSwapInfo } from 'state/swap/hooks';
1214
import useUSDCPrice from 'utils/useUSDCPrice';
@@ -231,6 +233,7 @@ const Slippage = () => {
231233
const [open, setOpen] = useState(false);
232234
const { t } = useTranslation();
233235
const [userSlippage] = useUserSlippageTolerance();
236+
const [userSlippageAuto] = useUserSlippageAuto();
234237

235238
return (
236239
<>
@@ -240,7 +243,7 @@ const Slippage = () => {
240243
<small>{t('slippage')}</small>
241244
</Box>
242245
<Box onClick={() => setOpen(true)} className='swapSlippage'>
243-
<small>{userSlippage === SLIPPAGE_AUTO ? 0.5 : userSlippage}%</small>
246+
<small>{userSlippageAuto ? 0.5 : userSlippage}%</small>
244247
<SettingsIcon />
245248
</Box>
246249
</Box>

‎src/pages/PoolsPage/SupplyLiquidity.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Box } from '@material-ui/core';
33
import { ReactComponent as SettingsIcon } from 'assets/images/SettingsIcon.svg';
44
import { QuestionHelper, SettingsModal } from 'components';
55
import { useTranslation } from 'react-i18next';
6+
import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
67
const AddLiquidity = lazy(() => import('components/AddLiquidity'));
78

89
const SupplyLiquidity: React.FC = () => {
@@ -15,7 +16,7 @@ const SupplyLiquidity: React.FC = () => {
1516
<SettingsModal
1617
open={openSettingsModal}
1718
onClose={() => setOpenSettingsModal(false)}
18-
defaultSlippage={50}
19+
defaultSlippage={SLIPPAGE_DEFAULT}
1920
/>
2021
)}
2122
<Box className='flex justify-between items-center'>

‎src/pages/PoolsPage/v3/SupplyLiquidityV3/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import { SelectDepositType } from 'pages/PoolsPage/v3/SupplyLiquidityV3/containe
4646
import { useSingleTokenVault } from 'state/singleToken/hooks';
4747
import { SingleTokenSupplyLiquidity } from 'pages/PoolsPage/SingleToken/SupplyLiquidity';
4848
import { getConfig } from 'config/index';
49+
import { SLIPPAGE_DEFAULT } from 'state/user/reducer';
4950

5051
const useStyles = makeStyles(() => ({
5152
formControl: {
@@ -352,7 +353,7 @@ export function SupplyLiquidityV3() {
352353
<SettingsModal
353354
open={openSettingsModal}
354355
onClose={() => setOpenSettingsModal(false)}
355-
defaultSlippage={50}
356+
defaultSlippage={SLIPPAGE_DEFAULT}
356357
/>
357358
)}
358359
<Box className='flex justify-between items-center'>

0 commit comments

Comments
 (0)