Ensure users reacknowledge price slippage risks when it changes (#10376)

feature/default_network_editable
David Walsh 4 years ago committed by GitHub
parent 913fd5aad6
commit 531c35bc96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      ui/app/pages/swaps/view-quote/view-quote.js

@ -9,6 +9,7 @@ import SelectQuotePopover from '../select-quote-popover';
import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount'; import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
import { useEqualityCheck } from '../../../hooks/useEqualityCheck'; import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
import { usePrevious } from '../../../hooks/usePrevious';
import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken'; import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
import { MetaMetricsContext } from '../../../contexts/metametrics.new'; import { MetaMetricsContext } from '../../../contexts/metametrics.new';
import FeeCard from '../fee-card'; import FeeCard from '../fee-card';
@ -93,6 +94,7 @@ export default function ViewQuote() {
acknowledgedPriceDifference, acknowledgedPriceDifference,
setAcknowledgedPriceDifference, setAcknowledgedPriceDifference,
] = useState(false); ] = useState(false);
const priceDifferenceRiskyBuckets = ['high', 'medium'];
const routeState = useSelector(getBackgroundSwapRouteState); const routeState = useSelector(getBackgroundSwapRouteState);
const quotes = useSelector(getQuotes, isEqual); const quotes = useSelector(getQuotes, isEqual);
@ -481,6 +483,24 @@ export default function ViewQuote() {
]); ]);
// Price difference warning // Price difference warning
const priceSlippageBucket = usedQuote?.priceSlippage?.bucket;
const lastPriceDifferenceBucket = usePrevious(priceSlippageBucket);
// If the user agreed to a different bucket of risk, make them agree again
useEffect(() => {
if (
acknowledgedPriceDifference &&
lastPriceDifferenceBucket === 'medium' &&
priceSlippageBucket === 'high'
) {
setAcknowledgedPriceDifference(false);
}
}, [
priceSlippageBucket,
acknowledgedPriceDifference,
lastPriceDifferenceBucket,
]);
let viewQuotePriceDifferenceComponent = null; let viewQuotePriceDifferenceComponent = null;
const priceSlippageFromSource = useEthFiatAmount( const priceSlippageFromSource = useEthFiatAmount(
usedQuote?.priceSlippage?.sourceAmountInETH || 0, usedQuote?.priceSlippage?.sourceAmountInETH || 0,
@ -510,7 +530,7 @@ export default function ViewQuote() {
const shouldShowPriceDifferenceWarning = const shouldShowPriceDifferenceWarning =
!showInsufficientWarning && !showInsufficientWarning &&
usedQuote && usedQuote &&
(['high', 'medium'].includes(usedQuote.priceSlippage.bucket) || (priceDifferenceRiskyBuckets.includes(priceSlippageBucket) ||
priceSlippageUnknownFiatValue); priceSlippageUnknownFiatValue);
if (shouldShowPriceDifferenceWarning) { if (shouldShowPriceDifferenceWarning) {

Loading…
Cancel
Save