@asseteragmbh/wallet-connector 0.2.3 → 0.2.4

package/README.md

@@ -211,12 +211,80 @@ While the pop-up is open the partner page shows a dimming overlay (`overlay: tru
 `overlay: { title, body, focus, cancel, blocked }` to translate the built-in text; `partnerName` only shows up
 in that text.
 
+The overlay is plain DOM with inline styles, so it needs no React and no stylesheet, and it never reads your
+page CSS. Give it your colours and radii with `overlay.theme`. A dark host takes the `"dark"` base palette and
+overrides what it needs:
+
+```ts
+await openAsseteraOnboarding({
+  walletUrl: "https://wallet.wallet-staging.assetera.com",
+  chain: "eip155:80002",
+  overlay: {
+    title: "Continue in the Assetera Wallet",
+    body: "Finish the wallet setup in the Assetera window, then come back here.",
+    focus: "Open the wallet window",
+    cancel: "Not now",
+    theme: { scheme: "dark", surface: "#1d1f27", primary: "#7b61ff", radius: "36px" },
+  },
+});
+```
+
+Every `theme` key is optional. `scheme` picks the base palette, `"light"` (today's look, unchanged) or
+`"dark"`; any other key the host passes wins over that palette. So the example above only changes the card
+colour, the focus button colour and the card radius.
+
+| Key            | Default (light)      | Contract                                           |
+| -------------- | -------------------- | -------------------------------------------------- |
+| `scheme`       | `"light"`            | Base palette, `"light"` or `"dark"`.               |
+| `backdrop`     | `rgba(15,20,30,0.6)` | The dimming layer, a CSS colour.                   |
+| `surface`      | `#ffffff`            | The card background, a CSS colour.                 |
+| `text`         | `#101828`            | The title colour, a CSS colour.                    |
+| `mutedText`    | `#475467`            | The body text and the Cancel button, a CSS colour. |
+| `primary`      | `#101828`            | The focus button background, a CSS colour.         |
+| `primaryText`  | `#ffffff`            | The focus button text, a CSS colour.               |
+| `border`       | `"none"`             | The card border, CSS `border` shorthand.           |
+| `radius`       | `"16px"`             | The card corner radius, for example `"36px"`.      |
+| `buttonRadius` | `"10px"`             | The button corner radius, for example `"9999px"`.  |
+| `fontFamily`   | `system-ui` stack    | The overlay font, CSS `font-family`.               |
+
+The `"dark"` preset is a neutral card: `surface` `#1b1d24`, white title, `#9aa2b1` body text and a white focus
+button with dark text. Its text keeps WCAG AA contrast on that surface.
+
+Each host value is applied to its own CSS property with `style.setProperty`, never concatenated into the style
+text. A value the browser cannot parse is dropped and the rest of the overlay stays as it is. All overlay text
+still goes through `textContent`.
+
+### Rendering your own dialog (`overlay: false` with `onControls`)
+
+Set `overlay: false` and pass `onControls` to drive the run from your own dialog. The callback runs once,
+synchronously, right after the pop-up opened, whether or not an overlay is shown:
+
+```ts
+import type { OnboardingControls } from "@asseteragmbh/wallet-connector";
+
+let controls: OnboardingControls | undefined;
+const wallet = await openAsseteraOnboarding({
+  walletUrl: "https://wallet.wallet-staging.assetera.com",
+  chain: "eip155:80002",
+  overlay: false,
+  onControls: (handles) => {
+    controls = handles;
+    showMyOwnDialog();
+  },
+});
+```
+
+`controls.focus()` brings the pop-up to the front. `controls.cancel()` behaves like the overlay's Cancel
+button: it rejects with `OnboardingError` code `"cancelled"` before the address arrived, and calls `close()`
+after it. Both are safe to call once the run finished.
+
 The promise rejects with an `OnboardingError`; branch on `code`:
 
 - `invalid_options`: the chain is not a CAIP-2 EVM id (for example `eip155:80002`) or the wallet URL is invalid.
 - `popup_blocked`: the browser blocked the pop-up. No overlay is shown; ask the user to allow pop-ups.
 - `closed`: the pop-up was closed before the wizard finished (or, from `signMessage`, before the signature).
-- `cancelled`: the user cancelled in the wizard or in the overlay, or declined the signature.
+- `cancelled`: the user cancelled in the wizard, in the overlay or through `controls.cancel()`, or declined the
+  signature.
 - `refused`: the wallet refused the onboarding.
 - `failed`: something else went wrong in the wallet (the optional `message` carries the detail).
 

package/dist/index.cjs

@@ -479,6 +479,48 @@ var DEFAULT_LABELS = {
   cancel: "Cancel",
   blocked: "Your browser blocked the Assetera Wallet window. Allow pop-ups for this site and try again."
 };
+var LIGHT_THEME = {
+  scheme: "light",
+  backdrop: "rgba(15,20,30,0.6)",
+  surface: "#ffffff",
+  text: "#101828",
+  mutedText: "#475467",
+  primary: "#101828",
+  primaryText: "#ffffff",
+  border: "none",
+  radius: "16px",
+  buttonRadius: "10px",
+  fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+};
+var DARK_THEME = {
+  scheme: "dark",
+  backdrop: "rgba(8,10,14,0.72)",
+  surface: "#1b1d24",
+  text: "#f7f8fa",
+  mutedText: "#9aa2b1",
+  primary: "#ffffff",
+  primaryText: "#101828",
+  border: "1px solid rgba(255,255,255,0.14)",
+  radius: "16px",
+  buttonRadius: "10px",
+  fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+};
+function resolveTheme(theme) {
+  const base = theme?.scheme === "dark" ? DARK_THEME : LIGHT_THEME;
+  return {
+    scheme: base.scheme,
+    backdrop: theme?.backdrop ?? base.backdrop,
+    surface: theme?.surface ?? base.surface,
+    text: theme?.text ?? base.text,
+    mutedText: theme?.mutedText ?? base.mutedText,
+    primary: theme?.primary ?? base.primary,
+    primaryText: theme?.primaryText ?? base.primaryText,
+    border: theme?.border ?? base.border,
+    radius: theme?.radius ?? base.radius,
+    buttonRadius: theme?.buttonRadius ?? base.buttonRadius,
+    fontFamily: theme?.fontFamily ?? base.fontFamily
+  };
+}
 function resolveLabels(options) {
   const overrides = typeof options.overlay === "object" && options.overlay !== null ? options.overlay : {};
   const partnerName = options.partnerName;
@@ -491,6 +533,10 @@ function resolveLabels(options) {
     blocked: overrides.blocked ?? DEFAULT_LABELS.blocked
   };
 }
+function resolveThemeOption(options) {
+  const overlay = typeof options.overlay === "object" && options.overlay !== null ? options.overlay : {};
+  return resolveTheme(overlay.theme);
+}
 function cancelCode(reason) {
   if (reason === "user") return "cancelled";
   if (reason === "refused") return "refused";
@@ -504,7 +550,7 @@ function cancelMessage(reason) {
 function copyAccountNames(accounts) {
   return accounts.map((account) => ({ address: account.address, name: account.name }));
 }
-function showOverlay(win, labels, handlers) {
+function showOverlay(win, labels, theme, handlers) {
   const doc = win.document;
   const root = doc.createElement("div");
   root.setAttribute("role", "dialog");
@@ -518,40 +564,43 @@ function showOverlay(win, labels, handlers) {
     "justify-content: center",
     "padding: 24px",
     "box-sizing: border-box",
-    "background: rgba(15,20,30,0.6)",
-    `z-index: ${OVERLAY_Z_INDEX}`,
-    "font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    `z-index: ${OVERLAY_Z_INDEX}`
   ].join("; ");
+  root.style.setProperty("background-color", theme.backdrop);
+  root.style.setProperty("font-family", theme.fontFamily);
   const card = doc.createElement("div");
   card.style.cssText = [
     "box-sizing: border-box",
     "width: 100%",
     "max-width: 420px",
-    "border-radius: 16px",
     "padding: 24px",
-    "background: #ffffff",
-    "color: #101828",
     "box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35)"
   ].join("; ");
+  card.style.setProperty("background-color", theme.surface);
+  card.style.setProperty("color", theme.text);
+  card.style.setProperty("border", theme.border);
+  card.style.setProperty("border-radius", theme.radius);
   const title = doc.createElement("h2");
   title.textContent = labels.title;
   title.style.cssText = "margin: 0 0 10px; font-size: 18px; line-height: 1.3; font-weight: 600;";
+  title.style.setProperty("color", theme.text);
   const body = doc.createElement("p");
   body.textContent = labels.body;
-  body.style.cssText = "margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #475467;";
+  body.style.cssText = "margin: 0 0 20px; font-size: 14px; line-height: 1.5;";
+  body.style.setProperty("color", theme.mutedText);
   const focus = doc.createElement("button");
   focus.type = "button";
   focus.textContent = labels.focus;
   focus.style.cssText = [
     "padding: 10px 16px",
     "border: 0",
-    "border-radius: 10px",
-    "background: #101828",
-    "color: #ffffff",
     "font: inherit",
     "font-weight: 600",
     "cursor: pointer"
   ].join("; ");
+  focus.style.setProperty("background-color", theme.primary);
+  focus.style.setProperty("color", theme.primaryText);
+  focus.style.setProperty("border-radius", theme.buttonRadius);
   focus.addEventListener("click", handlers.onFocus);
   const cancel = doc.createElement("button");
   cancel.type = "button";
@@ -561,10 +610,11 @@ function showOverlay(win, labels, handlers) {
     "border: 0",
     "border-radius: 10px",
     "background: transparent",
-    "color: #475467",
     "font: inherit",
     "cursor: pointer"
   ].join("; ");
+  cancel.style.setProperty("color", theme.mutedText);
+  cancel.style.setProperty("border-radius", theme.buttonRadius);
   cancel.addEventListener("click", handlers.onCancel);
   const actions = doc.createElement("div");
   actions.style.cssText = "display: flex; gap: 8px; align-items: center;";
@@ -599,6 +649,7 @@ function openAsseteraOnboarding(options) {
     );
   }
   const labels = resolveLabels(options);
+  const theme = resolveThemeOption(options);
   const overlayEnabled = options.overlay !== false;
   const popup = targetWindow.open(
     onboardUrl(options.walletUrl, targetWindow.location.origin, {
@@ -653,6 +704,16 @@ function openAsseteraOnboarding(options) {
       activePopup.close();
       fail(new OnboardingError("cancelled", "The user cancelled the Assetera Wallet onboarding."));
     }
+    const controls = {
+      focus() {
+        if (finished) return;
+        activePopup.focus();
+      },
+      cancel() {
+        if (finished) return;
+        cancel();
+      }
+    };
     function signMessage(message) {
       if (finished || activePopup.closed) {
         return Promise.reject(new OnboardingError("closed", "The Assetera Wallet window was closed."));
@@ -731,11 +792,12 @@ function openAsseteraOnboarding(options) {
       );
     }, CLOSE_POLL_MS2);
     if (overlayEnabled) {
-      overlay = showOverlay(targetWindow, labels, {
-        onFocus: () => activePopup.focus(),
-        onCancel: cancel
+      overlay = showOverlay(targetWindow, labels, theme, {
+        onFocus: () => controls.focus(),
+        onCancel: () => controls.cancel()
       });
     }
+    options.onControls?.(controls);
   });
 }