@heliofi/deposit-react 0.2.1 → 0.2.2

package/dist/helio-deposit-react.es.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-
+
 
 
 
@@ -16,13 +16,13 @@ export declare const MoonpayCommerceDeposit: (props: MoonpayCommerceDepositReact
     themeMode?: DepositThemeMode;
     variant?: DepositVariant;
     loadingText?: React.ReactNode;
-    trigger?: (props: {
-        onClick: () => void;
-    }) => React.ReactNode;
     debug?: boolean;
 }
 
     config: MoonpayCommerceDepositConfig;
+    trigger?: React.ComponentType<{
+        onClick: () => void;
+    }>;
 }
 
 export { }

package/dist/helio-deposit-react.es.js

@@ -1,56 +1,70 @@
-import { jsxs as g, jsx as f } from "react/jsx-runtime";
-import { useRef as y, useState as i, useEffect as E, useLayoutEffect as I } from "react";
-const C = "v1", R = () => {
+import { jsxs as E, jsx as i, Fragment as y } from "react/jsx-runtime";
+import { useRef as C, useState as u, useEffect as p, useLayoutEffect as I } from "react";
+const R = "v1", b = () => {
   try {
     return process.env.VITE_PROD_HOSTNAME || "embed.deposits.hel.io";
   } catch {
     return "embed.deposits.hel.io";
   }
-}, b = R(), l = "deposit-embed-script", M = `https://${b}/assets/index-${C}.js`, O = ({ children: t }) => /* @__PURE__ */ g("div", { children: [
+}, M = b(), g = "deposit-embed-script", O = `https://${M}/assets/index-${R}.js`, _ = ({ children: e }) => /* @__PURE__ */ E("div", { children: [
   "Error loading Helio Deposit for React",
-  t ? `: ${t}` : ""
-] }), _ = (t = M) => {
-  const e = document.createElement("script");
-  return e.setAttribute("type", "module"), e.setAttribute("id", l), e.setAttribute("src", t), document.body.appendChild(e), e;
-}, h = (t) => {
-  const e = y(null), [c, D] = i(!1), [o, v] = i(), [u, n] = i("");
-  return E(() => D(!0), []), E(() => {
-    let d = !1;
-    if (o) return;
-    const s = () => {
-      if (d) return;
-      const r = window.moonpayCommerceDeposit;
-      if (!r) {
-        n(
+  e ? `: ${e}` : ""
+] }), h = (e = O) => {
+  const t = document.createElement("script");
+  return t.setAttribute("type", "module"), t.setAttribute("id", g), t.setAttribute("src", e), document.body.appendChild(t), t;
+}, T = (e) => {
+  const t = C(null), [d, D] = u(!1), [r, v] = u(), [m, s] = u("");
+  if (p(() => D(!0), []), p(() => {
+    let o = !1;
+    if (r) return;
+    const c = () => {
+      if (o) return;
+      const n = window.moonpayCommerceDeposit;
+      if (!n) {
+        s(
           "Unable to load Helio Deposit - missing init function on window.moonpayCommerceDeposit"
         );
         return;
       }
-      v(() => r);
-    }, m = (r) => {
-      const a = () => n("Error loading script tag");
-      return r.addEventListener("load", s), r.addEventListener("error", a), () => {
-        d = !0, r.removeEventListener("load", s), r.removeEventListener("error", a);
+      v(() => n);
+    }, a = (n) => {
+      const l = () => s("Error loading script tag");
+      return n.addEventListener("load", c), n.addEventListener("error", l), () => {
+        o = !0, n.removeEventListener("load", c), n.removeEventListener("error", l);
       };
-    }, p = document.querySelector(
-      `script#${l}`
+    }, f = document.querySelector(
+      `script#${g}`
     );
-    if (p) {
-      window.moonpayCommerceDeposit ? s() : m(p);
+    if (f) {
+      window.moonpayCommerceDeposit ? c() : a(f);
       return;
     }
-    const S = _();
-    return m(S);
-  }, [o]), I(() => {
-    if (!(!o || !c)) {
-      if (!e.current) {
-        n("Missing element to mount Helio Deposit");
+    const S = h();
+    return a(S);
+  }, [r]), I(() => {
+    if (!(!r || !d)) {
+      if (!t.current) {
+        s("Missing element to mount Helio Deposit");
         return;
       }
-      o(e.current, t.config);
+      e.trigger || r(t.current, e.config);
     }
-  }, [o, c, t.config]), u ? /* @__PURE__ */ f(O, { children: u }) : o ? /* @__PURE__ */ f("div", { ref: e }) : null;
+  }, [r, d, e.config, e.trigger]), m) return /* @__PURE__ */ i(_, { children: m });
+  if (!r) return null;
+  if (e.trigger) {
+    const o = e.trigger;
+    return /* @__PURE__ */ E(y, { children: [
+      /* @__PURE__ */ i("div", { ref: t }),
+      /* @__PURE__ */ i(
+        o,
+        {
+          onClick: () => r(t.current, { ...e.config, display: "modal" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ i("div", { ref: t });
 };
 export {
-  h as MoonpayCommerceDeposit
+  T as MoonpayCommerceDeposit
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heliofi/deposit-react",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",