feat(checkout): Show price impact message (#2648)

keithbro-imx · web-flow · commit 00e74eddc113 · 2025-06-06T00:11:10.000Z
diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx
@@ -54,6 +54,8 @@ import { TransactionRejected } from '../../../components/TransactionRejected/Tra
 import { Fees } from './Fees';
 import { useCryptoUSDConversion } from '../../../lib/hooks/useCryptoUSDConversion';
 
+const MAX_PRICE_IMPACT_PERCENTAGE = 15;
+
 enum SwapDirection {
   FROM = 'FROM',
   TO = 'TO',
@@ -75,6 +77,13 @@ export interface SwapFromProps {
   cancelAutoProceed: () => void;
 }
 
+class PriceImpactError extends Error {
+  constructor(readonly priceImpact: number) {
+    super(`Price impact is too high: ${priceImpact}`);
+    this.name = 'PriceImpactError';
+  }
+}
+
 export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
   const { t } = useTranslation();
   const {
@@ -122,7 +131,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   // Quote
   const [quote, setQuote] = useState<TransactionResponse | null>(null);
-  const [quoteError, setQuoteError] = useState<string>('');
+  const [quoteError, setQuoteError] = useState<Error | null>(null);
   const [gasFeeValue, setGasFeeValue] = useState<string>('');
   const [gasFeeToken, setGasFeeToken] = useState<TokenInfo | undefined>(undefined);
 
@@ -223,7 +232,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
   ]);
 
   const onQuoteError = useCallback((error: any) => {
-    setQuoteError(error.message);
+    setQuoteError(error);
     track({
       userJourney: UserJourney.SWAP,
       screen: 'SwapCoins',
@@ -257,7 +266,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     setFromTokenError('');
     setToAmountError('');
     setToTokenError('');
-    setQuoteError('');
+    setQuoteError(null);
   };
 
   const resetQuote = () => {
@@ -332,6 +341,10 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         ),
       );
 
+      if (Math.abs(quoteResult.quote.priceImpact) >= MAX_PRICE_IMPACT_PERCENTAGE) {
+        throw new PriceImpactError(quoteResult.quote.priceImpact);
+      }
+
       resetFormErrors();
     } catch (error: any) {
       if (!error.cancelled) {
@@ -405,11 +418,15 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         ),
       );
 
+      if (Math.abs(quoteResult.quote.priceImpact) >= MAX_PRICE_IMPACT_PERCENTAGE) {
+        throw new PriceImpactError(quoteResult.quote.priceImpact);
+      }
+
       resetFormErrors();
     } catch (error: any) {
       if (!error.cancelled) {
         resetQuote();
-        onQuoteError(error);
+        onQuoteError(error instanceof Error ? error : new Error(error));
       }
     }
 
@@ -1078,10 +1095,13 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
             }}
             rc={<div />}
           >
-            Unable to swap this token
+            {quoteError instanceof PriceImpactError ? 'High Price impact' : 'Unable to swap this token'}
           </Body>
           <Body size="xxSmall">
-            This token pairing isn&apos;t available to swap right now. Try another selection.
+            {quoteError instanceof PriceImpactError
+              // eslint-disable-next-line max-len, @typescript-eslint/quotes
+              ? `Your swap amount is too large for current market conditions. This means you'd get a less favorable exchange rate. Try a smaller amount.`
+              : 'This token pairing is not available to swap right now. Try another selection.'}
           </Body>
         </Box>
       )}
