Slicr widget

Embeddable Slicr swap widget. Drop the Slicr TWAP / DCA / limit-order UI into any site, themed to match your brand.

Status

• Iframe loader (slicr.xyz/widget.js) — public, ready to embed.
• React npm package (@slicr/widget) — not yet published. The source lives in services/frontend/src/widget/ and is consumed locally by the /embed route. We will extract it into a publishable npm package when CORS allowlisting and an npm publish workflow are in place. Until then, third-party sites should use the iframe.

Iframe (any site)

<script
  src="https://slicr.xyz/widget.js"
  data-preset="dark"
  data-brand="#5b6cff"
  data-token-in="ETH"
  data-token-out="USDC"
  data-max-width="480px"
  defer
></script>

Programmatic mount:

<div id="mount"></div>
<script src="https://slicr.xyz/widget.js" data-auto="false"></script>
<script>
  window.Slicr.mount({
    targetSelector: "#mount",
    preset: "light",
    brand: "#e94e1b",
    onMessage: (msg) => console.log(msg),
  });
</script>

Live demo: slicr.xyz/embed-demo.html.

Iframe options

| data-* attribute | Notes | | ------------------- | -------------------------------------------------- | | preset | light | dark | slicr (default) | | brand | Hex color for primary button + active state | | brand-fg | Hex color for text on brand surfaces | | bg | Outer background color | | surface | Card surface color | | text | Primary text color | | radius | CSS length, e.g. 8px | | font | Font family stack | | token-in | Default sell token symbol (e.g. ETH) | | token-out | Default buy token symbol (e.g. USDC) | | max-width | Iframe max-width (default 480px) | | min-height | Iframe min-height (default 640px) | | target | CSS selector to mount into (defaults to in-place) | | auto | false to skip auto-mount and use Slicr.mount() |

postMessage events

The iframe posts back to the parent:

| Event | Payload | | --------------------- | -------------------------------- | | slicr:order_created | { type, orderId } | | slicr:error | { type, message } |

Network and wallet support

The iframe runs on slicr.xyz and connects to Base mainnet only (chain id 8453). The widget detects wrong-chain connections and shows a "Switch to Base" CTA before order submission is enabled. Injected wallets (MetaMask, Rabby, Brave) work in iframes; WalletConnect requires HTTPS on the embedding page.

Theme tokens

preset picks the base palette; per-token overrides via data-* attributes (iframe) or the theme prop (React).

| Token | Slicr default | Purpose | | ----------------- | ------------- | ------------------------------------ | | brand | #e94e1b | Primary button + active state | | brandForeground | #ffffff | Text/icon color on brand surfaces | | background | #0a0a0a | Outer card background | | surface | #141414 | Card surface | | surfaceMuted | #1c1c1c | Token boxes, secondary surfaces | | border | #2a2a2a | All borders | | text | #fafafa | Primary text | | textMuted | #a0a0a0 | Secondary text | | radius | 12px | Card and control radius | | fontFamily | system stack | Applied to the widget root |

What's in v1

• Slicr (TWAP), DCA, and limit-order creation on Base
• Theme presets + per-token overrides
• iframe loader (/widget.js) and embed page (/embed)

Not yet in v1

• npm-published React package (vendored locally; publish pipeline pending)
• Solana
• In-widget order list / cancel / pause (manage on slicr.xyz for now)

License

MIT