@erikey/react 0.4.25 → 0.4.26

package/dist/ui/index.mjs

@@ -13738,7 +13738,7 @@ function AuthForm({
 }
 
 // src/ui/components/auth/auth-view.tsx
-import { useContext as useContext28, useEffect as useEffect22, useState as useState14 } from "react";
+import { useContext as useContext29, useEffect as useEffect23, useState as useState15 } from "react";
 
 // src/ui/components/provider-icons.tsx
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -14724,8 +14724,209 @@ function ProviderButton({
   );
 }
 
+// src/ui/components/auth/wallet-button.tsx
+import { useContext as useContext28, useState as useState14, useEffect as useEffect22, useCallback as useCallback8 } from "react";
+
+// src/ui/lib/wallet.ts
+function hasInjectedWallet() {
+  return typeof window !== "undefined" && !!window.ethereum;
+}
+async function connectWallet() {
+  if (!window.ethereum) {
+    throw new Error("No wallet found. Please install MetaMask or Phantom.");
+  }
+  const accounts = await window.ethereum.request({
+    method: "eth_requestAccounts"
+  });
+  if (!accounts || accounts.length === 0) {
+    throw new Error("No accounts found");
+  }
+  const chainIdHex = await window.ethereum.request({
+    method: "eth_chainId"
+  });
+  const address = toChecksumAddress(accounts[0]);
+  return {
+    address,
+    chainId: parseInt(chainIdHex, 16)
+  };
+}
+async function signMessage(message, address) {
+  if (!window.ethereum) {
+    throw new Error("No wallet found");
+  }
+  return window.ethereum.request({
+    method: "personal_sign",
+    params: [message, address]
+  });
+}
+function buildSiweMessage(opts) {
+  const issuedAt = opts.issuedAt || (/* @__PURE__ */ new Date()).toISOString();
+  return `${opts.domain} wants you to sign in with your Ethereum account:
+${opts.address}
+
+${opts.statement}
+
+URI: ${opts.uri}
+Version: ${opts.version}
+Chain ID: ${opts.chainId}
+Nonce: ${opts.nonce}
+Issued At: ${issuedAt}`;
+}
+function toChecksumAddress(address) {
+  const addr = address.toLowerCase().replace("0x", "");
+  if (address.match(/^0x[0-9a-fA-F]{40}$/)) {
+    if (address !== address.toLowerCase() && address !== address.toUpperCase()) {
+      return address;
+    }
+  }
+  return address;
+}
+
+// src/ui/components/auth/wallet-button.tsx
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+function WalletButton({
+  classNames,
+  isSubmitting,
+  localization,
+  redirectTo,
+  setIsSubmitting
+}) {
+  const {
+    authClient,
+    localization: contextLocalization,
+    toast,
+    localizeErrors
+  } = useContext28(AuthUIContext);
+  localization = { ...contextLocalization, ...localization };
+  const { onSuccess } = useOnSuccessTransition({ redirectTo });
+  const [mounted, setMounted] = useState14(false);
+  const [walletAddress, setWalletAddress] = useState14(null);
+  const [chainId, setChainId] = useState14(null);
+  useEffect22(() => {
+    setMounted(true);
+  }, []);
+  const handleWalletAuth = useCallback8(async () => {
+    setIsSubmitting?.(true);
+    try {
+      let address = walletAddress;
+      let chain = chainId;
+      if (!address || !chain) {
+        const connection = await connectWallet();
+        address = connection.address;
+        chain = connection.chainId;
+        setWalletAddress(address);
+        setChainId(chain);
+      }
+      const nonceResult = await authClient.siwe.nonce({
+        walletAddress: address,
+        chainId: chain
+      });
+      if (nonceResult.error) {
+        throw new Error(nonceResult.error.message || "Failed to get nonce");
+      }
+      const nonce = nonceResult.data?.nonce;
+      if (!nonce) {
+        throw new Error("No nonce received from server");
+      }
+      const message = buildSiweMessage({
+        domain: window.location.host,
+        address,
+        statement: "Sign in with Ethereum",
+        uri: window.location.origin,
+        version: "1",
+        chainId: chain,
+        nonce
+      });
+      const signature = await signMessage(message, address);
+      const verifyResult = await authClient.siwe.verify({
+        message,
+        signature,
+        walletAddress: address,
+        chainId: chain
+      });
+      if (verifyResult.error) {
+        throw new Error(verifyResult.error.message || "Verification failed");
+      }
+      onSuccess();
+    } catch (error) {
+      toast({
+        variant: "error",
+        message: getLocalizedError({
+          error,
+          localization,
+          localizeErrors
+        })
+      });
+      setIsSubmitting?.(false);
+    }
+  }, [
+    authClient,
+    walletAddress,
+    chainId,
+    localization,
+    localizeErrors,
+    onSuccess,
+    setIsSubmitting,
+    toast
+  ]);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxs23(
+      Button,
+      {
+        className: cn(
+          "w-full",
+          classNames?.form?.button,
+          classNames?.form?.secondaryButton
+        ),
+        disabled: true,
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx36(Wallet, { className: "h-4 w-4" }),
+          "Connect Wallet"
+        ]
+      }
+    );
+  }
+  if (!hasInjectedWallet()) {
+    return /* @__PURE__ */ jsxs23(
+      Button,
+      {
+        className: cn(
+          "w-full",
+          classNames?.form?.button,
+          classNames?.form?.secondaryButton
+        ),
+        disabled: true,
+        variant: "secondary",
+        title: "Install MetaMask or Phantom to use wallet sign-in",
+        children: [
+          /* @__PURE__ */ jsx36(Wallet, { className: "h-4 w-4" }),
+          "No Wallet Found"
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs23(
+    Button,
+    {
+      className: cn(
+        "w-full",
+        classNames?.form?.button,
+        classNames?.form?.secondaryButton
+      ),
+      disabled: isSubmitting,
+      variant: "secondary",
+      onClick: handleWalletAuth,
+      children: [
+        /* @__PURE__ */ jsx36(Wallet, { className: "h-4 w-4" }),
+        walletAddress ? `Sign in with ${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : "Sign in with Wallet"
+      ]
+    }
+  );
+}
+
 // src/ui/components/auth/auth-view.tsx
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function AuthView({
   className,
   classNames,
@@ -14749,12 +14950,13 @@ function AuthView({
     emailOTP,
     oneTap,
     passkey,
+    wallet,
     signUp,
     social,
     genericOAuth,
     viewPaths,
     Link
-  } = useContext28(AuthUIContext);
+  } = useContext29(AuthUIContext);
   localization = { ...contextLocalization, ...localization };
   let socialLayout = socialLayoutProp;
   if (socialLayout === "auto") {
@@ -14762,13 +14964,13 @@ function AuthView({
   }
   const path = pathProp ?? pathname?.split("/").pop();
   const view = viewProp || getViewByPath(viewPaths, path) || "SIGN_IN";
-  const [isSubmitting, setIsSubmitting] = useState14(false);
-  const [providerError, setProviderError] = useState14(null);
+  const [isSubmitting, setIsSubmitting] = useState15(false);
+  const [providerError, setProviderError] = useState15(null);
   const handleSetIsSubmitting = (value) => {
     if (value) setProviderError(null);
     setIsSubmitting(value);
   };
-  useEffect22(() => {
+  useEffect23(() => {
     const handlePageHide = () => setIsSubmitting(false);
     window.addEventListener("pagehide", handlePageHide);
     return () => {
@@ -14776,12 +14978,12 @@ function AuthView({
       window.removeEventListener("pagehide", handlePageHide);
     };
   }, []);
-  if (view === "CALLBACK") return /* @__PURE__ */ jsx36(AuthCallback, { redirectTo });
-  if (view === "SIGN_OUT") return /* @__PURE__ */ jsx36(SignOut, { redirectTo });
+  if (view === "CALLBACK") return /* @__PURE__ */ jsx37(AuthCallback, { redirectTo });
+  if (view === "SIGN_OUT") return /* @__PURE__ */ jsx37(SignOut, { redirectTo });
   const description = !credentials && !magicLink && !emailOTP ? localization.DISABLED_CREDENTIALS_DESCRIPTION : localization[`${view}_DESCRIPTION`];
-  return /* @__PURE__ */ jsxs23(Card, { className: cn("w-full max-w-sm", className, classNames?.base), children: [
-    /* @__PURE__ */ jsx36(CardHeader, { className: classNames?.header, children: cardHeader ? cardHeader : /* @__PURE__ */ jsxs23(Fragment10, { children: [
-      /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs24(Card, { className: cn("w-full max-w-sm", className, classNames?.base), children: [
+    /* @__PURE__ */ jsx37(CardHeader, { className: classNames?.header, children: cardHeader ? cardHeader : /* @__PURE__ */ jsxs24(Fragment10, { children: [
+      /* @__PURE__ */ jsx37(
         CardTitle,
         {
           className: cn(
@@ -14791,7 +14993,7 @@ function AuthView({
           children: localization[view]
         }
       ),
-      description && /* @__PURE__ */ jsx36(
+      description && /* @__PURE__ */ jsx37(
         CardDescription,
         {
           className: cn(
@@ -14802,18 +15004,18 @@ function AuthView({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs23(CardContent, { className: cn("grid gap-6", classNames?.content), children: [
+    /* @__PURE__ */ jsxs24(CardContent, { className: cn("grid gap-6", classNames?.content), children: [
       oneTap && ["SIGN_IN", "SIGN_UP", "MAGIC_LINK", "EMAIL_OTP"].includes(
         view
-      ) && /* @__PURE__ */ jsx36(
+      ) && /* @__PURE__ */ jsx37(
         OneTap,
         {
           localization,
           redirectTo
         }
       ),
-      (credentials || magicLink || emailOTP) && /* @__PURE__ */ jsxs23("div", { className: "grid gap-4", children: [
-        /* @__PURE__ */ jsx36(
+      (credentials || magicLink || emailOTP) && /* @__PURE__ */ jsxs24("div", { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsx37(
           AuthForm,
           {
             classNames: classNames?.form,
@@ -14832,7 +15034,7 @@ function AuthView({
           "SIGN_IN",
           "MAGIC_LINK",
           "EMAIL_OTP"
-        ].includes(view) || emailOTP && view === "EMAIL_OTP") && /* @__PURE__ */ jsx36(
+        ].includes(view) || emailOTP && view === "EMAIL_OTP") && /* @__PURE__ */ jsx37(
           MagicLinkButton,
           {
             classNames,
@@ -14849,7 +15051,7 @@ function AuthView({
           "EMAIL_OTP"
         ].includes(view) || magicLink && ["SIGN_IN", "MAGIC_LINK"].includes(
           view
-        )) && /* @__PURE__ */ jsx36(
+        )) && /* @__PURE__ */ jsx37(
           EmailOTPButton,
           {
             classNames,
@@ -14859,8 +15061,8 @@ function AuthView({
           }
         )
       ] }),
-      view !== "RESET_PASSWORD" && view !== "EMAIL_VERIFICATION" && (social?.providers?.length || genericOAuth?.providers?.length || view === "SIGN_IN" && passkey) && /* @__PURE__ */ jsxs23(Fragment10, { children: [
-        (credentials || magicLink || emailOTP) && /* @__PURE__ */ jsxs23(
+      view !== "RESET_PASSWORD" && view !== "EMAIL_VERIFICATION" && (social?.providers?.length || genericOAuth?.providers?.length || view === "SIGN_IN" && passkey) && /* @__PURE__ */ jsxs24(Fragment10, { children: [
+        (credentials || magicLink || emailOTP) && /* @__PURE__ */ jsxs24(
           "div",
           {
             className: cn(
@@ -14868,7 +15070,7 @@ function AuthView({
               classNames?.continueWith
             ),
             children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 Separator,
                 {
                   className: cn(
@@ -14877,8 +15079,8 @@ function AuthView({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx36("span", { className: "flex-shrink-0 text-muted-foreground text-sm", children: localization.OR_CONTINUE_WITH }),
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37("span", { className: "flex-shrink-0 text-muted-foreground text-sm", children: localization.OR_CONTINUE_WITH }),
+              /* @__PURE__ */ jsx37(
                 Separator,
                 {
                   className: cn(
@@ -14890,8 +15092,8 @@ function AuthView({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { className: "grid gap-4", children: [
-          (social?.providers?.length || genericOAuth?.providers?.length) && /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24("div", { className: "grid gap-4", children: [
+          (social?.providers?.length || genericOAuth?.providers?.length) && /* @__PURE__ */ jsxs24(
             "div",
             {
               className: cn(
@@ -14906,7 +15108,7 @@ function AuthView({
                     (socialProvider2) => socialProvider2.provider === provider
                   );
                   if (!socialProvider) return null;
-                  return /* @__PURE__ */ jsx36(
+                  return /* @__PURE__ */ jsx37(
                     ProviderButton,
                     {
                       classNames,
@@ -14923,7 +15125,7 @@ function AuthView({
                   );
                 }),
                 genericOAuth?.providers?.map(
-                  (provider) => /* @__PURE__ */ jsx36(
+                  (provider) => /* @__PURE__ */ jsx37(
                     ProviderButton,
                     {
                       classNames,
@@ -14943,7 +15145,7 @@ function AuthView({
               ]
             }
           ),
-          providerError && /* @__PURE__ */ jsx36("div", { className: "rounded-md bg-destructive/10 p-3 text-sm text-destructive", children: providerError }),
+          providerError && /* @__PURE__ */ jsx37("div", { className: "rounded-md bg-destructive/10 p-3 text-sm text-destructive", children: providerError }),
           passkey && [
             "SIGN_IN",
             "MAGIC_LINK",
@@ -14951,7 +15153,7 @@ function AuthView({
             "RECOVER_ACCOUNT",
             "TWO_FACTOR",
             "FORGOT_PASSWORD"
-          ].includes(view) && /* @__PURE__ */ jsx36(
+          ].includes(view) && /* @__PURE__ */ jsx37(
             PasskeyButton,
             {
               classNames,
@@ -14960,12 +15162,27 @@ function AuthView({
               redirectTo,
               setIsSubmitting: handleSetIsSubmitting
             }
+          ),
+          wallet && [
+            "SIGN_IN",
+            "SIGN_UP",
+            "MAGIC_LINK",
+            "EMAIL_OTP"
+          ].includes(view) && /* @__PURE__ */ jsx37(
+            WalletButton,
+            {
+              classNames,
+              isSubmitting,
+              localization,
+              redirectTo,
+              setIsSubmitting: handleSetIsSubmitting
+            }
           )
         ] })
       ] })
     ] }),
-    cardFooter && /* @__PURE__ */ jsx36(CardFooter, { className: classNames?.footer, children: cardFooter }),
-    credentials && signUp && /* @__PURE__ */ jsxs23(
+    cardFooter && /* @__PURE__ */ jsx37(CardFooter, { className: classNames?.footer, children: cardFooter }),
+    credentials && signUp && /* @__PURE__ */ jsxs24(
       CardFooter,
       {
         className: cn(
@@ -14973,8 +15190,8 @@ function AuthView({
           classNames?.footer
         ),
         children: [
-          view === "SIGN_IN" || view === "MAGIC_LINK" || view === "EMAIL_OTP" ? localization.DONT_HAVE_AN_ACCOUNT : view === "SIGN_UP" ? localization.ALREADY_HAVE_AN_ACCOUNT : /* @__PURE__ */ jsx36(ArrowLeft, { className: "size-3" }),
-          view === "SIGN_IN" || view === "MAGIC_LINK" || view === "EMAIL_OTP" || view === "SIGN_UP" ? /* @__PURE__ */ jsx36(
+          view === "SIGN_IN" || view === "MAGIC_LINK" || view === "EMAIL_OTP" ? localization.DONT_HAVE_AN_ACCOUNT : view === "SIGN_UP" ? localization.ALREADY_HAVE_AN_ACCOUNT : /* @__PURE__ */ jsx37(ArrowLeft, { className: "size-3" }),
+          view === "SIGN_IN" || view === "MAGIC_LINK" || view === "EMAIL_OTP" || view === "SIGN_UP" ? /* @__PURE__ */ jsx37(
             Link,
             {
               className: cn(
@@ -14982,7 +15199,7 @@ function AuthView({
                 classNames?.footerLink
               ),
               href: `${basePath}/${viewPaths[view === "SIGN_IN" || view === "MAGIC_LINK" || view === "EMAIL_OTP" ? "SIGN_UP" : "SIGN_IN"]}${isHydrated ? window.location.search : ""}`,
-              children: /* @__PURE__ */ jsx36(
+              children: /* @__PURE__ */ jsx37(
                 Button,
                 {
                   variant: "link",
@@ -14995,7 +15212,7 @@ function AuthView({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx36(
+          ) : /* @__PURE__ */ jsx37(
             Button,
             {
               variant: "link",
@@ -15014,207 +15231,6 @@ function AuthView({
   ] });
 }
 
-// src/ui/components/auth/wallet-button.tsx
-import { useContext as useContext29, useState as useState15, useEffect as useEffect23, useCallback as useCallback8 } from "react";
-
-// src/ui/lib/wallet.ts
-function hasInjectedWallet() {
-  return typeof window !== "undefined" && !!window.ethereum;
-}
-async function connectWallet() {
-  if (!window.ethereum) {
-    throw new Error("No wallet found. Please install MetaMask or Phantom.");
-  }
-  const accounts = await window.ethereum.request({
-    method: "eth_requestAccounts"
-  });
-  if (!accounts || accounts.length === 0) {
-    throw new Error("No accounts found");
-  }
-  const chainIdHex = await window.ethereum.request({
-    method: "eth_chainId"
-  });
-  const address = toChecksumAddress(accounts[0]);
-  return {
-    address,
-    chainId: parseInt(chainIdHex, 16)
-  };
-}
-async function signMessage(message, address) {
-  if (!window.ethereum) {
-    throw new Error("No wallet found");
-  }
-  return window.ethereum.request({
-    method: "personal_sign",
-    params: [message, address]
-  });
-}
-function buildSiweMessage(opts) {
-  const issuedAt = opts.issuedAt || (/* @__PURE__ */ new Date()).toISOString();
-  return `${opts.domain} wants you to sign in with your Ethereum account:
-${opts.address}
-
-${opts.statement}
-
-URI: ${opts.uri}
-Version: ${opts.version}
-Chain ID: ${opts.chainId}
-Nonce: ${opts.nonce}
-Issued At: ${issuedAt}`;
-}
-function toChecksumAddress(address) {
-  const addr = address.toLowerCase().replace("0x", "");
-  if (address.match(/^0x[0-9a-fA-F]{40}$/)) {
-    if (address !== address.toLowerCase() && address !== address.toUpperCase()) {
-      return address;
-    }
-  }
-  return address;
-}
-
-// src/ui/components/auth/wallet-button.tsx
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
-function WalletButton({
-  classNames,
-  isSubmitting,
-  localization,
-  redirectTo,
-  setIsSubmitting
-}) {
-  const {
-    authClient,
-    localization: contextLocalization,
-    toast,
-    localizeErrors
-  } = useContext29(AuthUIContext);
-  localization = { ...contextLocalization, ...localization };
-  const { onSuccess } = useOnSuccessTransition({ redirectTo });
-  const [mounted, setMounted] = useState15(false);
-  const [walletAddress, setWalletAddress] = useState15(null);
-  const [chainId, setChainId] = useState15(null);
-  useEffect23(() => {
-    setMounted(true);
-  }, []);
-  const handleWalletAuth = useCallback8(async () => {
-    setIsSubmitting?.(true);
-    try {
-      let address = walletAddress;
-      let chain = chainId;
-      if (!address || !chain) {
-        const connection = await connectWallet();
-        address = connection.address;
-        chain = connection.chainId;
-        setWalletAddress(address);
-        setChainId(chain);
-      }
-      const nonceResult = await authClient.siwe.nonce({
-        walletAddress: address,
-        chainId: chain
-      });
-      if (nonceResult.error) {
-        throw new Error(nonceResult.error.message || "Failed to get nonce");
-      }
-      const nonce = nonceResult.data?.nonce;
-      if (!nonce) {
-        throw new Error("No nonce received from server");
-      }
-      const message = buildSiweMessage({
-        domain: window.location.host,
-        address,
-        statement: "Sign in with Ethereum",
-        uri: window.location.origin,
-        version: "1",
-        chainId: chain,
-        nonce
-      });
-      const signature = await signMessage(message, address);
-      const verifyResult = await authClient.siwe.verify({
-        message,
-        signature,
-        walletAddress: address,
-        chainId: chain
-      });
-      if (verifyResult.error) {
-        throw new Error(verifyResult.error.message || "Verification failed");
-      }
-      onSuccess();
-    } catch (error) {
-      toast({
-        variant: "error",
-        message: getLocalizedError({
-          error,
-          localization,
-          localizeErrors
-        })
-      });
-      setIsSubmitting?.(false);
-    }
-  }, [
-    authClient,
-    walletAddress,
-    chainId,
-    localization,
-    localizeErrors,
-    onSuccess,
-    setIsSubmitting,
-    toast
-  ]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsxs24(
-      Button,
-      {
-        className: cn(
-          "w-full",
-          classNames?.form?.button,
-          classNames?.form?.secondaryButton
-        ),
-        disabled: true,
-        variant: "secondary",
-        children: [
-          /* @__PURE__ */ jsx37(Wallet, { className: "h-4 w-4" }),
-          "Connect Wallet"
-        ]
-      }
-    );
-  }
-  if (!hasInjectedWallet()) {
-    return /* @__PURE__ */ jsxs24(
-      Button,
-      {
-        className: cn(
-          "w-full",
-          classNames?.form?.button,
-          classNames?.form?.secondaryButton
-        ),
-        disabled: true,
-        variant: "secondary",
-        title: "Install MetaMask or Phantom to use wallet sign-in",
-        children: [
-          /* @__PURE__ */ jsx37(Wallet, { className: "h-4 w-4" }),
-          "No Wallet Found"
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs24(
-    Button,
-    {
-      className: cn(
-        "w-full",
-        classNames?.form?.button,
-        classNames?.form?.secondaryButton
-      ),
-      disabled: isSubmitting,
-      variant: "secondary",
-      onClick: handleWalletAuth,
-      children: [
-        /* @__PURE__ */ jsx37(Wallet, { className: "h-4 w-4" }),
-        walletAddress ? `Sign in with ${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : "Sign in with Wallet"
-      ]
-    }
-  );
-}
-
 // src/ui/components/auth-loading.tsx
 import { useContext as useContext30 } from "react";
 function AuthLoading({ children }) {