@onefootprint/footprint-js - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8-alpha.0

dist/footprint-js.js

 var k = Object.defineProperty;
-var C = (a, t, e) => t in a ? k(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var b = (a, t, e) => (C(a, typeof t != "symbol" ? t + "" : t, e), e);
-var u = /* @__PURE__ */ ((a) => (a.closed = "closed", a.completed = "completed", a.canceled = "canceled", a))(u || {});
+var B = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var E = (n, t, e) => (B(n, typeof t != "symbol" ? t + "" : t, e), e);
+const O = () => "https://id.onefootprint.com", S = (n) => {
+  const t = O(), { publicKey: e, variables: r, rules: o, fontSrc: a } = n, i = new URLSearchParams();
+  return e && i.append("public_key", e), r && i.append("tokens", r), o && i.append("rules", o), a && i.append("font_src", a), `${t}?${i.toString()}`;
+}, P = ({
+  fontSrc: n,
+  variables: t = {},
+  rules: e = {}
+} = {}) => {
+  const {
+    fpButtonBorderRadius: r,
+    fpButtonHeight: o,
+    loadingBg: a,
+    loadingBorderRadius: i,
+    loadingColor: s,
+    loadingPadding: d,
+    overlayBg: c,
+    ...l
+  } = t, p = () => Object.keys(l).length ? encodeURIComponent(JSON.stringify(l)) : void 0, m = () => Object.keys(e).length ? encodeURIComponent(JSON.stringify(e)) : void 0;
+  return {
+    fontSrc: n,
+    variables: p(),
+    rules: m()
+  };
+};
+var g = /* @__PURE__ */ ((n) => (n.closed = "closed", n.completed = "completed", n.canceled = "canceled", n))(g || {});
 /**
@@ -12,10 +36,10 @@ postmate - A powerful, simple, promise-based postMessage library
 **/
-var l = "application/x-postmate-v1+json", O = 5, P = 0, M = function() {
-  return ++P;
-}, _ = function(t) {
+var h = "application/x-postmate-v1+json", R = 5, _ = 0, M = function() {
+  return ++_;
+}, $ = function(t) {
   var e = document.createElement("a");
   e.href = t;
-  var r = e.protocol.length > 4 ? e.protocol : window.location.protocol, n = e.host.length ? e.port === "80" || e.port === "443" ? e.hostname : e.host : window.location.host;
-  return e.origin || r + "//" + n;
-}, F = {
+  var r = e.protocol.length > 4 ? e.protocol : window.location.protocol, o = e.host.length ? e.port === "80" || e.port === "443" ? e.hostname : e.host : window.location.host;
+  return e.origin || r + "//" + o;
+}, N = {
   handshake: 1,
@@ -27,61 +51,61 @@ "handshake-reply": 1,
   request: 1
-}, g = function(t, e) {
-  return !(typeof e == "string" && t.origin !== e || !t.data || typeof t.data == "object" && !("postmate" in t.data) || t.data.type !== l || !F[t.data.postmate]);
-}, N = function(t, e) {
+}, b = function(t, e) {
+  return !(typeof e == "string" && t.origin !== e || !t.data || typeof t.data == "object" && !("postmate" in t.data) || t.data.type !== h || !N[t.data.postmate]);
+}, H = function(t, e) {
   var r = typeof t[e] == "function" ? t[e]() : t[e];
-  return p.Promise.resolve(r);
+  return f.Promise.resolve(r);
 }, x = /* @__PURE__ */ function() {
-  function a(e) {
+  function n(e) {
     var r = this;
-    this.parent = e.parent, this.frame = e.frame, this.child = e.child, this.childOrigin = e.childOrigin, this.events = {}, this.listener = function(n) {
-      if (!g(n, r.childOrigin))
+    this.parent = e.parent, this.frame = e.frame, this.child = e.child, this.childOrigin = e.childOrigin, this.events = {}, this.listener = function(o) {
+      if (!b(o, r.childOrigin))
         return !1;
-      var o = ((n || {}).data || {}).value || {}, i = o.data, s = o.name;
-      n.data.postmate === "emit" && s in r.events && r.events[s].call(r, i);
+      var a = ((o || {}).data || {}).value || {}, i = a.data, s = a.name;
+      o.data.postmate === "emit" && s in r.events && r.events[s].call(r, i);
     }, this.parent.addEventListener("message", this.listener, !1);
   }
-  var t = a.prototype;
+  var t = n.prototype;
   return t.get = function(r) {
-    var n = this;
-    return new p.Promise(function(o) {
+    var o = this;
+    return new f.Promise(function(a) {
       var i = M(), s = function d(c) {
-        c.data.uid === i && c.data.postmate === "reply" && (n.parent.removeEventListener("message", d, !1), o(c.data.value));
+        c.data.uid === i && c.data.postmate === "reply" && (o.parent.removeEventListener("message", d, !1), a(c.data.value));
       };
-      n.parent.addEventListener("message", s, !1), n.child.postMessage({
+      o.parent.addEventListener("message", s, !1), o.child.postMessage({
         postmate: "request",
-        type: l,
+        type: h,
         property: r,
         uid: i
-      }, n.childOrigin);
+      }, o.childOrigin);
     });
-  }, t.call = function(r, n) {
+  }, t.call = function(r, o) {
     this.child.postMessage({
       postmate: "call",
-      type: l,
+      type: h,
       property: r,
-      data: n
+      data: o
     }, this.childOrigin);
-  }, t.on = function(r, n) {
-    this.events[r] = n;
+  }, t.on = function(r, o) {
+    this.events[r] = o;
   }, t.destroy = function() {
     window.removeEventListener("message", this.listener, !1), this.frame.parentNode.removeChild(this.frame);
-  }, a;
-}(), B = /* @__PURE__ */ function() {
-  function a(e) {
+  }, n;
+}(), D = /* @__PURE__ */ function() {
+  function n(e) {
     var r = this;
-    this.model = e.model, this.parent = e.parent, this.parentOrigin = e.parentOrigin, this.child = e.child, this.child.addEventListener("message", function(n) {
-      if (!!g(n, r.parentOrigin)) {
-        var o = n.data, i = o.property, s = o.uid, d = o.data;
-        if (n.data.postmate === "call") {
+    this.model = e.model, this.parent = e.parent, this.parentOrigin = e.parentOrigin, this.child = e.child, this.child.addEventListener("message", function(o) {
+      if (!!b(o, r.parentOrigin)) {
+        var a = o.data, i = a.property, s = a.uid, d = a.data;
+        if (o.data.postmate === "call") {
           i in r.model && typeof r.model[i] == "function" && r.model[i](d);
           return;
         }
-        N(r.model, i).then(function(c) {
-          return n.source.postMessage({
+        H(r.model, i).then(function(c) {
+          return o.source.postMessage({
             property: i,
             postmate: "reply",
-            type: l,
+            type: h,
             uid: s,
             value: c
-          }, n.origin);
+          }, o.origin);
         });
@@ -91,41 +115,41 @@ }
   }
-  var t = a.prototype;
-  return t.emit = function(r, n) {
+  var t = n.prototype;
+  return t.emit = function(r, o) {
     this.parent.postMessage({
       postmate: "emit",
-      type: l,
+      type: h,
       value: {
         name: r,
-        data: n
+        data: o
       }
     }, this.parentOrigin);
-  }, a;
-}(), p = /* @__PURE__ */ function() {
-  function a(e) {
-    var r = e.container, n = r === void 0 ? typeof n < "u" ? n : document.body : r, o = e.model, i = e.url, s = e.name, d = e.classListArray, c = d === void 0 ? [] : d;
-    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = s || "", this.frame.classList.add.apply(this.frame.classList, c), n.appendChild(this.frame), this.child = this.frame.contentWindow || this.frame.contentDocument.parentWindow, this.model = o || {}, this.sendHandshake(i);
+  }, n;
+}(), f = /* @__PURE__ */ function() {
+  function n(e) {
+    var r = e.container, o = r === void 0 ? typeof o < "u" ? o : document.body : r, a = e.model, i = e.url, s = e.name, d = e.classListArray, c = d === void 0 ? [] : d;
+    return this.parent = window, this.frame = document.createElement("iframe"), this.frame.name = s || "", this.frame.classList.add.apply(this.frame.classList, c), o.appendChild(this.frame), this.child = this.frame.contentWindow || this.frame.contentDocument.parentWindow, this.model = a || {}, this.sendHandshake(i);
   }
-  var t = a.prototype;
+  var t = n.prototype;
   return t.sendHandshake = function(r) {
-    var n = this, o = _(r), i = 0, s;
-    return new a.Promise(function(d, c) {
-      var h = function m(f) {
-        return g(f, o) ? f.data.postmate === "handshake-reply" ? (clearInterval(s), n.parent.removeEventListener("message", m, !1), n.childOrigin = f.origin, d(new x(n))) : c("Failed handshake") : !1;
+    var o = this, a = $(r), i = 0, s;
+    return new n.Promise(function(d, c) {
+      var l = function v(y) {
+        return b(y, a) ? y.data.postmate === "handshake-reply" ? (clearInterval(s), o.parent.removeEventListener("message", v, !1), o.childOrigin = y.origin, d(new x(o))) : c("Failed handshake") : !1;
       };
-      n.parent.addEventListener("message", h, !1);
-      var y = function() {
-        i++, n.child.postMessage({
+      o.parent.addEventListener("message", l, !1);
+      var p = function() {
+        i++, o.child.postMessage({
           postmate: "handshake",
-          type: l,
-          model: n.model
-        }, o), i === O && clearInterval(s);
-      }, w = function() {
-        y(), s = setInterval(y, 500);
+          type: h,
+          model: o.model
+        }, a), i === R && clearInterval(s);
+      }, m = function() {
+        p(), s = setInterval(p, 500);
       };
-      n.frame.attachEvent ? n.frame.attachEvent("onload", w) : n.frame.onload = w, n.frame.src = r;
+      o.frame.attachEvent ? o.frame.attachEvent("onload", m) : o.frame.onload = m, o.frame.src = r;
     });
-  }, a;
+  }, n;
 }();
-p.debug = !1;
-p.Promise = function() {
+f.debug = !1;
+f.Promise = function() {
   try {
@@ -137,10 +161,10 @@ return window ? window.Promise : Promise;
 }();
-p.Model = /* @__PURE__ */ function() {
-  function a(e) {
+f.Model = /* @__PURE__ */ function() {
+  function n(e) {
     return this.child = window, this.model = e, this.parent = this.child.parent, this.sendHandshakeReply();
   }
-  var t = a.prototype;
+  var t = n.prototype;
   return t.sendHandshakeReply = function() {
     var r = this;
-    return new p.Promise(function(n, o) {
+    return new f.Promise(function(o, a) {
       var i = function s(d) {
@@ -151,10 +175,10 @@ if (!!d.data.postmate) {
               postmate: "handshake-reply",
-              type: l
+              type: h
             }, d.origin), r.parentOrigin = d.origin;
             var c = d.data.model;
-            return c && Object.keys(c).forEach(function(h) {
-              r.model[h] = c[h];
-            }), n(new B(r));
+            return c && Object.keys(c).forEach(function(l) {
+              r.model[l] = c[l];
+            }), o(new D(r));
           }
-          return o("Handshake Reply Failed");
+          return a("Handshake Reply Failed");
         }
@@ -164,29 +188,54 @@ };
     });
-  }, a;
+  }, n;
 }();
-const A = "footprint-container", L = "footprint-overlay", E = "footprint-loading-indicator", H = (a) => {
-  const t = I();
-  return a.appendChild(t), t;
-}, R = (a) => {
+const L = "footprint-container", C = "footprint-overlay", I = "footprint-loading-indicator", F = "footprint-custom-styles", T = (n) => {
+  if (typeof window > "u")
+    return;
+  const t = document.getElementById(F);
+  t && t.remove();
+  const e = document.createElement("style");
+  e.setAttribute("id", "footprint-custom-styles"), e.textContent = n, document.head.append(e);
+}, u = (n, t) => t ? `${n}: ${t}` : "", j = ({ variables: n = {} }) => {
+  T(`
+    :root {
+      ${u("--fp-fp-button-height", n.fpButtonHeight)}
+      ${u(
+    "--fp-fp-button-border-radius",
+    n.fpButtonBorderRadius
+  )}
+      ${u("--fp-loading-bg", n.loadingBg)}
+      ${u("--fp-loading-color", n.loadingColor)}
+      ${u(
+    "--fp-loading-border-radius",
+    n.loadingBorderRadius
+  )}
+      ${u("--fp-loading-padding", n.loadingPadding)}
+      ${u("--fp-overlay-bg", n.overlayBg)}
+    }
+  `);
+}, V = (n) => {
+  const t = A();
+  return n.appendChild(t), t;
+}, U = (n) => {
   document.body.classList.add("footprint-body-locked");
   const t = document.createElement("div");
-  t.setAttribute("id", L);
-  const e = T(E);
-  t.appendChild(e), t.classList.add("footprint-overlay"), a.appendChild(t);
-}, D = () => {
-  const a = document.getElementById(E);
-  a && a.remove();
-}, S = () => {
+  t.setAttribute("id", C);
+  const e = K(I);
+  t.appendChild(e), t.classList.add("footprint-overlay"), n.appendChild(t);
+}, q = () => {
+  const n = document.getElementById(I);
+  n && n.remove();
+}, z = () => {
   document.body.classList.remove("footprint-body-locked");
-  const a = document.getElementById(L);
-  a && a.remove();
-}, V = () => {
-  const a = document.getElementById(A);
-  if (a)
-    return a;
+  const n = document.getElementById(C);
+  n && n.remove();
+}, J = () => {
+  const n = document.getElementById(L);
+  if (n)
+    return n;
   const t = document.createElement("div");
-  return t.setAttribute("id", A), document.body.appendChild(t), t;
-}, T = (a) => {
+  return t.setAttribute("id", L), document.body.appendChild(t), t;
+}, K = (n) => {
   const t = document.createElement("div");
-  t.setAttribute("id", a), t.classList.add("footprint-loading-indicator");
+  t.setAttribute("id", n), t.classList.add("footprint-loading-indicator");
   const e = document.createElement("div");
@@ -196,7 +245,7 @@ e.classList.add("footprint-loading-spin");
   r.setAttribute("width", "24px"), r.setAttribute("height", "24px"), r.setAttribute("fill", "none"), r.setAttribute("aria-hidden", "true");
-  const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return n.setAttribute("d", "M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"), n.setAttribute("fill", "#FFFFFF"), r.appendChild(n), e.appendChild(r), t.appendChild(e), t;
-}, $ = () => {
-  const a = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  a.setAttribute("width", "24px"), a.setAttribute("height", "24px"), a.setAttribute("fill", "none"), a.setAttribute("aria-hidden", "true");
+  const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return o.setAttribute("d", "M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"), r.appendChild(o), e.appendChild(r), t.appendChild(e), t;
+}, W = () => {
+  const n = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  n.setAttribute("width", "24px"), n.setAttribute("height", "24px"), n.setAttribute("fill", "none"), n.setAttribute("aria-hidden", "true");
   const t = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -206,23 +255,23 @@ return t.setAttribute(
     "M14.66 14h2.666v-2.36a2.666 2.666 0 1 1 0-4.614V4H6.66v16h4.666v-2.666A3.333 3.333 0 0 1 14.66 14Z"
-  ), t.setAttribute("fill", "#76fb8f"), a.appendChild(t), a;
-}, I = () => {
-  const a = $(), t = document.createElement("button");
-  t.appendChild(a);
+  ), t.setAttribute("fill", "#76fb8f"), n.appendChild(t), n;
+}, A = () => {
+  const n = W(), t = document.createElement("button");
+  t.appendChild(n);
   const e = document.createElement("span");
   return e.innerText = "Verify with Footprint", t.appendChild(e), t.classList.add("footprint-button"), t;
 };
-class j {
+class Y {
   constructor() {
-    b(this, "child", null);
+    E(this, "child", null);
   }
   async show(t) {
-    const { url: e } = t, r = () => {
-      D();
-    }, n = V();
-    R(n);
-    const o = await new p({
+    const e = () => {
+      q();
+    }, r = J();
+    U(r);
+    const o = await new f({
       classListArray: ["footprint-modal"],
-      container: n,
+      container: r,
       name: "footprint-iframe",
-      url: e
+      url: t
     });
@@ -232,3 +281,3 @@ o.frame.setAttribute(
       "otp-credentials; publickey-credentials-get *; camera *;"
-    ), r(), o.on(u.closed, () => this.hide()), this.child = o;
+    ), e(), o.on(g.closed, () => this.hide()), this.child = o;
   }
@@ -241,51 +290,81 @@ on(t, e) {
   hide() {
-    S(), this.child && this.child.destroy();
+    z(), this.child && this.child.destroy();
   }
   createButton(t) {
-    const e = I();
+    const e = A();
     return t.appendChild(e), e;
   }
 }
-const v = new j(), q = (a) => {
-  const t = (r) => v.on(u.completed, (n) => {
-    n && typeof n == "string" && r(n);
-  }), e = (r) => v.on(u.canceled, r);
+const Z = Y, w = new Z(), G = () => {
+  const n = ({
+    theme: o = "light",
+    variables: a = {}
+  } = {}) => {
+    const {
+      fpButtonBorderRadius: i,
+      fpButtonHeight: s,
+      loadingBg: d,
+      loadingBorderRadius: c,
+      loadingColor: l,
+      loadingPadding: p,
+      overlayBg: m
+    } = a;
+    j({
+      theme: o,
+      variables: {
+        fpButtonBorderRadius: i,
+        fpButtonHeight: s,
+        loadingBg: d,
+        loadingBorderRadius: c,
+        loadingColor: l,
+        loadingPadding: p,
+        overlayBg: m
+      }
+    });
+  }, t = (o) => w.on(g.completed, (a) => {
+    a && typeof a == "string" && o(a);
+  }), e = (o) => w.on(g.canceled, o);
   return {
-    show: async ({ publicKey: r, onCompleted: n, onCanceled: o }) => {
-      await v.show({
-        url: r ? `${a}?public_key=${r}` : a
-      }), n && t(n), o && e(o);
+    show: async ({
+      appearance: o,
+      publicKey: a,
+      onCompleted: i,
+      onCanceled: s
+    }) => {
+      n(o);
+      const { fontSrc: d, rules: c, variables: l } = P(o), p = S({ fontSrc: d, publicKey: a, rules: c, variables: l });
+      await w.show(p), i && t(i), s && e(s);
     }
   };
-}, z = (a) => {
-  window.setTimeout(a, 0);
-}, W = (a) => {
+}, Q = G, X = (n) => {
+  window.setTimeout(n, 0);
+}, tt = (n) => {
   if (typeof window > "u")
     return;
-  const t = async (n) => {
-    await a.show({
-      publicKey: n,
+  const t = async (o) => {
+    await n.show({
+      publicKey: o,
       onCanceled: () => {
-        var o;
-        (o = window.onFootprintCanceled) == null || o.call(window);
+        var a;
+        (a = window.onFootprintCanceled) == null || a.call(window);
       },
-      onCompleted: (o) => {
+      onCompleted: (a) => {
         var i;
-        (i = window.onFootprintCompleted) == null || i.call(window, o);
+        (i = window.onFootprintCompleted) == null || i.call(window, a);
       }
     });
   }, e = () => {
-    const n = document.getElementById("footprint-button");
-    if (!n)
+    const o = document.getElementById("footprint-button");
+    if (!o)
       return;
-    const o = n.getAttribute("data-public-key");
-    if (!o)
+    const a = o.getAttribute("data-public-key");
+    if (!a)
       throw Error(
         "A public key must be passed as `data-public-key` in the #footprint-button element"
       );
-    r(o, n);
-  }, r = (n, o) => {
-    z(() => {
-      H(o).addEventListener("click", () => {
-        t(n);
+    r(a, o);
+  }, r = (o, a) => {
+    X(() => {
+      V(a).addEventListener("click", () => {
+        t(o);
       });
@@ -295,7 +374,7 @@ });
   document.addEventListener("DOMContentLoaded", () => e());
-}, Z = () => "https://id.onefootprint.com", G = Z(), U = q(G);
-W(U);
+}, et = tt, nt = Q();
+et(nt);
 export {
-  u as FootprintEvents,
-  U as default
+  g as FootprintEvents,
+  nt as default
 };

dist/footprint.d.ts

@@ -1,6 +0,6 @@
-import { ShowFootprint } from './footprint-types';
-declare const footprint: (url: string) => {
-    show: ({ publicKey, onCompleted, onCanceled }: ShowFootprint) => Promise<void>;
+import { ShowFootprint } from './types/footprint.types';
+declare const footprint: () => {
+    show: ({ appearance, publicKey, onCompleted, onCanceled, }: ShowFootprint) => Promise<void>;
 };
 export default footprint;
 //# sourceMappingURL=footprint.d.ts.map

dist/index.d.ts

 declare const footprint: {
-    show: ({ publicKey, onCompleted, onCanceled }: import("./footprint-types").ShowFootprint) => Promise<void>;
+    show: ({ appearance, publicKey, onCompleted, onCanceled, }: import("./types/footprint.types").ShowFootprint) => Promise<void>;
 };
-export * from './footprint-types';
+export * from './types/footprint.types';
 export default footprint;
 //# sourceMappingURL=index.d.ts.map

package.json

@@ -5,3 +5,3 @@ {
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8-alpha.0",
   "main": "./dist/footprint-js.umd.cjs",
@@ -27,3 +27,3 @@ "module": "./dist/footprint-js.js",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch --mode development",
     "build": "yarn typecheck && vite build",
@@ -35,5 +35,8 @@ "lint": "eslint src --fix",
   "devDependencies": {
+    "@onefootprint/footprint-core": "*",
+    "@onefootprint/design-tokens": "*",
     "@onefootprint/jest-presets": "*",
     "@onefootprint/types": "*",
     "@types/postmate": "^1.5.2",
+    "csstype": "^3.1.1",
     "eslint-config-footprint": "*",
@@ -40,0 +43,0 @@ "postmate": "^1.5.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41115

increased by62.76%

Number of package files

20

increased by11.11%

Lines of code

605

increased by56.74%

Worsened metrics

Dev dependency count

12

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes