[FRE-1641] Improve Bad Price Error Handling

.changeset/eleven-ants-knock.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": minor
+---
+
+fixed bug in displaying bad price warnings

packages/widget/src/pages/ErrorPage/ErrorPageBadPriceWarning.tsx

@@ -8,6 +8,7 @@ import { RouteResponse } from "@skip-go/client";
 import { useTheme } from "styled-components";
 import { SwapPageHeader } from "../SwapPage/SwapPageHeader";
 import { track } from "@amplitude/analytics-browser";
+import { useMemo } from "react";
 
 export type ErrorPageBadPriceWarningProps = {
   onClickContinue: () => void;
@@ -32,11 +33,21 @@ export const ErrorPageBadPriceWarning = ({
     destAssetChainID,
   } = route;
 
-  const swapDifferencePercentage = `${calculatePercentageChange(
-    usdAmountIn ?? 0,
-    usdAmountOut ?? 0,
-    true,
-  )}%`;
+  const hasUsdValues =
+    usdAmountIn &&
+    usdAmountOut &&
+    parseFloat(usdAmountIn) > 0 &&
+    parseFloat(usdAmountOut) > 0;
+
+  const swapDifferencePercentage = hasUsdValues
+    ? `${calculatePercentageChange(usdAmountIn, usdAmountOut, true)}%`
+    : null;
+
+  const priceImpactPercentage = useMemo(() => {
+    const impactString = route.swapPriceImpactPercent;
+    if (!impactString) return null;
+    return `${parseFloat(impactString).toFixed(2)}%`;
+  }, [route.swapPriceImpactPercent]);
 
   const sourceDetails = useGetAssetDetails({
     assetDenom: sourceAssetDenom,
@@ -49,6 +60,55 @@ export const ErrorPageBadPriceWarning = ({
     tokenAmount: amountOut,
   });
 
+  const errorPageContent = useMemo(() => {
+    if (hasUsdValues && swapDifferencePercentage) {
+      return {
+        title: `Warning: Bad trade (-${swapDifferencePercentage})`,
+        descriptionContent: (
+          <>
+            You will lose {swapDifferencePercentage} of your input value with this trade
+            <br />
+            Input: {sourceDetails?.amount} {sourceDetails?.symbol} ({usdAmountIn})
+            <br />
+            Estimated output: {destinationDetails?.amount} {destinationDetails?.symbol} ({usdAmountOut})
+          </>
+        ),
+      };
+    }
+    if (priceImpactPercentage) {
+      return {
+        title: `Warning: High Price Impact (${priceImpactPercentage})`,
+        descriptionContent: (
+          <>
+            Executing this trade is expected to impact the price by {priceImpactPercentage}. Please verify the amounts.
+            <br />
+          </>
+        ),
+      };
+    }
+    return {
+      title: "Warning: Bad Trade",
+      descriptionContent: (
+        <>
+          This trade may result in a poor execution price. Please verify the amounts carefully.
+          <br />
+        </>
+      ),
+    };
+  }, [
+    destinationDetails?.amount,
+    destinationDetails?.symbol,
+    hasUsdValues,
+    priceImpactPercentage,
+    sourceDetails?.amount,
+    sourceDetails?.symbol,
+    swapDifferencePercentage,
+    usdAmountIn,
+    usdAmountOut,
+  ]);
+
+  const { title, descriptionContent } = errorPageContent;
+
   return (
     <>
       <SwapPageHeader
@@ -62,16 +122,11 @@ export const ErrorPageBadPriceWarning = ({
         }}
       />
       <ErrorPageContent
-        title={`Warning: Bad trade (-${swapDifferencePercentage})`}
+        title={title}
         description={
           <>
             <SmallText color={theme.error.text} textAlign="center" textWrap="balance">
-              You will lose {swapDifferencePercentage} of your input value with this trade
-              <br />
-              Input: {sourceDetails?.amount} {sourceDetails?.symbol} ({usdAmountIn})
-              <br />
-              Estimated output: {destinationDetails?.amount} {destinationDetails?.symbol} (
-              {usdAmountOut})
+              {descriptionContent}
             </SmallText>
             <SmallTextButton
               onClick={() => {

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -239,7 +239,7 @@ export const SwapPage = () => {
         });
         return;
       }
-      if (route?.warning?.type === "BAD_PRICE_WARNING" && Number(priceChangePercentage ?? 0) < 0) {
+      if (route?.warning?.type === "BAD_PRICE_WARNING") {
         track("error page: bad price warning", { route });
         setError({
           errorType: ErrorType.BadPriceWarning,
@@ -323,7 +323,6 @@ export const SwapPage = () => {
     routePreference,
     slippage,
     showCosmosLedgerWarning,
-    priceChangePercentage,
     showGoFastWarning,
     isGoFast,
     setChainAddresses,