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,