@turnkey/react-wallet-kit 1.0.0 → 1.1.0

package/dist/components/auth/index.mjs

@@ -1,9 +1,9 @@
-import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faDiscord, faXTwitter, faFacebook, faApple, faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { OtpType } from '@turnkey/core';
-import { faFingerprint } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsisH, faFingerprint } from '@fortawesome/free-solid-svg-icons';
 import clsx from 'clsx';
 import { OAuthButton } from './OAuth.mjs';
 import { EmailInput } from './Email.mjs';
@@ -21,10 +21,14 @@ import { ClientState } from '../../types/base.mjs';
 import { isWalletConnect } from '../../utils/utils.mjs';
 
 function AuthComponent(_ref) {
-  var sessionKey = _ref.sessionKey;
+  var sessionKey = _ref.sessionKey,
+    logo = _ref.logo,
+    logoClassName = _ref.logoClassName,
+    title = _ref.title;
   var _useTurnkey = useTurnkey(),
     config = _useTurnkey.config,
     clientState = _useTurnkey.clientState,
+    walletProviders = _useTurnkey.walletProviders,
     handleGoogleOauth = _useTurnkey.handleGoogleOauth,
     handleAppleOauth = _useTurnkey.handleAppleOauth,
     handleFacebookOauth = _useTurnkey.handleFacebookOauth,
@@ -33,12 +37,12 @@ function AuthComponent(_ref) {
     initOtp = _useTurnkey.initOtp,
     loginWithPasskey = _useTurnkey.loginWithPasskey,
     signUpWithPasskey = _useTurnkey.signUpWithPasskey,
-    fetchWalletProviders = _useTurnkey.fetchWalletProviders,
     loginOrSignupWithWallet = _useTurnkey.loginOrSignupWithWallet,
     disconnectWalletAccount = _useTurnkey.disconnectWalletAccount;
   var _useModal = useModal(),
     pushPage = _useModal.pushPage,
-    isMobile = _useModal.isMobile;
+    isMobile = _useModal.isMobile,
+    openSheet = _useModal.openSheet;
   if (!config || clientState === ClientState.Loading) {
     // Don't check ClientState.Error here. We already check in the modal root
     return jsx("div", {
@@ -57,82 +61,86 @@ function AuthComponent(_ref) {
     _ref2$oauthOrder = _ref2.oauthOrder,
     oauthOrder = _ref2$oauthOrder === void 0 ? [] : _ref2$oauthOrder;
   var handleEmailSubmit = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(email) {
-      var otpId;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(email) {
+      var _config$auth, _config$auth2, otpId, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
+            _context.p = 0;
+            _context.n = 1;
             return initOtp({
               otpType: OtpType.Email,
               contact: email
             });
-          case 3:
-            otpId = _context.sent;
+          case 1:
+            otpId = _context.v;
             pushPage({
               key: "Verify OTP",
               content: jsx(OtpVerification, _objectSpread2({
                 contact: email,
                 otpId: otpId,
-                otpType: OtpType.Email
+                otpType: OtpType.Email,
+                otpLength: ((_config$auth = config.auth) === null || _config$auth === void 0 ? void 0 : _config$auth.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
+                alphanumeric: (_config$auth2 = config.auth) === null || _config$auth2 === void 0 ? void 0 : _config$auth2.otpAlphanumeric
               }, sessionKey && {
                 sessionKey: sessionKey
               })),
               showTitle: false
             });
-            _context.next = 10;
+            _context.n = 3;
             break;
-          case 7:
-            _context.prev = 7;
-            _context.t0 = _context["catch"](0);
-            throw new Error("Error initializing OTP: ".concat(_context.t0));
-          case 10:
-          case "end":
-            return _context.stop();
+          case 2:
+            _context.p = 2;
+            _t = _context.v;
+            throw new Error("Error initializing OTP: ".concat(_t));
+          case 3:
+            return _context.a(2);
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 2]]);
     }));
     return function handleEmailSubmit(_x) {
       return _ref3.apply(this, arguments);
     };
   }();
   var handlePhoneSubmit = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(phone, formattedPhone) {
-      var otpId;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone, formattedPhone) {
+      var _config$auth3, _config$auth4, otpId, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
+            _context2.p = 0;
+            _context2.n = 1;
             return initOtp({
               otpType: OtpType.Sms,
               contact: phone
             });
-          case 3:
-            otpId = _context2.sent;
+          case 1:
+            otpId = _context2.v;
             pushPage({
               key: "Verify OTP",
-              content: jsx(OtpVerification, {
+              content: jsx(OtpVerification, _objectSpread2({
                 contact: phone,
                 // Pass in the formatted phone number seperately. In the case that some weird formatting occurs, we don't want to send it into the initOtp request
                 formattedContact: formattedPhone,
                 otpId: otpId,
-                otpType: OtpType.Sms
-              }),
+                otpType: OtpType.Sms,
+                otpLength: ((_config$auth3 = config.auth) === null || _config$auth3 === void 0 ? void 0 : _config$auth3.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
+                alphanumeric: (_config$auth4 = config.auth) === null || _config$auth4 === void 0 ? void 0 : _config$auth4.otpAlphanumeric
+              }, sessionKey && {
+                sessionKey: sessionKey
+              })),
               showTitle: false
             });
-            _context2.next = 10;
+            _context2.n = 3;
             break;
-          case 7:
-            _context2.prev = 7;
-            _context2.t0 = _context2["catch"](0);
-            throw new Error("Error initializing OTP: ".concat(_context2.t0));
-          case 10:
-          case "end":
-            return _context2.stop();
+          case 2:
+            _context2.p = 2;
+            _t2 = _context2.v;
+            throw new Error("Error initializing OTP: ".concat(_t2));
+          case 3:
+            return _context2.a(2);
         }
-      }, _callee2, null, [[0, 7]]);
+      }, _callee2, null, [[0, 2]]);
     }));
     return function handlePhoneSubmit(_x2, _x3) {
       return _ref4.apply(this, arguments);
@@ -144,17 +152,16 @@ function AuthComponent(_ref) {
       content: jsx(ActionPage, {
         title: "Authenticating with passkey...",
         action: function () {
-          var _action = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
+          var _action = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+            return _regenerator().w(function (_context3) {
+              while (1) switch (_context3.n) {
                 case 0:
-                  _context3.next = 2;
+                  _context3.n = 1;
                   return loginWithPasskey(_objectSpread2({}, sessionKey && {
                     sessionKey: sessionKey
                   }));
-                case 2:
-                case "end":
-                  return _context3.stop();
+                case 1:
+                  return _context3.a(2);
               }
             }, _callee3);
           }));
@@ -177,17 +184,16 @@ function AuthComponent(_ref) {
       content: jsx(ActionPage, {
         title: "Creating account with passkey...",
         action: function () {
-          var _action2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-              while (1) switch (_context4.prev = _context4.next) {
+          var _action2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.n) {
                 case 0:
-                  _context4.next = 2;
+                  _context4.n = 1;
                   return signUpWithPasskey(_objectSpread2({}, sessionKey && {
                     sessionKey: sessionKey
                   }));
-                case 2:
-                case "end":
-                  return _context4.stop();
+                case 1:
+                  return _context4.a(2);
               }
             }, _callee4);
           }));
@@ -205,9 +211,9 @@ function AuthComponent(_ref) {
     });
   };
   var handleGoogle = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
           case 0:
             pushPage({
               key: "Google OAuth",
@@ -230,8 +236,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context5.stop();
+            return _context5.a(2);
         }
       }, _callee5);
     }));
