@xswap-link/sdk 0.13.1 → 0.14.1

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>
+              <>
+                <span className="text-t_text_primary opacity-50">/</span>
+                <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-base font-medium leading-6 tracking-[0.01em] w-full px-6 py-3 cursor-pointer disabled:cursor-not-allowed rounded-lg border-none transition-[filter] ${
           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-b from-t_main_accent_light from-50% to-t_main_accent_dark text-t_button_pr_text hover:brightness-105"
         }`}
       >
         {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 tracking-[0.032em]">
+            {`${balanceInfo} ${token.symbol}`}
+          </span>
         </p>
       )}
     </div>

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

@@ -1,9 +1,9 @@
 import { SafeInput, Skeleton } from "@src/components";
 import { NUMBER_INPUT_REGEX } from "@src/constants";
 import { useSwapContext } from "@src/context";
+import { weiToHumanReadable } from "@src/utils";
 import { useMemo } from "react";
 import { SwapPanelType } from "../../../SwapView";
-import { Balance } from "./Balance";
 import { Ecosystem } from "@src/models";
 
 type Props = {
@@ -14,16 +14,29 @@ export const AmountPanel = ({ type }: Props) => {
   const {
     srcChain,
     srcValue,
-    srcValueUsd,
+    srcToken,
+    srcTokenBalanceWei,
     dstToken,
     dstChain,
     dstValue,
-    dstValueUsd,
     setSrcValue,
     isFetchingRoute,
     bridgeUI,
   } = useSwapContext();
 
+  const onMaxClick = () => {
+    if (!srcTokenBalanceWei) {
+      return;
+    }
+    setSrcValue(
+      weiToHumanReadable({
+        amount: srcTokenBalanceWei,
+        decimals: srcToken?.decimals || 18,
+        precisionFractionalPlaces: srcToken?.decimals || 18,
+      }),
+    );
+  };
+
   const value = useMemo(() => {
     if (
       type === "destination" &&
@@ -45,46 +58,34 @@ export const AmountPanel = ({ type }: Props) => {
     dstChain,
   ]);
 
-  const valueUsd = useMemo(
-    () => (type === "source" ? srcValueUsd : dstValueUsd),
-    [dstValueUsd, srcValueUsd, type],
-  );
-
   return (
-    <div className="flex justify-between items-center w-full p-4 gap-8 overflow-hidden">
-      <div className="flex flex-col font-medium w-full overflow-hidden text-left">
-        {type === "source" ? (
-          <>
-            <SafeInput
-              id="swap-amount-input"
-              className={`bg-transparent border-none p-0 text-xl outline-none font-sans-bold font-bold`}
-              regex={NUMBER_INPUT_REGEX}
-              value={srcValue}
-              onChange={(value) => setSrcValue(value)}
-            />
-            {valueUsd && (
-              <div className={`text-sx opacity-60`}>{`$${valueUsd}`}</div>
-            )}
-          </>
-        ) : isFetchingRoute ? (
-          <div className="flex flex-col gap-1">
-            <Skeleton className="w-[150px] h-[30px]" />
-            <Skeleton className="w-[100px] h-[20px]" />
-          </div>
-        ) : (
-          <>
-            <div
-              className={`text-xl text-t_text_secondary font-sans-bold font-bold`}
+    <div className="flex items-center gap-3 flex-1 min-w-0 overflow-hidden text-left">
+      {type === "source" ? (
+        <>
+          <SafeInput
+            id="swap-amount-input"
+            className="bg-transparent border-none p-0 text-2xl leading-8 outline-none w-full min-w-0 text-t_text_primary placeholder:text-t_text_primary placeholder:text-opacity-40"
+            regex={NUMBER_INPUT_REGEX}
+            value={srcValue}
+            onChange={(value) => setSrcValue(value)}
+          />
+          {!!srcTokenBalanceWei && (
+            <button
+              type="button"
+              onClick={onMaxClick}
+              className="shrink-0 px-2.5 py-1 rounded-full border border-solid border-t_main_accent_light bg-gradient-to-r from-t_main_accent_light/25 to-t_main_accent_dark/25 text-[10px] font-medium leading-[18px] tracking-[0.08em] text-t_text_primary hover:from-t_main_accent_light/40 hover:to-t_main_accent_dark/40 transition-colors"
             >
-              {value || 0}
-            </div>
-            {valueUsd && (
-              <div className={`text-sx opacity-60`}>{`$${valueUsd}`}</div>
-            )}
-          </>
-        )}
-      </div>
-      {type === "source" && <Balance />}
+              MAX
+            </button>
+          )}
+        </>
+      ) : isFetchingRoute ? (
+        <Skeleton className="w-[150px] h-[32px]" />
+      ) : (
+        <div className="text-2xl leading-8 text-t_text_primary opacity-60 truncate">
+          {value || 0}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/ChainPicker/index.tsx

@@ -0,0 +1,143 @@
+import { CloseIcon, SearchIcon, WarningIcon } from "@src/assets/icons";
+import { Chain } from "@src/models";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
+
+type ChainOption = Chain & {
+  disabled?: boolean;
+};
+
+type Props = {
+  chains: ChainOption[];
+  selectedChainId?: string;
+  /**
+   * Chain occupied by the other side of the bridge — picking it requires
+   * resetting the source, same as picking an unreachable chain.
+   */
+  sameChainId?: string;
+  onSelect: (chain: ChainOption) => void;
+  onClose: () => void;
+};
+
+/**
+ * Network picker used in bridge mode, where the destination token is
+ * derived from the source token and only the chain gets picked by the user.
+ */
+export const ChainPicker = ({
+  chains,
+  selectedChainId,
+  sameChainId,
+  onSelect,
+  onClose,
+}: Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const chainSearchRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      chainSearchRef.current?.focus();
+    }, 10); // delay focus a tiny bit to ensure it works
+  }, []);
+
+  const filteredChains = useMemo(() => {
+    if (!searchValue) return chains;
+    const searchLower = searchValue.toLowerCase();
+    return chains.filter(
+      (chain) =>
+        chain.displayName.toLowerCase().includes(searchLower) ||
+        chain.chainId.toLowerCase().includes(searchLower),
+    );
+  }, [chains, searchValue]);
+
+  // The current source cannot reach this chain — picking it resets the source.
+  const requiresSourceReset = (chain: ChainOption) =>
+    !!chain.disabled || chain.chainId === sameChainId;
+
+  return (
+    <>
+      <div className="flex justify-between items-center mb-6">
+        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+          Select Network
+        </div>
+        <button
+          type="button"
+          aria-label="Close"
+          className="flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors"
+          onClick={onClose}
+        >
+          <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+            <CloseIcon />
+          </div>
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2 h-14 px-4 rounded-xl bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-5 mb-6">
+        <div className="fill-t_text_primary opacity-50 [&_svg]:w-4 [&_svg]:h-4 flex items-center shrink-0">
+          <SearchIcon />
+        </div>
+        <input
+          ref={chainSearchRef}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          placeholder="Search network name"
+          className="bg-transparent border-none outline-none w-full text-sm leading-6 text-t_text_primary placeholder:text-t_text_primary placeholder:text-opacity-40"
+        />
+      </div>
+
+      <div className="flex flex-col mx-0 h-full min-h-0 flex-1">
+        {filteredChains.length ? (
+          <Virtuoso
+            style={{ maxHeight: "700px", height: "100%" }}
+            data={filteredChains}
+            itemContent={(_, chain) => {
+              const resetWarning = requiresSourceReset(chain);
+              const isSelected = chain.chainId === selectedChainId;
+              return (
+                <div className="pb-2">
+                  <div
+                    onClick={() => onSelect(chain)}
+                    className={`flex gap-3 items-center p-3 sm:p-4 rounded-xl cursor-pointer bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-[rgba(40,40,40,0.15)] hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+                      isSelected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
+                    }`}
+                  >
+                    <img
+                      src={chain.image}
+                      alt={chain.displayName}
+                      className={`w-10 h-10 rounded-full shrink-0 ${
+                        resetWarning ? "opacity-40" : ""
+                      }`}
+                    />
+                    <div className="flex justify-between items-center gap-2 w-full min-w-0">
+                      <p
+                        className={`text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary ${
+                          resetWarning ? "opacity-40" : ""
+                        }`}
+                      >
+                        {chain.displayName}
+                      </p>
+                      {resetWarning && (
+                        <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
+                          <WarningIcon className="w-3.5 h-3.5 shrink-0" />
+                          <span className="text-xs leading-[18px] tracking-[0.01em] whitespace-nowrap">
+                            <span className="sm:hidden">Source will reset.</span>
+                            <span className="hidden sm:inline">
+                              Source will reset after selection.
+                            </span>
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            }}
+          />
+        ) : (
+          <div className="text-center py-1 text-sm text-t_text_primary text-opacity-50">
+            No network found
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/NetworkFilter/index.tsx

@@ -0,0 +1,159 @@
+import { ChevronDownIcon, SearchIcon } from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
+import { SwapPanelType } from "@src/components/Swap/SwapView";
+import { Chain } from "@src/models";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
+
+type Props = {
+  type: SwapPanelType;
+  selectedChain: Chain | undefined;
+  onSelect: (chain: Chain | undefined) => void;
+};
+
+/**
+ * Network filter embedded in the token picker search bar.
+ * Selecting a network only narrows the token list — the swap chain is
+ * set when a token gets picked.
+ */
+export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
+  const { srcChainOptions, dstChainOptions } = useSwapContext();
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const chains = useMemo(
+    () => (type === "source" ? srcChainOptions : dstChainOptions),
+    [type, srcChainOptions, dstChainOptions],
+  );
+
+  const filteredChains = useMemo(() => {
+    if (!searchValue) return chains;
+    const searchLower = searchValue.toLowerCase();
+    return chains.filter(
+      (chain) =>
+        chain.displayName.toLowerCase().includes(searchLower) ||
+        chain.chainId.toLowerCase().includes(searchLower),
+    );
+  }, [chains, searchValue]);
+
+  useEffect(() => {
+    if (!open) {
+      setSearchValue("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const onPointerDown = (e: Event) => {
+      if (
+        containerRef.current &&
+        !e.composedPath().includes(containerRef.current)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, []);
+
+  const previewChains = chains.slice(0, 3);
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((state) => !state)}
+        className="flex items-center gap-2 h-12 px-3 py-2 rounded-lg bg-t_bg_tertiary bg-opacity-[0.04] hover:bg-opacity-10 transition-colors"
+      >
+        {selectedChain ? (
+          <img
+            src={selectedChain.image}
+            alt={selectedChain.displayName}
+            className="w-5 h-5 rounded-full"
+          />
+        ) : (
+          <div className="flex -space-x-1.5 shrink-0">
+            {previewChains.map((chain) => (
+              <img
+                key={chain.chainId}
+                src={chain.image}
+                alt={chain.displayName}
+                className="w-5 h-5 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
+              />
+            ))}
+          </div>
+        )}
+        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap max-w-[120px] truncate">
+          {selectedChain
+            ? selectedChain.displayName
+            : `${chains.length} Networks`}
+        </p>
+        <div
+          className={`flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 transition-transform [&_svg]:w-3 [&_svg]:h-3 ${
+            open ? "rotate-180" : ""
+          }`}
+        >
+          <ChevronDownIcon />
+        </div>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-[calc(100%+8px)] z-20 flex flex-col w-[220px] max-h-[280px] rounded-xl bg-t_bg_primary border border-solid border-t_text_primary border-opacity-10 backdrop-blur-[24px] overflow-hidden shadow-lg">
+          <div className="flex items-center gap-2 px-4 py-3 border-b border-solid border-t_text_primary border-opacity-10">
+            <div className="fill-t_text_primary opacity-50 [&_svg]:w-3.5 [&_svg]:h-3.5 flex items-center">
+              <SearchIcon />
+            </div>
+            <input
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              placeholder={`Browse ${chains.length} Chains...`}
+              className="bg-transparent border-none outline-none w-full text-sm text-t_text_primary placeholder:text-t_text_primary placeholder:text-opacity-40"
+            />
+          </div>
+          <div className="h-[200px]">
+            <Virtuoso
+              style={{ height: "200px" }}
+              data={[undefined, ...filteredChains] as (Chain | undefined)[]}
+              itemContent={(_, chain) => (
+                <button
+                  type="button"
+                  onClick={() => {
+                    onSelect(chain);
+                    setOpen(false);
+                  }}
+                  className={`flex items-center gap-2 w-full px-4 py-2 text-left hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+                    (chain?.chainId || "") === (selectedChain?.chainId || "")
+                      ? "bg-t_bg_tertiary bg-opacity-10"
+                      : ""
+                  }`}
+                >
+                  {chain ? (
+                    <img
+                      src={chain.image}
+                      alt={chain.displayName}
+                      className="w-5 h-5 rounded-full"
+                    />
+                  ) : (
+                    <div className="flex -space-x-1 shrink-0">
+                      {previewChains.map((previewChain) => (
+                        <img
+                          key={previewChain.chainId}
+                          src={previewChain.image}
+                          alt={previewChain.displayName}
+                          className="w-4 h-4 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
+                        />
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-sm leading-6 text-t_text_primary truncate">
+                    {chain ? chain.displayName : "All Networks"}
+                  </p>
+                </button>
+              )}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};