Convert variants: check for large difference in amount (#3958)

osmosis-labs · Nov 18, 2024 · 3ba184a · 3ba184a
1 parent 3c202ad
commit 3ba184a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/packages/web/components/table/portfolio-asset-balances.tsx b/packages/web/components/table/portfolio-asset-balances.tsx
@@ -572,7 +572,7 @@ const AssetActionsCell: AssetCellComponent<{
       {needsActivation && (
         <Button
           variant="secondary"
-          className="max-h-12 mx-auto w-[108px] rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
+          className="max-h-12 rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -587,7 +587,7 @@ const AssetActionsCell: AssetCellComponent<{
           {showConvertButton ? (
             <Button
               variant="secondary"
-              className="max-h-12 w-[108px] rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
+              className="max-h-12 rounded-[48px] bg-osmoverse-alpha-850 hover:bg-osmoverse-alpha-800"
               onClick={(e) => {
                 e.stopPropagation();
                 e.preventDefault();

diff --git a/packages/web/hooks/__tests__/use-convert-variant.test.ts b/packages/web/hooks/__tests__/use-convert-variant.test.ts
@@ -0,0 +1,21 @@
+import { Dec } from "@keplr-wallet/unit";
+
+import { checkLargeAmountDiff } from "../use-convert-variant";
+
+describe("isLargeAmountDiff", () => {
+  test("returns false when input amount is zero", () => {
+    expect(checkLargeAmountDiff(new Dec("0"), new Dec("100"))).toBe(false);
+  });
+
+  test("returns false when output is 95% or more of input", () => {
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("95"))).toBe(false);
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("96"))).toBe(false);
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("100"))).toBe(false);
+  });
+
+  test("returns true when output is less than 95% of input", () => {
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("94"))).toBe(true);
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("90"))).toBe(true);
+    expect(checkLargeAmountDiff(new Dec("100"), new Dec("50"))).toBe(true);
+  });
+});
diff --git a/packages/web/hooks/use-convert-variant.ts b/packages/web/hooks/use-convert-variant.ts
@@ -1,3 +1,4 @@
+import { Dec } from "@keplr-wallet/unit";
 import type { AssetVariant } from "@osmosis-labs/server";
 import { getSwapMessages, type QuoteOutGivenIn } from "@osmosis-labs/tx";
 import { useCallback, useMemo } from "react";
@@ -149,13 +150,20 @@ export function useConvertVariant(
 
   const { fiatValue: feeFiatValue } = useCoinFiatValue(quote?.feeAmount);
 
+  // Check for large difference in amount of in v out
+  const isLargeAmountDiff = useMemo(() => {
+    const inAmount = variant?.amount.toDec();
+    const outAmount = quote?.amount.toDec();
+    return checkLargeAmountDiff(inAmount, outAmount);
+  }, [variant, quote?.amount]);
+
   return {
     onConvert,
     quote,
     convertFee: feeFiatValue,
     variant,
     isLoading: isQuoteLoading || isPortfolioAssetsLoading,
-    isError: isQuoteError || isPortfolioAssetsError,
+    isError: isLargeAmountDiff || isQuoteError || isPortfolioAssetsError,
     /** Is any conversion in progress. */
     isConvertingVariant: Boolean(
       account?.txTypeInProgress.startsWith(transactionIdentifier)
@@ -210,3 +218,13 @@ export async function getConvertVariantMessages(
     userOsmoAddress: address,
   });
 }
+
+/**
+ * Checks if there is a large difference between input and output amounts
+ * Returns true if output amount is less than 95% of input amount
+ */
+export function checkLargeAmountDiff(inAmount?: Dec, outAmount?: Dec): boolean {
+  if (!inAmount || !outAmount || inAmount.isZero()) return false;
+  // Out amount should be 95% or more of the input amount
+  return outAmount.quo(inAmount).lt(new Dec("0.95"));
+}