@xswap-link/sdk 0.15.0 → 0.15.2

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

@@ -57,9 +57,12 @@ export const TokenTiles = () => {
   return (
     <div className="flex flex-col gap-1.5">
       <TokenTile type="source" />
-      {/* Zero-height anchor between the tiles, like ReorderButton in SwapView */}
+      {/* Zero-height anchor between the tiles, like ReorderButton in SwapView.
+          Opaque bg on purpose: Chromium ignores backdrop-filter nested inside
+          the widget's own backdrop-blur, so a translucent bg would let the
+          tile edges show through the marker. */}
       <div className="h-0 w-full relative z-[1]">
-        <div className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-[24px] bg-t_bg_secondary bg-opacity-50 bg-gradient-to-b from-t_bg_tertiary/10 to-t_bg_tertiary/[0.08]">
+        <div className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-[24px] bg-t_bg_secondary bg-gradient-to-b from-t_bg_tertiary/10 to-t_bg_tertiary/[0.08]">
           <ChevronDownWideThinIcon className="w-6 h-6 text-t_text_primary opacity-50" />
         </div>
       </div>

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

@@ -7,7 +7,7 @@ type Props = {
 export const Header = ({ onCloseClick }: Props) => {
   return (
     <div className="flex justify-between items-center gap-6">
-      <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+      <div className="text-2xl font-medium leading-8 tracking-[0.01em] text-t_text_primary">
         Confirmation
       </div>
       <button

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

@@ -1,5 +1,6 @@
 import {
   CCIP_ROUTER_PROGRAM_ID,
+  EXPRESS_DELIVERY_TIME,
   FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
   FEE_QUOTER_PROGRAM_ID,
   LINK_TOKEN_MINT,
@@ -69,6 +70,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
     route,
     refreshBalance,
     bridgeUI,
+    isExpressDeliveryActive,
   } = useSwapContext();
 
   const {
@@ -107,13 +109,15 @@ export const TxOverview = ({ onCloseClick }: Props) => {
         tokenOutAddress: dstToken?.address,
         tokenOutAmount: dstValueWei,
 
-        estimatedDeliveryTimestamp:
-          Number(route.xSwapFees.expressDeliveryFee || "0") > 0 // express delivery fee TODO
-            ? (Date.now() / 1000) * 1000 + 30 * 1000
-            : (Date.now() / 1000) * 1000 +
-                crosschainEstimationTimes?.[srcChain?.chainId]?.[
-                  dstChain?.chainId
-                ] || FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+        // Read the speed off the quote, never off the express-delivery fee: a fast
+        // CCTP transfer pays Circle out of the bridged USDC and charges no express
+        // fee, so the fee test used to promise 30 minutes for a 30-second transfer.
+        estimatedDeliveryTimestamp: isExpressDeliveryActive
+          ? Date.now() + EXPRESS_DELIVERY_TIME
+          : Date.now() +
+            (crosschainEstimationTimes?.[srcChain?.chainId]?.[
+              dstChain?.chainId
+            ] || FALLBACK_CROSSCHAIN_ESTIMATION_TIME),
         status: "IN_PROGRESS",
       };
       if (srcChain.chainId === dstChain.chainId) {
@@ -199,6 +203,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
       dstValueWei,
       supportedChains,
       route,
+      isExpressDeliveryActive,
     ],
   );
 

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

@@ -0,0 +1,136 @@
+import {
+  CheckCircleThinIcon,
+  ProgressRingThinIcon,
+  RedirectThinIcon,
+} from "@src/assets/icons";
+import {
+  crosschainEstimationTimes,
+  FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+} from "@src/constants";
+import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { CrossChainDelivery } from "@src/hooks";
+import { useEffect, useMemo, useState } from "react";
+import { TokenTiles } from "../TokenTiles";
+
+type Props = {
+  onCloseClick: () => void;
+  delivery: CrossChainDelivery;
+};
+
+/** A fast transfer that has not landed within this much is not "about to" —
+ *  say so, rather than leave the user watching a spinner that promised seconds. */
+const FAST_DELIVERY_GRACE_MS = 2 * 60 * 1000;
+
+const formatElapsed = (ms: number) => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+/**
+ * The source tx is mined and the funds are in flight.
+ *
+ * This is the state a fixed "delivery in ~30 min" note used to paper over: most
+ * transfers land in well under a minute, and the only way to know is to ask the API
+ * (which also claims a CCTP transfer while it answers — see `useCrossChainDelivery`).
+ * So the swap is not reported as finished here; it waits for the destination.
+ */
+export const TxProgress = ({ onCloseClick, delivery }: Props) => {
+  const { srcChain, dstChain, isExpressDeliveryActive } = useSwapContext();
+  const { txExplorerUrl } = useTxUIWrapper();
+
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const ticker = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(ticker);
+  }, []);
+
+  const elapsedMs = delivery.startedAt
+    ? Math.max(0, now - delivery.startedAt)
+    : 0;
+
+  // The bridge's own answer once it has one (a fast burn can be attested at the
+  // standard tier), the quote's until then.
+  const isExpress =
+    delivery.response?.expressDelivery ?? isExpressDeliveryActive;
+
+  const estimatedMs = useMemo(
+    () =>
+      (srcChain &&
+        dstChain &&
+        crosschainEstimationTimes?.[srcChain.chainId]?.[dstChain.chainId]) ||
+      FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+    [srcChain, dstChain],
+  );
+
+  const isSlow = elapsedMs > (isExpress ? FAST_DELIVERY_GRACE_MS : estimatedMs);
+
+  const note = isSlow
+    ? "This is taking longer than usual. Nothing is lost — the transfer is still on its way."
+    : isExpress
+      ? "Fast delivery is on: funds usually arrive within a minute."
+      : `Funds can take up to ${Math.round(
+          estimatedMs / 60000,
+        )} minutes to arrive on ${dstChain?.displayName || "the destination chain"}.`;
+
+  return (
+    <div className="flex flex-col gap-8 text-t_text_primary">
+      <div className="flex flex-col gap-2">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
+          Delivering Funds
+        </div>
+        <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+          {note}
+        </div>
+        <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-25">
+          You can close this window — the transfer completes on its own.
+        </div>
+      </div>
+      <TokenTiles />
+      <div className="flex flex-col rounded-xl bg-t_bg_tertiary bg-opacity-[0.02]">
+        <div className="flex items-center justify-between gap-4 px-4 sm:px-6 py-4 rounded-lg">
+          <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+            {`Swap confirmed on ${srcChain?.displayName || "the source chain"}`}
+          </div>
+          <CheckCircleThinIcon className="w-6 h-6 shrink-0 text-[#6AE89B]" />
+        </div>
+        <div className="flex items-center justify-between gap-4 px-4 sm:px-6 py-4 rounded-lg bg-gradient-to-r from-transparent via-t_bg_tertiary/5 to-transparent">
+          <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-75">
+            {`Waiting for funds on ${
+              dstChain?.displayName || "the destination chain"
+            }`}
+          </div>
+          <div className="flex items-center gap-3 shrink-0">
+            <span className="text-sm leading-5 tracking-[0.01em] tabular-nums text-t_text_primary text-opacity-50">
+              {formatElapsed(elapsedMs)}
+            </span>
+            <ProgressRingThinIcon className="w-6 h-6 shrink-0 animate-spin-slow text-t_text_primary" />
+          </div>
+        </div>
+      </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"
+      >
+        Close
+      </button>
+      <div className="w-full flex gap-3 items-center">
+        <a
+          href={txExplorerUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-1.5 text-sm text-t_text_primary text-opacity-25 hover:text-opacity-50 transition-colors"
+        >
+          View On Explorer{" "}
+          <div className="w-6 h-6 bg-t_bg_tertiary bg-opacity-5 rounded-[4px] flex items-center justify-center">
+            <RedirectThinIcon className="w-3 h-3" />
+          </div>
+        </a>
+        <div className="flex-1 h-px bg-t_text_primary bg-opacity-10" />
+      </div>
+    </div>
+  );
+};

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

@@ -1,28 +1,98 @@
 import {
   CheckCircleThinIcon,
   ErrorCircleThinIcon,
-  LinkExternalThinIcon,
+  RedirectThinIcon,
 } from "@src/assets/icons";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { CrossChainDelivery } from "@src/hooks";
+import { Ecosystem } from "@src/models";
+import { useMemo } from "react";
 import { TokenTiles } from "../TokenTiles";
 
 type Props = {
   onCloseClick: () => void;
+  /**
+   * How the transfer actually settled. Absent for the flows whose delivery is not
+   * tracked — a single-chain swap, a non-EVM source, or a standalone transaction run
+   * through this modal — where the source receipt is the whole story.
+   */
+  delivery?: CrossChainDelivery;
 };
 
-export const TxResult = ({ onCloseClick }: Props) => {
+export const TxResult = ({ onCloseClick, delivery }: Props) => {
   const { txError, txExplorerUrl, txMsg } = useTxUIWrapper();
-  const { isExpressDeliveryActive, srcChain, dstChain } = useSwapContext();
+  const { isExpressDeliveryActive, srcChain, dstChain, supportedChains } =
+    useSwapContext();
+
+  const isCrossChain =
+    !!srcChain && !!dstChain && srcChain.chainId !== dstChain.chainId;
+  const failed = !!txError || !!delivery?.isFailed;
+  // Delivered, but as the bridged token: the destination swap never ran, and it
+  // never will — so this is an outcome to report, not a step still pending.
+  const partiallyFailed = !!delivery?.isPartiallyFailed;
+
+  const targetTx = delivery?.response?.targetTx;
+  const targetExplorerUrl = useMemo(() => {
+    if (!targetTx) {
+      return undefined;
+    }
+    const explorer = supportedChains.find(
+      (chain) =>
+        chain.chainId === targetTx.chainId && chain.ecosystem === Ecosystem.EVM,
+    )?.transactionExplorer;
+    return explorer ? `${explorer}/${targetTx.hash}` : undefined;
+  }, [supportedChains, targetTx]);
+
+  const note = useMemo(() => {
+    if (delivery?.isFailed) {
+      return `The transaction failed on ${
+        srcChain?.displayName || "the source chain"
+      }.`;
+    }
+    if (partiallyFailed) {
+      return `The swap on ${
+        dstChain?.displayName || "the destination chain"
+      } could not be completed, so the bridged tokens were sent to your wallet instead.`;
+    }
+    if (delivery?.isDelivered) {
+      return `Funds delivered on ${
+        dstChain?.displayName || "the destination chain"
+      }.`;
+    }
+    // Nothing was tracked (non-EVM source), so the estimate is all there is. Read
+    // the speed off the quote, never off the express-delivery fee — a fast CCTP
+    // transfer pays Circle out of the bridged USDC and charges no express fee.
+    if (isCrossChain) {
+      return `Approximated time of delivery: ${
+        isExpressDeliveryActive ? "30 sec" : "30 min"
+      }`;
+    }
+    return undefined;
+  }, [
+    delivery?.isDelivered,
+    delivery?.isFailed,
+    partiallyFailed,
+    isCrossChain,
+    isExpressDeliveryActive,
+    srcChain?.displayName,
+    dstChain?.displayName,
+  ]);
 
   return (
     <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 className="text-2xl font-medium leading-8 tracking-[0.01em]">
+            {failed
+              ? "Transaction Error"
+              : partiallyFailed
+                ? "Partially Completed"
+                : "Transaction Success"}
           </div>
-          {txError ? (
+          {failed ? (
             <ErrorCircleThinIcon className="w-6 h-6 shrink-0 text-[#F44336]" />
+          ) : partiallyFailed ? (
+            <ErrorCircleThinIcon className="w-6 h-6 shrink-0 text-t_warning_light" />
           ) : (
             <CheckCircleThinIcon className="w-6 h-6 shrink-0 text-[#6AE89B]" />
           )}
@@ -33,31 +103,14 @@ export const TxResult = ({ onCloseClick }: Props) => {
           </div>
         ) : (
           !txMsg &&
-          srcChain !== dstChain && (
+          !!note && (
             <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"
-              }`}
+              {note}
             </div>
           )
         )}
       </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
-              <LinkExternalThinIcon className="w-3 h-3" />
-            </a>
-          )}
-        </div>
-      )}
+      {!txMsg && <TokenTiles />}
       <div className="h-px w-full gradient-sections-separator-container" />
       <button
         type="button"
@@ -66,6 +119,35 @@ export const TxResult = ({ onCloseClick }: Props) => {
       >
         Continue
       </button>
+      {!txMsg && !txError && (
+        <div className="w-full flex gap-3 items-center">
+          <a
+            href={txExplorerUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1.5 text-sm text-t_text_primary text-opacity-25 hover:text-opacity-50 transition-colors"
+          >
+            View On Explorer{" "}
+            <div className="w-6 h-6 bg-t_bg_tertiary bg-opacity-5 rounded-[4px] flex items-center justify-center">
+              <RedirectThinIcon className="w-3 h-3" />
+            </div>
+          </a>
+          {targetExplorerUrl && (
+            <a
+              href={targetExplorerUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-1.5 text-sm text-t_text_primary text-opacity-25 hover:text-opacity-50 transition-colors"
+            >
+              View Delivery{" "}
+              <div className="w-6 h-6 bg-t_bg_tertiary bg-opacity-5 rounded-[4px] flex items-center justify-center">
+                <RedirectThinIcon className="w-3 h-3" />
+              </div>
+            </a>
+          )}
+          <div className="flex-1 h-px bg-t_text_primary bg-opacity-10" />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -1,17 +1,32 @@
 import { useTxUIWrapper } from "@src/context";
+import { CrossChainDelivery } from "@src/hooks";
 import { TxStatus } from "@src/models";
 import { TxOverview } from "./TxOverview";
+import { TxProgress } from "./TxProgress";
 import { TxResult } from "./TxResult";
 
 type Props = {
   onCloseClick: () => void;
+  /** Delivery tracking for the transfer in the modal, owned by {@link TxUIWrapper}
+   *  so the modal's own styling can follow it too. Idle unless one is in flight. */
+  delivery: CrossChainDelivery;
 };
-export const ConfirmationView = ({ onCloseClick }: Props) => {
+export const ConfirmationView = ({ onCloseClick, delivery }: Props) => {
   const { txStatus, txError } = useTxUIWrapper();
 
-  return txStatus === TxStatus.COMPLETED || txError ? (
-    <TxResult onCloseClick={onCloseClick} />
+  if (txError) {
+    return <TxResult onCloseClick={onCloseClick} delivery={delivery} />;
+  }
+
+  if (txStatus !== TxStatus.COMPLETED) {
+    return <TxOverview onCloseClick={onCloseClick} />;
+  }
+
+  // The source tx is mined, which for a cross-chain swap is the halfway point, not
+  // the end: hold the success view until the funds actually land on the destination.
+  return delivery.isPolling ? (
+    <TxProgress onCloseClick={onCloseClick} delivery={delivery} />
   ) : (
-    <TxOverview onCloseClick={onCloseClick} />
+    <TxResult onCloseClick={onCloseClick} delivery={delivery} />
   );
 };

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

@@ -1,5 +1,5 @@
 import { useSwapContext } from "@src/context";
-import { weiToHumanReadable } from "@src/utils";
+import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
 import { Fee } from "../Fee";
 
 export const Fees = ({
@@ -7,8 +7,14 @@ export const Fees = ({
 }: {
   solanaBridgeFee: string | null;
 }) => {
-  const { route, slippage, feeToken, dstToken, expressDelivery } =
-    useSwapContext();
+  const { route, slippage, feeToken, dstToken } = useSwapContext();
+
+  // Only routes that buy their speed with an express-delivery fee have a fee to show.
+  // A fast CCTP transfer has none — Circle's fast-transfer fee is taken out of the
+  // bridged USDC — so the row would read "0" on the very routes that are fastest.
+  const expressDeliveryFee = safeBigNumberFrom(
+    route?.xSwapFees.expressDeliveryFee || "0",
+  );
 
   const fees = [
     {
@@ -33,13 +39,13 @@ export const Fees = ({
         }) || 0
       } ${feeToken?.symbol || ""}`,
     },
-    ...(expressDelivery
+    ...(expressDeliveryFee.gt(0)
       ? [
           {
             name: "Express delivery Fee: ",
             value: `${
               weiToHumanReadable({
-                amount: route?.xSwapFees.expressDeliveryFee || "0",
+                amount: expressDeliveryFee.toString(),
                 decimals: feeToken?.decimals || 18,
                 precisionFractionalPlaces: 5,
               }) || 0
@@ -47,7 +53,7 @@ export const Fees = ({
           },
         ]
       : []),
-    { name: "Price Tolerance: ", value: `${slippage}%` },
+    { name: "Slippage: ", value: `${slippage}%` },
     {
       name: "Min. Received: ",
       value: `${

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

@@ -200,8 +200,10 @@ export const FeesPanel = () => {
               </>
             )}
           </div>
+          {/* The 24px glyph has 8px of built-in whitespace on each side; pull the
+              right side back so the chevron sits flush with the panel padding. */}
           <div
-            className={`flex items-center justify-center w-6 h-6 text-t_text_primary opacity-50 transition-transform ${
+            className={`flex items-center justify-center w-6 h-6 -mr-2 text-t_text_primary opacity-50 transition-transform ${
               expanded ? "rotate-180" : ""
             }`}
           >

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

@@ -22,6 +22,7 @@ export const AmountPanel = ({ type }: Props) => {
     setSrcValue,
     isFetchingRoute,
     bridgeUI,
+    isAsyncDataLoaded,
   } = useSwapContext();
 
   const onMaxClick = () => {
@@ -58,6 +59,14 @@ export const AmountPanel = ({ type }: Props) => {
     dstChain,
   ]);
 
+  if (!isAsyncDataLoaded) {
+    return (
+      <div className="flex items-center flex-1 min-w-0">
+        <Skeleton className="w-[100px] h-8" />
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-3 flex-1 min-w-0 overflow-hidden text-left">
       {type === "source" ? (

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

@@ -56,7 +56,7 @@ export const ChainPicker = ({
   return (
     <>
       <div className="flex justify-between items-center mb-6">
-        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em] text-t_text_primary">
           Select Network
         </div>
         <button

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

@@ -99,58 +99,68 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
       </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="text-t_text_primary opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 flex items-center">
+        <div className="absolute -right-2 top-[calc(100%+8px)] z-20 flex flex-col w-[296px] py-5 px-2.5 rounded-xl network-dropdown-surface border border-solid border-t_text_primary border-opacity-5 overflow-hidden">
+          <div className="flex items-center gap-2 px-2.5 pb-4">
+            <div className="text-t_text_primary opacity-60 [&_svg]:w-4 [&_svg]:h-4 flex items-center">
               <SearchThinIcon />
             </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"
+              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="h-[200px]">
+          <div className="h-px w-full bg-t_bg_tertiary bg-opacity-5 mb-2" />
+          {/* The design's list mask is a hard cut 6px into the sixth row —
+              that sliver is the hint that the list scrolls. Rows are 40px
+              pills around 24px of content, so the cut lands at 214px. */}
+          <div className="h-[214px]">
             <Virtuoso
-              style={{ height: "200px" }}
+              style={{ height: "214px" }}
               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-0.5 shrink-0">
-                      {clusterChains.map((clusterChain) => (
-                        <img
-                          key={clusterChain.chainId}
-                          src={clusterChain.image}
-                          alt={clusterChain.displayName}
-                          className="w-[11px] h-[11px] rounded-full"
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <p className="text-sm leading-6 text-t_text_primary truncate">
-                    {chain ? chain.displayName : "All Networks"}
-                  </p>
-                </button>
-              )}
+              itemContent={(_, chain) => {
+                const isSelected =
+                  (chain?.chainId || "") === (selectedChain?.chainId || "");
+                return (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onSelect(chain);
+                      setOpen(false);
+                    }}
+                    className={`network-dropdown-row flex items-center gap-2.5 w-full h-10 px-2.5 rounded-lg text-left ${
+                      isSelected ? "network-dropdown-row-active" : ""
+                    }`}
+                  >
+                    {chain ? (
+                      <img
+                        src={chain.image}
+                        alt={chain.displayName}
+                        className="w-6 h-6 rounded-full"
+                      />
+                    ) : (
+                      <div className="grid grid-cols-2 gap-0.5 shrink-0">
+                        {clusterChains.map((clusterChain) => (
+                          <img
+                            key={clusterChain.chainId}
+                            src={clusterChain.image}
+                            alt={clusterChain.displayName}
+                            className="w-[11px] h-[11px] rounded-full"
+                          />
+                        ))}
+                      </div>
+                    )}
+                    <p
+                      className={`text-sm leading-[18px] tracking-[0.01em] text-t_text_primary truncate ${
+                        isSelected ? "" : "text-opacity-80"
+                      }`}
+                    >
+                      {chain ? chain.displayName : "All Networks"}
+                    </p>
+                  </button>
+                );
+              }}
             />
           </div>
         </div>

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

@@ -139,7 +139,7 @@ export const TokenItem = ({
               )
             )}
             {resetWarning ? (
-              <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
+              <div className="flex items-center justify-end gap-1.5 text-[#F46F28]">
                 <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">