@zerodev/wallet-react-ui 0.0.1

package/src/auth/components/BlobAnimation/index.tsx

@@ -0,0 +1,24 @@
+// ?no-inline forces Vite to emit blob.webm as a separate file (dist/blob.webm)
+// instead of base64-inlining ~700KB into the JS bundle. Requires base:'./' in
+// vite.config.ts so the emitted URL is package-relative, not root-absolute.
+import blobWebm from '../../assets/blob.webm?no-inline'
+
+// VP9-alpha WebM. Renders the animated blob on browsers that support WebM with
+// an alpha channel (Chrome, Firefox, Edge). Safari plays the WebM container but
+// not VP9 alpha, so the blob is simply not shown there — an acceptable
+// degradation for a decorative element.
+export function BlobAnimation({ className }: { className?: string }) {
+  return (
+    <video
+      className={className}
+      style={{ aspectRatio: '1 / 1' }}
+      src={blobWebm}
+      autoPlay
+      loop
+      muted
+      playsInline
+      aria-hidden="true"
+      tabIndex={-1}
+    />
+  )
+}

package/src/auth/components/CodeInput/index.tsx

@@ -0,0 +1,118 @@
+import { cn, Text, Wrapper } from '@zerodev/react-ui'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+const MIN_LENGTH = 4
+const MAX_LENGTH = 8
+const DEFAULT_LENGTH = 6
+
+function clampLength(length: number): number {
+  return Math.max(MIN_LENGTH, Math.min(MAX_LENGTH, length))
+}
+
+interface CharBoxProps {
+  char: string
+  isFocused: boolean
+}
+
+function CharBox({ char, isFocused }: CharBoxProps) {
+  return (
+    <Wrapper
+      data-testid="code-input-box"
+      data-active={isFocused || undefined}
+      className={cn(
+        'zd:h-16 zd:w-14 zd:rounded-lg zd:flex zd:items-center zd:justify-center',
+        isFocused && 'zd:border-[1.5px] zd:border-greyScale',
+      )}
+    >
+      <Text className="zd:text-h2">{char}</Text>
+    </Wrapper>
+  )
+}
+
+export interface CodeInputProps {
+  onChange?: (code: string) => void
+  onComplete?: (code: string) => void
+  disabled?: boolean
+  error?: boolean
+  autoFocus?: boolean
+  length?: number
+  'data-testid'?: string
+}
+
+export function CodeInput({
+  onChange,
+  onComplete,
+  disabled = false,
+  error = false,
+  autoFocus = false,
+  length = DEFAULT_LENGTH,
+  'data-testid': testId,
+}: CodeInputProps) {
+  const codeLength = clampLength(length)
+  const charBoxes = useMemo(
+    () =>
+      Array.from({ length: codeLength }, (_, i) => ({
+        id: `char-${i}`,
+        index: i,
+      })),
+    [codeLength],
+  )
+
+  const [code, setCode] = useState('')
+  const [isFocused, setIsFocused] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (autoFocus && !disabled) {
+      inputRef.current?.focus()
+    }
+  }, [autoFocus, disabled])
+
+  useEffect(() => {
+    setCode((prev) => prev.slice(0, codeLength))
+  }, [codeLength])
+
+  const handleChange = (text: string) => {
+    const sanitized = text.slice(0, codeLength).toUpperCase()
+    setCode(sanitized)
+    onChange?.(sanitized)
+
+    if (sanitized.length === codeLength) {
+      // Makes sure onComplete is run on the next render cycle after the last char is rendered
+      setTimeout(() => {
+        onComplete?.(sanitized)
+        inputRef.current?.blur()
+      }, 0)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      className="zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2 zd:w-full zd:cursor-text"
+      onClick={() => inputRef.current?.focus()}
+      disabled={disabled}
+      data-testid={testId}
+    >
+      <input
+        ref={inputRef}
+        value={code}
+        onChange={(e) => handleChange(e.target.value)}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        maxLength={codeLength}
+        disabled={disabled}
+        className="zd:absolute zd:opacity-0 zd:pointer-events-none"
+        style={{ position: 'absolute', opacity: 0 }}
+        aria-label="Verification code"
+      />
+      {charBoxes.map((box) => (
+        <CharBox
+          key={box.id}
+          char={code[box.index] ?? ''}
+          isFocused={!error && isFocused && box.index === code.length}
+        />
+      ))}
+    </button>
+  )
+}

