@xswap-link/sdk 0.15.1 → 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.1",
+  "version": "0.15.2",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

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>
+  );
+};