From 531c35bc96d94d43dcad1f9746e42bf06b2d0953 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 5 Feb 2021 14:40:40 -0600
Subject: [PATCH] Ensure users reacknowledge price slippage risks when it
 changes (#10376)

---
 ui/app/pages/swaps/view-quote/view-quote.js | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index 2c5c43865..f3fd90e58 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/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 { useEqualityCheck } from '../../../hooks/useEqualityCheck';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
+import { usePrevious } from '../../../hooks/usePrevious';
 import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 import FeeCard from '../fee-card';
@@ -93,6 +94,7 @@ export default function ViewQuote() {
     acknowledgedPriceDifference,
     setAcknowledgedPriceDifference,
   ] = useState(false);
+  const priceDifferenceRiskyBuckets = ['high', 'medium'];
 
   const routeState = useSelector(getBackgroundSwapRouteState);
   const quotes = useSelector(getQuotes, isEqual);
@@ -481,6 +483,24 @@ export default function ViewQuote() {
   ]);
 
   // 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;
   const priceSlippageFromSource = useEthFiatAmount(
     usedQuote?.priceSlippage?.sourceAmountInETH || 0,
@@ -510,7 +530,7 @@ export default function ViewQuote() {
   const shouldShowPriceDifferenceWarning =
     !showInsufficientWarning &&
     usedQuote &&
-    (['high', 'medium'].includes(usedQuote.priceSlippage.bucket) ||
+    (priceDifferenceRiskyBuckets.includes(priceSlippageBucket) ||
       priceSlippageUnknownFiatValue);
 
   if (shouldShowPriceDifferenceWarning) {