@xswap-link/sdk 0.15.0 → 0.15.1

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

@@ -1,5 +1,5 @@
 import { useSwapContext } from "@src/context";
-import { useMemo } from "react";
+import { MouseEvent, useMemo } from "react";
 import { SwapPanelType } from "../index";
 import { AmountPanel } from "./AmountPanel";
 import { Balance } from "./AmountPanel/Balance";
@@ -23,11 +23,23 @@ export const SwapPanel = ({ type }: Props) => {
     [type, srcChain, dstChain],
   );
 
+  // The whole source card acts as the amount input's hit area; clicks on the
+  // nested buttons (wallet, MAX, token picker) must keep their own actions.
+  const focusAmountInput = (event: MouseEvent<HTMLDivElement>) => {
+    if (type !== "source" || (event.target as HTMLElement).closest("button")) {
+      return;
+    }
+    event.currentTarget
+      .querySelector<HTMLInputElement>("#swap-amount-input")
+      ?.focus();
+  };
+
   return (
     <div
+      onClick={focusAmountInput}
       className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl backdrop-blur-[12px] ${
         type === "source"
-          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 border border-solid border-t_text_primary border-opacity-25"
+          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 swap-panel-gradient-border cursor-text"
           : "bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.03]"
       }`}
     >

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

@@ -167,7 +167,7 @@ export const WalletPicker: FC<{
   return (
     <div className={`flex flex-col h-full min-h-0 ${className || ""}`}>
       <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 Wallet
         </div>
         <button

package/src/components/ToggleButton/index.tsx

@@ -12,13 +12,15 @@ const ToggleButton = ({ checked, onClick }: Props) => {
       onClick={onClick}
       className={`relative inline-flex items-center w-10 h-5 p-0.5 rounded-full cursor-pointer transition-opacity border-none bg-gradient-to-r ${
         checked
-          ? "from-t_main_accent_light/25 to-t_main_accent_dark/25"
+          ? "from-x_blue_light/25 to-x_blue_dark/25"
           : "from-t_main_accent_light/20 to-t_main_accent_dark/20 opacity-50"
       }`}
     >
       <span
-        className={`w-4 h-4 rounded-full transition-transform bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark ${
-          checked ? "translate-x-5" : "translate-x-0"
+        className={`w-4 h-4 rounded-full transition-transform bg-gradient-to-r ${
+          checked
+            ? "translate-x-5 from-x_blue_light to-x_blue_dark"
+            : "translate-x-0 from-t_main_accent_light to-t_main_accent_dark"
         }`}
       ></span>
     </button>

package/src/components/TxModal/index.tsx

@@ -38,12 +38,8 @@ export const TxModal = ({
       onMouseDown={onBackdropClick}
     >
       <div
-        className={`relative rounded-[32px] p-6 sm:p-8 w-full min-w-[340px] overflow-auto max-w-x_modal backdrop-blur-[32px] bg-t_bg_secondary bg-opacity-75 border border-solid ${
-          type === "error"
-            ? "border-[#F44336]"
-            : type === "success"
-            ? "border-[#6AE89B]"
-            : type === "warning"
+        className={`relative rounded-[32px] p-6 sm:p-8 w-full min-w-[340px] overflow-auto max-w-[var(--modal-width,588px)] backdrop-blur-[32px] bg-t_bg_secondary bg-opacity-75 border border-solid ${
+          type === "warning"
             ? "border-t_warning_dark"
             : type === "waiting"
             ? "border-t_main_accent_dark"

package/src/components/global.css

@@ -43,6 +43,91 @@
     @apply border border-solid border-t_text_primary border-opacity-10;
   }
 
+  /* 1px gradient stroke of the source swap panel (Figma 1762:39085): the
+     design's stroke is white 25%->50% stops under a 10% paint opacity, so the
+     effective colors are 2.5%->5% (hover: 50%->75% stops, i.e. 5%->7.5%).
+     Border-image can't round corners, hence the masked-pseudo-element ring;
+     the two pseudo-elements crossfade because gradients don't interpolate. */
+  .swap-panel-gradient-border {
+    position: relative;
+  }
+
+  .swap-panel-gradient-border::before,
+  .swap-panel-gradient-border::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .swap-panel-gradient-border::before {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--text-primary) 2.5%, transparent),
+      color-mix(in srgb, var(--text-primary) 5%, transparent)
+    );
+  }
+
+  .swap-panel-gradient-border::after {
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--text-primary) 5%, transparent),
+      color-mix(in srgb, var(--text-primary) 7.5%, transparent)
+    );
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .swap-panel-gradient-border:hover::after {
+    opacity: 1;
+  }
+
+  /* Surface of the network filter dropdown (Figma 1770:15593): a 20% black
+     wash over a subtle vertical sheen (white 4% -> 2% -> 4%).
+     The design carries those over a 72px background blur, but Chromium
+     ignores backdrop-filter nested inside the widget's own backdrop-blur,
+     so the translucent stack alone would let the token list read through.
+     Hence the opaque base underneath — it lands on the same near-black the
+     blurred design resolves to. */
+  .network-dropdown-surface {
+    background:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--bg-primary) 20%, transparent) 0%,
+        color-mix(in srgb, var(--bg-primary) 20%, transparent) 100%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--bg-tertiary) 4%, transparent) 0%,
+        color-mix(in srgb, var(--bg-tertiary) 2%, transparent) 49.5%,
+        color-mix(in srgb, var(--bg-tertiary) 4%, transparent) 100%
+      ),
+      var(--bg-secondary);
+  }
+
+  /* Hover/selected pill of a network row ("Active Fill", Figma 1770:15599):
+     a horizontal sheen peaking in the middle and fading out at both ends.
+     The design's stops are white 0 -> 10% -> 50% -> 10% -> 0 under a 5% layer
+     opacity, so the effective values are the ones below. Gradients don't
+     interpolate, hence no transition. */
+  .network-dropdown-row:hover,
+  .network-dropdown-row-active {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--bg-tertiary) 0.5%, transparent) 15%,
+      color-mix(in srgb, var(--bg-tertiary) 2.5%, transparent) 50%,
+      color-mix(in srgb, var(--bg-tertiary) 0.5%, transparent) 85%,
+      transparent 100%
+    );
+  }
+
   /* Corner glow of the transaction result modal, fading towards the center */
   .tx-modal-glow-success {
     background: radial-gradient(

package/src/config/fonts.ts

@@ -52,9 +52,18 @@
 //   font-style: italic;
 // }`;
 
+import SatoshiRegularWOFF2 from "../fonts/Satoshi-Regular.woff2";
+const SatoshiRegular = `@font-face {
+  font-family: "Satoshi";
+  src: url(${SatoshiRegularWOFF2}) format("woff2");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}`;
+
 import SatoshiMediumWOFF2 from "../fonts/Satoshi-Medium.woff2";
 const SatoshiMedium = `@font-face {
-  font-family: "Satoshi-Medium";
+  font-family: "Satoshi";
   src: url(${SatoshiMediumWOFF2}) format("woff2");
   font-weight: 500;
   font-display: swap;
@@ -109,6 +118,10 @@ const SatoshiMedium = `@font-face {
 // Fonts are inlined into JS bundle when we import them and they are added into DOM when we add them to this array.
 // Use only fonts that you need.
 // We don't want to increase the bundle size unnecessarily.
-const enabledFonts = [SatoshiMedium];
+//
+// Regular and Medium are registered under one "Satoshi" family so that
+// `font-weight` picks a face. With a single face loaded every weight renders
+// as that face, which is why `font-medium` used to be a no-op.
+const enabledFonts = [SatoshiRegular, SatoshiMedium];
 
 export const fontDefinitions = enabledFonts.join("\n");

package/src/context/TxUIWrapper.tsx

@@ -487,7 +487,6 @@ export const TxUIWrapper = ({ children }: Props) => {
       {isTxModalOpen && (
         <TxModal
           id="tx_modal"
-          className="max-w-x_modal"
           type={modalType}
           onCloseClick={closeTxModal}
         >

package/tailwind.config.js

@@ -6,15 +6,9 @@ export default {
   content: ["src/components/**/*.{ts,tsx}", "src/context/**/*.{ts,tsx}"],
   theme: {
     fontFamily: {
-      body: [
-        withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
-      ],
-      sans: [
-        withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
-      ],
-      "sans-bold": [
-        withFontVariable("'Satoshi-Bold', Tahoma, Verdana, ui-sans-serif"),
-      ],
+      // One family with Regular (400) and Medium (500) faces, see config/fonts.ts.
+      // Weight is selected with `font-normal` / `font-medium`, not by family.
+      sans: [withFontVariable("'Satoshi', Tahoma, Verdana, ui-sans-serif")],
     },
     extend: {
       colors: {