diff --git a/.changeset/eleven-ants-knock.md b/.changeset/eleven-ants-knock.md
new file mode 100644
index 000000000..739ba287b
--- /dev/null
+++ b/.changeset/eleven-ants-knock.md
@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": minor
+---
+
+fixed bug in displaying bad price warnings
diff --git a/packages/widget/src/pages/ErrorPage/ErrorPageBadPriceWarning.tsx b/packages/widget/src/pages/ErrorPage/ErrorPageBadPriceWarning.tsx
index 37ae7a280..ad3a61cdf 100644
--- a/packages/widget/src/pages/ErrorPage/ErrorPageBadPriceWarning.tsx
+++ b/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
+
+ Input: {sourceDetails?.amount} {sourceDetails?.symbol} ({usdAmountIn})
+
+ 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.
+
+ >
+ ),
+ };
+ }
+ return {
+ title: "Warning: Bad Trade",
+ descriptionContent: (
+ <>
+ This trade may result in a poor execution price. Please verify the amounts carefully.
+
+ >
+ ),
+ };
+ }, [
+ destinationDetails?.amount,
+ destinationDetails?.symbol,
+ hasUsdValues,
+ priceImpactPercentage,
+ sourceDetails?.amount,
+ sourceDetails?.symbol,
+ swapDifferencePercentage,
+ usdAmountIn,
+ usdAmountOut,
+ ]);
+
+ const { title, descriptionContent } = errorPageContent;
+
return (
<>
- You will lose {swapDifferencePercentage} of your input value with this trade
-
- Input: {sourceDetails?.amount} {sourceDetails?.symbol} ({usdAmountIn})
-
- Estimated output: {destinationDetails?.amount} {destinationDetails?.symbol} (
- {usdAmountOut})
+ {descriptionContent}
{
diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
index e7f56ccc7..f0274e926 100644
--- a/packages/widget/src/pages/SwapPage/SwapPage.tsx
+++ b/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,