@zerodev/wallet-react-ui 0.0.1

package/src/auth/pages/SignUp.tsx

@@ -0,0 +1,303 @@
+import { Button, Icon, Input, ListItem, Text } from '@zerodev/react-ui'
+import {
+  useAuthenticateOAuth,
+  useLoginPasskey,
+  useRegisterPasskey,
+  useSendMagicLink,
+  useSendOTP,
+} from '@zerodev/wallet-react'
+import { useState } from 'react'
+import { SignUpFooter } from '../../shared/components/SignUpFooter'
+import { isValidEmailAddress } from '../../shared/utils/common'
+import { BlobAnimation } from '../components/BlobAnimation'
+import { useAuth } from '../hooks/useAuth'
+
+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')
+}
+
+export function SignUp() {
+  const { goToStep, setEmail, setOtpSession, config, enabledMethods } =
+    useAuth()
+  const [agreedToTerms, setAgreedToTerms] = useState(false)
+  const [highlightAgreement, setHighlightAgreement] = useState(false)
+  const [emailInput, setEmailInput] = useState('')
+  const shouldUseOtp = config?.emailAuthMethod === 'otp'
+  const { mutateAsync: sendOtp, isPending: isSendOtpPending } = useSendOTP()
+  const { mutateAsync: sendMagicLink, isPending: isSendMagicLinkPending } =
+    useSendMagicLink()
+  const isEmailLoading = isSendOtpPending || isSendMagicLinkPending
+
+  const [error, setError] = useState<string | null>(null)
+
+  const { mutateAsync: authenticateOAuth, isPending: isGoogleLoading } =
+    useAuthenticateOAuth({
+      mutation: {
+        onSuccess: async () => {
+          goToStep('authenticated')
+          config?.onSuccess?.()
+        },
+        onError: (err) => {
+          config?.onError?.(err)
+        },
+      },
+    })
+
+  const { mutate: registerPasskey, isPending: isRegisterPasskeyPending } =
+    useRegisterPasskey({
+      mutation: {
+        onSuccess: () => {
+          goToStep('authenticated')
+          config?.onSuccess?.()
+        },
+        onError: (err) => {
+          if (!isCancellationError(err)) {
+            setError(err instanceof Error ? err.message : String(err))
+          }
+          config?.onError?.(err)
+        },
+      },
+    })
+
+  const { mutate: loginPasskey, isPending: isLoginPasskeyPending } =
+    useLoginPasskey({
+      mutation: {
+        onSuccess: () => {
+          goToStep('authenticated')
+          config?.onSuccess?.()
+        },
+        onError: (err) => {
+          if (!isCancellationError(err)) {
+            setError(err instanceof Error ? err.message : String(err))
+          }
+          config?.onError?.(err)
+        },
+      },
+    })
+
+  const anyPending =
+    isGoogleLoading ||
+    isEmailLoading ||
+    isRegisterPasskeyPending ||
+    isLoginPasskeyPending
+  const requiresAgreement = !!(
+    config?.termsAndConditionsUrl || config?.privacyPolicyUrl
+  )
+  const needsToAcceptAgreement = requiresAgreement && !agreedToTerms
+
+  const handleRegisterPasskey = () => {
+    if (anyPending) return
+    if (needsToAcceptAgreement) {
+      setHighlightAgreement(true)
+      return
+    }
+    setError(null)
+    registerPasskey()
+  }
+
+  const handleLoginPasskey = () => {
+    if (anyPending) return
+    if (needsToAcceptAgreement) {
+      setHighlightAgreement(true)
+      return
+    }
+    setError(null)
+    loginPasskey()
+  }
+
+  const handleGoogleAuth = async () => {
+    if (needsToAcceptAgreement) {
+      setHighlightAgreement(true)
+      return
+    }
+    setError(null)
+    try {
+      await authenticateOAuth({ provider: 'google' })
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      if (!isCancellationError(err)) {
+        setError(message)
+      }
+    }
+  }
+
+  const handleEmailOtp = async () => {
+    if (!emailInput || anyPending) return
+    if (!isValidEmailAddress(emailInput)) return
+    if (needsToAcceptAgreement) {
+      setHighlightAgreement(true)
+      return
+    }
+
+    setError(null)
+    try {
+      const { otpId, otpEncryptionTargetBundle } = await sendOtp({
+        email: emailInput,
+      })
+      setEmail(emailInput)
+      setOtpSession({ otpId, otpEncryptionTargetBundle })
+      goToStep('otp-input')
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to send verification code',
+      )
+    }
+  }
+
+  const handleEmailMagicLink = async () => {
+    if (!emailInput || anyPending) return
+    if (!isValidEmailAddress(emailInput)) return
+    if (needsToAcceptAgreement) {
+      setHighlightAgreement(true)
+      return
+    }
+
+    setError(null)
+    try {
+      const { otpId, otpEncryptionTargetBundle } = await sendMagicLink({
+        email: emailInput,
+      })
+      setEmail(emailInput)
+      setOtpSession({ otpId, otpEncryptionTargetBundle })
+      goToStep('email-verification')
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to send verification code',
+      )
+    }
+  }
+
+  const handleEmailSubmit = shouldUseOtp ? handleEmailOtp : handleEmailMagicLink
+
+  if (error) {
+    return (
+      <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>
+    )
+  }
+
+  return (
+    <div className="zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-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:flex zd:flex-col zd:gap-4 zd:mb-4">
+          {enabledMethods.includes('passkey') && (
+            <>
+              <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
+                <Button
+                  action="secondary"
+                  text="Create a passkey"
+                  iconName="key"
+                  trailIcon
+                  disabled={anyPending}
+                  onClick={handleRegisterPasskey}
+                />
+                <Button
+                  action="secondary"
+                  text="Log in with passkey"
+                  iconName="key"
+                  trailIcon
+                  disabled={anyPending}
+                  onClick={handleLoginPasskey}
+                />
+              </div>
+              <div className="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">or</Text>
+                <div className="zd:h-px zd:flex-1 zd:bg-greyScale/30" />
+              </div>
+            </>
+          )}
+          <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
+            {enabledMethods.includes('google') && (
+              <ListItem
+                iconName="google"
+                title="Google"
+                chevron
+                className="zd:rounded-3xl"
+                disabled={anyPending}
+                onClick={handleGoogleAuth}
+              />
+            )}
+            {enabledMethods.includes('email') && (
+              <Input
+                iconName="email"
+                placeholder="Enter your email"
+                value={emailInput}
+                onChange={(e) => setEmailInput(e.target.value)}
+                type="email"
+                autoCapitalize="none"
+                autoComplete="email"
+                disabled={anyPending}
+                variant="listItemStyle"
+                containerClassName="zd:rounded-3xl"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && emailInput && !anyPending) {
+                    void handleEmailSubmit()
+                  }
+                }}
+              >
+                {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) || needsToAcceptAgreement
+                    }
+                    className={`zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${
+                      isValidEmailAddress(emailInput) && !needsToAcceptAgreement
+                        ? 'zd:cursor-pointer'
+                        : 'zd:cursor-not-allowed zd:opacity-50'
+                    }`}
+                    onClick={() => handleEmailSubmit()}
+                  >
+                    <Icon name="chevronRight" className="zd:text-greyScale" />
+                  </button>
+                )}
+              </Input>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="zd:px-4">
+        <SignUpFooter
+          termsAndConditionsUrl={config?.termsAndConditionsUrl}
+          privacyPolicyUrl={config?.privacyPolicyUrl}
+          agreedToTerms={agreedToTerms}
+          setAgreedToTerms={(agreed) => {
+            setAgreedToTerms(agreed)
+            if (agreed) setHighlightAgreement(false)
+          }}
+          highlight={highlightAgreement}
+        />
+      </div>
+    </div>
+  )
+}

