@xswap-link/sdk 0.13.0 → 0.14.0

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 ? "Max. Time 30 Sec." : "Max. 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

@@ -222,7 +222,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             handlers: {
               onSuccess: (data) => {
                 setTxStatus(TxStatus.COMPLETED);
-                refreshBalance();
+                refreshBalance({ forceRpc: true });
                 trackTransaction(data);
                 if (
                   srcChain?.chainId &&
@@ -400,7 +400,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
           handlers: {
             onSuccess: () => {
               setTxStatus(TxStatus.COMPLETED);
-              refreshBalance();
+              refreshBalance({ forceRpc: true });
             },
           },
           network: Ecosystem.SOLANA,

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 ? "Max. Time 30 Sec." : "Max. 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} />
         ))}

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

@@ -1,4 +1,4 @@
-import { ArrowDownIcon, TokensIcon } from "@src/assets/icons";
+import { CaretDownIcon } from "@src/assets/icons";
 import { Skeleton } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
@@ -176,38 +176,37 @@ export const FeesPanel = () => {
       isFetchingSolanaFee);
 
   return (
-    <div className="flex flex-col x-border rounded-xl py-2 px-4 bg-t_bg_tertiary bg-opacity-5">
+    <div className="flex flex-col rounded-xl py-2 px-4 sm:px-6 bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/0">
       <button
         aria-label={`${expanded ? "Collapse" : "Expand"} fees panel`}
         type="button"
         onClick={() => setExpanded((e) => !e)}
       >
-        <div className="flex justify-between">
-          <div className="flex gap-2 items-center text-xs font-medium sm:text-sm fill-t_text_primary">
-            <TokensIcon />
-            <p className="opacity-60">Fee: </p>
+        <div className="flex justify-between items-center py-1">
+          <div className="flex gap-2 items-center text-sm leading-6 tracking-[0.01em]">
+            <p className="text-t_text_primary text-opacity-50">Fee</p>
+            <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25" />
             {isLoading ? (
-              <Skeleton className="w-[100px] h-full" />
+              <Skeleton className="w-[100px] h-[20px]" />
             ) : (
-              <p>{`${solanaBridgeFee ? solanaBridgeFee : totalFee} ${
-                feeToken?.symbol || ""
-              }`}</p>
+              <p className="text-t_text_primary text-opacity-80">{`${
+                solanaBridgeFee ? solanaBridgeFee : totalFee
+              } ${feeToken?.symbol || ""}`}</p>
             )}
-          </div>
-          <div className="flex gap-2 items-center fill-t_text_primary">
             {route && !isLoading && srcChain?.chainId !== dstChain?.chainId && (
-              <DeliveryInfo />
-            )}
-            {expanded ? (
-              <div className="w-4 h-2 rotate-180">
-                <ArrowDownIcon />
-              </div>
-            ) : (
-              <div className="w-4 h-2">
-                <ArrowDownIcon />
-              </div>
+              <>
+                <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25" />
+                <DeliveryInfo />
+              </>
             )}
           </div>
+          <div
+            className={`flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-75 transition-transform [&_svg]:w-2.5 [&_svg]:h-[5px] ${
+              expanded ? "rotate-180" : ""
+            }`}
+          >
+            <CaretDownIcon />
+          </div>
         </div>
         {expanded && <Fees solanaBridgeFee={solanaBridgeFee} />}
       </button>

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -60,6 +60,7 @@ export const SwapButton = () => {
     openSuiWalletModal,
     setOpenSuiWalletModal,
     solana,
+    sui,
   } = useWallet();
 
   const { allowance, approve } = useERC20Token({
@@ -121,7 +122,10 @@ export const SwapButton = () => {
       };
     }
 
-    if (srcChain?.ecosystem !== Ecosystem.SOLANA && !address) {
+    if (
+      (!srcChain || srcChain.ecosystem === Ecosystem.EVM) &&
+      !address
+    ) {
       return {
         text:
           integrationConfig.defaultWalletPicker || hasOnConnectWalletCallback
@@ -193,7 +197,20 @@ export const SwapButton = () => {
       };
     }
     if (
-      srcChain?.ecosystem !== Ecosystem.SOLANA &&
+      (srcChain?.ecosystem === Ecosystem.SUI ||
+        dstChain?.ecosystem === Ecosystem.SUI) &&
+      !sui.address
+    ) {
+      return {
+        text: "Connect SUI Wallet",
+        fn: () => {
+          setOpenSuiWalletModal(true);
+        },
+        disabled: false,
+      };
+    }
+    if (
+      srcChain?.ecosystem === Ecosystem.EVM &&
       chainId?.toString() !== srcChainId
     ) {
       return {
@@ -256,7 +273,7 @@ export const SwapButton = () => {
     }
 
     return {
-      text: bridgeUI ? "Bridge" : "Swap",
+      text: bridgeUI ? "Bridge Now" : "SWAP Now",
       fn: async () => {
         showSwapConfirmationView();
       },
@@ -265,7 +282,7 @@ export const SwapButton = () => {
   }, [
     isAsyncDataLoaded,
     error,
-    srcChain?.ecosystem,
+    srcChain,
     dstChain?.ecosystem,
     address,
     srcChainId,
@@ -273,6 +290,8 @@ export const SwapButton = () => {
     srcTokenAddress,
     dstTokenAddress,
     solana.address,
+    sui.address,
+    setOpenSuiWalletModal,
     chainId,
     srcValueWei,
     isFetchingRoute,
@@ -323,10 +342,10 @@ export const SwapButton = () => {
         type="button"
         disabled={button.disabled}
         onClick={button.fn}
-        className={`text-xl font-sans-bold font-bold w-full py-5 cursor-pointer disabled:cursor-not-allowed rounded-2xl border-none ${
+        className={`text-sm font-medium leading-6 tracking-[0.01em] w-full px-6 py-3 cursor-pointer disabled:cursor-not-allowed rounded-[10px] border-none transition-opacity ${
           button.disabled
             ? "bg-t_button_pr_off_bg text-t_button_pr_off_text"
-            : "bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text"
+            : "bg-gradient-to-br from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text hover:opacity-90"
         }`}
       >
         {button.text}

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/Balance/index.tsx

@@ -1,21 +1,65 @@
 import { Skeleton } from "@src/components";
 import { useSwapContext } from "@src/context";
+import { weiToHumanReadable } from "@src/utils";
+import { useMemo } from "react";
+import { SwapPanelType } from "../../../../SwapView";
 
-export const Balance = () => {
-  const { srcTokenBalanceInfo, isFetchingBalance } = useSwapContext();
+type Props = {
+  type: SwapPanelType;
+};
+
+export const Balance = ({ type }: Props) => {
+  const {
+    srcToken,
+    srcTokenBalanceInfo,
+    isFetchingBalance,
+    isFetchingBalances,
+    dstToken,
+    dstChain,
+    dstChainTokensOptions,
+  } = useSwapContext();
+
+  const dstTokenBalanceInfo = useMemo(() => {
+    if (!dstToken || !dstChain) {
+      return "";
+    }
+    const tokenOption = dstChainTokensOptions.find(
+      (token) =>
+        token.address.toLowerCase() === dstToken.address.toLowerCase() &&
+        token.chainId === dstChain.chainId,
+    );
+    if (!tokenOption?.balance || tokenOption.balance.eq(0)) {
+      return "";
+    }
+    return weiToHumanReadable({
+      amount: tokenOption.balance.toString(),
+      decimals: dstToken.decimals,
+      precisionFractionalPlaces: 5,
+    });
+  }, [dstToken, dstChain, dstChainTokensOptions]);
+
+  const token = type === "source" ? srcToken : dstToken;
+  const balanceInfo =
+    type === "source" ? srcTokenBalanceInfo : dstTokenBalanceInfo;
+  const isLoading =
+    type === "source" ? isFetchingBalance : isFetchingBalances;
+
+  if (!token || (!balanceInfo && !isLoading)) {
+    return null;
+  }
 
   return (
-    <div className="flex flex-col items-end">
-      <p className="text-xs font-medium opacity-60">Balance:</p>
-      {isFetchingBalance ? (
-        <Skeleton className="w-[50px] h-[16px]" />
+    <div className="flex items-center justify-end py-1">
+      {isLoading ? (
+        <Skeleton className="w-[80px] h-[16px]" />
       ) : (
-        <p
-          className={`text-xs font-medium ${
-            !srcTokenBalanceInfo && "opacity-60"
-          }`}
-        >
-          {srcTokenBalanceInfo || "-"}
+        <p className="text-[10px] leading-4 text-right whitespace-nowrap">
+          <span className="text-t_text_primary text-opacity-50">
+            {`Balance `}
+          </span>
+          <span className="text-t_text_primary text-opacity-75">
+            {`${balanceInfo} ${token.symbol}`}
+          </span>
         </p>
       )}
     </div>