@zerohash-sdk/profile-react 0.3.2 → 0.5.0

package/dist/index.js

@@ -1,39 +1,238 @@
-import h, { useRef as m, useEffect as f } from "react";
-const x = {
+import { jsxs as W, jsx as g } from "react/jsx-runtime";
+import A, { useEffect as B, useState as T, useCallback as j, useRef as M } from "react";
+const y = {
+  evergreen: "#00381D",
+  green: "#CCFFD0",
+  offBlack: "#1C1B1C",
+  grayLight: "#EBEBE9"
+}, D = ({ onRetry: e }) => W("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: y.offBlack,
+  background: "#FFFFFF",
+  border: `1px solid ${y.grayLight}`,
+  borderRadius: "12px"
+}, children: [g("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: g("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: y.evergreen, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), g("p", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: "Something went wrong" }), g("p", { style: { margin: 0, fontSize: "14px", opacity: 0.75 }, children: "We couldn't load this content. Please check your internet connection and try again." }), g("button", { type: "button", onClick: e, style: {
+  marginTop: "8px",
+  padding: "8px 20px",
+  fontSize: "14px",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  color: y.green,
+  background: y.evergreen,
+  border: "none",
+  borderRadius: "8px",
+  cursor: "pointer"
+}, children: "Try again" })] }), P = (e, t) => {
+  B(() => {
+    const o = e.current;
+    if (o)
+      for (const [r, n] of Object.entries(t))
+        n !== void 0 && (o[r] = n);
+  });
+}, V = {
+  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 t = e.split(".");
+  if (t.length < 2)
+    return null;
+  try {
+    const o = t[1].replace(/-/g, "+").replace(/_/g, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), n = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), c = JSON.parse(n)?.payload?.region;
+    if (typeof c != "string")
+      return null;
+    const a = c.toLowerCase();
+    return a === "us" || a === "eu" ? a : null;
+  } catch {
+    return null;
+  }
+}, 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, "/"), r = o + "===".slice(0, (4 - o.length % 4) % 4), n = typeof atob < "u" ? atob(r) : Buffer.from(r, "base64").toString("utf-8"), i = JSON.parse(n), c = i?.payload ?? {}, a = (s) => typeof s == "string" && s.length > 0 ? s : void 0;
+    return {
+      participantCode: a(c.participant_code),
+      platformName: a(c.platform_name),
+      platformCode: a(i.platform_code),
+      region: a(c.region)
+    };
+  } catch {
+    return {};
+  }
+}, L = (e, t, o) => {
+  const r = I(t, o);
+  return e[r] ?? e[t] ?? e.prod;
+}, K = (e, t, o) => {
+  const r = I(t, o);
+  return e[r] ?? e[t];
+}, C = () => {
+}, 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(), r = globalThis.__ZH_WEB_SDK_VERSION__, n = {};
+  e.claims.participantCode && (n.participant_code = e.claims.participantCode), e.claims.platformName && (n.platform_name = e.claims.platformName), e.claims.platformCode && (n.platform_code = e.claims.platformCode), e.claims.region && (n.region = e.claims.region), r && (n.zh_web_sdk_version = r);
+  const i = {
+    meta: {
+      app: { name: e.appName, version: t ?? "unknown", environment: e.env },
+      session: { id: o, attributes: n },
+      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: r, payload: n } = G(t, o);
+  try {
+    fetch(e, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "x-faro-session-id": r },
+      body: JSON.stringify(n),
+      keepalive: !0
+    }).catch(() => {
+    });
+  } catch {
+  }
+}, q = (e) => {
+  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: n, fallbackScriptUrls: i, collectorUrls: c, env: a, jwt: s, timeoutMs: f = 15e3, onLoad: h, onError: b } = e;
+  if (typeof document > "u")
+    return C;
+  const u = `${t}-script-${a}`;
+  if (customElements.get(t) || document.getElementById(u))
+    return C;
+  const R = $(s), S = e.report ?? ((d) => Z(c && K(c, a, s), d, r));
+  let p = !1, O = 0, x;
+  const _ = () => {
+    x !== void 0 && clearTimeout(x);
+  }, v = (d, m, l) => {
+    if (p)
+      return;
+    const U = Math.round(performance.now() - O), N = {
+      webComponentTag: t,
+      appName: o,
+      env: a,
+      scriptUrl: m,
+      reason: d,
+      triedFallback: l,
+      elapsedMs: U,
+      claims: R
+    };
+    S(N);
+    const w = l ? void 0 : L(i ?? {}, a, s);
+    if (w && w !== m) {
+      k(w, !0);
+      return;
+    }
+    p = !0, _(), document.getElementById(u)?.remove(), b?.(N);
+  }, k = (d, m) => {
+    _(), O = performance.now();
+    const l = document.createElement("script");
+    l.id = u, l.src = d, l.type = "module", l.async = !0, l.onload = () => {
+      setTimeout(() => {
+        p || (customElements.get(t) ? (p = !0, _(), h?.()) : v("not-defined", d, m));
+      }, 0);
+    }, l.onerror = () => v("network", d, m), x = setTimeout(() => v("timeout", d, m), f), document.getElementById(u)?.remove(), document.head.appendChild(l);
+  }, E = L(n, a, s);
+  return E ? (k(E, !1), () => {
+    p = !0, _();
+  }) : C;
+};
+var F;
+(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";
+})(F || (F = {}));
+const Q = (e) => {
+  const { webComponentTag: t, appName: o, appVersion: r, scriptUrls: n, fallbackScriptUrls: i, collectorUrls: c, env: a, jwt: s, timeoutMs: f } = e, [h, b] = T(!1), [u, R] = T(0);
+  B(() => (b(!1), q({
+    webComponentTag: t,
+    appName: o ?? t,
+    appVersion: r,
+    scriptUrls: n,
+    fallbackScriptUrls: i,
+    collectorUrls: c ?? V,
+    env: a,
+    jwt: s,
+    timeoutMs: f,
+    onError: () => b(!0)
+  })), [
+    t,
+    o,
+    r,
+    n,
+    i,
+    c,
+    a,
+    s,
+    f,
+    u
+  ]);
+  const S = j(() => R((p) => p + 1), []);
+  return { loadFailed: h, retry: S };
+}, X = {
   local: "http://localhost:5173/profile-web/index.js",
   dev: "https://connect-sdk.dev.0hash.com/profile-web/index.js",
   cert: "https://sdk.sandbox.connect.xyz/profile-web/index.js",
   prod: "https://sdk.connect.xyz/profile-web/index.js"
-}, b = "zerohash-profile-script", a = "zerohash-profile", y = (c = "prod") => x[c], R = ({
-  jwt: c,
-  env: r = "prod",
+}, z = "zerohash-profile", te = ({
+  jwt: e,
+  env: t = "prod",
   theme: o,
-  onError: s,
+  onError: r,
   onClose: n,
   onLoaded: i,
-  onEvent: p,
-  ...u
+  onEvent: c,
+  ...a
 }) => {
-  const d = m(null);
-  return f(() => {
-    const e = d.current;
-    e && (o !== void 0 && (e.theme = o), s && (e.onError = s), n && (e.onClose = n), i && (e.onLoaded = i), p && (e.onEvent = p));
-  }, [o, s, n, i, p]), f(() => {
-    const e = y(r), l = `${b}-${r}`;
-    if (document.getElementById(l))
-      return;
-    const t = document.createElement("script");
-    t.id = l, t.src = e, t.type = "module", t.async = !0, t.onerror = () => {
-      console.error(`Failed to load the script for ${a} from ${r} environment.`);
-    }, document.head.appendChild(t);
-  }, [r]), h.createElement(a, {
-    ref: d,
-    jwt: c,
-    env: r,
+  const s = M(null);
+  P(s, { theme: o, onError: r, onClose: n, onLoaded: i, onEvent: c });
+  const { loadFailed: f, retry: h } = Q({
+    webComponentTag: z,
+    scriptUrls: X,
+    env: t,
+    jwt: e
+  });
+  return f ? /* @__PURE__ */ g(D, { onRetry: h }) : A.createElement(z, {
+    ref: s,
+    jwt: e,
+    env: t,
     theme: o,
-    ...u
+    ...a
   });
 };
 export {
-  R as Profile
+  te as Profile
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohash-sdk/profile-react",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",