@xswap-link/sdk 0.14.0 → 0.15.0

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

@@ -1,14 +1,10 @@
 import {
-  ArrowDownLongIcon,
-  CloseIcon,
-  ErrorModalStatusIcon,
-  LinkExternalIcon,
-  SuccessModalStatusIcon,
+  CheckCircleThinIcon,
+  ErrorCircleThinIcon,
+  LinkExternalThinIcon,
 } from "@src/assets/icons";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
-import { TokenItem } from "./TokenItem";
-import { useMemo } from "react";
-import { Ecosystem } from "@src/models";
+import { TokenTiles } from "../TokenTiles";
 
 type Props = {
   onCloseClick: () => void;
@@ -16,79 +12,60 @@ type Props = {
 
 export const TxResult = ({ onCloseClick }: Props) => {
   const { txError, txExplorerUrl, txMsg } = useTxUIWrapper();
-  const {
-    isExpressDeliveryActive,
-    srcChain,
-    srcToken,
-    dstChain,
-    dstToken,
-    srcValue,
-    dstValue,
-    bridgeUI,
-  } = useSwapContext();
-
-  const value = useMemo(() => {
-    if (bridgeUI && srcChain?.ecosystem === Ecosystem.SOLANA) {
-      return srcValue;
-    }
-    return dstValue;
-  }, [bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
+  const { isExpressDeliveryActive, srcChain, dstChain } = useSwapContext();
 
   return (
-    <div className="flex flex-col gap-5 text-t_text_primary justify-center items-center">
-      {txError ? (
-        <>
-          <div
-            className="flex justify-end fill-t_text_primary cursor-pointer w-full"
-            onClick={onCloseClick}
-          >
-            <CloseIcon className="w-3.5 h-3.5" />
-          </div>
-          <ErrorModalStatusIcon />
-          <div className="text-2xl font-bold">Transaction failed</div>
-          <div className="text-center">{txError}</div>
-        </>
-      ) : (
-        <>
-          <div
-            className="flex justify-end fill-t_text_primary cursor-pointer w-full"
-            onClick={onCloseClick}
-          >
-            <CloseIcon className="w-3.5 h-3.5" />
+    <div className="flex flex-col gap-8 text-t_text_primary">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-3">
+          <div className="text-2xl leading-8 tracking-[0.01em]">
+            {txError ? "Transaction Error" : "Transaction Success"}
           </div>
-          <SuccessModalStatusIcon />
-          <div className="flex flex-col items-center">
-            <div className="text-2xl font-bold">Transaction success!</div>
-            {!txMsg && srcChain !== dstChain && (
-              <div className="text-sm font-normal opacity-60">
-                {`Approximated time of delivery: ${
-                  isExpressDeliveryActive ? "30 sec" : "30 min"
-                }`}
-              </div>
-            )}
+          {txError ? (
+            <ErrorCircleThinIcon className="w-6 h-6 shrink-0 text-[#F44336]" />
+          ) : (
+            <CheckCircleThinIcon className="w-6 h-6 shrink-0 text-[#6AE89B]" />
+          )}
+        </div>
+        {txError ? (
+          <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+            {txError}
           </div>
-          {!txMsg && (
-            <div className="flex items-center gap-2">
-              <TokenItem chain={srcChain} token={srcToken} value={srcValue} />
-              <div className="-rotate-90 flex justify-center w-8 fill-t_text_primary opacity-50">
-                <ArrowDownLongIcon />
-              </div>
-              <TokenItem chain={dstChain} token={dstToken} value={value} />
+        ) : (
+          !txMsg &&
+          srcChain !== dstChain && (
+            <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+              {`Approximated time of delivery: ${
+                isExpressDeliveryActive ? "30 sec" : "30 min"
+              }`}
             </div>
-          )}
-          <a
-            href={txExplorerUrl}
-            target="_blank"
-            rel="noreferrer"
-            className="flex gap-4 items-center mb-2 fill-t_main_accent_light"
-          >
-            <p className="text-t_text_secondary underline">
+          )
+        )}
+      </div>
+      {!txMsg && (
+        <div className="flex flex-col gap-4">
+          <TokenTiles />
+          {!txError && (
+            <a
+              href={txExplorerUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 self-start text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50 hover:text-opacity-80 transition-colors"
+            >
               View details on Explorer
-            </p>
-            <LinkExternalIcon />
-          </a>
-        </>
+              <LinkExternalThinIcon className="w-3 h-3" />
+            </a>
+          )}
+        </div>
       )}
+      <div className="h-px w-full gradient-sections-separator-container" />
+      <button
+        type="button"
+        onClick={onCloseClick}
+        className="w-full px-6 py-3 rounded-lg border-none cursor-pointer bg-t_bg_tertiary bg-opacity-5 text-sm font-medium leading-6 tracking-[0.01em] text-t_text_primary text-opacity-80 hover:bg-opacity-10 transition-colors"
+      >
+        Continue
+      </button>
     </div>
   );
 };

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

@@ -11,7 +11,7 @@ export const DeliveryInfo = () => {
           : "text-t_text_primary opacity-50"
       }`}
     >
-      {isExpressDeliveryActive ? "Max. Time 30 Sec." : "Max. Time 30 Min."}
+      {isExpressDeliveryActive ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
     </span>
   );
 };

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

@@ -1,4 +1,4 @@
-import { CaretDownIcon } from "@src/assets/icons";
+import { ChevronDownThinIcon } from "@src/assets/icons";
 import { Skeleton } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
@@ -176,7 +176,7 @@ export const FeesPanel = () => {
       isFetchingSolanaFee);
 
   return (
-    <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">
+    <div className="flex flex-col rounded-xl py-3 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"
@@ -195,17 +195,17 @@ export const FeesPanel = () => {
             )}
             {route && !isLoading && srcChain?.chainId !== dstChain?.chainId && (
               <>
-                <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25" />
+                <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] ${
+            className={`flex items-center justify-center w-6 h-6 text-t_text_primary opacity-50 transition-transform ${
               expanded ? "rotate-180" : ""
             }`}
           >
-            <CaretDownIcon />
+            <ChevronDownThinIcon />
           </div>
         </div>
         {expanded && <Fees solanaBridgeFee={solanaBridgeFee} />}

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

@@ -1,4 +1,3 @@
-import { Modal } from "@src/components/Modal";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
 import { useWallet } from "@src/context/WalletProvider";
 import { ADDRESSES } from "@src/contracts";
@@ -10,7 +9,6 @@ import { safeBigNumberFrom } from "@src/utils";
 import { BigNumber } from "ethers";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
-import { WalletPicker } from "../WalletPicker";
 
 type Button = {
   text: string;
@@ -53,11 +51,8 @@ export const SwapButton = () => {
   } = useNetworks();
 
   const {
-    openEVMWalletModal,
     setOpenEVMWalletModal,
-    openSolanaWalletModal,
     setOpenSolanaWalletModal,
-    openSuiWalletModal,
     setOpenSuiWalletModal,
     solana,
     sui,
@@ -314,38 +309,14 @@ export const SwapButton = () => {
 
   return (
     <>
-      {openEVMWalletModal && (
-        <Modal onClose={() => setOpenEVMWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.EVM}
-            onClose={() => setOpenEVMWalletModal(false)}
-          />
-        </Modal>
-      )}
-      {openSolanaWalletModal && (
-        <Modal onClose={() => setOpenSolanaWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.SOLANA}
-            onClose={() => setOpenSolanaWalletModal(false)}
-          />
-        </Modal>
-      )}
-      {openSuiWalletModal && (
-        <Modal onClose={() => setOpenSuiWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.SUI}
-            onClose={() => setOpenSuiWalletModal(false)}
-          />
-        </Modal>
-      )}
       <button
         type="button"
         disabled={button.disabled}
         onClick={button.fn}
-        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 ${
+        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-br from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text hover:opacity-90"
+            : "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

@@ -55,9 +55,9 @@ export const Balance = ({ type }: Props) => {
       ) : (
         <p className="text-[10px] leading-4 text-right whitespace-nowrap">
           <span className="text-t_text_primary text-opacity-50">
-            {`Balance `}
+            {`Balance. `}
           </span>
-          <span className="text-t_text_primary text-opacity-75">
+          <span className="text-t_text_primary text-opacity-75 tracking-[0.032em]">
             {`${balanceInfo} ${token.symbol}`}
           </span>
         </p>

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

@@ -25,7 +25,7 @@ export const AmountPanel = ({ type }: Props) => {
   } = useSwapContext();
 
   const onMaxClick = () => {
-    if (!srcTokenBalanceWei) {
+    if (!srcToken || !srcTokenBalanceWei) {
       return;
     }
     setSrcValue(
@@ -69,7 +69,7 @@ export const AmountPanel = ({ type }: Props) => {
             value={srcValue}
             onChange={(value) => setSrcValue(value)}
           />
-          {!!srcTokenBalanceWei && (
+          {!!srcToken && !!srcTokenBalanceWei && (
             <button
               type="button"
               onClick={onMaxClick}

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

@@ -0,0 +1,143 @@
+import { CloseIcon, SearchThinIcon, 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="text-t_text_primary opacity-60 flex items-center shrink-0">
+          <SearchThinIcon />
+        </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

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, SearchIcon } from "@src/assets/icons";
+import { ChevronDownThinIcon, SearchThinIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { Chain } from "@src/models";
@@ -56,14 +56,15 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
 
-  const previewChains = chains.slice(0, 4);
+  // 2x2 icon cluster shown when no network is picked
+  const clusterChains = 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"
+        className="flex items-center gap-2.5 h-12 px-3 py-2 rounded-lg bg-t_bg_tertiary bg-opacity-[0.04] hover:bg-opacity-10 transition-colors"
       >
         {selectedChain ? (
           <img
@@ -72,8 +73,8 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
             className="w-5 h-5 rounded-full"
           />
         ) : (
-          <div className="grid grid-cols-2 gap-0.5 w-6 shrink-0">
-            {previewChains.map((chain) => (
+          <div className="grid grid-cols-2 gap-0.5 shrink-0">
+            {clusterChains.map((chain) => (
               <img
                 key={chain.chainId}
                 src={chain.image}
@@ -84,22 +85,24 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
           </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"}
+          {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 ${
+          className={`flex items-center justify-center w-6 h-6 text-t_text_primary opacity-50 transition-transform ${
             open ? "rotate-180" : ""
           }`}
         >
-          <ChevronDownIcon />
+          <ChevronDownThinIcon />
         </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 className="text-t_text_primary opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 flex items-center">
+              <SearchThinIcon />
             </div>
             <input
               value={searchValue}
@@ -132,13 +135,13 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
                       className="w-5 h-5 rounded-full"
                     />
                   ) : (
-                    <div className="grid grid-cols-2 gap-px w-5 shrink-0">
-                      {previewChains.map((previewChain) => (
+                    <div className="grid grid-cols-2 gap-0.5 shrink-0">
+                      {clusterChains.map((clusterChain) => (
                         <img
-                          key={previewChain.chainId}
-                          src={previewChain.image}
-                          alt={previewChain.displayName}
-                          className="w-[9px] h-[9px] rounded-full"
+                          key={clusterChain.chainId}
+                          src={clusterChain.image}
+                          alt={clusterChain.displayName}
+                          className="w-[11px] h-[11px] rounded-full"
                         />
                       ))}
                     </div>

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

@@ -69,7 +69,7 @@ export const TokenItem = ({
   return (
     <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 ${
+        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" : ""
         }`}
         onClick={onClick}
@@ -142,9 +142,16 @@ export const TokenItem = ({
               <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 className="sm:hidden">
+                    {resetWarning === "source"
+                      ? "Source will reset."
+                      : "Destination will reset."}
+                  </span>
+                  <span className="hidden sm:inline">
+                    {resetWarning === "source"
+                      ? "Source will reset after selection."
+                      : "Destination will reset after selection."}
+                  </span>
                 </span>
               </div>
             ) : (