@xswap-link/sdk 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -81,6 +81,7 @@
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "autoprefixer": "^10.5.4",
     "babel-jest": "^29.7.0",
     "cross-fetch": "^4.1.0",
     "eslint": "^8.57.0",

package/postcss.config.js

@@ -4,6 +4,8 @@ module.exports = {
     require("postcss-import"),
     // Resolves TailwindCSS
     require("tailwindcss")(),
+    // Adds vendor prefixes (e.g. -webkit-backdrop-filter for Safari < 18)
+    require("autoprefixer"),
     // Removes comments from CSS and redundant whitespaces
     require("postcss-minify"),
   ],

package/src/assets/icons/ChevronRightThinIcon.tsx

@@ -0,0 +1,23 @@
+// Glyph-tight box (no 16/24px padding frame) so flex gaps around it match
+// the design's spacing exactly. Geometry is Figma's "Vector 8262" chevron
+// rotated to point right.
+export const ChevronRightThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="4"
+      height="7"
+      viewBox="0 0 3.58671 7"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M0 6.5H0.500926L2.79382 4.20711C3.18434 3.81658 3.18434 3.18342 2.79382 2.79289L0.500926 0.5H0" />
+    </svg>
+  );
+};

package/src/assets/icons/InfoThinIcon.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+
+const InfoThinIcon = forwardRef<SVGSVGElement, { className?: string }>(
+  ({ className }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        className={className || ""}
+      >
+        <circle cx="8" cy="8" r="8" fill="currentColor" fillOpacity="0.05" />
+        <circle
+          cx="8"
+          cy="8"
+          r="7.5"
+          stroke="currentColor"
+          strokeOpacity="0.05"
+        />
+        <g opacity="0.6">
+          <path d="M8 7.5V10.5" stroke="currentColor" />
+          <path d="M8 5.5V6.5" stroke="currentColor" />
+        </g>
+      </svg>
+    );
+  },
+);
+
+InfoThinIcon.displayName = "InfoThinIcon";
+export { InfoThinIcon };

package/src/assets/icons/RedirectThinIcon.tsx

@@ -0,0 +1,15 @@
+export const RedirectThinIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M10.9226 10.9226H1.07744V1.07744H5.45455L4.3771 0H0V12H12V7.6229L10.9226 6.54545V10.9226Z" />
+      <path d="M7.07071 0L8.14815 1.07744H10.1549L9.15825 2.07407L9.92593 2.84175L10.9226 1.84512V3.83838L12 4.91582V0H7.07071Z" />
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -17,6 +17,7 @@ export * from "./CheckIcon";
 export * from "./ChevronDownIcon";
 export * from "./ChevronDownThinIcon";
 export * from "./ChevronDownWideThinIcon";
+export * from "./ChevronRightThinIcon";
 export * from "./ChevronsUpDownThinIcon";
 export * from "./ChevronUpIcon";
 export * from "./CircularProgressIcon";
@@ -34,12 +35,14 @@ export * from "./HistoryGradientBgIcon";
 export * from "./HistoryIcon";
 export * from "./HourGlassIcon";
 export * from "./InfoIcon";
+export * from "./InfoThinIcon";
 export * from "./LinkExternalIcon";
 export * from "./LinkExternalThinIcon";
 export * from "./LoadingRingIcon";
 export * from "./PercentageIcon";
 export * from "./ProgressRingThinIcon";
 export * from "./RankIcon";
+export * from "./RedirectThinIcon";
 export * from "./SearchIcon";
 export * from "./SearchThinIcon";
 export * from "./SettingsGradientBgIcon";

package/src/components/Swap/Header/index.tsx

