[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

@@ -32,11 +32,22 @@ 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 = (() => {
+    const impactString = route.swapPriceImpactPercent;
+    if (!impactString) return null;
+    return `${parseFloat(impactString).toFixed(2)}%`;
+  })();
 
   const sourceDetails = useGetAssetDetails({
     assetDenom: sourceAssetDenom,
@@ -49,6 +60,38 @@ export const ErrorPageBadPriceWarning = ({
     tokenAmount: amountOut,
   });
 
+  let title = "Warning: Bad Trade";
+  let descriptionContent: React.ReactNode = null;
+
+  if (hasUsdValues && swapDifferencePercentage) {
+    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})
+      </>
+    );
+  } else if (priceImpactPercentage) {
+    title = `Warning: High Price Impact (${priceImpactPercentage})`;
+    descriptionContent = (
+      <>
+        Executing this trade is expected to impact the price by {priceImpactPercentage}. Please verify the amounts.
+        <br />
+      </>
+    );
+  } else {
+    descriptionContent = (
+      <>
+        This trade may result in a poor execution price. Please verify the amounts carefully.
+        <br />
+
+      </>
+    );
+  }
+
   return (
     <>
       <SwapPageHeader
@@ -62,16 +105,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 @@
         });
         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,
@@ -306,7 +306,7 @@
         onClick={onClick}
       />
     );
   }, [
     sourceAsset?.chainID,
     sourceAsset?.amount,
     sourceAccount?.address,