@@ -240,9 +245,9 @@ function AuthComponent(_ref) {
     };
   }();
   var handleApple = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
           case 0:
             pushPage({
               key: "Apple OAuth",
@@ -265,8 +270,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context6.stop();
+            return _context6.a(2);
         }
       }, _callee6);
     }));
@@ -275,9 +279,9 @@ function AuthComponent(_ref) {
     };
   }();
   var handleFacebook = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
-      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.n) {
           case 0:
             pushPage({
               key: "Facebook OAuth",
@@ -300,8 +304,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context7.stop();
+            return _context7.a(2);
         }
       }, _callee7);
     }));
@@ -310,9 +313,9 @@ function AuthComponent(_ref) {
     };
   }();
   var handleX = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.n) {
           case 0:
             pushPage({
               key: "X OAuth",
@@ -335,8 +338,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context8.stop();
+            return _context8.a(2);
         }
       }, _callee8);
     }));
@@ -345,9 +347,9 @@ function AuthComponent(_ref) {
     };
   }();
   var handleDiscord = /*#__PURE__*/function () {
-    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
-      return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.n) {
           case 0:
             pushPage({
               key: "Discord OAuth",
@@ -370,8 +372,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context9.stop();
+            return _context9.a(2);
         }
       }, _callee9);
     }));
