@zerohash-sdk/crypto-account-link-react 1.5.0 → 1.5.2

package/dist/index.js

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

package/package.json

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

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

@@ -28,7 +28,7 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://connect-sdk.dev.0hash.com/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.dev.0hash.com/crypto-account-link-web/index.js');
     });
 
     it('loads the cert CDN script for cert env', () => {
@@ -39,13 +39,13 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.cert.zerohash.com/crypto-account-link-web/index.js');
     });
 
     it('loads the production CDN script for prod env', () => {
       render(<CryptoAccountLink jwt="test-jwt" />);
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.zerohash.com/crypto-account-link-web/index.js');
     });
 
     it('loads the EU cert CDN script when JWT region is "eu" and env is "cert"', () => {
@@ -73,7 +73,7 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.cert.zerohash.com/crypto-account-link-web/index.js');
     });
 
     it('falls back to the US host when the JWT has no region claim', () => {
@@ -84,7 +84,7 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.cert.zerohash.com/crypto-account-link-web/index.js');
     });
 
     it('falls back to the US host when the JWT is malformed', () => {
@@ -95,7 +95,7 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.cert.zerohash.com/crypto-account-link-web/index.js');
     });
 
     it('falls back to the prod connect.xyz host when env is an unknown string', () => {
@@ -106,7 +106,7 @@ describe('CryptoAccountLink', () => {
         />
       );
       const script = document.head.querySelector('script');
-      expect(script?.src).toBe('https://sdk.connect.xyz/crypto-account-link-web/index.js');
+      expect(script?.src).toBe('https://sdk-cdn.zerohash.com/crypto-account-link-web/index.js');
     });
   });
 });

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

@@ -3,22 +3,11 @@
   CryptoAccountLinkEvent,
   ErrorPayload,
 } from '@zerohash/callbacks';
+import { buildCdnAssetUrls } from '@zerohash/js-sdk-base';
 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
-// root cause of the SRE-18031 blank-screen incident. EU partners
-// (`region: 'eu'` in the JWT payload) are routed to the EU CDN. The two will
-// be unified once Rocket Loader is dropped on the .com host.
-const SCRIPT_URLS = {
-  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',
-} as const;
+const SCRIPT_URLS = buildCdnAssetUrls('crypto-account-link-web', 'index.js', { eu: true });
 
 const WEB_COMPONENT_TAG = 'zerohash-crypto-account-link';