@zerodev/wallet-react-ui 0.0.5 → 0.0.7

package/src/auth/authStoreSlice.ts

@@ -1,5 +1,5 @@
 import type { StateCreator } from 'zustand'
-import type { AuthConfig, AuthMethod, AuthStep } from './types'
+import type { AuthStep } from './types'
 
 const OTP_SESSION_STORAGE_KEY = 'zerodev:auth:otpSession'
 
@@ -47,7 +47,6 @@ export interface AuthStoreSlice {
     // State
     step: AuthStep | null
     stepHistory: AuthStep[]
-    enabledMethods: AuthMethod[]
     email: string | null
     setEmail: (email: string) => void
     otpId: string | null
@@ -63,10 +62,10 @@ export interface AuthStoreSlice {
     }) => void
     /** Clear the persisted OTP session after a successful verify. */
     clearOtpSession: () => void
-    config: AuthConfig | null
 
     // Actions
-    initialize: (config: AuthConfig) => void
+    /** Restore a persisted OTP session (survives reloads mid-email-flow). */
+    initialize: () => void
     goToStep: (step: AuthStep | null) => void
     goBack: () => void
     reset: () => void
@@ -83,24 +82,19 @@ export const createAuthStoreSlice: StateCreator<
     // Initial state
     step: null,
     stepHistory: [],
-    enabledMethods: [],
     email: null,
     otpId: null,
     otpEncryptionTargetBundle: null,
-    config: null,
 
     // Actions
