@0xkey-io/react-wallet-kit 0.1.0

package/dist/components/auth/index.mjs

@@ -0,0 +1,672 @@
+import { toConsumableArray as _toConsumableArray, 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 '@0xkey-io/core';
+import { faEllipsisH, faFingerprint } from '@fortawesome/free-solid-svg-icons';
+import clsx from 'clsx';
+import { OAuthButton } from './OAuth.mjs';
+import { EmailInput } from './Email.mjs';
+import { OrSeparator } from './OrSeparator.mjs';
+import { OtpVerification } from './OTP.mjs';
+import { PhoneNumberInput } from './Phone.mjs';
+import { ActionPage } from './Action.mjs';
+import { PasskeyButtons } from './Passkey.mjs';
+import { Spinner } from '../design/Spinners.mjs';
+import { WalletAuthButton, ExternalWalletSelector, WalletConnectScreen } from './Wallet.mjs';
+import { DeveloperError } from '../design/Failure.mjs';
+import { useModal } from '../../providers/modal/Hook.mjs';
+import { useZeroXKey } from '../../providers/client/Hook.mjs';
+import { ClientState } from '../../types/base.mjs';
+import { isWalletConnect } from '../../utils/utils.mjs';
+
+function AuthComponent(_ref) {
+  var sessionKey = _ref.sessionKey,
+    logo = _ref.logo,
+    logoClassName = _ref.logoClassName,
+    title = _ref.title;
+  var _useZeroXKey = useZeroXKey(),
+    config = _useZeroXKey.config,
+    clientState = _useZeroXKey.clientState,
+    handleGoogleOauth = _useZeroXKey.handleGoogleOauth,
+    handleAppleOauth = _useZeroXKey.handleAppleOauth,
+    handleFacebookOauth = _useZeroXKey.handleFacebookOauth,
+    handleXOauth = _useZeroXKey.handleXOauth,
+    handleDiscordOauth = _useZeroXKey.handleDiscordOauth,
+    initOtp = _useZeroXKey.initOtp,
+    loginWithPasskey = _useZeroXKey.loginWithPasskey,
+    signUpWithPasskey = _useZeroXKey.signUpWithPasskey,
+    loginOrSignupWithWallet = _useZeroXKey.loginOrSignupWithWallet,
+    disconnectWalletAccount = _useZeroXKey.disconnectWalletAccount;
+  var _useModal = useModal(),
+    pushPage = _useModal.pushPage,
+    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", {
+      className: "flex flex-col items-center w-96 py-5",
+      children: jsx(Spinner, {
+        strokeWidth: 2,
+        className: "w-48 h-48"
+      })
+    });
+  }
+  var _ref2 = config.auth || {},
+    _ref2$methods = _ref2.methods,
+    methods = _ref2$methods === void 0 ? {} : _ref2$methods,
+    _ref2$methodOrder = _ref2.methodOrder,
+    methodOrder = _ref2$methodOrder === void 0 ? [] : _ref2$methodOrder,
+    _ref2$oauthOrder = _ref2.oauthOrder,
+    oauthOrder = _ref2$oauthOrder === void 0 ? [] : _ref2$oauthOrder;
+  var handleEmailSubmit = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(email) {
+      var _config$auth, _config$auth2, _yield$initOtp, otpId, otpEncryptionTargetBundle, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            _context.p = 0;
+            _context.n = 1;
+            return initOtp({
+              otpType: OtpType.Email,
+              contact: email
+            });
+          case 1:
+            _yield$initOtp = _context.v;
+            otpId = _yield$initOtp.otpId;
+            otpEncryptionTargetBundle = _yield$initOtp.otpEncryptionTargetBundle;
+            pushPage({
+              key: "Verify OTP",
+              content: jsx(OtpVerification, _objectSpread2({
+                contact: email,
+                otpId: otpId,
+                otpEncryptionTargetBundle: otpEncryptionTargetBundle,
+                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.n = 3;
+            break;
+          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, 2]]);
+    }));
+    return function handleEmailSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handlePhoneSubmit = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone, formattedPhone) {
+      var _config$auth3, _config$auth4, _yield$initOtp2, otpId, otpEncryptionTargetBundle, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            _context2.p = 0;
+            _context2.n = 1;
+            return initOtp({
+              otpType: OtpType.Sms,
+              contact: phone
+            });
+          case 1:
+            _yield$initOtp2 = _context2.v;
+            otpId = _yield$initOtp2.otpId;
+            otpEncryptionTargetBundle = _yield$initOtp2.otpEncryptionTargetBundle;
+            pushPage({
+              key: "Verify OTP",
+              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,
+                otpEncryptionTargetBundle: otpEncryptionTargetBundle,
+                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.n = 3;
+            break;
+          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, 2]]);
+    }));
+    return function handlePhoneSubmit(_x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var handlePasskeyLogin = function handlePasskeyLogin() {
+    pushPage({
+      key: "Passkey Login",
+      content: jsx(ActionPage, {
+        title: "Authenticating with passkey...",
+        action: function () {
+          var _action = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+            return _regenerator().w(function (_context3) {
+              while (1) switch (_context3.n) {
+                case 0:
+                  _context3.n = 1;
+                  return loginWithPasskey(_objectSpread2({}, sessionKey && {
+                    sessionKey: sessionKey
+                  }));
+                case 1:
+                  return _context3.a(2);
+              }
+            }, _callee3);
+          }));
+          function action() {
+            return _action.apply(this, arguments);
+          }
+          return action;
+        }(),
+        icon: jsx(FontAwesomeIcon, {
+          size: "3x",
+          icon: faFingerprint
+        })
+      }),
+      showTitle: false
+    });
+  };
+  var handlePasskeySignUp = function handlePasskeySignUp() {
+    pushPage({
+      key: "Passkey Sign Up",
+      content: jsx(ActionPage, {
+        title: "Creating account with passkey...",
+        action: function () {
+          var _action2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+            return _regenerator().w(function (_context4) {
+              while (1) switch (_context4.n) {
+                case 0:
+                  _context4.n = 1;
+                  return signUpWithPasskey(_objectSpread2({}, sessionKey && {
+                    sessionKey: sessionKey
+                  }));
+                case 1:
+                  return _context4.a(2);
+              }
+            }, _callee4);
+          }));
+          function action() {
+            return _action2.apply(this, arguments);
+          }
+          return action;
+        }(),
+        icon: jsx(FontAwesomeIcon, {
+          size: "3x",
+          icon: faFingerprint
+        })
+      }),
+      showTitle: false
+    });
+  };
+  var handleGoogle = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
+          case 0:
+            pushPage({
+              key: "Google OAuth",
+              content: jsx(ActionPage, {
+                title: "Authenticating with Google...",
+                action: function action() {
+                  return handleGoogleOauth({
+                    additionalState: _objectSpread2({
+                      openModal: "true"
+                    }, sessionKey && {
+                      sessionKey: sessionKey
+                    }) // Tell the provider to reopen the auth modal and show the loading state
+                  });
+                },
+                icon: jsx(FontAwesomeIcon, {
+                  size: "3x",
+                  icon: faGoogle
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context5.a(2);
+        }
+      }, _callee5);
+    }));
+    return function handleGoogle() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var handleApple = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
+          case 0:
+            pushPage({
+              key: "Apple OAuth",
+              content: jsx(ActionPage, {
+                title: "Authenticating with Apple...",
+                action: function action() {
+                  return handleAppleOauth({
+                    additionalState: _objectSpread2({
+                      openModal: "true"
+                    }, sessionKey && {
+                      sessionKey: sessionKey
+                    }) // Tell the provider to reopen the auth modal and show the loading state
+                  });
+                },
+                icon: jsx(FontAwesomeIcon, {
+                  size: "3x",
+                  icon: faApple
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context6.a(2);
+        }
+      }, _callee6);
+    }));
+    return function handleApple() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var handleFacebook = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.n) {
+          case 0:
+            pushPage({
+              key: "Facebook OAuth",
+              content: jsx(ActionPage, {
+                title: "Authenticating with Facebook...",
+                action: function action() {
+                  return handleFacebookOauth({
+                    additionalState: _objectSpread2({
+                      openModal: "true"
+                    }, sessionKey && {
+                      sessionKey: sessionKey
+                    }) // Tell the provider to reopen the auth modal and show the loading state
+                  });
+                },
+                icon: jsx(FontAwesomeIcon, {
+                  size: "3x",
+                  icon: faFacebook
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context7.a(2);
+        }
+      }, _callee7);
+    }));
+    return function handleFacebook() {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  var handleX = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.n) {
+          case 0:
+            pushPage({
+              key: "X OAuth",
+              content: jsx(ActionPage, {
+                title: "Authenticating with X...",
+                action: function action() {
+                  return handleXOauth({
+                    additionalState: _objectSpread2({
+                      openModal: "true"
+                    }, sessionKey && {
+                      sessionKey: sessionKey
+                    }) // Tell the provider to reopen the auth modal and show the loading state
+                  });
+                },
+                icon: jsx(FontAwesomeIcon, {
+                  size: "3x",
+                  icon: faXTwitter
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context8.a(2);
+        }
+      }, _callee8);
+    }));
+    return function handleX() {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var handleDiscord = /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.n) {
+          case 0:
+            pushPage({
+              key: "Discord OAuth",
+              content: jsx(ActionPage, {
+                title: "Authenticating with Discord...",
+                action: function action() {
+                  return handleDiscordOauth({
+                    additionalState: _objectSpread2({
+                      openModal: "true"
+                    }, sessionKey && {
+                      sessionKey: sessionKey
+                    }) // Tell the provider to reopen the auth modal and show the loading state
+                  });
+                },
+                icon: jsx(FontAwesomeIcon, {
+                  size: "3x",
+                  icon: faDiscord
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context9.a(2);
+        }
+      }, _callee9);
+    }));
+    return function handleDiscord() {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  var handleWalletLoginOrSignup = /*#__PURE__*/function () {
+    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__*/_regenerator().m(function _callee0() {
+                    return _regenerator().w(function (_context0) {
+                      while (1) switch (_context0.n) {
+                        case 0:
+                          _context0.n = 1;
+                          return loginOrSignupWithWallet(_objectSpread2({
+                            walletProvider: provider
+                          }, sessionKey && {
+                            sessionKey: sessionKey
+                          }));
+                        case 1:
+                          return _context0.a(2);
+                      }
+                    }, _callee0);
+                  }));
+                  function action() {
+                    return _action3.apply(this, arguments);
+                  }
+                  return action;
+                }(),
+                icon: jsx("img", {
+                  className: "size-11 rounded-full",
+                  src: provider.info.icon || ""
+                })
+              }),
+              showTitle: false
+            });
+          case 1:
+            return _context1.a(2);
+        }
+      }, _callee1);
+    }));
+    return function handleWalletLoginOrSignup(_x4) {
+      return _ref0.apply(this, arguments);
+    };
+  }();
+  var handleSelect = /*#__PURE__*/function () {
+    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.n = 1;
+              break;
+            }
+            // for WalletConnect we route to a dedicated screen
+            // to handle the connection process, as it requires a different flow (pairing via QR code or deep link)
+            pushPage({
+              key: "Connect WalletConnect",
+              content: jsx(WalletConnectScreen, {
+                provider: provider,
+                onAction: function () {
+                  var _onAction = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10(provider) {
+                    return _regenerator().w(function (_context10) {
+                      while (1) switch (_context10.n) {
+                        case 0:
+                          _context10.n = 1;
+                          return loginOrSignupWithWallet(_objectSpread2({
+                            walletProvider: provider
+                          }, sessionKey && {
+                            sessionKey: sessionKey
+                          }));
+                        case 1:
+                          return _context10.a(2);
+                      }
+                    }, _callee10);
+                  }));
+                  function onAction(_x6) {
+                    return _onAction.apply(this, arguments);
+                  }
+                  return onAction;
+                }(),
+                onDisconnect: function () {
+                  var _onDisconnect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11(provider) {
+                    return _regenerator().w(function (_context11) {
+                      while (1) switch (_context11.n) {
+                        case 0:
+                          _context11.n = 1;
+                          return disconnectWalletAccount(provider);
+                        case 1:
+                          return _context11.a(2);
+                      }
+                    }, _callee11);
+                  }));
+                  function onDisconnect(_x7) {
+                    return _onDisconnect.apply(this, arguments);
+                  }
+                  return onDisconnect;
+                }(),
+                successPageDuration: undefined
+              })
+            });
+            return _context12.a(2);
+          case 1:
+            _context12.n = 2;
+            return handleWalletLoginOrSignup(provider);
+          case 2:
+            return _context12.a(2);
+        }
+      }, _callee12);
+    }));
+    return function handleSelect(_x5) {
+      return _ref1.apply(this, arguments);
+    };
+  }();
+  var handleShowWalletSelector = /*#__PURE__*/function () {
+    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.p = 0;
+            pushPage({
+              key: "Select wallet provider",
+              content: jsx(ExternalWalletSelector, {
+                onSelect: handleSelect
+              })
+            });
+            _context13.n = 2;
+            break;
+          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, 1]]);
+    }));
+    return function handleShowWalletSelector() {
+      return _ref10.apply(this, arguments);
+    };
+  }();
+  var oauthButtonMap = {
+    google: methods.googleOauthEnabled ? jsx(OAuthButton, {
+      name: "Google",
+      iconOnly: true,
+      icon: jsx(FontAwesomeIcon, {
+        icon: faGoogle,
+        className: "text-lg text-[#4285F4] dark:text-white"
+      }),
+      onClick: handleGoogle
+    }, "google") : null,
+    apple: methods.appleOauthEnabled ? jsx(OAuthButton, {
+      name: "Apple",
+      iconOnly: true,
+      icon: jsx(FontAwesomeIcon, {
+        icon: faApple,
+        className: "text-lg text-neutral-900 dark:text-white"
+      }),
+      onClick: handleApple
+    }, "apple") : null,
+    facebook: methods.facebookOauthEnabled ? jsx(OAuthButton, {
+      name: "Facebook",
+      iconOnly: true,
+      icon: jsx(FontAwesomeIcon, {
+        icon: faFacebook,
+        className: "text-lg text-[#1877F2] dark:text-white"
+      }),
+      onClick: handleFacebook
+    }, "facebook") : null,
+    x: methods.xOauthEnabled ? jsx(OAuthButton, {
+      name: "X",
+      iconOnly: true,
+      icon: jsx(FontAwesomeIcon, {
+        icon: faXTwitter,
+        className: "text-lg text-neutral-900 dark:text-white"
+      }),
+      onClick: handleX
+    }, "x") : null,
+    discord: methods.discordOauthEnabled ? jsx(OAuthButton, {
+      name: "Discord",
+      iconOnly: true,
+      icon: jsx(FontAwesomeIcon, {
+        icon: faDiscord,
+        className: "text-lg text-[#5865F2] dark:text-white"
+      }),
+      onClick: handleDiscord
+    }, "discord") : null
+  };
+  var oauthButtonsList = oauthOrder.map(function (provider) {
+    return oauthButtonMap[provider];
+  }).filter(Boolean);
+  var oauthButtonRow = function oauthButtonRow(buttons) {
+    return jsx("div", {
+      className: "flex w-full flex-row flex-wrap items-center justify-center gap-2",
+      children: buttons
+    });
+  };
+  var oauthBlockInner = oauthButtonsList.length > 0 && oauthButtonsList.length <= 5 ? oauthButtonRow(oauthButtonsList) : oauthButtonsList.length > 0 ? oauthButtonRow([].concat(_toConsumableArray(oauthButtonsList.slice(0, 4)), [jsx(OAuthButton, {
+    name: "More",
+    iconOnly: true,
+    icon: jsx(FontAwesomeIcon, {
+      icon: faEllipsisH
+    }),
+    onClick: function onClick() {
+      return openSheet({
+        key: "Select a social method",
+        content: jsx("div", {
+          className: "flex h-full w-full flex-wrap items-center justify-center gap-2",
+          children: oauthButtonsList.map(function (button, i) {
+            return jsx("div", {
+              className: "shrink-0",
+              children: button
+            }, i);
+          })
+        })
+      });
+    }
+  }, "more")])) : null;
+  var oauthBlock = oauthBlockInner ? jsx("div", {
+    className: "flex w-full flex-col",
+    children: oauthBlockInner
+  }) : null;
+  // -- Individual Auth Method Components --
+  var methodComponents = {
+    socials: oauthBlock,
+    email: methods.emailOtpAuthEnabled ? jsx(EmailInput, {
+      onContinue: handleEmailSubmit
+    }) : null,
+    sms: methods.smsOtpAuthEnabled ? jsx(PhoneNumberInput, {
+      onContinue: handlePhoneSubmit
+    }) : null,
+    passkey: methods.passkeyAuthEnabled ? jsx(PasskeyButtons, {
+      onLogin: handlePasskeyLogin,
+      onSignUp: handlePasskeySignUp
+    }) : null,
+    wallet: methods.walletAuthEnabled ? jsx(WalletAuthButton, {
+      onContinue: handleShowWalletSelector
+    }) : null
+  };
+  // -- Final Rendering Order --
+  var rendered = methodOrder.map(function (key) {
+    return methodComponents[key];
+  }).filter(Boolean);
+  return jsxs("div", {
+    className: clsx("flex flex-col items-center", isMobile ? "w-full" : "w-[360px]"),
+    children: [config.authProxyConfigId ? rendered.length > 0 ? jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: clsx("mb-4 flex w-full flex-col items-center", logo ? "mt-3" : "mt-4"),
+        children: [logo ? jsx("img", {
+          src: logo,
+          alt: "",
+          className: "mt-3 h-fit max-h-16 w-fit max-w-32 object-contain ".concat(logoClassName !== null && logoClassName !== void 0 ? logoClassName : "")
+        }) : null, jsx("h1", {
+          className: clsx("text-center text-xl font-semibold leading-tight text-inherit", logo ? "mt-4" : "mt-0"),
+          children: title !== null && title !== void 0 ? title : "Welcome back"
+        }), jsx("p", {
+          className: "mt-1 text-center text-sm text-icon-text-light/60 dark:text-icon-text-dark/60",
+          children: "Log in or create your account"
+        })]
+      }), rendered.map(function (component, index) {
+        return jsxs("div", {
+          className: "w-full",
+          children: [index > 0 && jsx(OrSeparator, {}), component]
+        }, index);
+      })]
+    }) : jsx(DeveloperError, {
+      developerTitle: "No Auth Methods Enabled",
+      developerMessages: ["You are using ZeroXKey's Auth Proxy, but no auth methods are enabled.", "To use this modal, you must enable auth methods within the ZeroXKey dashboard.", "If you disabled autoFetchWalletKitConfig in the ZeroXKeyProvider, please ensure that you are passing in the correct auth methods in the ZeroXKeyProvider's auth config."],
+      userMessages: ["No authentication methods are available."]
+    }) : jsx(DeveloperError, {
+      developerTitle: "Proxy not Enabled",
+      developerMessages: ["You have not passed in authProxyConfigId into the ZeroXKeyProvider.", "To use this modal, you must be using ZeroXKey's Auth Proxy.", "Please enable it in the ZeroXKey dashboard and pass in the authProxyConfigId into the ZeroXKeyProvider."],
+      // Users should never see this message ever. We should give a reward for anyone who does see this.
+      userMessages: ["You touched fuzzy.... and got dizzy."]
+    }), jsx("div", {
+      className: "mt-5 max-w-sm px-1 text-center text-xs leading-relaxed text-icon-text-light/60 dark:text-icon-text-dark/60",
+      children: "Secured by 0xkey"
+    })]
+  });
+}
+
+export { AuthComponent };
+//# sourceMappingURL=index.mjs.map