@zerohash-sdk/crypto-account-link-react 1.3.1 → 1.4.0

package/dist/index.js

@@ -1,68 +1,244 @@
-import k, { useRef as O, useEffect as h } from "react";
-const m = (t) => {
-  if (!t || typeof t != "string")
+import { jsxs as A, jsx as h } from "react/jsx-runtime";
+import U, { useEffect as B, useState as T, useCallback as W, useRef as M } from "react";
+const _ = {
+  evergreen: "#00381D",
+  green: "#CCFFD0",
+  offBlack: "#1C1B1C",
+  grayLight: "#EBEBE9"
+}, D = ({ onRetry: e }) => A("div", { role: "alert", style: {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "8px",
+  maxWidth: "360px",
+  margin: "0 auto",
+  padding: "32px 24px",
+  textAlign: "center",
+  fontFamily: "inherit",
+  color: _.offBlack,
+  background: "#FFFFFF",
+  border: `1px solid ${_.grayLight}`,
+  borderRadius: "12px"
+}, children: [h("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: h("path", { d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: _.evergreen, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), h("p", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Something went wrong" }), h("p", { style: { margin: 0, fontSize: "14px", opacity: 0.75 }, children: "We couldn't load this content. Please check your internet connection and try again." }), h("button", { type: "button", onClick: e, style: {
+  marginTop: "8px",
+  padding: "8px 20px",
+  fontSize: "14px",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  color: _.green,
+  background: _.evergreen,
+  border: "none",
+  borderRadius: "8px",
+  cursor: "pointer"
+}, children: "Try again" })] }), V = (e, t) => {
+  B(() => {
+    const o = e.current;
+    if (o)
+      for (const [n, r] of Object.entries(t))
+        r !== void 0 && (o[n] = r);
+  });
+}, P = {
+  dev: "https://grafana-faro-collector.dev.0hash.com/collect",
+  cert: "https://grafana-faro-collector.cert.zerohash.com/collect",
+  prod: "https://grafana-faro-collector.zerohash.com/collect",
+  "eu-cert": "https://grafana-faro-collector.cert.zerohash.eu/collect",
+  "eu-prod": "https://grafana-faro-collector.zerohash.eu/collect",
+  sandbox: "https://grafana-faro-collector.cert.zerohash.com/collect",
+  production: "https://grafana-faro-collector.zerohash.com/collect"
+}, J = (e) => {
+  if (!e || typeof e != "string")
     return null;
-  const e = t.split(".");
-  if (e.length < 2)
+  const t = e.split(".");
+  if (t.length < 2)
     return null;
   try {
-    const r = e[1].replace(/-/g, "+").replace(/_/g, "/"), u = r + "===".slice(0, (4 - r.length % 4) % 4), i = typeof atob < "u" ? atob(u) : Buffer.from(u, "base64").toString("utf-8"), c = JSON.parse(i)?.payload?.region;
-    if (typeof c != "string")
+    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), n = o + "===".slice(0, (4 - o.length % 4) % 4), r = typeof atob < "u" ? atob(n) : Buffer.from(n, "base64").toString("utf-8"), a = JSON.parse(r)?.payload?.region;
+    if (typeof a != "string")
       return null;
-    const o = c.toLowerCase();
-    return o === "us" || o === "eu" ? o : null;
+    const c = a.toLowerCase();
+    return c === "us" || c === "eu" ? c : null;
   } catch {
     return null;
   }