package/src/auth/pages/Verifying.tsx

@@ -0,0 +1,108 @@
+import { Button } from '@zerodev/react-ui'
+import { useVerifyMagicLink } from '@zerodev/wallet-react'
+import { useEffect, useRef, useState } from 'react'
+import { PoweredBy } from '../../shared/components/PoweredBy'
+import { StatusScreen } from '../../shared/components/StatusScreen'
+import { useAuth } from '../hooks/useAuth'
+import { stripMagicLinkCodeFromUrl } from '../utils/url'
+
+function getCodeFromUrl(): string | null {
+  if (typeof window === 'undefined') return null
+  return new URLSearchParams(window.location.search).get('code')
+}
+
+export function Verifying() {
+  const {
+    otpId,
+    otpEncryptionTargetBundle,
+    goToStep,
+    clearOtpSession,
+    config,
+  } = useAuth()
+  const [code] = useState<string | null>(getCodeFromUrl)
+  const [error, setError] = useState<Error | null>(null)
+
+  // ref to prevent useEffect firing twice in dev's StrictMode
+  const hasVerifiedRef = useRef(false)
+  const { mutate: verifyMagicLink, isPending: isVerificationLoading } =
+    useVerifyMagicLink({
+      mutation: {
+        onSuccess: async () => {
+          clearOtpSession()
+          goToStep('authenticated')
+          config?.onSuccess?.()
+        },
+        onError: (err) => {
+          setError(err)
+          config?.onError?.(err)
+        },
+      },
+    })
+
+  useEffect(() => {
+    if (hasVerifiedRef.current || !code) return
+    hasVerifiedRef.current = true
+
+    // No active OTP session — most commonly the user tapped the same
+    // magic link again after a successful verify, which cleared the
+    // session. Skip the (doomed) mutation, clean the URL, and drop
+    // back to step=null so the host app's own routing handles the
+    // already-authenticated user without flashing an error.
+    if (!otpId || !otpEncryptionTargetBundle) {
+      stripMagicLinkCodeFromUrl()
+      goToStep(null)
+      return
+    }
+
+    verifyMagicLink({ otpId, code, otpEncryptionTargetBundle })
+  }, [otpId, otpEncryptionTargetBundle, code, verifyMagicLink, goToStep])
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center">
+        {!error && isVerificationLoading && (
+          <StatusScreen imageName="loading" title="Verifying Your Email">
+            Please wait while we securely connect your wallet.
+          </StatusScreen>
+        )}
+
+        {!error && !code && !isVerificationLoading && (
+          <>
+            <StatusScreen imageName="error" title="Invalid Link">
+              This verification link is invalid or incomplete.
+              <br />
+              Please check your email and try again with the correct link.
+            </StatusScreen>
+            <Button
+              action="primary"
+              onClick={() => {
+                stripMagicLinkCodeFromUrl()
+                goToStep('sign-up')
+              }}
+              text="Choose another sign-in method"
+            />
+          </>
+        )}
+
+        {error != null && (
+          <>
+            <StatusScreen imageName="error" title="Oops, something went wrong">
+              We couldn't complete the sign-in process. This could be due to
+              timeout, an expired link, or a cancelled request.
+            </StatusScreen>
+            <Button
+              action="primary"
+              onClick={() => {
+                stripMagicLinkCodeFromUrl()
+                goToStep('sign-up')
+              }}
+              text="Choose another sign-in method"
+            />
+          </>
+        )}
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}

