feat: add configurable slippage and better error toest - WIP

mateuszjasiuk · mateuszjasiuk · commit f75c7f22fb55 · 2025-11-12T17:35:11.000+01:00
diff --git a/apps/namadillo/src/App/Swap/SwapCalculations.tsx b/apps/namadillo/src/App/Swap/SwapCalculations.tsx
@@ -19,13 +19,18 @@ import { wallets } from "integrations";
 import { KeplrWalletManager } from "integrations/Keplr";
 import { getChainFromAddress } from "integrations/utils";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { NamadaAsset } from "types";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toDisplayAmount } from "utils";
 import { SwapSource } from "./SwapSource";
 import { useSwapSimulation } from "./hooks/useSwapSimulation";
 import { useSwapValidation } from "./hooks/useSwapValidation";
 import { SwapQuote, SwapState, SwapStatus } from "./state";
-import { swapQuoteAtom, swapStateAtom, swapStatusAtom } from "./state/atoms";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "./state/atoms";
 
 const ValidationMessages: Record<string, string> = {
   NoSellAssetSelected: "Select a token to sell",
@@ -54,6 +59,7 @@ export const SwapCalculations = (): JSX.Element => {
   const [swapState, setSwapState] = useAtom(swapStateAtom);
   const { data: quote } = useAtomValue(swapQuoteAtom);
   const setStatus = useSetAtom(swapStatusAtom);
+  const minAmount = useAtomValue(swapMinAmountAtom);
 
   // Global state
   const sortedAssets = useAtomValue(namadaAssetsSortedAtom);
@@ -111,10 +117,9 @@ export const SwapCalculations = (): JSX.Element => {
         sellAmount: a,
       }));
     } else {
-      setSwapState((s) => ({
+      setSwapState({
         mode: "none",
-        sellAmountPerOneBuy: s.sellAmountPerOneBuy,
-      }));
+      });
     }
   }, []);
 
@@ -126,10 +131,9 @@ export const SwapCalculations = (): JSX.Element => {
         buyAmount: a,
       }));
     } else {
-      setSwapState((s) => ({
+      setSwapState({
         mode: "none",
-        sellAmountPerOneBuy: s.sellAmountPerOneBuy,
-      }));
+      });
     }
   }, []);
 
@@ -141,7 +145,6 @@ export const SwapCalculations = (): JSX.Element => {
           mode: newMode,
           sellAmount: s.buyAmount,
           buyAmount: s.sellAmount,
-          sellAmountPerOneBuy: s.sellAmountPerOneBuy,
         };
       }
 