-}, b = (t, e) => m(e) !== "eu" ? t : t === "cert" ? "eu-cert" : t === "prod" ? "eu-prod" : t;
-var y;
-(function(t) {
-  t.NETWORK_ERROR = "network_error", t.AUTH_ERROR = "auth_error", t.NOT_FOUND_ERROR = "not_found_error", t.VALIDATION_ERROR = "validation_error", t.SERVER_ERROR = "server_error", t.CLIENT_ERROR = "client_error", t.UNKNOWN_ERROR = "unknown_error";
-})(y || (y = {}));
-const a = {
+}, I = (e, t) => J(t) !== "eu" ? e : e === "cert" ? "eu-cert" : e === "prod" ? "eu-prod" : e, $ = (e) => {
+  if (!e || typeof e != "string")
+    return {};
+  const t = e.split(".");
+  if (t.length < 2)
+    return {};
+  try {
+    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), n = o + "===".slice(0, (4 - o.length % 4) % 4), r = typeof atob < "u" ? atob(n) : Buffer.from(n, "base64").toString("utf-8"), i = JSON.parse(r), a = i?.payload ?? {}, c = (s) => typeof s == "string" && s.length > 0 ? s : void 0;
+    return {
+      participantCode: c(a.participant_code),
+      platformName: c(a.platform_name),
+      platformCode: c(i.platform_code),
+      region: c(a.region)
+    };
+  } catch {
+    return {};
+  }
+}, L = (e, t, o) => {
+  const n = I(t, o);
+  return e[n] ?? e[t] ?? e.prod;
+}, K = (e, t, o) => {
+  const n = I(t, o);
+  return e[n] ?? e[t];
+}, v = () => {
+}, H = () => {
+  const e = new Uint8Array(8);
+  return globalThis.crypto.getRandomValues(e), Array.from(e, (t) => t.toString(16).padStart(2, "0")).join("");
+}, G = (e, t) => {
+  const o = H(), n = globalThis.__ZH_WEB_SDK_VERSION__, r = {};
+  e.claims.participantCode && (r.participant_code = e.claims.participantCode), e.claims.platformName && (r.platform_name = e.claims.platformName), e.claims.platformCode && (r.platform_code = e.claims.platformCode), e.claims.region && (r.region = e.claims.region), n && (r.zh_web_sdk_version = n);
+  const i = {
+    meta: {
+      app: { name: e.appName, version: t ?? "unknown", environment: e.env },
+      session: { id: o, attributes: r },
+      browser: typeof navigator < "u" ? { userAgent: navigator.userAgent } : void 0,
+      page: typeof window < "u" ? { url: window.location.origin } : void 0
+    },
+    logs: [
+      {
+        message: `Failed to load the script for ${e.webComponentTag} from ${e.env} environment.`,
+        level: "error",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        context: {
+          web_component: e.webComponentTag,
+          script_url: e.scriptUrl,
+          reason: e.reason,
+          tried_fallback: String(e.triedFallback),
+          elapsed_ms: String(e.elapsedMs)
+        }
+      }
+    ]
+  };
+  return { sessionId: o, payload: i };
+}, Z = (e, t, o) => {
+  if (!e || typeof fetch > "u")
+    return;
+  const { sessionId: n, payload: r } = G(t, o);
+  try {
+    fetch(e, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "x-faro-session-id": n },
+      body: JSON.stringify(r),
+      keepalive: !0
+    }).catch(() => {
+    });
+  } catch {
+  }
+}, q = (e) => {
+  const { webComponentTag: t, appName: o, appVersion: n, scriptUrls: r, fallbackScriptUrls: i, collectorUrls: a, env: c, jwt: s, timeoutMs: m = 15e3, onLoad: y, onError: u } = e;
+  if (typeof document > "u")
+    return v;
+  const d = `${t}-script-${c}`;
+  if (customElements.get(t) || document.getElementById(d))
+    return v;
+  const b = $(s), k = e.report ?? ((p) => Z(a && K(a, c, s), p, n));
+  let f = !1, C = 0, x;
+  const R = () => {
+    x !== void 0 && clearTimeout(x);
+  }, S = (p, g, l) => {
+    if (f)
+      return;
+    const j = Math.round(performance.now() - C), N = {
+      webComponentTag: t,
+      appName: o,
+      env: c,
+      scriptUrl: g,
+      reason: p,
+      triedFallback: l,
+      elapsedMs: j,
+      claims: b
+    };
+    k(N);
+    const w = l ? void 0 : L(i ?? {}, c, s);
+    if (w && w !== g) {
+      O(w, !0);
+      return;
+    }
+    f = !0, R(), document.getElementById(d)?.remove(), u?.(N);
+  }, O = (p, g) => {
+    R(), C = performance.now();
+    const l = document.createElement("script");
+    l.id = d, l.src = p, l.type = "module", l.async = !0, l.onload = () => {
+      setTimeout(() => {
+        f || (customElements.get(t) ? (f = !0, R(), y?.()) : S("not-defined", p, g));
+      }, 0);
+    }, l.onerror = () => S("network", p, g), x = setTimeout(() => S("timeout", p, g), m), document.getElementById(d)?.remove(), document.head.appendChild(l);
+  }, E = L(r, c, s);
+  return E ? (O(E, !1), () => {
+    f = !0, R();
+  }) : v;
+};
+var z;
+(function(e) {
+  e.NETWORK_ERROR = "network_error", e.AUTH_ERROR = "auth_error", e.NOT_FOUND_ERROR = "not_found_error", e.VALIDATION_ERROR = "validation_error", e.SERVER_ERROR = "server_error", e.CLIENT_ERROR = "client_error", e.UNKNOWN_ERROR = "unknown_error";
+})(z || (z = {}));
+const Q = (e) => {
+  const { webComponentTag: t, appName: o, appVersion: n, scriptUrls: r, fallbackScriptUrls: i, collectorUrls: a, env: c, jwt: s, timeoutMs: m } = e, [y, u] = T(!1), [d, b] = T(0);
+  B(() => (u(!1), q({
+    webComponentTag: t,
+    appName: o ?? t,
+    appVersion: n,
+    scriptUrls: r,
+    fallbackScriptUrls: i,
+    collectorUrls: a ?? P,
+    env: c,
+    jwt: s,
+    timeoutMs: m,
+    onError: () => u(!0)
+  })), [
+    t,
+    o,
+    n,
+    r,
+    i,
+    a,
+    c,
+    s,
+    m,
+    d
+  ]);
+  const k = W(() => b((f) => f + 1), []);
+  return { loadFailed: y, retry: k };
+}, X = {
   local: "http://localhost:5173/crypto-account-link-web/index.js",
   dev: "https://connect-sdk.dev.0hash.com/crypto-account-link-web/index.js",
   cert: "https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js",
   prod: "https://sdk.connect.xyz/crypto-account-link-web/index.js",
   "eu-cert": "https://sdk-cdn.cert.zerohash.eu/crypto-account-link-web/index.js",
   "eu-prod": "https://sdk-cdn.zerohash.eu/crypto-account-link-web/index.js"
-}, E = "zerohash-crypto-account-link-script", _ = "zerohash-crypto-account-link", N = (t = "prod", e) => {
-  const r = b(t, e);
-  return a[r] ?? a[t] ?? a.prod;
-}, T = ({
-  jwt: t,
-  env: e = "prod",
-  theme: r,
-  isPayouts: u = !1,
-  onCompleted: i,
-  onError: l,
-  onClose: c,
-  onLoaded: o,
-  onExternalAccountCreated: p,
-  onEvent: d,
-  ...g
+}, F = "zerohash-crypto-account-link", te = ({
+  jwt: e,
+  env: t = "prod",
+  theme: o,
+  isPayouts: n = !1,
+  onCompleted: r,
+  onError: i,
+  onClose: a,
+  onLoaded: c,
+  onExternalAccountCreated: s,
+  onEvent: m,
+  ...y
 }) => {
-  const f = O(null);
-  return h(() => {
-    const n = f.current;
-    n && (r !== void 0 && (n.theme = r), i && (n.onCompleted = i), l && (n.onError = l), c && (n.onClose = c), o && (n.onLoaded = o), p && (n.onExternalAccountCreated = p), d && (n.onEvent = d));
-  }, [r, i, l, c, o, p, d]), h(() => {
-    const n = N(e, t), R = `${E}-${e}`;
-    if (document.getElementById(R))
-      return;
-    const s = document.createElement("script");
-    s.id = R, s.src = n, s.type = "module", s.async = !0, s.onerror = () => {
-      console.error(`Failed to load the script for ${_} from ${e} environment.`);
-    }, document.head.appendChild(s);
-  }, [e, t]), k.createElement(_, {
-    ref: f,
-    jwt: t,
-    env: e,
-    theme: r,
-    "is-payouts": u,
-    ...g
+  const u = M(null);
+  V(u, { theme: o, onCompleted: r, onError: i, onClose: a, onLoaded: c, onExternalAccountCreated: s, onEvent: m });
+  const { loadFailed: d, retry: b } = Q({
+    webComponentTag: F,
+    scriptUrls: X,
+    env: t,
+    jwt: e
+  });
+  return d ? /* @__PURE__ */ h(D, { onRetry: b }) : U.createElement(F, {
+    ref: u,
+    jwt: e,
+    env: t,
+    theme: o,
+    "is-payouts": n,
+    ...y
   });
 };
 export {
-  T as CryptoAccountLink
+  te as CryptoAccountLink
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohash-sdk/crypto-account-link-react",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

package/src/lib/crypto-account-link-react.tsx

@@ -3,8 +3,8 @@
   CryptoAccountLinkEvent,
   ErrorPayload,
 } from '@zerohash/callbacks';
-import { resolveEnvByRegion } from '@zerohash/js-sdk-base';
-import React, { useEffect, useRef } from 'react';
+import { ScriptLoadFallback, useSyncWebComponentProps, useWebComponentScript } from '@zerohash/react-sdk-base';
+import React, { useRef } from 'react';
 
 // US partners (and JWTs without a region claim) stay on the original
 // connect.xyz CDN — that host has no Cloudflare Rocket Loader, which was the
@@ -20,7 +20,6 @@ const SCRIPT_URLS = {
   'eu-prod': 'https://sdk-cdn.zerohash.eu/crypto-account-link-web/index.js',
 } as const;
 
-const SCRIPT_ID = 'zerohash-crypto-account-link-script';
 const WEB_COMPONENT_TAG = 'zerohash-crypto-account-link';
 
 /**
@@ -42,14 +41,6 @@ type Environment = 'local' | 'dev' | 'cert' | 'prod';
  */
 type Theme = 'auto' | 'light' | 'dark';
 
-const getScriptUrl = (env: Environment = 'prod', jwt?: string): string => {
-  const effectiveEnv = resolveEnvByRegion(env, jwt) as keyof typeof SCRIPT_URLS;
-  // Final fallback to prod guarantees script.src is never undefined — even if
-  // a partner passes a garbage env at runtime (TS won't catch it from JS
-  // consumers). Matches the IFRAME_URLS pattern in crypto-account-link-web.
-  return SCRIPT_URLS[effectiveEnv] ?? SCRIPT_URLS[env] ?? SCRIPT_URLS['prod'];
-};
-
 interface CryptoAccountLinkProps {
   /**
    * JWT token used for authentication with the Connect Crypto Account Link service.
@@ -302,43 +293,23 @@ export const CryptoAccountLink: React.FC<CryptoAccountLinkProps> = ({
 }) => {
   const ref = useRef<CryptoAccountLinkElement | null>(null);
 
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    if (theme !== undefined) element.theme = theme;
-    if (onCompleted) element.onCompleted = onCompleted;
-    if (onError) element.onError = onError;
-    if (onClose) element.onClose = onClose;
-    if (onLoaded) element.onLoaded = onLoaded;
-    if (onExternalAccountCreated) element.onExternalAccountCreated = onExternalAccountCreated;
-    if (onEvent) element.onEvent = onEvent;
-  }, [theme, onCompleted, onError, onClose, onLoaded, onExternalAccountCreated, onEvent]);
-
-  // Load connect script to render the web component.
-  useEffect(() => {
-    const scriptUrl = getScriptUrl(env, jwt);
-    const scriptId = `${SCRIPT_ID}-${env}`;
-
-    if (document.getElementById(scriptId)) {
-      return; // Script already loaded, do nothing.
-    }
+  // Mirror props/callbacks onto the element (re-attached if the node remounts,
+  // e.g. after a successful "Try again" retry).
+  useSyncWebComponentProps(ref, { theme, onCompleted, onError, onClose, onLoaded, onExternalAccountCreated, onEvent });
 
-    const script = document.createElement('script');
-    script.id = scriptId;
-    script.src = scriptUrl;
-    script.type = 'module';
-    script.async = true;
-    script.onerror = () => {
-      console.error(`Failed to load the script for ${WEB_COMPONENT_TAG} from ${env} environment.`);
-    };
-
-    document.head.appendChild(script);
+  // Load the connect script that registers the web component. The shared hook
+  // injects it, reports failures to Faro (this wrapper has no Faro of its own),
+  // and surfaces a final failure as a visible fallback instead of a blank screen.
+  const { loadFailed, retry } = useWebComponentScript({
+    webComponentTag: WEB_COMPONENT_TAG,
+    scriptUrls: SCRIPT_URLS,
+    env,
+    jwt,
+  });
 
-    // Note: We don't return a cleanup function to remove the script.
-    // The script defines the custom element globally for the entire application,
-    // so it should remain even if all component instances are unmounted.
-  }, [env, jwt]); // Re-run if environment or JWT (region) changes
+  if (loadFailed) {
+    return <ScriptLoadFallback onRetry={retry} />;
+  }
 
   return React.createElement(WEB_COMPONENT_TAG, {
     ref,