@xswap-link/sdk 0.15.0 → 0.15.2

package/example/src/App.tsx

@@ -0,0 +1,421 @@
+import { TxWidget } from "@xswap-link/sdk";
+import { useEffect, useMemo, useState } from "react";
+
+type Token = { address: string; symbol: string; quickPick?: boolean };
+type Chain = {
+  chainId: string;
+  displayName: string;
+  ecosystem: string;
+  web3Environment: string;
+  bridgeSupported: boolean;
+  swapSupported: boolean;
+  tokens: Token[];
+};
+
+type Cfg = Record<string, string | boolean | undefined>;
+
+const DEFAULT_API = "https://xswap.link/api";
+
+const API_URLS = [
+  DEFAULT_API,
+  "https://develop-72sp7lmyaa-ew.a.run.app/api/beta",
+  "http://localhost:3000/api",
+];
+
+const FONTS = ["Inter", "Roboto", "Poppins", "monospace", "serif"];
+
+const BOOL_FIELDS = [
+  "lightTheme",
+  "defaultWalletPicker",
+  "bridge",
+  "srcChainLocked",
+  "srcTokenLocked",
+  "dstChainLocked",
+  "dstTokenLocked",
+];
+
+const DEFAULTS: Cfg = {
+  integratorId: "d6e438dfa14e80701b9b",
+  defaultWalletPicker: true,
+  bridge: true,
+};
+
+const STORAGE_KEY = "xswap-example-config";
+
+const loadCfg = (): Cfg => {
+  try {
+    return { ...DEFAULTS, ...JSON.parse(localStorage.getItem(STORAGE_KEY)!) };
+  } catch {
+    return DEFAULTS;
+  }
+};
+
+const str = (v: Cfg[string]) =>
+  typeof v === "string" && v.trim() ? v.trim() : undefined;
+
+const log =
+  (name: string) =>
+  (...args: unknown[]) =>
+    console.log(`[${name}]`, ...args);
+
+const toProps = (c: Cfg) => ({
+  integratorId: String(c.integratorId ?? ""),
+  srcChain: str(c.srcChain),
+  srcToken: str(c.srcToken),
+  dstChain: str(c.dstChain),
+  dstToken: str(c.dstToken),
+  dstDisplayToken: str(c.dstDisplayToken),
+  highlightedDstTokens: str(c.highlightedDstTokens)?.split(","),
+  widgetTitle: str(c.widgetTitle),
+  desc: str(c.desc),
+  integratorFee: str(c.integratorFee) ? Number(c.integratorFee) : undefined,
+  integratorFeeReceiverAddress: str(c.integratorFeeReceiverAddress),
+  override: str(c.apiUrl) ? { apiUrl: String(c.apiUrl) } : undefined,
+  styles: {
+    mainAccentLight: str(c.mainAccentLight),
+    mainAccentDark: str(c.mainAccentDark),
+    textSecondary: str(c.textSecondary),
+    fontFamily: str(c.fontFamily),
+    width: str(c.width),
+  },
+  lightTheme: !!c.lightTheme,
+  defaultWalletPicker: !!c.defaultWalletPicker,
+  bridge: !!c.bridge,
+  srcChainLocked: !!c.srcChainLocked,
+  srcTokenLocked: !!c.srcTokenLocked,
+  dstChainLocked: !!c.dstChainLocked,
+  dstTokenLocked: !!c.dstTokenLocked,
+  onSrcChainChange: log("onSrcChainChange"),
+  onSrcTokenChange: log("onSrcTokenChange"),
+  onDstChainChange: log("onDstChainChange"),
+  onDstTokenChange: log("onDstTokenChange"),
+  onConnectWallet: log("onConnectWallet"),
+  onPendingTransactionsChange: log("onPendingTransactionsChange"),
+});
+
+const useChains = (apiUrl: string) => {
+  const [chains, setChains] = useState<Chain[]>([]);
+
+  useEffect(() => {
+    fetch(`${apiUrl}/chains?data={}`)
+      .then((r) => r.json())
+      .then((all: Chain[]) =>
+        setChains(
+          all.filter(
+            (c) =>
+              c.web3Environment === "mainnet" &&
+              (c.bridgeSupported || c.swapSupported),
+          ),
+        ),
+      )
+      .catch((e) => console.error("failed to load chains", e));
+  }, [apiUrl]);
+
+  return chains;
+};
+
+const sortTokens = (tokens: Token[] = []) =>
+  [...tokens].sort((a, b) => Number(!!b.quickPick) - Number(!!a.quickPick));
+
+type FieldProps = {
+  k: string;
+  cfg: Cfg;
+  set: (key: string, value: string | boolean) => void;
+};
+
+// ponytail: declared outside App, otherwise every render remounts the inputs and typing loses focus
+const Text = ({ k, cfg, set, ...rest }: FieldProps & Record<string, unknown>) => (
+  <label>
+    <span>{k}</span>
+    <input
+      value={(cfg[k] as string) ?? ""}
+      onChange={(e) => set(k, e.target.value)}
+      {...rest}
+    />
+  </label>
+);
+
+const Color = ({ k, cfg, set }: FieldProps) => (
+  <label>
+    <span>{k}</span>
+    <div className="inline">
+      <input
+        type="color"
+        value={(cfg[k] as string) || "#3b82f6"}
+        onChange={(e) => set(k, e.target.value)}
+      />
+      <input
+        value={(cfg[k] as string) ?? ""}
+        placeholder="unset"
+        onChange={(e) => set(k, e.target.value)}
+      />
+      <button onClick={() => set(k, "")}>×</button>
+    </div>
+  </label>
+);
+
+const ChainSelect = ({
+  side,
+  cfg,
+  chains,
+  onChange,
+}: {
+  side: "src" | "dst";
+  cfg: Cfg;
+  chains: Chain[];
+  onChange: (chainId: string) => void;
+}) => (
+  <label>
+    <span>{side}Chain</span>
+    <select
+      value={(cfg[`${side}Chain`] as string) ?? ""}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      <option value="">— any —</option>
+      {chains.map((c) => (
+        <option key={c.chainId} value={c.chainId}>
+          {c.displayName} ({c.ecosystem} · {c.chainId})
+        </option>
+      ))}
+    </select>
+  </label>
+);
+
+const TokenSelect = ({
+  k,
+  cfg,
+  set,
+  tokens,
+}: FieldProps & { tokens: Token[] }) => (
+  <label>
+    <span>{k}</span>
+    <select
+      value={(cfg[k] as string) ?? ""}
+      onChange={(e) => set(k, e.target.value)}
+    >
+      <option value="">— any —</option>
+      {tokens.map((t) => (
+        <option key={t.address} value={t.address}>
+          {t.symbol}
+        </option>
+      ))}
+    </select>
+  </label>
+);
+
+export const App = () => {
+  const [cfg, setCfg] = useState(loadCfg);
+  const [mountKey, setMountKey] = useState(0);
+
+  const chains = useChains(str(cfg.apiUrl) ?? DEFAULT_API);
+  const byId = useMemo(
+    () => Object.fromEntries(chains.map((c) => [c.chainId, c])),
+    [chains],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(cfg));
+  }, [cfg]);
+
+  const set = (key: string, value: string | boolean) =>
+    setCfg((c) => ({ ...c, [key]: value }));
+
+  // ponytail: switching a chain invalidates the token picked on the old one
+  const setChain = (side: "src" | "dst", chainId: string) =>
+    setCfg((c) => ({
+      ...c,
+      [`${side}Chain`]: chainId,
+      [`${side}Token`]: "",
+      ...(side === "dst" ? { dstDisplayToken: "", highlightedDstTokens: "" } : {}),
+    }));
+
+  const reset = () => {
+    setCfg(DEFAULTS);
+    setMountKey((k) => k + 1);
+  };
+
+  const srcTokens = sortTokens(byId[cfg.srcChain as string]?.tokens);
+  const dstTokens = sortTokens(byId[cfg.dstChain as string]?.tokens);
+  const highlighted = str(cfg.highlightedDstTokens)?.split(",") ?? [];
+
+  // ponytail: the widget reads chain/token props only on mount, so remount when they change.
+  // Text fields (integratorId, apiUrl) are excluded — they'd remount on every keystroke.
+  const remountKey = [
+    mountKey,
+    cfg.srcChain,
+    cfg.srcToken,
+    cfg.dstChain,
+    cfg.dstToken,
+    cfg.dstDisplayToken,
+    cfg.highlightedDstTokens,
+  ].join("|");
+
+  return (
+    <div className="page">
+      <style>{CSS}</style>
+
+      <aside>
+        <h2>Widget config</h2>
+
+        <Text k="integratorId" cfg={cfg} set={set} />
+
+        <ChainSelect
+          side="src"
+          cfg={cfg}
+          chains={chains}
+          onChange={(id) => setChain("src", id)}
+        />
+        <TokenSelect k="srcToken" cfg={cfg} set={set} tokens={srcTokens} />
+        <ChainSelect
+          side="dst"
+          cfg={cfg}
+          chains={chains}
+          onChange={(id) => setChain("dst", id)}
+        />
+        <TokenSelect k="dstToken" cfg={cfg} set={set} tokens={dstTokens} />
+        <TokenSelect
+          k="dstDisplayToken"
+          cfg={cfg}
+          set={set}
+          tokens={dstTokens}
+        />
+
+        <label>
+          <span>highlightedDstTokens (ctrl/cmd + click)</span>
+          <select
+            multiple
+            size={5}
+            value={highlighted}
+            onChange={(e) =>
+              set(
+                "highlightedDstTokens",
+                [...e.target.selectedOptions].map((o) => o.value).join(","),
+              )
+            }
+          >
+            {dstTokens.map((t) => (
+              <option key={t.address} value={t.address}>
+                {t.symbol}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <Text k="widgetTitle" cfg={cfg} set={set} placeholder="Bridge" />
+        <Text k="desc" cfg={cfg} set={set} />
+        <Text
+          k="integratorFee"
+          cfg={cfg}
+          set={set}
+          type="number"
+          step="0.001"
+          placeholder="0.003"
+        />
+        <Text
+          k="integratorFeeReceiverAddress"
+          cfg={cfg}
+          set={set}
+          placeholder="0x…"
+        />
+
+        <label>
+          <span>apiUrl (override)</span>
+          <input
+            list="api-urls"
+            value={(cfg.apiUrl as string) ?? ""}
+            placeholder={DEFAULT_API}
+            onChange={(e) => set("apiUrl", e.target.value)}
+          />
+          <datalist id="api-urls">
+            {API_URLS.map((u) => (
+              <option key={u} value={u} />
+            ))}
+          </datalist>
+        </label>
+
+        <h3>styles</h3>
+        <Color k="mainAccentLight" cfg={cfg} set={set} />
+        <Color k="mainAccentDark" cfg={cfg} set={set} />
+        <Color k="textSecondary" cfg={cfg} set={set} />
+
+        <label>
+          <span>fontFamily</span>
+          <input
+            list="fonts"
+            value={(cfg.fontFamily as string) ?? ""}
+            onChange={(e) => set("fontFamily", e.target.value)}
+          />
+          <datalist id="fonts">
+            {FONTS.map((f) => (
+              <option key={f} value={f} />
+            ))}
+          </datalist>
+        </label>
+
+        <label>
+          <span>width — {(cfg.width as string) || "default"}</span>
+          <div className="inline">
+            <input
+              type="range"
+              min={300}
+              max={600}
+              step={10}
+              value={parseInt((cfg.width as string) || "420", 10)}
+              onChange={(e) => set("width", `${e.target.value}px`)}
+            />
+            <button onClick={() => set("width", "")}>×</button>
+          </div>
+        </label>
+
+        <h3>flags</h3>
+        <div className="flags">
+          {BOOL_FIELDS.map((f) => (
+            <label key={f} className="check">
+              <input
+                type="checkbox"
+                checked={!!cfg[f]}
+                onChange={(e) => set(f, e.target.checked)}
+              />
+              {f}
+            </label>
+          ))}
+        </div>
+
+        <div className="inline">
+          <button onClick={() => setMountKey((k) => k + 1)}>Remount</button>
+          <button onClick={reset}>Reset</button>
+        </div>
+
+        <pre>{JSON.stringify(toProps(cfg), null, 2)}</pre>
+      </aside>
+
+      <main>
+        <TxWidget key={remountKey} {...toProps(cfg)} />
+      </main>
+    </div>
+  );
+};
+
+const CSS = `
+  body { margin: 0; font: 13px/1.4 system-ui, sans-serif; background: #f6f7f9; }
+  .page { display: flex; gap: 32px; align-items: flex-start; padding: 24px; }
+  aside { width: 340px; display: flex; flex-direction: column; gap: 10px;
+          background: #fff; border: 1px solid #e3e5e8; border-radius: 12px; padding: 16px; }
+  main { position: sticky; top: 24px; }
+  h2, h3 { margin: 4px 0; }
+  h3 { color: #667; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
+  label { display: flex; flex-direction: column; gap: 3px; }
+  label > span { color: #667; font-size: 11px; }
+  input, select, button { font: inherit; padding: 5px 6px; border: 1px solid #d3d6da;
+                          border-radius: 6px; background: #fff; }
+  input[type=color] { padding: 0; width: 34px; height: 30px; }
+  input[type=range] { padding: 0; flex: 1; }
+  button { cursor: pointer; }
+  .inline { display: flex; gap: 6px; align-items: center; }
+  .inline > input:not([type=color]) { flex: 1; min-width: 0; }
+  .flags { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+  .check { flex-direction: row; align-items: center; gap: 5px; font-size: 12px; }
+  .check input { margin: 0; }
+  pre { font-size: 10px; background: #f2f3f5; border-radius: 8px; padding: 10px;
+        max-height: 260px; overflow: auto; margin: 0; }
+`;

package/example/src/main.tsx

@@ -0,0 +1,8 @@
+import { Buffer } from "buffer";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+// ponytail: SDK deps (solana/sui) expect a Buffer global in the browser
+globalThis.Buffer ??= Buffer;
+
+createRoot(document.getElementById("root")!).render(<App />);

package/example/vite.config.ts

@@ -0,0 +1,9 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  // ponytail: linked package -> force pre-bundling so its deps resolve from ../node_modules
+  optimizeDeps: { include: ["@xswap-link/sdk"] },
+  define: { global: "globalThis" },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "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>