-    initialize: (config: AuthConfig) => {
+    initialize: () => {
       const stored = readStoredOtpSession()
+      if (!stored) return
       set((state) => ({
         auth: {
           ...state.auth,
-          config,
-          enabledMethods: config.enabledMethods,
-          ...(stored && {
-            otpId: stored.otpId,
-            otpEncryptionTargetBundle: stored.otpEncryptionTargetBundle,
-          }),
+          otpId: stored.otpId,
+          otpEncryptionTargetBundle: stored.otpEncryptionTargetBundle,
         },
       }))
     },

package/src/auth/hooks/useAuth.ts

@@ -12,16 +12,11 @@ export function useAuth() {
     store,
     (state) => state.auth.otpEncryptionTargetBundle,
   )
-  const enabledMethods = useStore(store, (state) => state.auth.enabledMethods)
-  const authConfig = useStore(store, (state) => state.auth.config)
-
   return {
     step,
     email,
     otpId,
     otpEncryptionTargetBundle,
-    enabledMethods,
-    config: authConfig,
     goToStep: store.getState().auth.goToStep,
     goBack: stepHistory.length > 0 ? store.getState().auth.goBack : null,
     reset: store.getState().auth.reset,

package/src/auth/index.tsx

@@ -1,8 +1,6 @@
 import { Screen, TopNav } from '@zerodev/react-ui'
 import { type ReactNode, useEffect } from 'react'
-import { useStore } from 'zustand'
 import { StatusScreen } from '../shared/components/StatusScreen'
-import { useKitStore } from '../shared/hooks/useKitStore'
 import { useAuth } from './hooks/useAuth'
 import { EmailVerification } from './pages/EmailVerification'
 import { ErrorScreen } from './pages/ErrorScreen'
@@ -37,10 +35,13 @@ function PasskeyPrompt() {
   )
 }
 
-function renderStep(step: AuthStep | null): ReactNode {
+function renderStep(
+  step: AuthStep | null,
+  renderSignUp?: (() => ReactNode) | undefined,
+): ReactNode {
   switch (step) {
     case 'sign-up':
-      return <SignUp />
+      return renderSignUp ? renderSignUp() : <SignUp.Default />
     case 'email-verification':
       return <EmailVerification />
     case 'otp-input':
@@ -60,15 +61,23 @@ function renderStep(step: AuthStep | null): ReactNode {
   }
 }
 
-export function AuthFlow({
+export function ConnectWallet({
   onClose: userOnClose,
   size,
+  renderSignUp,
+  logo,
 }: {
   onClose?: (() => void) | undefined
   size?: 'sm' | 'md' | 'lg' | undefined
+  /** Replace the default sign-up page: compose `SignUp.*` units inside
+   * `<SignUp>`. Omit to render the canonical page (`SignUp.Default`). */
+  renderSignUp?: (() => ReactNode) | undefined
+  /** Optional brand logo for the top nav on the sign-up page. When omitted,
+   * no logo is shown. `PoweredBy` always shows the ZeroDev mark
+   * independently. */
+  logo?: ReactNode | undefined
 } = {}) {
   const { step, goToStep, goBack, reset } = useAuth()
-  const logo = useStore(useKitStore(), (s) => s.logo)
 
   useEffect(() => {
     if (step === null && hasMagicLinkCodeInUrl()) {
@@ -76,7 +85,7 @@ export function AuthFlow({
     }
   }, [step, goToStep])
 
-  const content = renderStep(step)
+  const content = renderStep(step, renderSignUp)
   if (!content) return null
 
   const handleClose = () => {
@@ -89,6 +98,9 @@ export function AuthFlow({
   return (
     <Screen
       {...(size && { size })}
+      // Sign-up shrinks to its content (few methods → shorter card) but never
+      // grows past the standard height; other steps keep the fixed size.
+      className={step === 'sign-up' ? 'zd:h-auto zd:max-h-202.5' : undefined}
       // Some elements in SignUp need to go from edge to edge.
       // No vertical padding; we set px-0 so we can fully control this padding.
       contentClassName={step === 'sign-up' ? 'zd:px-0' : undefined}

package/src/auth/pages/OtpInput.tsx

@@ -12,7 +12,6 @@ export function OtpInput() {
     setOtpSession,
     clearOtpSession,
     goToStep,
-    config,
   } = useAuth()
   const { mutateAsync: sendOtp, isPending: isSendOtpPending } = useSendOTP()
   const { mutateAsync: verifyOtp, isPending } = useVerifyOTP()
@@ -43,10 +42,8 @@ export function OtpInput() {
       })
       clearOtpSession()
       goToStep('authenticated')
-      config?.onSuccess?.()
-    } catch (err) {
+    } catch {
       setError(true)
-      config?.onError?.(err)
     }
   }
 

package/src/auth/pages/SignUp/Email.tsx

@@ -0,0 +1,86 @@
+import { Icon, Input } from '@zerodev/react-ui'
+import { useSendMagicLink, useSendOTP } from '@zerodev/wallet-react'
+import { useState } from 'react'
+import { isValidEmailAddress } from '../../../shared/utils/common'
+import { useAuth } from '../../hooks/useAuth'
+import { useReportPending, useSignUpContext } from './context'
+
+/** Email input row: sends an OTP or magic link depending on the root's
+ * `emailAuthMethod`, then advances to the matching verification step. */
+export function SignUpEmail() {
+  const { goToStep, setEmail, setOtpSession } = useAuth()
+  const {
+    authPending,
+    emailAuthMethod,
+    needsAgreement,
+    guardAgreement,
+    setError,
+  } = useSignUpContext()
+  const [emailInput, setEmailInput] = useState('')
+
+  const shouldUseOtp = emailAuthMethod === 'otp'
+  const { mutateAsync: sendOtp, isPending: isSendOtpPending } = useSendOTP()
+  const { mutateAsync: sendMagicLink, isPending: isSendMagicLinkPending } =
+    useSendMagicLink()
+  const isEmailLoading = isSendOtpPending || isSendMagicLinkPending
+  useReportPending(isEmailLoading)
+
+  const handleSubmit = async () => {
+    if (!emailInput || authPending) return
+    if (!isValidEmailAddress(emailInput)) return
+    if (!guardAgreement()) return
+
+    setError(null)
+    try {
+      const send = shouldUseOtp ? sendOtp : sendMagicLink
+      const { otpId, otpEncryptionTargetBundle } = await send({
+        email: emailInput,
+      })
+      setEmail(emailInput)
+      setOtpSession({ otpId, otpEncryptionTargetBundle })
+      goToStep(shouldUseOtp ? 'otp-input' : 'email-verification')
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to send verification code',
+      )
+    }
+  }
+
+  return (
+    <Input
+      iconName="email"
+      placeholder="Enter your email"
+      value={emailInput}
+      onChange={(e) => setEmailInput(e.target.value)}
+      type="email"
+      autoCapitalize="none"
+      autoComplete="email"
+      disabled={authPending}
+      variant="listItemStyle"
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && emailInput && !authPending) {
+          handleSubmit()
+        }
+      }}
+    >
+      {isEmailLoading ? (
+        <div className="zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center">
+          <div className="zd:w-5 zd:h-5 zd:border-2 zd:border-solarOrange zd:border-t-transparent zd:rounded-full zd:animate-spin" />
+        </div>
+      ) : (
+        <button
+          type="button"
+          disabled={!isValidEmailAddress(emailInput) || needsAgreement}
+          className={`zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${
+            isValidEmailAddress(emailInput) && !needsAgreement
+              ? 'zd:cursor-pointer'
+              : 'zd:cursor-not-allowed zd:opacity-50'
+          }`}
+          onClick={() => handleSubmit()}
+        >
+          <Icon name="chevronRight" className="zd:text-greyScale" />
+        </button>
+      )}
+    </Input>
+  )
+}

package/src/auth/pages/SignUp/Google.tsx

@@ -0,0 +1,43 @@
+import { ListItem, ListItemChevron, ListItemIcon } from '@zerodev/react-ui'
+import { useAuthenticateOAuth } from '@zerodev/wallet-react'
+import { useAuth } from '../../hooks/useAuth'
+import { isCancellationError } from '../../utils/isCancellationError'
+import { useReportPending, useSignUpContext } from './context'
+
+/** "Google" OAuth row. */
+export function SignUpGoogle() {
+  const { goToStep } = useAuth()
+  const { authPending, guardAgreement, setError } = useSignUpContext()
+
+  const { mutateAsync: authenticateOAuth, isPending } = useAuthenticateOAuth({
+    mutation: {
+      onSuccess: () => {
+        goToStep('authenticated')
+      },
+    },
+  })
+  useReportPending(isPending)
+
+  const handleClick = async () => {
+    if (authPending) return
+    if (!guardAgreement()) return
+    setError(null)
+    try {
+      await authenticateOAuth({ provider: 'google' })
+    } catch (err) {
+      if (!isCancellationError(err)) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    }
+  }
+
+  return (
+    <ListItem
+      icon={<ListItemIcon name="google" />}
+      title="Google"
+      trailing={<ListItemChevron />}
+      disabled={authPending}
+      onClick={handleClick}
+    />
+  )
+}

package/src/auth/pages/SignUp/Passkey.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@zerodev/react-ui'
+import { useLoginPasskey, useRegisterPasskey } from '@zerodev/wallet-react'
+import { useAuth } from '../../hooks/useAuth'
+import { isCancellationError } from '../../utils/isCancellationError'
+import { useReportPending, useSignUpContext } from './context'
+
+/** "Create a passkey" + "Log in with passkey" buttons. */
+export function SignUpPasskey() {
+  const { goToStep } = useAuth()
+  const { authPending, guardAgreement, setError } = useSignUpContext()
+
+  const mutation = {
+    onSuccess: () => {
+      goToStep('authenticated')
+    },
+    onError: (err: unknown) => {
+      if (!isCancellationError(err)) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    },
+  }
+  const { mutate: registerPasskey, isPending: isRegisterPending } =
+    useRegisterPasskey({ mutation })
+  const { mutate: loginPasskey, isPending: isLoginPending } = useLoginPasskey({
+    mutation,
+  })
+  useReportPending(isRegisterPending || isLoginPending)
+
+  const guarded = (run: () => void) => () => {
+    if (authPending) return
+    if (!guardAgreement()) return
+    setError(null)
+    run()
+  }
+
+  return (
+    <>
+      <Button
+        action="secondary"
+        text="Create a passkey"
+        iconName="key"
+        trailIcon
+        disabled={authPending}
+        onClick={guarded(() => registerPasskey())}
+      />
+      <Button
+        action="secondary"
+        text="Log in with passkey"
+        iconName="key"
+        trailIcon
+        disabled={authPending}
+        onClick={guarded(() => loginPasskey())}
+      />
+    </>
+  )
+}

package/src/auth/pages/SignUp/context.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useEffect } from 'react'
+import type { EmailAuthMethod } from '../../types'
+
+export type SignUpContextValue = {
+  /** True while any method's auth attempt is in flight — used to disable
+   * sibling methods so two flows can't run at once. */
+  authPending: boolean
+  setAuthPending: (pending: boolean) => void
+  /** Which email verification flow the Email unit runs. Set on the root
+   * (`<SignUp emailAuthMethod=…>`); already resolved to its default here. */
+  emailAuthMethod: EmailAuthMethod
+  /** True when the terms checkbox is required but unchecked. For passive
+   * disabled styling; use `guardAgreement` before starting an attempt. */
+  needsAgreement: boolean
+  /** Call before starting an auth attempt: highlights the terms checkbox and
+   * returns false when agreement is required but missing. */
+  guardAgreement: () => boolean
+  setError: (message: string | null) => void
+}
+
+export const SignUpContext = createContext<SignUpContextValue | null>(null)
+
+export function useSignUpContext(): SignUpContextValue {
+  const ctx = useContext(SignUpContext)
+  if (!ctx) {
+    throw new Error('SignUp.* components must be rendered inside <SignUp>')
+  }
+  return ctx
+}
+
+/** Mirror a method's in-flight state into the shared pending flag.
+ * Clears on unmount so a removed unit can't leave the page locked.
+ * One flag, not per-unit: methods are mutually exclusive, so at most one
+ * unit reports `true` at a time. */
+export function useReportPending(pending: boolean) {
+  const { setAuthPending } = useSignUpContext()
+  useEffect(() => {
+    setAuthPending(pending)
+    return () => setAuthPending(false)
+  }, [pending, setAuthPending])
+}

package/src/auth/pages/SignUp/index.tsx

@@ -0,0 +1,138 @@
+import { Button, Text } from '@zerodev/react-ui'
+import { type ReactNode, useState } from 'react'
+import { SignUpFooter } from '../../../shared/components/SignUpFooter'
+import { BlobAnimation } from '../../components/BlobAnimation'
+import type { EmailAuthMethod } from '../../types'
+import { SignUpContext } from './context'
+import { SignUpEmail } from './Email'
+import { SignUpGoogle } from './Google'
+import { SignUpPasskey } from './Passkey'
+
+type SignUpRootProps = {
+  children: ReactNode
+  /** Enable the consent gate: linked from the footer checkbox, and every
+   * method is blocked until the user agrees when either URL is set. */
+  termsAndConditionsUrl?: string | undefined
+  privacyPolicyUrl?: string | undefined
+  /** Which email verification flow the Email unit runs. */
+  emailAuthMethod?: EmailAuthMethod | undefined
+}
+
+function SignUpRoot({
+  children,
+  termsAndConditionsUrl,
+  privacyPolicyUrl,
+  emailAuthMethod = 'magicLink',
+}: SignUpRootProps) {
+  const [agreedToTerms, setAgreedToTerms] = useState(false)
+  const [highlightAgreement, setHighlightAgreement] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  // One flag for the whole page: methods are mutually exclusive, so at most
+  // one unit is in flight at a time. Known accepted edge: a unit unmounting
+  // mid-flight (conditional composition) clears a sibling's lock.
+  const [authPending, setAuthPending] = useState(false)
+
+  const requiresAgreement = !!(termsAndConditionsUrl || privacyPolicyUrl)
+  const needsAgreement = requiresAgreement && !agreedToTerms
+
+  const guardAgreement = () => {
+    if (!needsAgreement) return true
+    setHighlightAgreement(true)
+    return false
+  }
+
+  return (
+    <SignUpContext.Provider
+      value={{
+        authPending,
+        emailAuthMethod,
+        setAuthPending,
+        needsAgreement,
+        guardAgreement,
+        setError,
+      }}
+    >
+      {error !== null && (
+        <div className="zd:flex zd:items-center zd:justify-center zd:h-full">
+          <div className="zd:flex zd:flex-col zd:gap-4 zd:max-w-md">
+            <Text className="zd:text-h2 zd:text-center">Error occurred</Text>
+            <Text className="zd:text-center zd:text-red-500">{error}</Text>
+            <Button
+              action="primary"
+              text="Try again"
+              onClick={() => setError(null)}
+            />
+          </div>
+        </div>
+      )}
+      {/* Kept mounted (hidden) during the error takeover so unit state — the
+          typed email, pending flags — survives "Try again". */}
+      <div
+        className={`zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-hidden${
+          error !== null ? ' zd:hidden' : ''
+        }`}
+      >
+        <div className="zd:flex-1 zd:flex zd:flex-col zd:justify-center">
+          <div className="zd:px-4 zd:flex zd:flex-col zd:items-center">
+            <div className="zd:w-full zd:px-16 zd:py-4">
+              <BlobAnimation className="zd:w-full zd:pointer-events-none zd:select-none" />
+            </div>
+            <Text className="zd:text-h2 zd:text-center">
+              Continue to your wallet
+            </Text>
+            <Text className="zd:mt-2 zd:text-center zd:text-greyScale/50">
+              Choose a sign-in method to proceed
+            </Text>
+          </div>
+          <div className="zd:mt-6 zd:mb-4 zd:px-4 zd:flex zd:flex-col zd:gap-2">
+            {children}
+          </div>
+        </div>
+        <div className="zd:px-4">
+          <SignUpFooter
+            termsAndConditionsUrl={termsAndConditionsUrl}
+            privacyPolicyUrl={privacyPolicyUrl}
+            agreedToTerms={agreedToTerms}
+            setAgreedToTerms={(agreed) => {
+              setAgreedToTerms(agreed)
+              if (agreed) setHighlightAgreement(false)
+            }}
+            highlight={highlightAgreement}
+          />
+        </div>
+      </div>
+    </SignUpContext.Provider>
+  )
+}
+
+function SignUpDivider({ label = 'or' }: { label?: string }) {
+  return (
+    <div className="zd:-mx-4 zd:my-2 zd:flex zd:items-center zd:gap-3">
+      <div className="zd:h-px zd:flex-1 zd:bg-greyScale/30" />
+      <Text className="zd:text-body3">{label}</Text>
+      <div className="zd:h-px zd:flex-1 zd:bg-greyScale/30" />
+    </div>
+  )
+}
+
+/** The canonical sign-up page. Takes the root's own props (the consent-gate
+ * URLs) and forwards them — per-unit config (e.g. the email method) still
+ * means composing the units yourself. */
+function SignUpDefault(props: Omit<SignUpRootProps, 'children'>) {
+  return (
+    <SignUpRoot {...props}>
+      <SignUpPasskey />
+      <SignUpDivider />
+      <SignUpGoogle />
+      <SignUpEmail />
+    </SignUpRoot>
+  )
+}
+
+export const SignUp = Object.assign(SignUpRoot, {
+  Default: SignUpDefault,
+  Passkey: SignUpPasskey,
+  Google: SignUpGoogle,
+  Email: SignUpEmail,
+  Divider: SignUpDivider,
+})

package/src/auth/pages/Verifying.tsx

@@ -11,13 +11,8 @@ function getCodeFromUrl(): string | null {
 }
 
 export function Verifying() {
-  const {
-    otpId,
-    otpEncryptionTargetBundle,
-    goToStep,
-    clearOtpSession,
-    config,
-  } = useAuth()
+  const { otpId, otpEncryptionTargetBundle, goToStep, clearOtpSession } =
+    useAuth()
   const [code] = useState<string | null>(getCodeFromUrl)
   const [error, setError] = useState<Error | null>(null)
 
@@ -26,14 +21,12 @@ export function Verifying() {
   const { mutate: verifyMagicLink, isPending: isVerificationLoading } =
     useVerifyMagicLink({
       mutation: {
-        onSuccess: async () => {
+        onSuccess: () => {
           clearOtpSession()
           goToStep('authenticated')
-          config?.onSuccess?.()
         },
         onError: (err) => {
           setError(err)
-          config?.onError?.(err)
         },
       },
     })

package/src/auth/types.ts

@@ -12,12 +12,3 @@ export type AuthStep =
   | 'error'
 
 export type EmailAuthMethod = 'magicLink' | 'otp'
-
-export interface AuthConfig {
-  enabledMethods: AuthMethod[]
-  emailAuthMethod?: EmailAuthMethod
-  termsAndConditionsUrl?: string
-  privacyPolicyUrl?: string
-  onSuccess?: () => void
-  onError?: (error: unknown) => void
-}

package/src/auth/utils/isCancellationError.ts

@@ -0,0 +1,8 @@
+export function isCancellationError(err: unknown): boolean {
+  if (!(err instanceof Error)) return false
+  // WebAuthn / passkey
+  if (err.name === 'AbortError' || err.name === 'NotAllowedError') return true
+  // OAuth (existing logic, message-based)
+  const msg = err.message.toLowerCase()
+  return msg.includes('oauth popup was closed')
+}

package/src/connector.ts

@@ -7,8 +7,6 @@ import {
   zeroDevWallet as baseZeroDevWallet,
   NotAuthenticatedError,
 } from '@zerodev/wallet-react'
-import type { ReactNode } from 'react'
-import type { AuthConfig } from './auth/types'
 import { createStore } from './store.js'
 import type { Request, RequestMethod } from './types.js'
 
@@ -20,18 +18,9 @@ const DEFAULT_SIGNING_PROMPT_METHODS: RequestMethod[] = [
   'eth_signTypedData_v4',
 ]
 
-export type ZeroDevKitConfig = {
-  auth?: AuthConfig
-  /**
-   * Optional brand logo rendered in the auth flow's top nav. When omitted,
-   * no logo is shown. `PoweredBy` always shows the ZeroDev mark independently.
-   */
-  logo?: ReactNode
-}
-
-export type ZeroDevKitConnectorParams = ZeroDevWalletConnectorParams & {
-  config?: ZeroDevKitConfig
-}
+/** The kit connector takes exactly the base connector's param
+ We alias it to leave room for expansion */
+export type ZeroDevKitConnectorParams = ZeroDevWalletConnectorParams
 
 function requireUserConfirmation(
   store: ReturnType<typeof createStore>,
@@ -74,12 +63,7 @@ export function zeroDevWallet(
   params: ZeroDevKitConnectorParams,
 ): CreateConnectorFn {
   const baseFactory = baseZeroDevWallet(params)
-  const store = createStore({ logo: params.config?.logo })
-
-  // Initialize auth config if provided
-  if (params.config?.auth) {
-    store.getState().auth.initialize(params.config.auth)
-  }
+  const store = createStore()
 
   return (wagmiConfig) => {
     const connector = baseFactory(wagmiConfig)
@@ -101,7 +85,6 @@ export function zeroDevWallet(
         } catch (error) {
           if (
             connectParams?.isReconnecting ||
-            !params.config?.auth ||
             !(error instanceof NotAuthenticatedError)
           ) {
             throw error
@@ -119,24 +102,25 @@ export function zeroDevWallet(
 
       async disconnect() {
         await connector.disconnect?.()
-        if (params.config?.auth) {
-          store.getState().auth.reset()
-        }
+        store.getState().auth.reset()
       },
 
       async setup() {
         await connector.setup?.()
 
-        // Request-wrapping is only meaningful in the browser (it gates calls
-        // on UI confirmation). Skip during SSR — getProvider() touches
-        // `window` for EIP-6963 discovery and would crash on the server.
+        // Everything below is browser-only. Skip during SSR — getProvider()
+        // touches `window` for EIP-6963 discovery and would crash on the
+        // server, and the session restore reads localStorage.
         if (typeof window === 'undefined') return
 
+        // Restore a persisted OTP session so an email flow survives a reload.
+        store.getState().auth.initialize()
+
         // Signing is pinned to background mode: the prompt-mode confirmation UI
         // is not part of this package's public surface, so requests always pass
         // through without gating. The wrapping logic below is retained but
         // unreachable.
-        // const signing = params.config?.signing
+        // const signing = params.signing
         const signing = { mode: 'background' } as const
         if (signing.mode === 'background') return