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

package/dist/index.js

@@ -1,43 +1,68 @@
-import m, { useRef as x, useEffect as f } from "react";
-const b = {
+import k, { useRef as O, useEffect as h } from "react";
+const m = (t) => {
+  if (!t || typeof t != "string")
+    return null;
+  const e = t.split(".");
+  if (e.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")
+      return null;
+    const o = c.toLowerCase();
+    return o === "us" || o === "eu" ? o : 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 = {
   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"
-}, I = "zerohash-crypto-account-link-script", y = "zerohash-crypto-account-link", R = (e = "prod") => b[e], w = ({
-  jwt: e,
-  env: o = "prod",
+  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: h = !1,
-  onCompleted: n,
-  onError: s,
-  onClose: i,
-  onLoaded: p,
-  onExternalAccountCreated: d,
-  onEvent: l,
-  ...k
+  isPayouts: u = !1,
+  onCompleted: i,
+  onError: l,
+  onClose: c,
+  onLoaded: o,
+  onExternalAccountCreated: p,
+  onEvent: d,
+  ...g
 }) => {
-  const u = x(null);
-  return f(() => {
-    const t = u.current;
-    t && (r !== void 0 && (t.theme = r), n && (t.onCompleted = n), s && (t.onError = s), i && (t.onClose = i), p && (t.onLoaded = p), d && (t.onExternalAccountCreated = d), l && (t.onEvent = l));
-  }, [r, n, s, i, p, d, l]), f(() => {
-    const t = R(o), a = `${I}-${o}`;
-    if (document.getElementById(a))
+  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 c = document.createElement("script");
-    c.id = a, c.src = t, c.type = "module", c.async = !0, c.onerror = () => {
-      console.error(`Failed to load the script for ${y} from ${o} environment.`);
-    }, document.head.appendChild(c);
-  }, [o]), m.createElement(y, {
-    ref: u,
-    jwt: e,
-    env: o,
+    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": h,
-    ...k
+    "is-payouts": u,
+    ...g
   });
 };
 export {
-  w as CryptoAccountLink
+  T as CryptoAccountLink
 };

package/package.json

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

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

@@ -2,9 +2,111 @@ import { render } from '@testing-library/react';
 
 import { CryptoAccountLink } from './crypto-account-link-react';
 
+// Build a fake JWT whose `payload.region` claim matches the value passed in.
+const makeJwt = (region: 'us' | 'eu' | null): string => {
+  const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+  const body = btoa(JSON.stringify(region === null ? { sub: 'test' } : { payload: { region } }));
+  return `${header}.${body}.sig`;
+};
+
 describe('CryptoAccountLink', () => {
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
   it('should render successfully', () => {
     const { baseElement } = render(<CryptoAccountLink jwt="test-token" />);
     expect(baseElement).toBeTruthy();
   });
+
+  describe('script loading', () => {
+    it('loads the dev CDN script for dev env', () => {
+      render(
+        <CryptoAccountLink
+          jwt="test-jwt"
+          env="dev"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://connect-sdk.dev.0hash.com/crypto-account-link-web/index.js');
+    });
+
+    it('loads the cert CDN script for cert env', () => {
+      render(
+        <CryptoAccountLink
+          jwt="test-jwt"
+          env="cert"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/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');
+    });
+
+    it('loads the EU cert CDN script when JWT region is "eu" and env is "cert"', () => {
+      render(
+        <CryptoAccountLink
+          jwt={makeJwt('eu')}
+          env="cert"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk-cdn.cert.zerohash.eu/crypto-account-link-web/index.js');
+    });
+
+    it('loads the EU prod CDN script when JWT region is "eu" and env is "prod"', () => {
+      render(<CryptoAccountLink jwt={makeJwt('eu')} />);
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk-cdn.zerohash.eu/crypto-account-link-web/index.js');
+    });
+
+    it('keeps US partners on the original cert host when JWT region is "us"', () => {
+      render(
+        <CryptoAccountLink
+          jwt={makeJwt('us')}
+          env="cert"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+    });
+
+    it('falls back to the US host when the JWT has no region claim', () => {
+      render(
+        <CryptoAccountLink
+          jwt={makeJwt(null)}
+          env="cert"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+    });
+
+    it('falls back to the US host when the JWT is malformed', () => {
+      render(
+        <CryptoAccountLink
+          jwt="not-a-jwt"
+          env="cert"
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk.sandbox.connect.xyz/crypto-account-link-web/index.js');
+    });
+
+    it('falls back to the prod connect.xyz host when env is an unknown string', () => {
+      render(
+        <CryptoAccountLink
+          jwt="test-jwt"
+          env={'staging' as unknown as 'prod'}
+        />
+      );
+      const script = document.head.querySelector('script');
+      expect(script?.src).toBe('https://sdk.connect.xyz/crypto-account-link-web/index.js');
+    });
+  });
 });

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

@@ -3,13 +3,21 @@
   CryptoAccountLinkEvent,
   ErrorPayload,
 } from '@zerohash/callbacks';
+import { resolveEnvByRegion } from '@zerohash/js-sdk-base';
 import React, { useEffect, 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_ID = 'zerohash-crypto-account-link-script';
@@ -34,8 +42,12 @@ type Environment = 'local' | 'dev' | 'cert' | 'prod';
  */
 type Theme = 'auto' | 'light' | 'dark';
 
-const getScriptUrl = (env: Environment = 'prod'): string => {
-  return SCRIPT_URLS[env];
+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 {
@@ -305,7 +317,7 @@ export const CryptoAccountLink: React.FC<CryptoAccountLinkProps> = ({
 
   // Load connect script to render the web component.
   useEffect(() => {
-    const scriptUrl = getScriptUrl(env);
+    const scriptUrl = getScriptUrl(env, jwt);
     const scriptId = `${SCRIPT_ID}-${env}`;
 
     if (document.getElementById(scriptId)) {
@@ -326,7 +338,7 @@ export const CryptoAccountLink: React.FC<CryptoAccountLinkProps> = ({
     // 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]); // Re-run if environment changes
+  }, [env, jwt]); // Re-run if environment or JWT (region) changes
 
   return React.createElement(WEB_COMPONENT_TAG, {
     ref,