@erikey/react 0.4.24 → 0.4.26

package/dist/ui/index.mjs

@@ -193,6 +193,18 @@ var UserRound = createLucideIcon("UserRound", [
   ["path", { d: "M20 21a8 8 0 0 0-16 0", key: "rfgkzh" }]
 ]);
 
+// ../../../node_modules/.pnpm/lucide-react@0.462.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/wallet.js
+var Wallet = createLucideIcon("Wallet", [
+  [
+    "path",
+    {
+      d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1",
+      key: "18etb6"
+    }
+  ],
+  ["path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4", key: "xoc0q4" }]
+]);
+
 // src/ui/components/auth/auth-callback.tsx
 import { useContext as useContext4, useEffect as useEffect5, useRef as useRef2 } from "react";
 
@@ -13726,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";
@@ -14712,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,
@@ -14737,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") {
@@ -14750,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 () => {
@@ -14764,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(
@@ -14779,7 +14993,7 @@ function AuthView({
           children: localization[view]
         }
       ),
-      description && /* @__PURE__ */ jsx36(
+      description && /* @__PURE__ */ jsx37(
         CardDescription,
         {
           className: cn(
@@ -14790,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,
@@ -14820,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,
@@ -14837,7 +15051,7 @@ function AuthView({
           "EMAIL_OTP"
         ].includes(view) || magicLink && ["SIGN_IN", "MAGIC_LINK"].includes(
           view
-        )) && /* @__PURE__ */ jsx36(
+        )) && /* @__PURE__ */ jsx37(
           EmailOTPButton,
           {
             classNames,
@@ -14847,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(
@@ -14856,7 +15070,7 @@ function AuthView({
               classNames?.continueWith
             ),
             children: [
-              /* @__PURE__ */ jsx36(
+              /* @__PURE__ */ jsx37(
                 Separator,
                 {
                   className: cn(
@@ -14865,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(
@@ -14878,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(
@@ -14894,7 +15108,7 @@ function AuthView({
                     (socialProvider2) => socialProvider2.provider === provider
                   );
                   if (!socialProvider) return null;
-                  return /* @__PURE__ */ jsx36(
+                  return /* @__PURE__ */ jsx37(
                     ProviderButton,
                     {
                       classNames,
@@ -14911,7 +15125,7 @@ function AuthView({
                   );
                 }),
                 genericOAuth?.providers?.map(
-                  (provider) => /* @__PURE__ */ jsx36(
+                  (provider) => /* @__PURE__ */ jsx37(
                     ProviderButton,
                     {
                       classNames,
@@ -14931,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",
@@ -14939,7 +15153,7 @@ function AuthView({
             "RECOVER_ACCOUNT",
             "TWO_FACTOR",
             "FORGOT_PASSWORD"
-          ].includes(view) && /* @__PURE__ */ jsx36(
+          ].includes(view) && /* @__PURE__ */ jsx37(
             PasskeyButton,
             {
               classNames,
@@ -14948,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(
@@ -14961,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(
@@ -14970,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",
@@ -14983,7 +15212,7 @@ function AuthView({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx36(
+          ) : /* @__PURE__ */ jsx37(
             Button,
             {
               variant: "link",
@@ -15003,17 +15232,17 @@ function AuthView({
 }
 
 // src/ui/components/auth-loading.tsx
-import { useContext as useContext29 } from "react";
+import { useContext as useContext30 } from "react";
 function AuthLoading({ children }) {
   const {
     hooks: { useSession }
-  } = useContext29(AuthUIContext);
+  } = useContext30(AuthUIContext);
   const { isPending } = useSession();
   return isPending ? children : null;
 }
 
 // src/ui/hooks/use-authenticate.ts
-import { useContext as useContext30, useEffect as useEffect23 } from "react";
+import { useContext as useContext31, useEffect as useEffect24 } from "react";
 function useAuthenticate(options) {
   const { authView = "SIGN_IN", enabled = true } = options ?? {};
   const {
@@ -15021,10 +15250,10 @@ function useAuthenticate(options) {
     basePath,
     viewPaths,
     replace
-  } = useContext30(AuthUIContext);
+  } = useContext31(AuthUIContext);
   const { data, isPending, error, refetch } = useSession();
   const sessionData = data;
-  useEffect23(() => {
+  useEffect24(() => {
     if (!enabled || isPending || sessionData) return;
     const searchParams = new URLSearchParams(window.location.search);
     const redirectTo = searchParams.get("redirectTo") || window.location.pathname + window.location.search;
@@ -15062,21 +15291,21 @@ function RedirectToSignUp() {
 }
 
 // src/ui/components/signed-in.tsx
-import { useContext as useContext31 } from "react";
+import { useContext as useContext32 } from "react";
 function SignedIn({ children }) {
   const {
     hooks: { useSession }
-  } = useContext31(AuthUIContext);
+  } = useContext32(AuthUIContext);
   const { data } = useSession();
   return data ? children : null;
 }
 
 // src/ui/components/signed-out.tsx
-import { useContext as useContext32 } from "react";
+import { useContext as useContext33 } from "react";
 function SignedOut({ children }) {
   const {
     hooks: { useSession }
-  } = useContext32(AuthUIContext);
+  } = useContext33(AuthUIContext);
   const { data, isPending } = useSession();
   return !data && !isPending ? children : null;
 }
@@ -15133,6 +15362,7 @@ export {
   UserAvatar,
   VKIcon,
   VercelIcon,
+  WalletButton,
   XIcon,
   ZoomIcon,
   accountViewPaths,
@@ -15164,6 +15394,7 @@ lucide-react/dist/esm/icons/qr-code.js:
 lucide-react/dist/esm/icons/send.js:
 lucide-react/dist/esm/icons/trash-2.js:
 lucide-react/dist/esm/icons/user-round.js:
+lucide-react/dist/esm/icons/wallet.js:
 lucide-react/dist/esm/lucide-react.js:
   (**
    * @license lucide-react v0.462.0 - ISC