@@ -16,7 +16,9 @@ export const Header = ({ onClose }: Props) => {
 
   return (
     <div className="flex justify-between items-center">
-      <div className="text-2xl leading-8 tracking-[0.01em]">{title}</div>
+      <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
+        {title}
+      </div>
       <Controls onClose={onClose} />
     </div>
   );

package/src/components/Swap/HistoryView/ActivityCard/index.tsx

@@ -1,5 +1,5 @@
 import {
-  ChevronDownThinSmallIcon,
+  ChevronRightThinIcon,
   LinkExternalThinIcon,
   LoadingRingIcon,
 } from "@src/assets/icons";
@@ -170,7 +170,7 @@ export const ActivityCard = ({ transaction }: Props) => {
                 <span>{srcToken?.symbol || "?"}</span>
                 {dstToken && (
                   <>
-                    <ChevronDownThinSmallIcon className="w-4 h-4 shrink-0 -rotate-90 opacity-50" />
+                    <ChevronRightThinIcon className="shrink-0 opacity-50" />
                     <span className="truncate">{dstToken.symbol}</span>
                   </>
                 )}

package/src/components/Swap/ReorderButton/ReorderButton.tsx

@@ -23,10 +23,13 @@ export const ReorderButton: FC = () => {
 
   return (
     <div className="h-0 w-full relative z-[1]">
+      {/* Opaque bg on purpose: Chromium ignores backdrop-filter nested
+          inside the widget's own backdrop-blur, so a translucent bg would
+          let the panel edges show through the button. */}
       <button
         onClick={onReorderClick}
         aria-label="Switch target token with the source token"
-        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-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 hover:from-t_bg_tertiary/10 hover:to-t_bg_tertiary/10 transition-colors"
+        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-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 hover:from-t_bg_tertiary/10 hover:to-t_bg_tertiary/10 transition-colors"
       >
         <div className="flex text-t_text_primary opacity-50">
           <ChevronsUpDownThinIcon />

package/src/components/Swap/SettingsView/Delivery/index.tsx

@@ -1,4 +1,4 @@
-import { HelpIcon } from "@src/assets/icons";
+import { InfoThinIcon } from "@src/assets/icons";
 import { ToggleButton, Tooltip } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { useRef } from "react";
@@ -26,9 +26,9 @@ export const Delivery = () => {
             triggerRef={tooltipTriggerRef}
             id="express-delivery-tooltip"
           />
-          <HelpIcon
+          <InfoThinIcon
             ref={tooltipTriggerRef}
-            className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+            className="cursor-help text-t_text_primary w-4 h-4 shrink-0"
           />
         </div>
       </div>

package/src/components/Swap/SettingsView/InfiniteApproval/index.tsx

@@ -1,4 +1,4 @@
-import { HelpIcon } from "@src/assets/icons";
+import { InfoThinIcon } from "@src/assets/icons";
 import { ToggleButton } from "@src/components/ToggleButton";
 import { Tooltip } from "@src/components/Tooltip";
 import { useSwapContext } from "@src/context";
@@ -27,9 +27,9 @@ export const InfiniteApproval = () => {
             triggerRef={tooltipTriggerRef}
             id="infinite-approval-tooltip"
           />
-          <HelpIcon
+          <InfoThinIcon
             ref={tooltipTriggerRef}
-            className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+            className="cursor-help text-t_text_primary w-4 h-4 shrink-0"
           />
         </div>
       </div>

package/src/components/Swap/SettingsView/Slippage/index.tsx

@@ -31,7 +31,7 @@ export const Slippage = () => {
       <div className="flex flex-col gap-4">
         <div className="flex items-center gap-2">
           <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary">
-            Price Tolerance
+            Slippage
           </h2>
           <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
           <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50">
@@ -77,11 +77,13 @@ export const Slippage = () => {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <p className="text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30">
+        <p className="text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30">
           NOTE.
         </p>
         <p className="text-sm leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-40">
-          {`Price Tolerance defines how much a price can change before your
+          {/* The design sets the leading term in Medium, the rest Regular. */}
+          <span className="font-medium">Slippage</span>
+          {` defines how much a price can change before your
           transfer falls back to USDC. If the price moves more than your
           tolerance allows, you'll receive USDC on your destination chain.`}
         </p>

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

@@ -1,7 +1,7 @@
 import {
   CheckCircleThinIcon,
   ErrorCircleThinIcon,
-  LinkExternalThinIcon,
+  RedirectThinIcon,
 } from "@src/assets/icons";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
 import { TokenTiles } from "../TokenTiles";
@@ -18,7 +18,7 @@ export const TxResult = ({ onCloseClick }: Props) => {
     <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]">
+          <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
             {txError ? "Transaction Error" : "Transaction Success"}
           </div>
           {txError ? (
@@ -42,22 +42,7 @@ export const TxResult = ({ onCloseClick }: Props) => {
           )
         )}
       </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 +51,22 @@ 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>
+          <div className="flex-1 h-px bg-t_text_primary bg-opacity-10" />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -47,7 +47,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">

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

@@ -480,7 +480,7 @@ export const TokenPicker = ({
   return showImportWarning ? (
     <>
       <div className="flex justify-between items-center mb-6">
-        <div className="text-2xl leading-8 tracking-[0.01em]">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
           Import token
         </div>
         <button
@@ -570,7 +570,7 @@ export const TokenPicker = ({
   ) : (
     <>
       <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 Token
         </div>
         <button
@@ -626,7 +626,7 @@ export const TokenPicker = ({
                     <div className="text-sm font-medium text-ellipsis">
                       {customTokenData.name}
                     </div>
-                    <div className="text-xs text-t_text_primary !text-opacity-50 font-medium">
+                    <div className="text-xs text-t_text_primary !text-opacity-50">
                       {importChain?.displayName}
                     </div>
                   </div>
@@ -648,7 +648,7 @@ export const TokenPicker = ({
               <div className="flex flex-col h-full min-h-0">
                 {/* Pinned label of the group at the top of the list; sits
                     above the scroller, so rows clip on its bottom edge. */}
-                <p className="pb-3 text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left shrink-0">
+                <p className="pb-3 text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left shrink-0">
                   {pinnedGroupLabel}
                 </p>
                 <div className="relative flex flex-col flex-1 min-h-0">
@@ -663,7 +663,7 @@ export const TokenPicker = ({
                       }
                       if (row.kind === "label") {
                         return (
-                          <p className="pt-2 pb-3 text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
+                          <p className="pt-2 pb-3 text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
                             {row.label}
                           </p>
                         );

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

@@ -1,5 +1,5 @@
 import { ChevronDownThinIcon } from "@src/assets/icons";
-import { TokenLogoWithChain } from "@src/components";
+import { Skeleton, TokenLogoWithChain } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { Chain, Token } from "@src/models";
 import { useMemo } from "react";
@@ -19,6 +19,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     srcTokenLocked,
     dstChainLocked,
     setActivePicker,
+    isAsyncDataLoaded,
   } = useSwapContext();
 
   const integratorLockedDestinationToken = useMemo(
@@ -43,6 +44,25 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     integratorLockedDestinationToken ||
     integratorLockedSourceToken;
 
+  if (!isAsyncDataLoaded) {
+    // Mirror the loaded layout: symbol bar + token circle with the small
+    // chain badge, so nothing shifts when the real content arrives.
+    return (
+      <div
+        className={`flex items-center shrink-0 min-h-11 ${className || ""}`}
+        aria-hidden
+      >
+        <div className="flex items-center gap-3">
+          <Skeleton className="w-12 h-4" />
+          <div className="relative flex items-end pr-1 pb-1">
+            <Skeleton className="w-10 h-10 rounded-full" />
+            <Skeleton className="absolute bottom-0 right-0 w-[18px] h-[18px] rounded-full border border-solid border-t_bg_secondary" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <button
       type="button"
@@ -86,7 +106,9 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
         )}
       </div>
       {!locked && (
-        <div className="flex items-center justify-center w-6 h-6 text-t_text_primary opacity-50">
+        // 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 edge.
+        <div className="flex items-center justify-center w-6 h-6 ml-1 -mr-2 text-t_text_primary opacity-50">
           <ChevronDownThinIcon />
         </div>
       )}

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

@@ -1,4 +1,5 @@
 import { ChevronDownThinSmallIcon } from "@src/assets/icons";
+import { Skeleton } from "@src/components";
 import { useWallet } from "@src/context/WalletProvider";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../..";
@@ -21,8 +22,12 @@ export const WalletPanel = ({ chain, className }: Props) => {
     solana,
     sui,
   } = useWallet();
-  const { integrationConfig, hasOnConnectWalletCallback, onConnectWallet } =
-    useSwapContext();
+  const {
+    integrationConfig,
+    hasOnConnectWalletCallback,
+    onConnectWallet,
+    isAsyncDataLoaded,
+  } = useSwapContext();
 
   const openEvmWalletModal = useCallback(() => {
     // Mirror SwapButton's contract: when the integrator supplied their own
@@ -68,6 +73,10 @@ export const WalletPanel = ({ chain, className }: Props) => {
     return "";
   }, [chain, evm, solana, sui]);
 
+  if (!isAsyncDataLoaded) {
+    return <Skeleton className="w-16 h-6" />;
+  }
+
   // Reserve the button's height before the chain loads so the card
   // doesn't grow when the wallet button appears.
   if (!chain) {
@@ -85,7 +94,9 @@ export const WalletPanel = ({ chain, className }: Props) => {
       <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
         {address ? shortAddress(address) : "Connect"}
       </p>
-      <div className="flex items-center justify-center w-4 h-4 text-t_text_primary opacity-50">
+      {/* The 16px glyph has 6px of built-in whitespace on each side; pull the
+          right side back so the button's visual padding stays symmetric. */}
+      <div className="flex items-center justify-center w-4 h-4 -mr-1.5 text-t_text_primary opacity-50">
         <ChevronDownThinSmallIcon />
       </div>
     </button>