@@ -380,28 +381,27 @@ function AuthComponent(_ref) {
     };
   }();
   var handleWalletLoginOrSignup = /*#__PURE__*/function () {
-    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1(provider) {
-      return _regeneratorRuntime().wrap(function _callee1$(_context1) {
-        while (1) switch (_context1.prev = _context1.next) {
+    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1(provider) {
+      return _regenerator().w(function (_context1) {
+        while (1) switch (_context1.n) {
           case 0:
             pushPage({
               key: "Wallet Login/Signup",
               content: jsx(ActionPage, {
                 title: "Authenticating with ".concat(provider.info.name, "..."),
                 action: function () {
-                  var _action3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
-                    return _regeneratorRuntime().wrap(function _callee0$(_context0) {
-                      while (1) switch (_context0.prev = _context0.next) {
+                  var _action3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+                    return _regenerator().w(function (_context0) {
+                      while (1) switch (_context0.n) {
                         case 0:
-                          _context0.next = 2;
+                          _context0.n = 1;
                           return loginOrSignupWithWallet(_objectSpread2({
                             walletProvider: provider
                           }, sessionKey && {
                             sessionKey: sessionKey
                           }));
-                        case 2:
-                        case "end":
-                          return _context0.stop();
+                        case 1:
+                          return _context0.a(2);
                       }
                     }, _callee0);
                   }));
@@ -418,8 +418,7 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-          case "end":
-            return _context1.stop();
+            return _context1.a(2);
         }
       }, _callee1);
     }));
@@ -428,12 +427,12 @@ function AuthComponent(_ref) {
     };
   }();
   var handleSelect = /*#__PURE__*/function () {
-    var _ref1 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12(provider) {
-      return _regeneratorRuntime().wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+    var _ref1 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12(provider) {
+      return _regenerator().w(function (_context12) {
+        while (1) switch (_context12.n) {
           case 0:
             if (!isWalletConnect(provider)) {
-              _context12.next = 3;
+              _context12.n = 1;
               break;
             }
             // for WalletConnect we route to a dedicated screen
@@ -443,19 +442,18 @@ function AuthComponent(_ref) {
               content: jsx(WalletConnectScreen, {
                 provider: provider,
                 onAction: function () {
-                  var _onAction = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10(provider) {
-                    return _regeneratorRuntime().wrap(function _callee10$(_context10) {
-                      while (1) switch (_context10.prev = _context10.next) {
+                  var _onAction = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10(provider) {
+                    return _regenerator().w(function (_context10) {
+                      while (1) switch (_context10.n) {
                         case 0:
-                          _context10.next = 2;
+                          _context10.n = 1;
                           return loginOrSignupWithWallet(_objectSpread2({
                             walletProvider: provider
                           }, sessionKey && {
                             sessionKey: sessionKey
                           }));
-                        case 2:
-                        case "end":
-                          return _context10.stop();
+                        case 1:
+                          return _context10.a(2);
                       }
                     }, _callee10);
                   }));
@@ -465,15 +463,14 @@ function AuthComponent(_ref) {
                   return onAction;
                 }(),
                 onDisconnect: function () {
-                  var _onDisconnect = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11(provider) {
-                    return _regeneratorRuntime().wrap(function _callee11$(_context11) {
-                      while (1) switch (_context11.prev = _context11.next) {
+                  var _onDisconnect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11(provider) {
+                    return _regenerator().w(function (_context11) {
+                      while (1) switch (_context11.n) {
                         case 0:
-                          _context11.next = 2;
+                          _context11.n = 1;
                           return disconnectWalletAccount(provider);
-                        case 2:
-                        case "end":
-                          return _context11.stop();
+                        case 1:
+                          return _context11.a(2);
                       }
                     }, _callee11);
                   }));
@@ -485,13 +482,12 @@ function AuthComponent(_ref) {
                 successPageDuration: undefined
               })
             });
-            return _context12.abrupt("return");
-          case 3:
-            _context12.next = 5;
+            return _context12.a(2);
+          case 1:
+            _context12.n = 2;
             return handleWalletLoginOrSignup(provider);
-          case 5:
-          case "end":
-            return _context12.stop();
+          case 2:
+            return _context12.a(2);
         }
       }, _callee12);
     }));
@@ -500,16 +496,12 @@ function AuthComponent(_ref) {
     };
   }();
   var handleShowWalletSelector = /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee13() {
-      var walletProviders;
-      return _regeneratorRuntime().wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee13() {
+      var _t3;
+      return _regenerator().w(function (_context13) {
+        while (1) switch (_context13.p = _context13.n) {
           case 0:
-            _context13.prev = 0;
-            _context13.next = 3;
-            return fetchWalletProviders();
-          case 3:
-            walletProviders = _context13.sent;
+            _context13.p = 0;
             pushPage({
               key: "Select wallet provider",
               content: jsx(ExternalWalletSelector, {
@@ -517,17 +509,16 @@ function AuthComponent(_ref) {
                 onSelect: handleSelect
               })
             });
-            _context13.next = 10;
+            _context13.n = 2;
             break;
-          case 7:
-            _context13.prev = 7;
-            _context13.t0 = _context13["catch"](0);
-            throw new Error("Error fetching wallet providers: ".concat(_context13.t0));
-          case 10:
-          case "end":
-            return _context13.stop();
+          case 1:
+            _context13.p = 1;
+            _t3 = _context13.v;
+            throw new Error("Error fetching wallet providers: ".concat(_t3));
+          case 2:
+            return _context13.a(2);
         }
-      }, _callee13, null, [[0, 7]]);
+      }, _callee13, null, [[0, 1]]);
     }));
     return function handleShowWalletSelector() {
       return _ref10.apply(this, arguments);
@@ -573,9 +564,31 @@ function AuthComponent(_ref) {
   var oauthButtons = oauthOrder.map(function (provider) {
     return oauthButtonMap[provider];
   }).filter(Boolean);
-  var oauthBlock = oauthButtons.length > 0 ? jsx("div", {
+  var oauthBlock = oauthButtons.length > 0 && oauthButtons.length <= 5 ? jsx("div", {
     className: "w-full h-11 flex flex-row justify-center items-center gap-2",
     children: oauthButtons
+  }, "socials") : oauthButtons.length > 0 ? jsxs("div", {
+    className: "w-full h-11 flex flex-row justify-center items-center gap-2",
+    children: [oauthButtons.slice(0, 4), jsx(OAuthButton, {
+      name: "More",
+      icon: jsx(FontAwesomeIcon, {
+        icon: faEllipsisH
+      }),
+      onClick: function onClick() {
+        return openSheet({
+          key: "Select a social method",
+          content: jsx("div", {
+            className: "w-full h-full flex flex-wrap justify-center items-center gap-2",
+            children: oauthButtons.map(function (button) {
+              return jsx("div", {
+                className: "w-16 h-11",
+                children: button
+              }, button === null || button === void 0 ? void 0 : button.key);
+            })
+          })
+        });
+      }
+    }, "more")]
   }, "socials") : null;
   // -- Individual Auth Method Components --
   var methodComponents = {
@@ -601,7 +614,16 @@ function AuthComponent(_ref) {
   return jsxs("div", {
     className: clsx("flex flex-col items-center ", isMobile ? "w-full" : "w-96"),
     children: [config.authProxyConfigId ? rendered.length > 0 ? jsxs(Fragment, {
-      children: [jsx("div", {
+      children: [logo ? jsxs("div", {
+        className: "mt-3 mb-4 flex flex-col items-center",
+        children: [jsx("img", {
+          src: logo,
+          className: "max-w-32 mt-3 w-fit max-h-16 h-fit object-contain ".concat(logoClassName)
+        }), jsx("h2", {
+          className: "text-lg font-medium mb-4 text-center",
+          children: title !== null && title !== void 0 ? title : "Log in or sign up"
+        })]
+      }) : jsx("div", {
         className: "mt-12"
       }), rendered.map(function (component, index) {
         return jsxs("div", {