package/src/auth/hooks/useAuth.ts

@@ -0,0 +1,32 @@
+import { useStore } from 'zustand'
+import { useKitStore } from '../../shared/hooks/useKitStore'
+
+export function useAuth() {
+  const store = useKitStore()
+
+  const step = useStore(store, (state) => state.auth.step)
+  const stepHistory = useStore(store, (state) => state.auth.stepHistory)
+  const email = useStore(store, (state) => state.auth.email)
+  const otpId = useStore(store, (state) => state.auth.otpId)
+  const otpEncryptionTargetBundle = useStore(
+    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,
+    setEmail: store.getState().auth.setEmail,
+    setOtpSession: store.getState().auth.setOtpSession,
+    clearOtpSession: store.getState().auth.clearOtpSession,
+  }
+}

package/src/auth/index.tsx

@@ -0,0 +1,108 @@
+import { type ReactNode, useEffect } from 'react'
+import { useStore } from 'zustand'
+import { Screen } from '../shared/components/Screen'
+import { StatusScreen } from '../shared/components/StatusScreen'
+import { TopNav } from '../shared/components/TopNav'
+import { useKitStore } from '../shared/hooks/useKitStore'
+import { useAuth } from './hooks/useAuth'
+import { EmailVerification } from './pages/EmailVerification'
+import { ErrorScreen } from './pages/ErrorScreen'
+import { OtpInput } from './pages/OtpInput'
+import { SignUp } from './pages/SignUp'
+import { Verifying } from './pages/Verifying'
+import { WalletSelection } from './pages/WalletSelection'
+import type { AuthStep } from './types'
+import { hasMagicLinkCodeInUrl, stripMagicLinkCodeFromUrl } from './utils/url'
+
+const TITLE_BY_STEP: Partial<Record<AuthStep, string>> = {
+  'wallet-selection': 'Choose your wallet',
+}
+
+function OAuthCallback() {
+  return (
+    <div className="zd:flex zd:flex-1 zd:items-center zd:justify-center">
+      <StatusScreen imageName="loading" title="Authenticating...">
+        Please wait while we complete the OAuth authentication.
+      </StatusScreen>
+    </div>
+  )
+}
+
+function PasskeyPrompt() {
+  return (
+    <div className="zd:flex zd:flex-1 zd:items-center zd:justify-center">
+      <StatusScreen imageName="loading" title="Passkey authentication">
+        Please authenticate with your passkey.
+      </StatusScreen>
+    </div>
+  )
+}
+
+function renderStep(step: AuthStep | null): ReactNode {
+  switch (step) {
+    case 'sign-up':
+      return <SignUp />
+    case 'email-verification':
+      return <EmailVerification />
+    case 'otp-input':
+      return <OtpInput />
+    case 'verifying-otp':
+      return <Verifying />
+    case 'oauth-in-progress':
+      return <OAuthCallback />
+    case 'passkey-prompt':
+      return <PasskeyPrompt />
+    case 'wallet-selection':
+      return <WalletSelection />
+    case 'error':
+      return <ErrorScreen />
+    default:
+      return null
+  }
+}
+
+export function AuthFlow({
+  onClose: userOnClose,
+}: {
+  onClose?: (() => void) | undefined
+} = {}) {
+  const { step, goToStep, goBack, reset } = useAuth()
+  const logo = useStore(useKitStore(), (s) => s.logo)
+
+  useEffect(() => {
+    if (step === null && hasMagicLinkCodeInUrl()) {
+      goToStep('verifying-otp')
+    }
+  }, [step, goToStep])
+
+  const content = renderStep(step)
+  if (!content) return null
+
+  const handleClose = () => {
+    stripMagicLinkCodeFromUrl()
+    reset()
+    userOnClose?.()
+  }
+  const title = step ? TITLE_BY_STEP[step] : undefined
+
+  return (
+    <Screen
+      // 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}
+      topNav={
+        <TopNav
+          {...(goBack !== null && { onBack: goBack })}
+          onClose={handleClose}
+          {...(title && { title })}
+          {...(step === 'sign-up' && {
+            ...(logo && { logo }),
+            className: 'zd:px-4',
+          })}
+        />
+      }
+    >
+      {content}
+    </Screen>
+  )
+}

