@zerohash-sdk/crypto-account-link-react 1.2.1 → 1.2.4

package/dist/index.d.ts

@@ -44,7 +44,7 @@ declare type AppEvent<TType extends string = string, TData = Record<string, unkn
  * // With callback functions
  * <CryptoAccountLink
  *   jwt="your-jwt-token"
- *   theme="auto"
+ *   theme="light"
  *   onLoaded={() => console.log('Crypto account link loaded and ready')}
  *   onCompleted={(data) => console.log('Account linked successfully', data)}
  *   onClose={() => console.log('Crypto account link closed')}

package/dist/index.js

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

package/package.json

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

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

@@ -228,7 +228,7 @@ interface CryptoAccountLinkElement
   extends HTMLElement,
     Pick<
       CryptoAccountLinkProps,
-      'onCompleted' | 'onError' | 'onClose' | 'onLoaded' | 'onEvent' | 'onExternalAccountCreated'
+      'theme' | 'onCompleted' | 'onError' | 'onClose' | 'onLoaded' | 'onEvent' | 'onExternalAccountCreated'
     > {}
 
 /**
@@ -263,7 +263,7 @@ interface CryptoAccountLinkElement
  * // With callback functions
  * <CryptoAccountLink
  *   jwt="your-jwt-token"
- *   theme="auto"
+ *   theme="light"
  *   onLoaded={() => console.log('Crypto account link loaded and ready')}
  *   onCompleted={(data) => console.log('Account linked successfully', data)}
  *   onClose={() => console.log('Crypto account link closed')}
@@ -290,18 +290,18 @@ export const CryptoAccountLink: React.FC<CryptoAccountLinkProps> = ({
 }) => {
   const ref = useRef<CryptoAccountLinkElement | null>(null);
 
-  // Set up callback functions on the web component element
   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;
-  }, [onCompleted, onError, onClose, onLoaded, onExternalAccountCreated, onEvent]);
+  }, [theme, onCompleted, onError, onClose, onLoaded, onExternalAccountCreated, onEvent]);
 
   // Load connect script to render the web component.
   useEffect(() => {