@@ -240,20 +243,15 @@ export const SwapCalculations = (): JSX.Element => {
           isSubmitting={false}
           label="Buy"
         />
-        {feeProps &&
-          swapState.sellAmountPerOneBuy &&
-          sellAsset &&
-          buyAsset &&
-          tokenPrices && (
-            <SwapCalculationsFooter
-              feeProps={feeProps}
-              sellAmountPerOneBuy={swapState.sellAmountPerOneBuy}
-              selectedAsset={sellAsset}
-              selectedTargetAsset={buyAsset}
-              tokenPrice={tokenPrices[buyAsset.address]}
-              quote={quote}
-            />
-          )}
+        {feeProps && sellAsset && buyAsset && tokenPrices && (
+          <SwapCalculationsFooter
+            feeProps={feeProps}
+            swapState={swapState}
+            minAmount={minAmount}
+            tokenPrice={tokenPrices[buyAsset.address]}
+            quote={quote}
+          />
+        )}
 
         <ActionButton
           outlineColor="yellow"
@@ -299,21 +297,20 @@ export const SwapCalculations = (): JSX.Element => {
 
 type SwapCalculationsFooterProps = {
   feeProps: TransactionFeeProps;
-  sellAmountPerOneBuy: BigNumber;
-  selectedAsset: NamadaAsset;
-  selectedTargetAsset: NamadaAsset;
   tokenPrice: BigNumber;
   quote?: SwapQuote;
+  swapState: SwapState;
+  minAmount?: BigNumber;
 };
 
 const SwapCalculationsFooter = ({
   feeProps,
-  sellAmountPerOneBuy,
-  selectedAsset,
-  selectedTargetAsset,
+  swapState,
   tokenPrice,
   quote,
+  minAmount,
 }: SwapCalculationsFooterProps): JSX.Element => {
+  const { sellAsset, buyAsset } = swapState;
   // Quote cache, prevents blinking when quote is temporarily undefined
   const lastValidQuoteRef = useRef<typeof quote>();
   useEffect(() => {
@@ -323,7 +320,24 @@ const SwapCalculationsFooter = ({
   }, [quote]);
 
   const quoteToUse = quote ?? lastValidQuoteRef.current;
-  if (!quoteToUse) {
+
+  const sellAmountPerOneBuy = useMemo(() => {
+    if (!quoteToUse || !buyAsset || !minAmount) {
+      return;
+    }
+
+    const baseAmount =
+      ["sell", "none"].includes(swapState.mode) ?
+        quoteToUse.amountIn
+      : quoteToUse.amountOut;
+
+    return toDisplayAmount(
+      buyAsset,
+      minAmount.div(toDisplayAmount(buyAsset, baseAmount))
+    );
+  }, [buyAsset?.symbol, quoteToUse]);
+
+  if (!quoteToUse || !sellAmountPerOneBuy || !sellAsset || !buyAsset) {
     return <></>;
   }
 
@@ -338,8 +352,8 @@ const SwapCalculationsFooter = ({
         direction="horizontal"
       >
         <div className="underline">
-          1 {selectedAsset.symbol} ≈ {sellAmountPerOneBuy.toFixed(6)}{" "}
-          {selectedTargetAsset.symbol} (${valFiat.toFixed(6)})
+          1 {sellAsset.symbol} ≈ {sellAmountPerOneBuy.toFixed(6)}{" "}
+          {buyAsset.symbol} (${valFiat.toFixed(6)})
         </div>
         <TransactionFeeButton
           compact={true}
diff --git a/apps/namadillo/src/App/Swap/SwapReview.tsx b/apps/namadillo/src/App/Swap/SwapReview.tsx
@@ -20,14 +20,22 @@ import { toDisplayAmount } from "utils";
 import { usePerformOsmosisSwapTx } from "./hooks/usePerformOsmosisSwapTx";
 import { useSwapReviewValidation } from "./hooks/useSwapReviewValidation";
 import { statusMessages, SwapStatus } from "./state";
-import { swapQuoteAtom, swapStateAtom, swapStatusAtom } from "./state/atoms";
-import { SLIPPAGE } from "./state/functions";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapSlippageAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "./state/atoms";
 
 const keplr = new KeplrWalletManager();
 export const SwapReview = (): JSX.Element => {
   // Feature state  sanity checks
   const [status, setStatus] = useAtom(swapStatusAtom);
   const swapState = useAtomValue(swapStateAtom);
+  const minAmount = useAtomValue(swapMinAmountAtom);
+  const [{ default: slippage, override: slippageOverride }, setSlippage] =
+    useAtom(swapSlippageAtom);
   const { sellAsset, buyAsset } = swapState;
   const { data: quote } = useAtomValue(swapQuoteAtom);
 
@@ -44,6 +52,7 @@ export const SwapReview = (): JSX.Element => {
   invariant(quote, "Quote is required");
   invariant(swapState.sellAmount, "Swap sell amount is required");
   invariant(swapState.buyAmount, "Swap buy amount is required");
+  invariant(minAmount, "Minimum amount is required");
 
   // Global state
   const [ledgerStatus, setLedgerStatusStop] = useAtom(ledgerStatusDataAtom);
@@ -58,7 +67,7 @@ export const SwapReview = (): JSX.Element => {
     buyPrice && buyPrice.times(BigNumber(1).plus(quote.priceImpact));
   const buyAmountFiat =
     buyPriceImpact && buyPriceImpact.times(swapState.buyAmount);
-  const receiveAtLeastDenominated = toDisplayAmount(buyAsset, quote.minAmount);
+  const receiveAtLeastDenominated = toDisplayAmount(buyAsset, minAmount);
 
   const swapFee = quote.effectiveFee
     .times(100)
@@ -75,7 +84,9 @@ export const SwapReview = (): JSX.Element => {
 
   const { error: _err, performSwap } = usePerformOsmosisSwapTx();
   const onSwap = useCallback(async (): Promise<void> => {
-    await performSwap({ localRecoveryAddr: walletAddress });
+    await performSwap({
+      localRecoveryAddr: walletAddress,
+    });
   }, [walletAddress]);
 
   const validationResult = useSwapReviewValidation({
@@ -147,8 +158,34 @@ export const SwapReview = (): JSX.Element => {
               </p>
             </ReviewRow>
             <ReviewRow>
-              <div>Slippage tolerance</div>
-              <div>{SLIPPAGE * 100}%</div>
+              <div className="self-center">Slippage tolerance</div>
+              <div className="relative inline-block">
+                <input
+                  type="text"
+                  placeholder={slippage.times(100).toString()}
+                  className="peer h-full pl-3 pr-4 w-16 placeholder-yellow-600 text-yellow text-right bg-transparent outline-none border border-transparent rounded-sm focus:py-2 focus:pr-7 focus:border-yellow transition-all"
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (val === "" || val.match(/^\d{1}(\.\d{0,1})?$/)) {
+                      setSlippage(BigNumber(val).div(100));
+                    }
+                  }}
+                  value={
+                    slippageOverride ?
+                      slippageOverride.times(100).toString()
+                    : ""
+                  }
+                />
+                <span
+                  className={clsx(
+                    "absolute right-0 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none peer-focus:right-3 transition-all",
+                    { "text-yellow": !!slippageOverride },
+                    { "text-yellow-600": !slippageOverride }
+                  )}
+                >
+                  %
+                </span>
+              </div>
             </ReviewRow>
             <ReviewRow>
               <div>Receive at least</div>
diff --git a/apps/namadillo/src/App/Swap/hooks/usePerformOsmosisSwapTx.tsx b/apps/namadillo/src/App/Swap/hooks/usePerformOsmosisSwapTx.tsx
@@ -23,7 +23,12 @@ import { NamadaAsset, OsmosisSwapTransactionData, TransferStep } from "types";
 import { TransactionError } from "types/errors";
 import { toBaseAmount } from "utils";
 import { SwapStatus } from "../state";
-import { swapQuoteAtom, swapStateAtom, swapStatusAtom } from "../state/atoms";
+import {
+  swapMinAmountAtom,
+  swapQuoteAtom,
+  swapStateAtom,
+  swapStatusAtom,
+} from "../state/atoms";
 
 // TODO: Should be a different address for housefire
 const SWAP_CONTRACT_ADDRESS =
@@ -50,6 +55,7 @@ export function usePerformOsmosisSwapTx(): UsePerformOsmosisSwapResult {
   const { buyAmount, sellAmount, buyAsset, sellAsset } =
     useAtomValue(swapStateAtom);
   const quoteQuery = useAtomValue(swapQuoteAtom);
+  const minAmount = useAtomValue(swapMinAmountAtom);
 
   // Global state
   const namadaChain = useAtomValue(chainAtom);
@@ -126,6 +132,7 @@ export function usePerformOsmosisSwapTx(): UsePerformOsmosisSwapResult {
         invariant(sellAmount, "No sell amount");
         invariant(buyAmount, "No buy amount");
         invariant(sellAsset && buyAsset, "Missing swap assets");
+        invariant(minAmount, "No minimum amount calculated");
 
         const toTrace =
           buyAsset.traces?.find((t) => t.type === "ibc")?.chain.path ||
@@ -154,9 +161,7 @@ export function usePerformOsmosisSwapTx(): UsePerformOsmosisSwapResult {
           recipient: shieldedAccount.address,
           overflow: transparentAccount.address,
           slippage: {
-            0: BigNumber(quote.minAmount)
-              .integerValue(BigNumber.ROUND_DOWN)
-              .toString(),
+            0: minAmount.integerValue(BigNumber.ROUND_DOWN).toString(),
           },
           localRecoveryAddr,
           route,
diff --git a/apps/namadillo/src/App/Swap/hooks/useSellPerOneBuy.tsx b/apps/namadillo/src/App/Swap/hooks/useSellPerOneBuy.tsx
@@ -0,0 +1,35 @@
+import BigNumber from "bignumber.js";
+import invariant from "invariant";
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { toDisplayAmount } from "utils";
+import { SwapQuote, SwapState } from "../state";
+import { swapMinAmountAtom } from "../state/atoms";
+
+export const useSellPerOneBuy = (
+  swapState: SwapState,
+  quote?: SwapQuote
+): BigNumber | undefined => {
+  const [sellAmountPerOneBuy, setSellAmountPerOneBuy] = useState<BigNumber>();
+  const minAmount = useAtomValue(swapMinAmountAtom);
+
+  useEffect(() => {
+    if (!quote || !swapState.buyAsset) return;
+
+    invariant(swapState.buyAsset, "Buy asset is required for calculation");
+    invariant(minAmount, "Min amount is required for calculation");
+
+    const baseAmount =
+      ["sell", "none"].includes(swapState.mode) ?
+        quote.amountIn
+      : quote.amountOut;
+
+    const sellAmountPerOneBuy = toDisplayAmount(
+      swapState.buyAsset,
+      minAmount.div(toDisplayAmount(swapState.buyAsset, baseAmount))
+    );
+    setSellAmountPerOneBuy(sellAmountPerOneBuy);
+  }, [swapState, quote]);
+
+  return sellAmountPerOneBuy;
+};
diff --git a/apps/namadillo/src/App/Swap/hooks/useSwapSimulation.tsx b/apps/namadillo/src/App/Swap/hooks/useSwapSimulation.tsx
@@ -23,14 +23,6 @@ export const useSwapSimulation = (): void => {
       invariant(buyAsset, "Buy asset is required for simulation");
       invariant(sellAsset, "Sell asset is required for simulation");
 
-      const baseAmount =
-        swapState.mode === "sell" ? quote.amountIn : quote.amountOut;
-
-      const sellAmountPerOneBuy = toDisplayAmount(
-        buyAsset,
-        quote.minAmount.div(toDisplayAmount(buyAsset, baseAmount))
-      );
-
       const simulateSell =
         swapState.mode === "sell" || swapState.mode === "none";
       const simulateBuy = swapState.mode === "buy";
@@ -40,15 +32,13 @@ export const useSwapSimulation = (): void => {
           setInternalSwapState((s) => ({
             ...s,
             buyAmount: toDisplayAmount(buyAsset, quote.amountOut),
-            sellAmountPerOneBuy,
           }));
         }
       } else if (simulateBuy && buyAsset) {
         if (swapState.buyAmount === internalSwapState.buyAmount) {
           setInternalSwapState((s) => ({
             ...s,
             sellAmount: toDisplayAmount(sellAsset, quote.amountIn),
-            sellAmountPerOneBuy,
           }));
         }
       }
diff --git a/apps/namadillo/src/App/Swap/state/atoms.ts b/apps/namadillo/src/App/Swap/state/atoms.ts
@@ -15,7 +15,7 @@ import { atomWithStorage } from "jotai/utils";
 import debounce from "lodash.debounce";
 import { SwapStorage } from "types";
 import { toBaseAmount } from "utils";
-import { fetchQuote } from "./functions";
+import { fetchQuote, SLIPPAGE } from "./functions";
 import type { SwapState, SwapStatusType } from "./types";
 import { SwapStatus } from "./types";
 
@@ -189,3 +189,27 @@ export const swapQuoteAtom = atomWithQuery((get) => {
     },
   };
 });
+
+const internalSwapSlippageAtom = atom<{
+  default: BigNumber;
+  override: BigNumber | null;
+}>({ default: BigNumber(SLIPPAGE), override: null });
+
+export const swapSlippageAtom = atom(
+  (get) => get(internalSwapSlippageAtom),
+  (_get, set, slippage: BigNumber | null) => {
+    set(internalSwapSlippageAtom, (s) => ({
+      ...s,
+      override: slippage,
+    }));
+  }
+);
+
+export const swapMinAmountAtom = atom<BigNumber | undefined>((get) => {
+  const quote = get(swapQuoteAtom).data;
+  const slippage = get(swapSlippageAtom);
+  const slippageValue = slippage.override || slippage.default;
+
+  if (!quote) return;
+  return quote.amount.times(BigNumber(1).minus(slippageValue));
+});
diff --git a/apps/namadillo/src/App/Swap/state/functions.ts b/apps/namadillo/src/App/Swap/state/functions.ts
diff --git a/apps/namadillo/src/App/Swap/state/types.ts b/apps/namadillo/src/App/Swap/state/types.ts
diff --git a/apps/namadillo/src/hooks/useTransactionNotifications.tsx b/apps/namadillo/src/hooks/useTransactionNotifications.tsx
