diff --git a/src/components/PriceImpactWarning.tsx b/src/components/PriceImpactWarning.tsx index 4503a39e..c9776d75 100644 --- a/src/components/PriceImpactWarning.tsx +++ b/src/components/PriceImpactWarning.tsx @@ -2,9 +2,13 @@ import { useDisclosureKey } from "@/context/disclosures"; interface Props { onGoBack: () => void; + warningMessage?: string; } -export const PriceImpactWarning = ({ onGoBack }: Props) => { +export const PriceImpactWarning = ({ + onGoBack, + warningMessage = "", +}: Props) => { const [isOpen, control] = useDisclosureKey("priceImpactWarning"); if (!isOpen) return null; @@ -31,8 +35,8 @@ export const PriceImpactWarning = ({ onGoBack }: Props) => {
Price Impact Warning
-- This route has a high price impact. Do you want to continue? +
+ {warningMessage} Do you want to continue?
diff --git a/src/components/SwapWidget/useSwapWidget.ts b/src/components/SwapWidget/useSwapWidget.ts
index f46d92e2..d2bf4374 100644
--- a/src/components/SwapWidget/useSwapWidget.ts
+++ b/src/components/SwapWidget/useSwapWidget.ts
@@ -13,7 +13,7 @@ import { useBalancesByChain } from "@/utils/utils";
export const LAST_SOURCE_CHAIN_KEY = "IBC_DOT_FUN_LAST_SOURCE_CHAIN";
-export const PRICE_IMPACT_THRESHOLD = 0.01;
+export const PRICE_IMPACT_THRESHOLD = 0.1;
export function useSwapWidget() {
const {
@@ -186,6 +186,71 @@ export function useSwapWidget() {
return swapPriceImpactPercent > PRICE_IMPACT_THRESHOLD;
}, [swapPriceImpactPercent]);
+ const usdDiffPercent = useMemo(() => {
+ // if (route?.usdAmountIn && route?.usdAmountOut) {
+ // usdDiffPercent =
+ // (parseFloat(route.usdAmountOut) - parseFloat(route.usdAmountIn)) /
+ // parseFloat(route.usdAmountIn);
+ // }
+
+ if (!routeResponse) {
+ return undefined;
+ }
+
+ if (!routeResponse.usdAmountIn || !routeResponse.usdAmountOut) {
+ return undefined;
+ }
+
+ const usdAmountIn = parseFloat(routeResponse.usdAmountIn);
+ const usdAmountOut = parseFloat(routeResponse.usdAmountOut);
+
+ return (usdAmountOut - usdAmountIn) / usdAmountIn;
+ }, [routeResponse]);
+
+ console.log(usdDiffPercent);
+
+ const routeWarning = useMemo(() => {
+ if (!routeResponse) {
+ return undefined;
+ }
+
+ if (
+ !routeResponse.swapPriceImpactPercent &&
+ (!routeResponse.usdAmountIn || !routeResponse.usdAmountOut)
+ ) {
+ return "We were unable to calculate the price impact of this route.";
+ }
+
+ if (usdDiffPercent && Math.abs(usdDiffPercent) > PRICE_IMPACT_THRESHOLD) {
+ const amountInUSD = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(parseFloat(routeResponse.usdAmountIn ?? "0"));
+
+ const amountOutUSD = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(parseFloat(routeResponse.usdAmountOut ?? "0"));
+
+ const formattedUsdDiffPercent = new Intl.NumberFormat("en-US", {
+ style: "percent",
+ maximumFractionDigits: 2,
+ }).format(Math.abs(usdDiffPercent));
+ return `Your estimated output value (${amountOutUSD}) is ${formattedUsdDiffPercent} lower than your estimated input value (${amountInUSD}).`;
+ }
+
+ if (
+ swapPriceImpactPercent &&
+ swapPriceImpactPercent > PRICE_IMPACT_THRESHOLD
+ ) {
+ const formattedPriceImpact = new Intl.NumberFormat("en-US", {
+ style: "percent",
+ maximumFractionDigits: 2,
+ }).format(swapPriceImpactPercent);
+ return `Your swap is expected to execute at a ${formattedPriceImpact} worse price than the current estimated on-chain price. It's likely there's not much liquidity available for this swap.`;
+ }
+ }, [routeResponse, swapPriceImpactPercent, usdDiffPercent]);
+
return {
amountIn,
amountOut,
@@ -207,6 +272,7 @@ export function useSwapWidget() {
routeError: errorMessage,
swapPriceImpactPercent,
priceImpactThresholdReached,
+ routeWarning,
};
}
diff --git a/src/components/TransactionDialog/index.tsx b/src/components/TransactionDialog/index.tsx
index c478dffe..ef3cba6a 100644
--- a/src/components/TransactionDialog/index.tsx
+++ b/src/components/TransactionDialog/index.tsx
@@ -14,6 +14,7 @@ interface Props {
transactionCount: number;
insufficientBalance?: boolean;
shouldShowPriceImpactWarning?: boolean;
+ routeWarning?: string;
}
const TransactionDialog: FC