@zerodev/wallet-react-ui 0.0.6 → 0.0.8

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

@@ -0,0 +1,105 @@
+import { ListItem, ListItemChevron, ListItemIcon } from '@zerodev/react-ui'
+import { useState } from 'react'
+import { useConnect, useConnectors } from 'wagmi'
+import {
+  WalletGridSheet,
+  type WalletTileData,
+} from '../../components/WalletGridSheet'
+import { useAuth } from '../../hooks/useAuth'
+import { isCancellationError } from '../../utils/isCancellationError'
+import { matchesWallet, WALLET_GUIDE } from '../../walletGuide'
+import { useReportPending, useSignUpContext } from './context'
+
+/** "More wallets" row — opens the wallet grid sheet. */
+export function SignUpMoreWallets({
+  title = 'More wallets',
+}: {
+  title?: string
+}) {
+  const { goToStep } = useAuth()
+  const { authPending, guardAgreement, setError } = useSignUpContext()
+  const [open, setOpen] = useState(false)
+  const connectors = useConnectors()
+  const { mutate: connect, isPending } = useConnect()
+  useReportPending(isPending)
+
+  // Our own connector is the embedded wallet, and walletConnect-type
+  // connectors are the mobile transport rather than a wallet — neither
+  // belongs in the grid.
+  const walletConnectors = connectors.filter(
+    (c) => c.id !== 'zerodev-wallet' && c.type !== 'walletConnect',
+  )
+
+  const startConnect = (connector: (typeof connectors)[number]) => {
+    if (authPending) return
+    if (!guardAgreement()) return
+    setOpen(false)
+    setError(null)
+    connect(
+      { connector },
+      {
+        // The external wallet is now the active wagmi connection — the
+        // embedded-wallet flow is done, so close it.
+        onSuccess: () => goToStep(null),
+        onError: (err) => {
+          if (!isCancellationError(err)) {
+            setError(err instanceof Error ? err.message : String(err))
+          }
+        },
+      },
+    )
+  }
+
+  // Claimed by a connector → connect it; otherwise the tile opens the
+  // vendor download page.
+  const guideTiles: WalletTileData[] = WALLET_GUIDE.map((wallet) => {
+    const installed = walletConnectors.find((c) => matchesWallet(c, wallet))
+    return {
+      key: wallet.id,
+      name: wallet.name,
+      icon: wallet.icon,
+      onSelect: () => {
+        if (installed) {
+          startConnect(installed)
+          return
+        }
+        setOpen(false)
+        window.open(wallet.downloadUrl, '_blank', 'noopener,noreferrer')
+      },
+    }
+  })
+
+  // Live connectors we have no guide entry for still get a tile — nothing
+  // installed is ever hidden.
+  const connectorTiles: WalletTileData[] = walletConnectors
+    .filter((c) => !WALLET_GUIDE.some((wallet) => matchesWallet(c, wallet)))
+    .map((connector) => ({
+      key: connector.uid,
+      name: connector.name,
+      icon: connector.icon,
+      onSelect: () => startConnect(connector),
+    }))
+
+  const handleClick = () => {
+    if (authPending) return
+    if (!guardAgreement()) return
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <ListItem
+        icon={<ListItemIcon name="walletOutline" className="zd:w-5 zd:h-5" />}
+        title={title}
+        trailing={<ListItemChevron />}
+        disabled={authPending}
+        onClick={handleClick}
+      />
+      <WalletGridSheet
+        open={open}
+        onOpenChange={setOpen}
+        tiles={[...guideTiles, ...connectorTiles]}
+      />
+    </>
+  )
+}

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/Wallet.tsx