package/src/auth/pages/EmailVerification.tsx

@@ -0,0 +1,76 @@
+import { Text } from '@zerodev/react-ui'
+import { useSendMagicLink } from '@zerodev/wallet-react'
+import { useEffect, useState } from 'react'
+import { PoweredBy } from '../../shared/components/PoweredBy'
+import { StatusScreen } from '../../shared/components/StatusScreen'
+import { useAuth } from '../hooks/useAuth'
+
+export function EmailVerification() {
+  const { email, setOtpSession } = useAuth()
+  const { mutateAsync: sendMagicLink, isPending: isSendPending } =
+    useSendMagicLink()
+
+  const [secondsLeftUntilResend, setSecondsLeftUntilResend] = useState(60)
+  const canResend = secondsLeftUntilResend <= 0 && !isSendPending
+
+  useEffect(() => {
+    if (secondsLeftUntilResend <= 0) return
+
+    const timer = setInterval(() => {
+      setSecondsLeftUntilResend((prev) => Math.max(0, prev - 1))
+    }, 1000)
+
+    return () => {
+      clearInterval(timer)
+    }
+  }, [secondsLeftUntilResend])
+
+  const handleResend = async () => {
+    if (!email || !canResend) return
+
+    try {
+      const { otpId, otpEncryptionTargetBundle } = await sendMagicLink({
+        email,
+      })
+      setOtpSession({ otpId, otpEncryptionTargetBundle })
+      setSecondsLeftUntilResend(60)
+    } catch {
+      // Error resending magic link
+    }
+  }
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center">
+        <StatusScreen
+          imageName="send"
+          title={'Check your email!\n An Email is On Its Way'}
+        >
+          We've sent a magic link to{' '}
+          <Text as="span" className="zd:text-solarOrange">
+            {email}
+          </Text>
+          {'\n'}Please open the email and click the link to log in.
+        </StatusScreen>
+
+        <div className="zd:flex zd:flex-col zd:gap-1">
+          <Text className="zd:text-center">
+            Did not get an email?{' '}
+            <button
+              type="button"
+              disabled={!canResend}
+              onClick={handleResend}
+              className="zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed"
+            >
+              {canResend
+                ? 'Resend'
+                : `Resend in ${secondsLeftUntilResend} ${secondsLeftUntilResend === 1 ? 'second' : 'seconds'}`}
+            </button>
+          </Text>
+        </div>
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}

package/src/auth/pages/ErrorScreen.tsx

@@ -0,0 +1,53 @@
+import { Button } from '@zerodev/react-ui'
+import { PoweredBy } from '../../shared/components/PoweredBy'
+import { StatusScreen } from '../../shared/components/StatusScreen'
+import { useAuth } from '../hooks/useAuth'
+import { stripMagicLinkCodeFromUrl } from '../utils/url'
+
+interface ErrorScreenProps {
+  title?: string
+  message?: string
+  showRetry?: boolean
+  showChooseAnother?: boolean
+}
+
+export function ErrorScreen({
+  title = 'Oops, something went wrong',
+  message = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
+  showRetry = false,
+  showChooseAnother = true,
+}: ErrorScreenProps) {
+  const { goToStep, goBack, reset } = useAuth()
+  const handleRetry = goBack ?? (() => goToStep('sign-up'))
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center">
+        <StatusScreen imageName="error" title={title}>
+          {message}
+        </StatusScreen>
+
+        <div className="zd:flex zd:flex-col zd:gap-1">
+          {showRetry && (
+            <Button action="primary" text="Try again" onClick={handleRetry} />
+          )}
+          {showChooseAnother && (
+            <Button
+              action={showRetry ? 'secondary' : 'primary'}
+              onClick={() => {
+                stripMagicLinkCodeFromUrl()
+                goToStep('sign-up')
+              }}
+              text="Choose another sign-in method"
+            />
+          )}
+          {!showRetry && !showChooseAnother && (
+            <Button action="primary" text="Start over" onClick={reset} />
+          )}
+        </div>
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}

