From 63817113e4864cbd3ad4aad9bc5be59807d2578c Mon Sep 17 00:00:00 2001
From: thal0x <thal0x.eth@gmail.com>
Date: Tue, 26 Dec 2023 08:50:43 -0600
Subject: [PATCH] show more info

---
 src/components/PriceImpactWarning.tsx      | 10 +++-
 src/components/SwapWidget/SwapWidget.tsx   |  2 +
 src/components/SwapWidget/useSwapWidget.ts | 68 +++++++++++++++++++++-
 src/components/TransactionDialog/index.tsx |  7 ++-
 4 files changed, 82 insertions(+), 5 deletions(-)

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) => {
             <p className="font-bold text-lg text-center text-red-500 mb-2">
               Price Impact Warning
             </p>
-            <p className="text-center text-lg max-w-72 mx-auto leading-snug text-gray-500">
-              This route has a high price impact. Do you want to continue?
+            <p className="text-center text-lg px-4 leading-snug text-gray-500">
+              {warningMessage} Do you want to continue?
             </p>
           </div>
           <div className="flex items-end gap-2">
diff --git a/src/components/SwapWidget/SwapWidget.tsx b/src/components/SwapWidget/SwapWidget.tsx
index 70ccf702..f1ef3f7e 100644
--- a/src/components/SwapWidget/SwapWidget.tsx
+++ b/src/components/SwapWidget/SwapWidget.tsx
@@ -50,6 +50,7 @@ export const SwapWidget: FC = () => {
     swapPriceImpactPercent,
     priceImpactThresholdReached,
     routeError,
+    routeWarning,
   } = useSwapWidget();
 
   let usdDiffPercent = 0.0;
@@ -269,6 +270,7 @@ export const SwapWidget: FC = () => {
                   priceImpactThresholdReached ||
                   Math.abs(usdDiffPercent * 100) > PRICE_IMPACT_THRESHOLD
                 }
+                routeWarning={routeWarning}
               />
               {insufficientBalance && (
                 <p className="text-center font-semibold text-sm text-red-500">
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<Props> = ({
@@ -22,6 +23,7 @@ const TransactionDialog: FC<Props> = ({
   insufficientBalance,
   transactionCount,
   shouldShowPriceImpactWarning,
+  routeWarning,
 }) => {
   const [hasDisplayedWarning, setHasDisplayedWarning] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -73,7 +75,10 @@ const TransactionDialog: FC<Props> = ({
           </div>
         )}
       </div>
-      <PriceImpactWarning onGoBack={() => setIsOpen(false)} />
+      <PriceImpactWarning
+        onGoBack={() => setIsOpen(false)}
+        warningMessage={routeWarning}
+      />
     </Fragment>
   );
 };