@erikey/react 0.4.23 → 0.4.25

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 useState15 } from "react";
+import { useContext as useContext28, useEffect as useEffect22, useState as useState14 } from "react";
 
 // src/ui/components/provider-icons.tsx
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -14601,7 +14613,7 @@ function PasskeyButton({
 }
 
 // src/ui/components/auth/provider-button.tsx
-import { useCallback as useCallback7, useContext as useContext27, useState as useState14 } from "react";
+import { useCallback as useCallback7, useContext as useContext27 } from "react";
 import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function ProviderButton({
   className,
@@ -14609,6 +14621,7 @@ function ProviderButton({
   callbackURL: callbackURLProp,
   isSubmitting,
   localization,
+  onError,
   other,
   provider,
   redirectTo: redirectToProp,
@@ -14627,7 +14640,6 @@ function ProviderButton({
     toast,
     localizeErrors
   } = useContext27(AuthUIContext);
-  const [error, setError] = useState14(null);
   const getRedirectTo = useCallback7(
     () => redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
     [redirectToProp, contextRedirectTo]
@@ -14675,13 +14687,13 @@ function ProviderButton({
           await authClient.signIn.social(socialParams);
         }
       }
-    } catch (error2) {
+    } catch (error) {
       const errorMessage = getLocalizedError({
-        error: error2,
+        error,
         localization,
         localizeErrors
       });
-      setError(errorMessage);
+      onError?.(errorMessage);
       toast({
         variant: "error",
         message: errorMessage
@@ -14689,33 +14701,27 @@ function ProviderButton({
       setIsSubmitting(false);
     }
   };
-  const handleClick = () => {
-    setError(null);
-    doSignInSocial();
-  };
-  return /* @__PURE__ */ jsxs22("div", { className: cn(socialLayout === "vertical" ? "w-full" : "grow", "flex flex-col gap-2"), children: [
-    /* @__PURE__ */ jsxs22(
-      Button,
-      {
-        className: cn(
-          "w-full",
-          className,
-          classNames?.form?.button,
-          classNames?.form?.outlineButton,
-          classNames?.form?.providerButton
-        ),
-        disabled: isSubmitting,
-        variant: "outline",
-        onClick: handleClick,
-        children: [
-          provider.icon && /* @__PURE__ */ jsx35(provider.icon, { className: classNames?.form?.icon }),
-          socialLayout === "grid" && provider.name,
-          socialLayout === "vertical" && `${localization.SIGN_IN_WITH} ${provider.name}`
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx35("div", { className: "rounded-md bg-destructive/10 p-2 text-xs text-destructive", children: error })
-  ] });
+  return /* @__PURE__ */ jsxs22(
+    Button,
+    {
+      className: cn(
+        socialLayout === "vertical" && "w-full",
+        socialLayout === "horizontal" && "flex-1 min-w-0",
+        className,
+        classNames?.form?.button,
+        classNames?.form?.outlineButton,
+        classNames?.form?.providerButton
+      ),
+      disabled: isSubmitting,
+      variant: "outline",
+      onClick: doSignInSocial,
+      children: [
+        provider.icon && /* @__PURE__ */ jsx35(provider.icon, { className: classNames?.form?.icon }),
+        socialLayout === "grid" && provider.name,
+        socialLayout === "vertical" && `${localization.SIGN_IN_WITH} ${provider.name}`
+      ]
+    }
+  );
 }
 
 // src/ui/components/auth/auth-view.tsx
@@ -14756,7 +14762,12 @@ function AuthView({
   }
   const path = pathProp ?? pathname?.split("/").pop();
   const view = viewProp || getViewByPath(viewPaths, path) || "SIGN_IN";
-  const [isSubmitting, setIsSubmitting] = useState15(false);
+  const [isSubmitting, setIsSubmitting] = useState14(false);
+  const [providerError, setProviderError] = useState14(null);
+  const handleSetIsSubmitting = (value) => {
+    if (value) setProviderError(null);
+    setIsSubmitting(value);
+  };
   useEffect22(() => {
     const handlePageHide = () => setIsSubmitting(false);
     window.addEventListener("pagehide", handlePageHide);
@@ -14812,7 +14823,7 @@ function AuthView({
             otpSeparators,
             view,
             redirectTo,
-            setIsSubmitting
+            setIsSubmitting: handleSetIsSubmitting
           }
         ),
         magicLink && (credentials && [
@@ -14902,9 +14913,10 @@ function AuthView({
                       callbackURL,
                       isSubmitting,
                       localization,
+                      onError: setProviderError,
                       provider: socialProvider,
                       redirectTo,
-                      setIsSubmitting,
+                      setIsSubmitting: handleSetIsSubmitting,
                       socialLayout
                     },
                     provider
@@ -14918,9 +14930,10 @@ function AuthView({
                       callbackURL,
                       isSubmitting,
                       localization,
+                      onError: setProviderError,
                       provider,
                       redirectTo,
-                      setIsSubmitting,
+                      setIsSubmitting: handleSetIsSubmitting,
                       socialLayout,
                       other: true
                     },
@@ -14930,6 +14943,7 @@ function AuthView({
               ]
             }
           ),
+          providerError && /* @__PURE__ */ jsx36("div", { className: "rounded-md bg-destructive/10 p-3 text-sm text-destructive", children: providerError }),
           passkey && [
             "SIGN_IN",
             "MAGIC_LINK",
@@ -14944,7 +14958,7 @@ function AuthView({
               isSubmitting,
               localization,
               redirectTo,
-              setIsSubmitting
+              setIsSubmitting: handleSetIsSubmitting
             }
           )
         ] })
@@ -15000,18 +15014,219 @@ 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 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 {
@@ -15019,10 +15234,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;
@@ -15060,21 +15275,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;
 }
@@ -15131,6 +15346,7 @@ export {
   UserAvatar,
   VKIcon,
   VercelIcon,
+  WalletButton,
   XIcon,
   ZoomIcon,
   accountViewPaths,
@@ -15162,6 +15378,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