@yourself_id/siwys-react-js 0.5.1-SAPP-159.3 → 0.5.1-SAPP-159.6

package/dist/index.d.mts

@@ -16,6 +16,9 @@ interface SignInProps {
     challengeUrl: string;
     onSiwysPress: () => void;
     isCYS?: boolean;
+    createChallengeUrl?: string;
+    pollForAuthUrl?: string;
+    successComponent?: React.ReactNode;
 }
 declare const SignInWithYourSelf: React.FC<SignInProps>;
 

package/dist/index.d.ts

@@ -16,6 +16,9 @@ interface SignInProps {
     challengeUrl: string;
     onSiwysPress: () => void;
     isCYS?: boolean;
+    createChallengeUrl?: string;
+    pollForAuthUrl?: string;
+    successComponent?: React.ReactNode;
 }
 declare const SignInWithYourSelf: React.FC<SignInProps>;
 

package/dist/index.js

@@ -7,6 +7,35 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -156,6 +185,101 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 function _templateObject() {
     var data = _tagged_template_literal([
         "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 3rem;\n  width: fit-content;\n  border-radius: 60px;\n  border: none;\n  padding: 12px 40px 12px 40px;\n  white-space: nowrap;\n\n  ",
@@ -207,7 +331,7 @@ function _templateObject4() {
 }
 function _templateObject5() {
     var data = _tagged_template_literal([
-        "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20%;\n  padding-bottom: 40px;\n  z-index: 10;\n\n  @media (min-width: 1024px) {\n    flex-direction: row;\n    gap: 196px;\n    padding-bottom: 0px;\n  }\n"
+        "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 20%;\n  padding-bottom: 40px;\n  z-index: 10;\n  margin-right: 16px;\n  margin-left: 16px;\n  @media (min-width: 1024px) {\n    flex-direction: row;\n    gap: 196px;\n    padding-bottom: 0px;\n    margin-right: 0px;\n    margin-left: 0px;\n  }\n"
     ]);
     _templateObject5 = function _templateObject() {
         return data;
@@ -252,7 +376,7 @@ function _templateObject9() {
 }
 function _templateObject10() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 24px;\n  margin-right: 24px;\n  margin-left: 24px;\n  @media (min-width: 1024px) {\n    margin-right: 0px;\n    margin-left: 0px;\n  }\n"
+        "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 24px;\n"
     ]);
     _templateObject10 = function _templateObject() {
         return data;
@@ -306,7 +430,7 @@ function _templateObject15() {
 }
 function _templateObject16() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: row;\n  background: #121114;\n  border: 1px solid #3d414c;\n  border-radius: 8px;\n  padding: 20px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  @media (min-width: 1024px) {\n      flex-direction: column;\n      padding-left: 53px;\n      padding-right: 53px;\n      max-width: 446px;\n    }\n  }\n"
+        "\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  @media (min-width: 1024px) {\n    width: auto;\n  }\n"
     ]);
     _templateObject16 = function _templateObject() {
         return data;
@@ -315,7 +439,7 @@ function _templateObject16() {
 }
 function _templateObject17() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  gap: 16px;\n  @media (min-width: 1024px) {\n    flex-direction: row;\n    align-items: center;\n  }\n"
+        "\n  display: flex;\n  flex-direction: column;\n  background: #121114;\n  border: 1px solid #3d414c;\n  border-radius: 8px;\n  padding: 20px;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n  @media (min-width: 1024px) {\n      padding-left: 53px;\n      padding-right: 53px;\n      max-width: 446px;\n    }\n  }\n"
     ]);
     _templateObject17 = function _templateObject() {
         return data;
@@ -324,7 +448,7 @@ function _templateObject17() {
 }
 function _templateObject18() {
     var data = _tagged_template_literal([
-        '\n  font-family: "Inter", sans-serif;\n  font-weight: 500;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  font-size: 15px;\n  line-height: 126%;\n  letter-spacing: 0.025em;\n  max-width: 128px;\n  color: #c4ccd4;\n'
+        "\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  gap: 8px;\n  @media (min-width: 1024px) {\n    gap: 16px;\n    align-items: center;\n  }\n"
     ]);
     _templateObject18 = function _templateObject() {
         return data;
@@ -333,13 +457,22 @@ function _templateObject18() {
 }
 function _templateObject19() {
     var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  @media (min-width: 1024px) {\n    flex-direction: row;\n  }\n"
+        '\n  font-family: "Inter", sans-serif;\n  font-weight: 500;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  font-size: 15px;\n  line-height: 126%;\n  letter-spacing: 0.025em;\n  max-width: 128px;\n  color: #c4ccd4;\n'
     ]);
     _templateObject19 = function _templateObject() {
         return data;
     };
     return data;
 }
+function _templateObject20() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  @media (min-width: 1024px) {\n    gap: 16px;\n  }\n"
+    ]);
+    _templateObject20 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -899,12 +1032,59 @@ var InstructionsSubtitle = import_styled_components4.default.p(_templateObject12
 var InstructionsDescription = import_styled_components4.default.ul(_templateObject13());
 var InstructionsDescriptionItem = import_styled_components4.default.li(_templateObject14());
 var DownloadTitleContainer = import_styled_components4.default.div(_templateObject15());
-var DownloadContainer = import_styled_components4.default.div(_templateObject16());
-var DownloadContainerFlex = import_styled_components4.default.div(_templateObject17());
-var DownloadAppTitle = import_styled_components4.default.p(_templateObject18());
-var AppIconsContainer = import_styled_components4.default.div(_templateObject19());
+var ParentDownloadContainer = import_styled_components4.default.div(_templateObject16());
+var DownloadContainer = import_styled_components4.default.div(_templateObject17());
+var DownloadContainerFlex = import_styled_components4.default.div(_templateObject18());
+var DownloadAppTitle = import_styled_components4.default.p(_templateObject19());
+var AppIconsContainer = import_styled_components4.default.div(_templateObject20());
 var SignInWithYourSelf = function(param) {
-    var challengeUrl = param.challengeUrl, onSiwysPress = param.onSiwysPress, _param_isCYS = param.isCYS, isCYS = _param_isCYS === void 0 ? false : _param_isCYS;
+    var challengeUrlParam = param.challengeUrl, onSiwysPress = param.onSiwysPress, _param_isCYS = param.isCYS, isCYS = _param_isCYS === void 0 ? false : _param_isCYS, _param_createChallengeUrl = param.createChallengeUrl, createChallengeUrl = _param_createChallengeUrl === void 0 ? void 0 : _param_createChallengeUrl, _param_pollForAuthUrl = param.pollForAuthUrl, pollForAuthUrl = _param_pollForAuthUrl === void 0 ? void 0 : _param_pollForAuthUrl, successComponent = param.successComponent;
+    var _ref = _sliced_to_array((0, import_react4.useState)(challengeUrlParam), 2), challengeUrl = _ref[0], setChallengeUrl = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react4.useState)(""), 2), challengeDid = _ref1[0], setChallengeDid = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react4.useState)(false), 2), isAuthenticated = _ref2[0], setIsAuthenticated = _ref2[1];
+    (0, import_react4.useEffect)(function() {
+        if (createChallengeUrl) {
+            fetch(createChallengeUrl, {
+                method: "POST"
+            }).then(function(resp) {
+                return resp.json();
+            }).then(function(json) {
+                setChallengeDid(json.challenge);
+                setChallengeUrl(json.challengeUrl);
+            });
+        }
+    }, [
+        createChallengeUrl
+    ]);
+    (0, import_react4.useEffect)(function() {
+        if (!pollForAuthUrl || !challengeDid || isAuthenticated) return;
+        var interval = setInterval(/*#__PURE__*/ _async_to_generator(function() {
+            return _ts_generator(this, function(_state) {
+                fetch(pollForAuthUrl + "?challenge=".concat(challengeDid)).then(function(resp) {
+                    if (resp.status === 200) {
+                        return resp.json();
+                    }
+                    return {
+                        match: false
+                    };
+                }).then(function(json) {
+                    if (json.match) {
+                        setIsAuthenticated(json.match);
+                    }
+                }).catch(function() {});
+                return [
+                    2
+                ];
+            });
+        }), 5e3);
+        return function() {
+            clearInterval(interval);
+        };
+    }, [
+        challengeDid,
+        isAuthenticated,
+        pollForAuthUrl
+    ]);
     var redirectToPlayStore = function() {
         var playStoreURL = "https://play.google.com/store/apps/details?id=id.selfid";
         window.open(playStoreURL, "_blank");
@@ -913,6 +1093,9 @@ var SignInWithYourSelf = function(param) {
         var appStoreURL = "https://apps.apple.com/us/app/self-id/id1663745416";
         window.open(appStoreURL, "_blank");
     };
+    if (isAuthenticated) {
+        return /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, successComponent);
+    }
     return /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, /* @__PURE__ */ import_react4.default.createElement(SignInContainer, null, /* @__PURE__ */ import_react4.default.createElement(CircleLogoWhite_default, {
         width: "48",
         height: "48"
@@ -931,7 +1114,7 @@ var SignInWithYourSelf = function(param) {
         colorTheme: "light",
         onClick: onSiwysPress,
         glow: true
-    })), /* @__PURE__ */ import_react4.default.createElement(InstructionsContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, null, isCYS ? "If you have the SELF\xAE\xA0mobile app:" : "If you are signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, isCYS ? "Use scanning feature in the SELF\xAE app to scan the QR code." : 'Tap the "Sign in with your SELF\u2122" button.'), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, null, isCYS ? "If you do not have the SELF\xAE mobile app:" : "If you are not signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, isCYS ? "Download and open the SELF\xAE ID app from the App Store." : "Open the SELF\xAE app on the device with the app installed."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(DownloadTitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, "Don\u2019t have the"), /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
+    })), /* @__PURE__ */ import_react4.default.createElement(InstructionsContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, null, isCYS ? "If you have the SELF\xAE\xA0mobile app:" : "If you are signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, isCYS ? "Use scanning feature in the SELF\xAE app to scan the QR code." : 'Tap the "Sign in with your SELF\u2122" button.'), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, null, isCYS ? "If you do not have the SELF\xAE mobile app:" : "If you are not signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, isCYS ? "Download and open the SELF\xAE ID app from the App Store." : "Open the SELF\xAE app on the device with the app installed."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement(ParentDownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadTitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, "Don\u2019t have the"), /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
         width: "58",
         height: "12"
     }), /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, " app?")), /* @__PURE__ */ import_react4.default.createElement(DownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadContainerFlex, null, /* @__PURE__ */ import_react4.default.createElement(DownloadAppTitle, null, "Available to download now:"), /* @__PURE__ */ import_react4.default.createElement(AppIconsContainer, null, /* @__PURE__ */ import_react4.default.createElement(IconDark_default, {