@xswap-link/sdk 0.13.1 → 0.14.1

package/src/components/Swap/PickerView/index.tsx

@@ -0,0 +1,151 @@
+import { useSwapContext } from "@src/context";
+import { Chain, TokenOption } from "@src/models";
+import {
+  isBridgeTokenConnectionSupported,
+  isChainConnectionSupported,
+} from "@src/utils";
+import { ChainPicker } from "../SwapView/SwapPanel/TokenPanel/ChainPicker";
+import { TokenPicker } from "../SwapView/SwapPanel/TokenPanel/TokenPicker";
+
+/**
+ * Token/network picker rendered while `activePicker` is set:
+ * - sm and up it replaces the swap view inside the widget container, so it
+ *   sits on the exact same glass background,
+ * - below sm the same element becomes a bottom sheet pinned to the viewport.
+ */
+export const PickerView = () => {
+  const {
+    activePicker,
+    setActivePicker,
+    bridgeUI,
+    srcChain,
+    dstChain,
+    srcToken,
+    dstToken,
+    srcChainTokensOptions,
+    srcChainOtherTokensOptions,
+    dstChainTokensOptions,
+    dstChainOtherTokensOptions,
+    setSrcToken,
+    setSrcChain,
+    setDstToken,
+    setDstChain,
+    supportedChains,
+    dstChainOptions,
+    bridgeTokensDictionary,
+  } = useSwapContext();
+
+  const type = activePicker ?? "source";
+  // In bridge mode the destination token is derived from the source token,
+  // so the destination side picks a chain instead of a token.
+  const bridgeDestination = bridgeUI && type === "destination";
+  const chain = type === "source" ? srcChain : dstChain;
+  const token = type === "source" ? srcToken : dstToken;
+  const tokens =
+    type === "source" ? srcChainTokensOptions : dstChainTokensOptions;
+  const otherTokens =
+    type === "source" ? srcChainOtherTokensOptions : dstChainOtherTokensOptions;
+
+  const close = () => setActivePicker(null);
+
+  const onTokenSelect = (token: TokenOption) => {
+    const newChain = supportedChains.find(
+      (chain) => chain.chainId === token.chainId,
+    );
+
+    if (type === "source") {
+      setSrcToken(token);
+      setSrcChain(newChain);
+      // The new source token cannot reach the current destination —
+      // reset the destination so the user picks a reachable one.
+      if (
+        dstChain &&
+        (!isChainConnectionSupported(newChain, dstChain.chainId, bridgeUI) ||
+          (bridgeUI &&
+            !isBridgeTokenConnectionSupported({
+              token,
+              tokenChain: newChain,
+              dstChainId: dstChain.chainId,
+              bridgeTokensDictionary,
+            })))
+      ) {
+        setDstChain(undefined);
+        setDstToken(undefined);
+      }
+    } else {
+      setDstToken(token);
+      setDstChain(newChain);
+      // The current source cannot reach the new destination chain —
+      // reset the source so the user picks a reachable one.
+      if (
+        srcChain &&
+        newChain &&
+        !isChainConnectionSupported(srcChain, newChain.chainId, bridgeUI)
+      ) {
+        setSrcChain(undefined);
+        setSrcToken(undefined);
+      }
+    }
+    close();
+  };
+
+  const onDstChainSelect = (newChain: Chain & { disabled?: boolean }) => {
+    // The current source cannot reach the new destination chain —
+    // reset the source so the user picks a reachable one.
+    if (newChain.disabled || newChain.chainId === srcChain?.chainId) {
+      setSrcChain(undefined);
+      setSrcToken(undefined);
+    }
+    setDstChain(newChain);
+    // The destination token gets derived from the source token and the
+    // new chain by the SwapProvider validation effect.
+    setDstToken(undefined);
+    close();
+  };
+
+  if (!activePicker) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col justify-end bg-[rgba(2,2,2,0.8)] sm:absolute sm:z-[1] sm:justify-start sm:bg-transparent"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          e.preventDefault();
+          close();
+        }
+      }}
+    >
+      <div className="flex flex-col w-full h-[85vh] max-h-full overflow-hidden p-4 pt-2.5 rounded-t-[24px] border-t border-solid border-t_text_primary border-opacity-10 bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary sm:h-full sm:p-0 sm:rounded-none sm:border-0 sm:bg-none sm:bg-transparent">
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
+        {bridgeDestination ? (
+          <ChainPicker
+            chains={dstChainOptions}
+            selectedChainId={dstChain?.chainId}
+            sameChainId={srcChain?.chainId}
+            onSelect={onDstChainSelect}
+            onClose={close}
+          />
+        ) : (
+          <TokenPicker
+            type={type}
+            chain={chain}
+            tokens={tokens}
+            otherTokens={otherTokens}
+            selectedTokenAddress={token?.address}
+            onSelect={onTokenSelect}
+            isOpen
+            setModalOpen={(open) => {
+              if (!open) {
+                close();
+              }
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/ReorderButton/ReorderButton.tsx

@@ -1,4 +1,4 @@
-import { ArrowsExchange } from "@src/assets/icons";
+import { CaretsUpDownIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { FC } from "react";
 
@@ -22,16 +22,14 @@ export const ReorderButton: FC = () => {
   };
 
   return (
-    <div className="h-[1px] w-full">
+    <div className="h-0 w-full relative z-[1]">
       <button
         onClick={onReorderClick}
         aria-label="Switch target token with the source token"
-        className="absolute -translate-y-5 left-1/2 -translate-x-5 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
+        className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_secondary border border-solid border-t_text_primary border-opacity-10 hover:border-opacity-25 transition-colors"
       >
-        <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
-            <ArrowsExchange />
-          </div>
+        <div className="flex fill-t_text_primary opacity-75 [&_svg]:w-2.5 [&_svg]:h-4">
+          <CaretsUpDownIcon />
         </div>
       </button>
     </div>

package/src/components/Swap/SettingsView/Delivery/index.tsx

@@ -8,35 +8,34 @@ export const Delivery = () => {
   const { expressDelivery, setExpressDelivery } = useSwapContext();
 
   return (
-    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-t_text_primary border-opacity-10">
-      <h1 className="text-sm font-medium text-left">Delivery</h1>
-      <div className="flex gap-2 items-center justify-between flex-wrap">
-        <div className="flex items-center">
-          <h2 className="text-xs">Express delivery: </h2>
-          <ToggleButton
-            checked={expressDelivery}
-            onClick={() => {
-              setExpressDelivery((x) => !x);
-            }}
-          />
-          <Tooltip
-            text={
-              "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $1000 USD."
-            }
-            position="BOTTOM"
-            triggerRef={tooltipTriggerRef}
-            id="express-delivery-tooltip"
-          />
-          <HelpIcon
-            ref={tooltipTriggerRef}
-            className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
-          />
-        </div>
-        <div className="text-xs font-medium">
-          <span className="text-xs font-medium opacity-60">{`Max time: `}</span>
-          {expressDelivery ? "30 sec" : "30 min"}
-        </div>
+    <div className="flex gap-2 items-center justify-between p-4 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.01]">
+      <div className="flex items-center gap-3 min-w-0">
+        <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
+          Fast Delivery
+        </h2>
+        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
+          {expressDelivery ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
+        </p>
+        <Tooltip
+          text={
+            "Fast Delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $1000 USD."
+          }
+          position="BOTTOM"
+          triggerRef={tooltipTriggerRef}
+          id="express-delivery-tooltip"
+        />
+        <HelpIcon
+          ref={tooltipTriggerRef}
+          className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+        />
       </div>
+      <ToggleButton
+        checked={expressDelivery}
+        onClick={() => {
+          setExpressDelivery((x) => !x);
+        }}
+      />
     </div>
   );
 };

package/src/components/Swap/SettingsView/InfiniteApproval/index.tsx

@@ -9,31 +9,34 @@ export const InfiniteApproval = () => {
   const { infiniteApproval, setInfiniteApproval } = useSwapContext();
 
   return (
-    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-white border-opacity-10">
-      <h1 className="text-sm font-medium text-left">Approval</h1>
-      <div className="flex gap-2 items-center justify-between flex-wrap">
-        <div className="flex items-center">
-          <h2 className="text-xs">Infinite approval: </h2>
-          <ToggleButton
-            checked={infiniteApproval}
-            onClick={() => {
-              setInfiniteApproval((x) => !x);
-            }}
-          />
-          <Tooltip
-            text={
-              "Enabling infinite approval allows to access your tokens without requiring repeated approvals for each transaction. This streamlines multiple transactions but may pose a security risk if the spender's address is compromised."
-            }
-            position="BOTTOM"
-            triggerRef={tooltipTriggerRef}
-            id="infinite-approval-tooltip"
-          />
-          <HelpIcon
-            ref={tooltipTriggerRef}
-            className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
-          />
-        </div>
+    <div className="flex gap-2 items-center justify-between p-4 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.01]">
+      <div className="flex items-center gap-3 min-w-0">
+        <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
+          Persistent Access
+        </h2>
+        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
+          Don't Ask Every Tx.
+        </p>
+        <Tooltip
+          text={
+            "Enabling persistent access (infinite approval) allows to access your tokens without requiring repeated approvals for each transaction. This streamlines multiple transactions but may pose a security risk if the spender's address is compromised."
+          }
+          position="BOTTOM"
+          triggerRef={tooltipTriggerRef}
+          id="infinite-approval-tooltip"
+        />
+        <HelpIcon
+          ref={tooltipTriggerRef}
+          className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+        />
       </div>
+      <ToggleButton
+        checked={infiniteApproval}
+        onClick={() => {
+          setInfiniteApproval((x) => !x);
+        }}
+      />
     </div>
   );
 };

package/src/components/Swap/SettingsView/Slippage/index.tsx

@@ -1,8 +1,12 @@
+import { AdjustmentsIcon } from "@src/assets/icons";
 import { SafeInput } from "@src/components";
 import { NUMBER_INPUT_REGEX } from "@src/constants";
 import { useSwapContext } from "@src/context";
 import { useState } from "react";
 
+const defaultPreset = "1.5";
+const presets = ["1", "2", "6"];
+
 export const Slippage = () => {
   const { slippage, setSlippage } = useSwapContext();
   const [customSlippage, setCustomSlippage] = useState(slippage);
@@ -22,63 +26,60 @@ export const Slippage = () => {
     }
   };
 
-  const defaultPreset = "1.5";
-  const presets = ["0.5", "1.5", "3.0"];
   return (
-    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-t_text_primary border-opacity-10">
-      <h1 className="text-sm font-medium text-left">Slippage</h1>
-      <div className="flex items-center gap-2 w-full">
-        <div className="flex items-center bg-t_bg_tertiary bg-opacity-5 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl gap-2">
+    <div className="flex flex-col gap-5 p-4 rounded-xl bg-gradient-to-b from-t_bg_tertiary/[0.02] to-t_bg_tertiary/0">
+      <div className="flex items-center gap-2">
+        <h2 className="text-sm leading-5 tracking-[0.01em] text-t_text_primary">
+          Price Tolerance
+        </h2>
+        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+        <p className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+          {`${Number(slippage).toFixed(2)}%`}
+        </p>
+      </div>
+      <div className="flex items-center gap-4 w-full">
+        <div className="flex items-center justify-between flex-1 gap-3 p-3 rounded-[10px] bg-t_bg_tertiary bg-opacity-5 border border-solid border-t_text_primary border-opacity-25">
+          <div className="flex items-center gap-3 min-w-0 flex-1">
+            <div className="flex items-center justify-center w-6 h-6 rounded bg-t_bg_tertiary bg-opacity-5 shrink-0">
+              <AdjustmentsIcon className="w-3.5 h-3.5 text-t_text_primary opacity-70" />
+            </div>
+            <SafeInput
+              id="slippage-input"
+              placeholder="0.00"
+              regex={NUMBER_INPUT_REGEX}
+              value={customSlippage}
+              onChange={onInputChange}
+              className="text-sm leading-6 bg-transparent border-none px-0 w-full min-w-0 placeholder:text-t_text_primary placeholder:text-opacity-50 focus:outline-none text-t_text_primary"
+            />
+          </div>
+          <span className="text-sm leading-6 text-t_text_primary text-opacity-50 shrink-0">
+            %
+          </span>
+        </div>
+        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0 hidden sm:block" />
+        <div className="flex items-center gap-2">
           {presets.map((preset) => (
             <button
               key={preset}
               type="button"
               onClick={() => onInputChange(preset)}
-              className={`block rounded-lg text-sm bg-transparent h-7 px-1 hover:bg-gradient-to-r hover:from-t_main_accent_light hover:to-t_main_accent_dark hover:opacity-100 ${
+              className={`w-14 sm:w-[72px] px-3 py-2.5 rounded-lg text-sm leading-5 tracking-[0.06em] text-center transition-colors ${
                 slippage === preset
-                  ? "gradient-slippage-container-blue text-white opacity-100"
-                  : "text-t_text_primary opacity-20"
+                  ? "bg-gradient-to-r from-t_main_accent_light/40 to-t_main_accent_dark/60 text-t_text_primary"
+                  : "bg-t_bg_tertiary bg-opacity-5 text-t_text_primary text-opacity-75 hover:bg-opacity-10"
               }`}
             >
               {`${preset}%`}
             </button>
           ))}
         </div>
-        <div
-          className={`${
-            customSlippage
-              ? "gradient-slippage-container-blue p-[1px] rounded-xl"
-              : ""
-          }`}
-        >
-          <div
-            className={`bg-t_bg_primary p-1 h-full border border-solid border-t_text_primary border-opacity-10 rounded-xl`}
-          >
-            <SafeInput
-              id="slippage-input"
-              placeholder="1.5"
-              regex={NUMBER_INPUT_REGEX}
-              value={customSlippage}
-              onChange={onInputChange}
-              className={`text-sm leading-none bg-transparent px-0.5 placeholder:text-t_text_primary/20 focus:outline-none ${
-                customSlippage ? "text-t_text_primary" : "text-white"
-              } `}
-            />{" "}
-            %
-          </div>
-        </div>
-      </div>
-      <div className="text-sm opacity-60">
-        <p>
-          Slippage is the price variation you are willing to accept in the event
-          that the price of the trade changes while it is processing.
-        </p>
-        <br />
-        <p>
-          If the trade fails due to too low slippage, you will receive USDC on
-          the destination chain.
-        </p>
       </div>
+      <p className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-40">
+        <span className="font-medium">Price Tolerance</span>
+        {` defines how much a price can change before your transfer falls back
+        to USDC. If the price moves more than your tolerance allows, you'll
+        receive USDC on your destination chain.`}
+      </p>
     </div>
   );
 };

package/src/components/Swap/SettingsView/index.tsx

@@ -4,7 +4,7 @@ import { Slippage } from "./Slippage";
 
 export const SettingsView = () => {
   return (
-    <div className="flex flex-col gap-5 px-4">
+    <div className="flex flex-col gap-2">
       <Delivery />
       <InfiniteApproval />
       <Slippage />

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/index.tsx

@@ -11,11 +11,12 @@ import {
   crosschainEstimationTimes,
 } from "@src/constants";
 import { useHistory, useSwapContext, useTxUIWrapper } from "@src/context";
-import { ADDRESSES, XSwapRouterAbi } from "@src/contracts";
+import { ADDRESSES, ERC20Abi, XSwapRouterAbi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import {
   Ecosystem,
+  TransactionRequest,
   TxStatus,
   Transaction as EVMTransaction,
 } from "@src/models";
@@ -206,7 +207,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   const enqueueSwapTx = useCallback(async () => {
     if (srcToken) {
       if (route && route.ecosystem === Ecosystem.EVM) {
-        const enqueueSwap = () => {
+        const enqueueSwap = ({ afterApproval = false } = {}) => {
           enqueueTransaction({
             executeTransaction: () => {
               if (!route.transactions.swap || !signer) {
@@ -216,6 +217,9 @@ export const TxOverview = ({ onCloseClick }: Props) => {
               return evmContractApi.executeCalldata(
                 signer,
                 route.transactions.swap,
+                // right after an approval the RPC may not see the new
+                // allowance yet, so let the gas estimation retry
+                { retryGasEstimation: afterApproval },
               );
             },
             txStatus: TxStatus.SIGNING_TX,
@@ -258,7 +262,15 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             },
             txStatus: TxStatus.SIGNING_APPROVAL,
             handlers: {
-              onSuccess: () => enqueueSwap(),
+              onSuccess: async () => {
+                if (signer && route.transactions.approve) {
+                  await waitForApprovalAllowance(
+                    signer,
+                    route.transactions.approve,
+                  );
+                }
+                enqueueSwap({ afterApproval: true });
+              },
             },
           });
         } else {
@@ -452,7 +464,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             enqueueSwapTx();
           }}
           type="button"
-          className="text-white border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark rounded-lg"
+          className="text-t_button_pr_text border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark rounded-lg"
         >
           Sign and swap
         </Button>
@@ -463,6 +475,40 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   );
 };
 
+const ALLOWANCE_POLL_INTERVAL_MS = 500;
+const ALLOWANCE_POLL_MAX_ATTEMPTS = 10;
+
+// After an approval is mined, RPC nodes behind a load balancer may still
+// return the stale allowance for a while, which makes the swap's gas
+// estimation revert. Poll until the approved amount is visible (or give up
+// after ~5s and let the gas estimation retry handle the rest).
+async function waitForApprovalAllowance(
+  signer: ethers.Signer,
+  approveTx: TransactionRequest,
+) {
+  try {
+    const erc20 = new ethers.Contract(approveTx.to, ERC20Abi, signer);
+    const [spender, amount] = erc20.interface.decodeFunctionData(
+      "approve",
+      approveTx.data,
+    );
+    const owner = await signer.getAddress();
+    for (let attempt = 0; attempt < ALLOWANCE_POLL_MAX_ATTEMPTS; attempt++) {
+      const currentAllowance = await erc20.allowance(owner, spender);
+      if (currentAllowance.gte(amount)) {
+        return;
+      }
+      await new Promise((resolve) =>
+        setTimeout(resolve, ALLOWANCE_POLL_INTERVAL_MS),
+      );
+    }
+  } catch (err) {
+    // best-effort — non-standard approve calldata or a failing allowance
+    // call shouldn't block the swap
+    console.error("Failed to poll allowance after approval:", err);
+  }
+}
+
 // Add this function to check token delegation and delegate if necessary
 async function checkAndDelegateTokenAuthority(
   connection: Connection,

package/src/components/Swap/SwapView/FeesPanel/DeliveryInfo/index.tsx

@@ -1,27 +1,17 @@
-import { TimerIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 
 export const DeliveryInfo = () => {
   const { isExpressDeliveryActive } = useSwapContext();
 
   return (
-    <div className="flex items-center">
-      <div
-        className={`w-4 h-4 mr-1 ${
-          isExpressDeliveryActive
-            ? "fill-t_success_light"
-            : "fill-t_text_primary opacity-50"
-        } `}
-      >
-        <TimerIcon />
-      </div>
-      <span
-        className={`text-xs font-medium sm:text-sm ${
-          isExpressDeliveryActive ? "text-t_success_light" : "opacity-50"
-        }`}
-      >
-        {isExpressDeliveryActive ? "Fast ~ 30sec " : "Normal ~ 30min"}
-      </span>
-    </div>
+    <span
+      className={`text-sm leading-6 tracking-[0.01em] whitespace-nowrap ${
+        isExpressDeliveryActive
+          ? "text-t_success_light"
+          : "text-t_text_primary opacity-50"
+      }`}
+    >
+      {isExpressDeliveryActive ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
+    </span>
   );
 };

package/src/components/Swap/SwapView/FeesPanel/Fee/index.tsx

@@ -8,10 +8,10 @@ type Props = {
 export const Fee = ({ name, value }: Props) => {
   const { isFetchingRoute } = useSwapContext();
   return (
-    <div className="flex gap-x-1 justify-between text-xs font-medium">
-      <div className="opacity-60">{name}</div>
-      <div>
-        {isFetchingRoute ? <Skeleton className="w-[60px] h-full" /> : value}
+    <div className="flex gap-x-1 justify-between text-sm leading-6 tracking-[0.01em]">
+      <div className="text-t_text_primary text-opacity-50">{name}</div>
+      <div className="text-t_text_primary text-opacity-80">
+        {isFetchingRoute ? <Skeleton className="w-[60px] h-[20px]" /> : value}
       </div>
     </div>
   );

package/src/components/Swap/SwapView/FeesPanel/Fees/index.tsx

@@ -24,7 +24,7 @@ export const Fees = ({
       } ${feeToken?.symbol || ""}`,
     },
     {
-      name: "Native Fee: ",
+      name: "Net. Fee: ",
       value: `${
         weiToHumanReadable({
           amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -47,9 +47,9 @@ export const Fees = ({
           },
         ]
       : []),
-    { name: "Slippage: ", value: `${slippage}%` },
+    { name: "Price Tolerance: ", value: `${slippage}%` },
     {
-      name: "Min out: ",
+      name: "Min. Received: ",
       value: `${
         weiToHumanReadable({
           amount: route?.minAmountOut || "0",
@@ -61,12 +61,8 @@ export const Fees = ({
   ];
 
   return (
-    <div className="border-t border-solid border-t_text_primary border-opacity-10 pt-3 mt-3">
-      <div
-        className={`flex flex-col gap-y-2 gap-x-10 sm:grid ${
-          fees.length === 4 ? "sm:grid-rows-2" : "sm:grid-rows-3"
-        } sm:grid-flow-col`}
-      >
+    <div className="border-t border-solid border-t_text_primary border-opacity-10 pt-3 mt-2 mb-1">
+      <div className="flex flex-col gap-y-2">
         {fees.map(({ name, value }) => (
           <Fee key={name} name={name} value={value} />
         ))}