> For the complete documentation index, see [llms.txt](https://docs.glacislabs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.glacislabs.com/zero-delta/widget.md).

# Widget

Prebuilt UI for cross-chain stablecoin and real-world-asset settlement. Drop it in; the user's wallet always signs.

The ZeroDelta Widget is a set of prebuilt UI components that put the clearing house into your app. It is the four-call integration from the [Integration Guide](/zero-delta/integration-guide.md) — quote, approve, `submitOrder`, track — already built, tested and themed.

One npm package, **zero runtime dependencies**, and no iframe: it renders in your page's own realm, styled with your tokens.

{% columns %}
{% column %}

#### Install & Embed

React, `mount()`, a `<script>` tag, or Next.js.
{% endcolumn %}

{% column %}

#### The Keyless Proxy

The one thing you must deploy before any of it works.
{% endcolumn %}
{% endcolumns %}

> **The package uses the internal name StableGenie.** You will see it in the package id (`@glacislabs/stablegenie-zerodelta`), the component names (`<StableGeniePay>`) and the browser global (`window.StableGenieWidget`); **ZeroDelta** is the product. The express-checkout pill is branded **ZeroDelta Link**. The names refer to the same thing — the same relationship as `ZDLite` and ZeroDelta on the contract side.

### Before you start

ZeroDelta is permissioned: integrators are onboarded and KYB'd by the Glacis team, so you cannot self-serve a key. Two things come from that onboarding, and you need both before the widget can price anything:

* a **ZeroDelta API key** (a viewer key — your proxy holds it server-side, never the browser), and
* the **base URL** for your environment.

**Ask for them here —** [**Glacis integrations team**](https://t.me/+CXFgMhEqkE85N2Nh)**.** The same key and base URL work for a direct API integration, so if your team already has them from the [Integration Guide](/zero-delta/integration-guide.md), you are ready.

### Try it before you install

The [widget playground](https://playground.glacislabs.com/) runs every component against the production gateway — no key needed on your side. Configure a surface, a theme and a pair, then copy the exact React, `mount()` or `<script>` snippet for it.

### Pick a surface

| Component                | What it does                                                                                           | Typical host                 |
| ------------------------ | ------------------------------------------------------------------------------------------------------ | ---------------------------- |
| `StableGenieExchange`    | The full exchange card — pick both sides, see routes and fees                                          | a dApp swap page             |
| `StableGenieRwaExchange` | The same card over real-world assets, one leg each side                                                | a tokenized-asset app        |
| `StableGeniePay`         | **Exact-receive**: the recipient gets exactly what you asked for, funded from whatever the payer holds | checkout, deposits, invoices |
| `StableGenieSwap`        | Exact-in, two selects, minimal chrome                                                                  | a compact sidebar            |
| `PaymentIsland`          | **ZeroDelta Link** — a collapsed express-checkout pill that expands to a one-click card                | a product page or cart       |

The first four take a display `variant`; `pill` on any of them renders the ZeroDelta Link surface.

### What you get

* **Five surfaces**, three layouts (`compact`, `wide`, `pill`) and two asset universes (stablecoins, real-world assets).
* **Nine source chains**, and many more destinations — receiving does not require an escrow on the far side.
* **A live catalogue.** Chains, tokens and routes are read from the gateway on every load and cross-checked against measured lane health, so the widget never offers a pair it cannot fill.
* **Full theming** — 21 tokens, light and dark, isolated from your page CSS in both directions.
* **Your wallet stack, not ours.** Pass your EIP-1193 provider and the user never connects twice; pass nothing and the widget discovers a wallet via EIP-6963.
* **Compliance screened and disclosed** — every route carries the decision the gateway made, shown to the payer rather than hidden behind a generic failure.
* **ESM, CJS, types and a prebuilt IIFE**, MIT licensed, published on [npm](https://www.npmjs.com/package/@glacislabs/stablegenie-zerodelta).

Tested with React 18 and 19, Next.js, Vite, webpack, and wallet stacks including wagmi, RainbowKit and injected providers.

### The user's wallet always signs

The widget never holds keys and never submits silently. It also refuses to trust the API it talks to:

* the escrow address and every token's decimals are **pinned offline** and cross-checked — a mismatch fails closed;
* every quote is **re-validated** against what the user actually selected;
* every transaction is **re-decoded before signing**, and approvals are exact-amount, never unbounded;
* settlement is **confirmed by receipt** over an independent RPC, so `onSuccess` means the money moved.

There is no telemetry. The only network calls are to your proxy, the verification RPC, and token artwork.

See [The Keyless Proxy](/zero-delta/widget/keyless-proxy.md) for the full trust model.

### Start here

{% stepper %}
{% step %}

### Get a key

ZeroDelta is permissioned — ask the [Glacis integrations team](https://t.me/+CXFgMhEqkE85N2Nh) for a viewer key and your base URL.
{% endstep %}

{% step %}

### Install the package

`npm i @glacislabs/stablegenie-zerodelta` — then pick React, `mount()` or a `<script>` tag. See [Install & Embed](/zero-delta/widget/install.md).
{% endstep %}

{% step %}

### Deploy the keyless proxy

One handler, one environment variable — the key from step 1, held server-side. The widget cannot price anything without it. See [The Keyless Proxy](/zero-delta/widget/keyless-proxy.md).
{% endstep %}

{% step %}

### Configure the surface

Choose the component, the mode and the product; wire your wallet provider and the four callbacks. See [Configure](/zero-delta/widget/configure.md).
{% endstep %}

{% step %}

### Match your brand

21 tokens, light and dark, four ready-made palettes. See [Theming](/zero-delta/widget/theming.md).
{% endstep %}

{% step %}

### Look up anything else

The full export surface, the headless engine and the known limits are in the [API Reference](/zero-delta/widget/api-reference.md).
{% endstep %}
{% endstepper %}

### What is not shipped

Stated plainly, so you do not design around something that does not exist yet.

|                                                            | Status                                                                                      |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| Fiat on-ramp and off-ramp (`mode: "onramp"` / `"offramp"`) | Roadmap — the card shows an explicit coming-soon panel rather than a quote it cannot honour |
| Bank settlement (`settlement: "bank"`)                     | Roadmap, same treatment                                                                     |
| Integrator fees or revenue share                           | Not available — the widget takes no fee and passes no partner id                            |
| Localisation                                               | Not available — all copy is English                                                         |

### Talk to us

* **Get an API key and a base URL** → [Glacis integrations team](https://t.me/+CXFgMhEqkE85N2Nh)
* **New chains, tokens or routes** → [Glacis integrations team](https://t.me/+CXFgMhEqkE85N2Nh) — onboarded on request, the same process as a direct API integration
* **Integrate the API yourself instead** → [Integration Guide](/zero-delta/integration-guide.md)