@@ -0,0 +1,81 @@
+import { Badge, ListItem, ListItemChevron } from '@zerodev/react-ui'
+import { useLayoutEffect } from 'react'
+import { useConnect, useConnectors } from 'wagmi'
+import { useAuth } from '../../hooks/useAuth'
+import { isCancellationError } from '../../utils/isCancellationError'
+import { matchesWallet, WALLET_GUIDE, type WalletId } from '../../walletGuide'
+import { useReportPending, useSignUpContext } from './context'
+
+/** Dedicated row for a single guide wallet: connects it directly when a live
+ * connector claims it, and is a download link for the vendor page otherwise. */
+export function SignUpWallet({ walletId }: { walletId: WalletId }) {
+  const wallet = WALLET_GUIDE.find((w) => w.id === walletId)
+  if (!wallet) {
+    // Unreachable for TS consumers; catches raw-JS typos.
+    throw new Error(
+      `Unknown walletId "${walletId}". Valid ids: ${WALLET_GUIDE.map((w) => w.id).join(', ')}`,
+    )
+  }
+
+  const { goToStep } = useAuth()
+  const { authPending, guardAgreement, setError, registerWallet } =
+    useSignUpContext()
+  const connectors = useConnectors()
+  const { mutate: connect, isPending } = useConnect()
+  useReportPending(isPending)
+  useLayoutEffect(() => registerWallet(wallet.id), [registerWallet, wallet.id])
+
+  // Same claim rule as the MoreWallets grid: a 6963 announcement or a
+  // configured SDK connector both make the row connectable. Only an
+  // announcement (id === rdns) proves a live extension and earns the badge.
+  const installed = connectors.find((c) => matchesWallet(c, wallet))
+  const isAnnounced =
+    !!wallet.rdns && connectors.some((c) => c.id === wallet.rdns)
+
+  const shared = {
+    title: wallet.name,
+    icon: <img src={wallet.icon} alt="" className="zd:w-6 zd:h-6" />,
+    trailing: <ListItemChevron />,
+  }
+
+  if (!installed) {
+    return (
+      <ListItem {...shared} asChild>
+        {/* biome-ignore lint/a11y/useAnchorContent: the row layout (incl. the title text) is injected into the anchor via Slot */}
+        <a
+          href={wallet.downloadUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      </ListItem>
+    )
+  }
+
+  const handleClick = () => {
+    if (authPending) return
+    if (!guardAgreement()) return
+    setError(null)
+    connect(
+      { connector: installed },
+      {
+        // The external wallet is now the active wagmi connection — the
+        // embedded-wallet flow is done, so close it (mirrors SignUp.MoreWallets).
+        onSuccess: () => goToStep(null),
+        onError: (err) => {
+          if (!isCancellationError(err)) {
+            setError(err instanceof Error ? err.message : String(err))
+          }
+        },
+      },
+    )
+  }
+
+  return (
+    <ListItem
+      {...shared}
+      {...(isAnnounced && { subtitle: <Badge text="INSTALLED" /> })}
+      disabled={authPending}
+      onClick={handleClick}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+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
+  /** Guide ids of every mounted `SignUp.Wallet` pin. Discovery units skip
+   * these so a pinned wallet isn't listed twice. */
+  registeredWallets: readonly string[]
+  /** Returns the unregister function. */
+  registerWallet: (walletId: string) => () => 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,164 @@
+import { Button, Text } from '@zerodev/react-ui'
+import { type ReactNode, useCallback, 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 { SignUpInstalledWallets } from './InstalledWallets'
+import { SignUpMoreWallets } from './MoreWallets'
+import { SignUpPasskey } from './Passkey'
+import { SignUpWallet } from './Wallet'
+
+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)
+  // Which wallets have a pinned `SignUp.Wallet` row mounted. A plain list of
+  // registrants: register appends, cleanup removes one occurrence.
+  const [registeredWallets, setRegisteredWallets] = useState<readonly string[]>(
+    [],
+  )
+
+  const registerWallet = useCallback((walletId: string) => {
+    setRegisteredWallets((prev) => [...prev, walletId])
+    return () => {
+      setRegisteredWallets((prev) => {
+        const next = [...prev]
+        next.splice(next.indexOf(walletId), 1)
+        return next
+      })
+    }
+  }, [])
+
+  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,
+        registeredWallets,
+        registerWallet,
+      }}
+    >
+      {error !== null && (
+        <div className="zd:flex zd:items-center zd:justify-center zd:h-full zd:min-h-100">
+          <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".
+          `-mx-4` cancels Screen's scroll-container padding so this page
+          owns its own; inner blocks re-add `zd:px-4` where they need it. */}
+      <div
+        className={`zd:-mx-4 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,
+  Wallet: SignUpWallet,
+  InstalledWallets: SignUpInstalledWallets,
+  MoreWallets: SignUpMoreWallets,
+  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

@@ -1,4 +1,4 @@
-export type AuthMethod = 'email' | 'google' | 'passkey'
+export type AuthMethod = 'email' | 'google' | 'passkey' | 'external-wallet'
 
 export type AuthStep =
   | 'sign-up'
@@ -7,17 +7,7 @@ export type AuthStep =
   | '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/isCancellationError.ts

@@ -0,0 +1,10 @@
+export function isCancellationError(err: unknown): boolean {
+  if (!(err instanceof Error)) return false
+  // WebAuthn / passkey
+  if (err.name === 'AbortError' || err.name === 'NotAllowedError') return true
+  // EIP-1193 user rejection (external-wallet connect), via viem
+  if (err.name === 'UserRejectedRequestError') return true
+  // OAuth (existing logic, message-based)
+  const msg = err.message.toLowerCase()
+  return msg.includes('oauth popup was closed')
+}