package/src/auth/pages/WalletSelection.tsx

@@ -0,0 +1,53 @@
+import { ListItem, Text } from '@zerodev/react-ui'
+import { useConnect } from 'wagmi'
+import { PoweredBy } from '../../shared/components/PoweredBy'
+import { useAuth } from '../hooks/useAuth'
+
+export function WalletSelection() {
+  const { goToStep } = useAuth()
+  const { connect, connectors, isPending } = useConnect()
+
+  const externalConnectors = connectors.filter((c) => c.id !== 'zerodev-wallet')
+
+  const handleSelect = (connector: (typeof connectors)[number]) => {
+    connect(
+      { connector },
+      {
+        onSuccess: () => {
+          goToStep(null)
+        },
+      },
+    )
+  }
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center">
+        <Text className="zd:text-h2 zd:text-center">Select your wallet</Text>
+
+        <div className="zd:flex zd:flex-col zd:gap-2">
+          {externalConnectors.length === 0 ? (
+            <Text className="zd:text-center">
+              No wallets detected. Install a browser wallet extension to
+              continue.
+            </Text>
+          ) : (
+            externalConnectors.map((connector) => (
+              <ListItem
+                key={connector.uid}
+                title={connector.name}
+                iconName="walletOutline"
+                {...(connector.icon ? { imageUri: connector.icon } : {})}
+                disabled={isPending}
+                onClick={() => handleSelect(connector)}
+                className="zd:rounded-3xl"
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}

package/src/auth/types.ts

@@ -0,0 +1,23 @@
+export type AuthMethod = 'email' | 'google' | 'passkey'
+
+export type AuthStep =
+  | 'sign-up'
+  | 'email-verification'
+  | 'otp-input'
+  | 'verifying-otp'
+  | 'passkey-prompt'
+  | 'oauth-in-progress'
+  | 'wallet-selection'
+  | 'authenticated'
+  | '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/url.ts

@@ -0,0 +1,12 @@
+export function hasMagicLinkCodeInUrl(): boolean {
+  if (typeof window === 'undefined') return false
+  return new URLSearchParams(window.location.search).has('code')
+}
+
+export function stripMagicLinkCodeFromUrl(): void {
+  if (typeof window === 'undefined') return
+  const url = new URL(window.location.href)
+  if (!url.searchParams.has('code')) return
+  url.searchParams.delete('code')
+  window.history.replaceState(null, '', url.toString())
+}

package/src/connector.ts

@@ -0,0 +1,182 @@
+import type { CreateConnectorFn } from '@wagmi/core'
+import type {
+  ZeroDevProvider,
+  ZeroDevWalletConnectorParams,
+} from '@zerodev/wallet-react'
+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'
+
+const DEFAULT_SIGNING_PROMPT_METHODS: RequestMethod[] = [
+  'eth_sendTransaction',
+  'wallet_sendTransaction',
+  'wallet_sendCalls',
+  'personal_sign',
+  '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
+}
+
+function requireUserConfirmation(
+  store: ReturnType<typeof createStore>,
+  request: Request,
+): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    store.getState().addPendingRequest({
+      id: crypto.randomUUID(),
+      ...request,
+      resolve,
+      reject,
+    })
+  })
+}
+
+/**
+ * Resolves when the user completes the auth flow (`step === 'authenticated'`),
+ * rejects when they dismiss it (`step === null`).
+ */
+function waitForAuthFlow(store: ReturnType<typeof createStore>): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const unsub = store.subscribe(
+      (state) => state.auth.step,
+      (step) => {
+        if (step === 'authenticated') {
+          unsub()
+          resolve()
+        } else if (step === null) {
+          // User dismissed the auth flow (e.g. clicked the TopNav close
+          // button) — abort the pending wagmi connect.
+          unsub()
+          reject(new Error('Auth flow dismissed'))
+        }
+      },
+    )
+  })
+}
+
+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)
+  }
+
+  return (wagmiConfig) => {
+    const connector = baseFactory(wagmiConfig)
+
+    return {
+      ...connector,
+
+      async connect(connectParams) {
+        // Try to connect first. If a session is persisted, base will load it
+        // and resolve — no auth UI needed. If not, it throws
+        // `NotAuthenticatedError` and we surface SignUp.
+        //
+        // This avoids forcing every connect to await the base store's init
+        // (which `isAuthorized()` deliberately skips for perf — see
+        // packages/react/src/core/connector.ts), and avoids flashing the auth
+        // UI on first paint when the session hasn't loaded yet.
+        try {
+          return await connector.connect(connectParams)
+        } catch (error) {
+          if (
+            connectParams?.isReconnecting ||
+            !params.config?.auth ||
+            !(error instanceof NotAuthenticatedError)
+          ) {
+            throw error
+          }
+
+          if (store.getState().auth.step !== null) {
+            throw new Error('Auth flow already in progress')
+          }
+
+          store.getState().auth.goToStep('sign-up')
+          await waitForAuthFlow(store)
+          return connector.connect(connectParams)
+        }
+      },
+
+      async disconnect() {
+        await connector.disconnect?.()
+        if (params.config?.auth) {
+          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.
+        if (typeof window === 'undefined') return
+
+        // 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 = { mode: 'background' } as const
+        if (signing.mode === 'background') return
+
+        const methods =
+          // (signing?.mode === 'prompt' && signing.methods) ||
+          DEFAULT_SIGNING_PROMPT_METHODS
+
+        const provider = (await connector.getProvider()) as ZeroDevProvider
+        const baseRequest = provider.request.bind(provider)
+
+        // todo: move Request type to core package and use as the method and params type here
+        // then we can remove as RequestMethod and spread in return baseRequest
+        provider.request = async ({
+          method,
+          params: reqParams,
+        }: {
+          method: string
+          params?: unknown[]
+        }) => {
+          const { userConfirmationListenerActive } = store.getState()
+          if (
+            userConfirmationListenerActive &&
+            methods.includes(method as RequestMethod)
+          ) {
+            await requireUserConfirmation(store, {
+              method: method as RequestMethod,
+              params: reqParams,
+            } as Request)
+          }
+
+          return baseRequest({
+            method,
+            ...(reqParams && { params: reqParams }),
+          })
+        }
+      },
+
+      getKitStore() {
+        return store
+      },
+    }
+  }
+}