package/src/auth/pages/OtpInput.tsx

@@ -0,0 +1,124 @@
+import { Button, Text } from '@zerodev/react-ui'
+import { useSendOTP, useVerifyOTP } from '@zerodev/wallet-react'
+import { useEffect, useState } from 'react'
+import { PoweredBy } from '../../shared/components/PoweredBy'
+import { CodeInput } from '../components/CodeInput'
+import { useAuth } from '../hooks/useAuth'
+
+export function OtpInput() {
+  const {
+    email,
+    otpId,
+    otpEncryptionTargetBundle,
+    setOtpSession,
+    clearOtpSession,
+    goToStep,
+    config,
+  } = useAuth()
+  const { mutateAsync: sendOtp, isPending: isSendOtpPending } = useSendOTP()
+  const { mutateAsync: verifyOtp, isPending } = useVerifyOTP()
+
+  const [otp, setOtp] = useState('')
+  const [error, setError] = useState(false)
+  const [secondsUntilResend, setSecondsUntilResend] = useState(60)
+
+  // Countdown timer for resend
+  useEffect(() => {
+    if (secondsUntilResend <= 0) return
+
+    const interval = setInterval(() => {
+      setSecondsUntilResend((prev) => Math.max(0, prev - 1))
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [secondsUntilResend])
+
+  const handleVerify = async () => {
+    if (!otp.trim() || !otpId || !otpEncryptionTargetBundle) return
+
+    setError(false)
+    try {
+      await verifyOtp({
+        otpId,
+        code: otp.trim(),
+        otpEncryptionTargetBundle,
+      })
+      clearOtpSession()
+      goToStep('authenticated')
+      config?.onSuccess?.()
+    } catch (err) {
+      setError(true)
+      config?.onError?.(err)
+    }
+  }
+
+  const handleComplete = (code: string) => {
+    setOtp(code)
+  }
+
+  const handleResend = async () => {
+    if (!email || secondsUntilResend > 0 || isSendOtpPending) return
+
+    try {
+      const { otpId: newOtpId, otpEncryptionTargetBundle: newBundle } =
+        await sendOtp({ email })
+      setOtpSession({
+        otpId: newOtpId,
+        otpEncryptionTargetBundle: newBundle,
+      })
+      setSecondsUntilResend(60)
+      setError(false)
+    } catch {
+      setError(true)
+    }
+  }
+
+  const canResend = secondsUntilResend <= 0 && !isSendOtpPending
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center zd:items-center">
+        <div className="zd:flex zd:flex-col zd:gap-4">
+          <Text className="zd:text-h2 zd:text-center">
+            Enter verification code
+          </Text>
+          <Text className="zd:text-center">
+            Enter the code from the email we sent to{' '}
+            <Text className="zd:text-solarOrange">{email}</Text>
+          </Text>
+        </div>
+
+        <CodeInput
+          onComplete={handleComplete}
+          onChange={() => setError(false)}
+          disabled={isPending}
+          error={error}
+          autoFocus
+        />
+
+        <Button
+          text="Confirm code"
+          onClick={handleVerify}
+          disabled={!otp.trim() || isPending}
+        />
+
+        <div className="zd:flex zd:flex-col zd:gap-1">
+          <Text className="zd:text-center">
+            Did not get an email?{' '}
+            <button
+              type="button"
+              disabled={!canResend}
+              onClick={handleResend}
+              className="zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed"
+            >
+              {canResend
+                ? 'Resend'
+                : `Resend in ${secondsUntilResend} ${secondsUntilResend === 1 ? 'second' : 'seconds'}`}
+            </button>
+          </Text>
+        </div>
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}