@xswap-link/sdk 0.13.0 → 0.14.0

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/TokenPicker/NetworkFilter/index.tsx

@@ -0,0 +1,157 @@
+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, 4);
+
+  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="grid grid-cols-2 gap-0.5 w-6 shrink-0">
+            {previewChains.map((chain) => (
+              <img
+                key={chain.chainId}
+                src={chain.image}
+                alt={chain.displayName}
+                className="w-[11px] h-[11px] rounded-full"
+              />
+            ))}
+          </div>
+        )}
+        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap max-w-[120px] truncate">
+          {selectedChain ? selectedChain.displayName : "All 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="grid grid-cols-2 gap-px w-5 shrink-0">
+                      {previewChains.map((previewChain) => (
+                        <img
+                          key={previewChain.chainId}
+                          src={previewChain.image}
+                          alt={previewChain.displayName}
+                          className="w-[9px] h-[9px] rounded-full"
+                        />
+                      ))}
+                    </div>
+                  )}
+                  <p className="text-sm leading-6 text-t_text_primary truncate">
+                    {chain ? chain.displayName : "All Networks"}
+                  </p>
+                </button>
+              )}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,9 +1,9 @@
-import { StarsIcon } from "@src/assets/icons";
+import { StarsIcon, WarningIcon } from "@src/assets/icons";
 import { Skeleton, TokenLogoWithChain } from "@src/components";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
 import { TokenOption } from "@src/models";
-import { weiToHumanReadable } from "@src/utils";
+import { shortAddress, weiToHumanReadable } from "@src/utils";
 import { ethers } from "ethers";
 import { useMemo } from "react";
 import { useAccount } from "wagmi";
@@ -14,6 +14,11 @@ type Props = {
   selectedChainId: string | undefined;
   onClick: () => void;
   panelType: SwapPanelType;
+  /**
+   * When picking this token would disconnect the other side of the swap,
+   * names the side that will be reset ("source" | "destination").
+   */
+  resetWarning?: SwapPanelType | null;
 };
 export const TokenItem = ({
   token,
@@ -21,6 +26,7 @@ export const TokenItem = ({
   onClick,
   selectedChainId,
   panelType,
+  resetWarning,
 }: Props) => {
   const {
     supportedChains,
@@ -55,66 +61,103 @@ export const TokenItem = ({
     return tokenBalance * +tokenPrice;
   }, [tokenBalance, tokenPrice, hasBalance]);
 
+  const isSelected =
+    token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
+    selectedChainId &&
+    token.chainId === selectedChainId;
+
   return (
-    <div
-      className={`token-picker-container ${
-        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
-        selectedChainId &&
-        token.chainId === selectedChainId
-          ? "bg-t_bg_tertiary bg-opacity-10"
-          : ""
-      }`}
-      onClick={onClick}
-    >
-      <TokenLogoWithChain
-        token={token}
-        chain={chain}
-        tokenLogoClassName="min-w-9 w-9 h-9"
-        generatedLogoClassName="min-w-9 w-9 h-9 text-[16px]"
-        chainLogoClassName="w-5"
-      />
-      <div className="flex justify-between items-center gap-1 w-full">
-        <div className="text-left">
-          <div className="text-sm font-medium text-ellipsis text-t_text_primary flex items-center gap-1">
-            {token.name}
-            {integrationConfig?.highlightedDstTokens?.includes(token.symbol) &&
-              panelType === "destination" && (
+    <div className="pb-2">
+      <div
+        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-t_bg_secondary bg-opacity-15 hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+          isSelected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
+        }`}
+        onClick={onClick}
+      >
+        <div className={`shrink-0 ${resetWarning ? "opacity-40" : ""}`}>
+          <TokenLogoWithChain
+            token={token}
+            chain={chain}
+            tokenLogoClassName="min-w-10 w-10 h-10"
+            generatedLogoClassName="min-w-10 w-10 h-10 text-[16px]"
+            chainLogoClassName="w-[18px]"
+          />
+        </div>
+        <div className="flex justify-between items-center gap-2 w-full min-w-0">
+          <div
+            className={`text-left min-w-0 ${resetWarning ? "opacity-40" : ""}`}
+          >
+            <div className="text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary flex items-center gap-1">
+              {token.symbol}
+              {integrationConfig?.highlightedDstTokens?.includes(
+                token.symbol,
+              ) &&
+                panelType === "destination" && (
+                  <div
+                    className="flex items-center justify-center text-t_text_primary rounded-full w-3.5 h-3.5 text-xs"
+                    title="AI-powered token"
+                  >
+                    <StarsIcon />
+                  </div>
+                )}
+            </div>
+            <div className="flex gap-2 items-center text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+              <span className="whitespace-nowrap">
+                {chain?.displayName || token.name}
+              </span>
+              {!resetWarning && (
+                <>
+                  <span className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+                  <span className="whitespace-nowrap hidden sm:block">
+                    {shortAddress(token.address)}
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="text-right shrink-0">
+            {address && isFetchingBalances ? (
+              <Skeleton className="w-[48px] h-[12px]" />
+            ) : (
+              token.balance &&
+              token.decimals &&
+              address && (
                 <div
-                  className={`flex items-center justify-center text-white rounded-full border-t_bg_secondary ${"w-3.5 h-3.5 text-xs"}`}
-                  title="AI-powered token"
+                  className={`text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary ${
+                    resetWarning ? "opacity-40" : ""
+                  }`}
                 >
-                  <StarsIcon />
+                  {token.balance.eq(0) || tokenBalance! > 0.0001
+                    ? weiToHumanReadable({
+                        amount: token.balance.toString(),
+                        decimals: token.decimals,
+                        precisionFractionalPlaces: 4,
+                      })
+                    : "<0.0001"}
                 </div>
-              )}
-          </div>
-          <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
-            {token.symbol}
-          </div>
-        </div>
-        {token.balance && token.decimals && address && !isFetchingBalances && (
-          <div className="text-right">
-            <div className="text-xs text-t_text_primary">
-              {token.balance.eq(0) || tokenBalance! > 0.0001
-                ? weiToHumanReadable({
-                    amount: token.balance.toString(),
-                    decimals: token.decimals,
-                    precisionFractionalPlaces: 4,
-                  })
-                : "<0.0001"}
-            </div>
-            {hasBalance && (
-              <div className="text-xs text-t_text_primary text-opacity-50">
-                {tokenValueUsd ? `$${tokenValueUsd.toFixed(2)}` : "$ -"}
+              )
+            )}
+            {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">
+                  {resetWarning === "source"
+                    ? "Source will reset after selection."
+                    : "Destination will reset after selection."}
+                </span>
               </div>
+            ) : (
+              !isFetchingBalances &&
+              hasBalance &&
+              address && (
+                <div className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+                  {tokenValueUsd ? `${tokenValueUsd.toFixed(2)} USD` : "-"}
+                </div>
+              )
             )}
           </div>
-        )}
-
-        {address && isFetchingBalances && (
-          <div>
-            <Skeleton className="w-[48px] h-[12px]" />
-          </div>
-        )}
+        </div>
       </div>
     </div>
   );