@zerodev/wallet-react-ui 0.0.12 → 0.0.13

package/src/auth/pages/Verifying.tsx

@@ -15,6 +15,7 @@ export function Verifying() {
     useAuth()
   const [code] = useState<string | null>(getCodeFromUrl)
   const [error, setError] = useState<Error | null>(null)
+  const [sessionMissing, setSessionMissing] = useState(false)
 
   // ref to prevent useEffect firing twice in dev's StrictMode
   const hasVerifiedRef = useRef(false)
@@ -35,14 +36,15 @@ export function Verifying() {
     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.
+    // No active OTP session — the link was already used, expired, or opened
+    // in a browser that never started the email flow. Skip the (doomed)
+    // mutation and show the expired-link error below instead of silently
+    // dropping the step: a blank screen gives the user nothing to act on.
+    // The already-authenticated re-tap case is covered too — hosts route
+    // connected users away on their own (wagmi reconnect), so the error only
+    // stays up for users who genuinely can't be verified.
     if (!otpId || !otpEncryptionTargetBundle) {
-      stripMagicLinkCodeFromUrl()
-      goToStep(null)
+      setSessionMissing(true)
       return
     }
 
@@ -58,7 +60,25 @@ export function Verifying() {
           </StatusScreen>
         )}
 
-        {!error && !code && !isVerificationLoading && (
+        {!error && sessionMissing && (
+          <>
+            <StatusScreen imageName="error" title="Link Expired">
+              This verification link has expired or was already used.
+              <br />
+              Please sign in again to request a new one.
+            </StatusScreen>
+            <Button
+              action="primary"
+              onClick={() => {
+                stripMagicLinkCodeFromUrl()
+                goToStep('sign-up')
+              }}
+              text="Choose another sign-in method"
+            />
+          </>
+        )}
+
+        {!error && !sessionMissing && !code && !isVerificationLoading && (
           <>
             <StatusScreen imageName="error" title="Invalid Link">
               This verification link is invalid or incomplete.

package/src/auth/pages/WalletConnecting.tsx

@@ -0,0 +1,237 @@
+import { type Config, connect } from '@wagmi/core'
+import { Button, PoweredBy } from '@zerodev/react-ui'
+import { useEffect, useRef } from 'react'
+import { useConfig, useConnectors } from 'wagmi'
+import { StatusScreen } from '../../shared/components/StatusScreen'
+import { useKitStore } from '../../shared/hooks/useKitStore'
+import type { ConnectFailure } from '../authStoreSlice'
+import { useAuth } from '../hooks/useAuth'
+import { isCancellationError } from '../utils/isCancellationError'
+import { isResourceUnavailableError } from '../utils/isResourceUnavailableError'
+
+/**
+ * Connector uids with a connect() still open, per wagmi config. Outside React
+ * because the request outlives this component, and keyed by connector because
+ * several wallets can be left unanswered at once.
+ */
+const openRequests = new WeakMap<Config, Set<string>>()
+
+function openFor(config: Config): Set<string> {
+  let uids = openRequests.get(config)
+  if (!uids) {
+    uids = new Set()
+    openRequests.set(config, uids)
+  }
+  return uids
+}
+
+function describeConnectError(
+  err: unknown,
+  walletName: string,
+): ConnectFailure {
+  if (isCancellationError(err)) {
+    return {
+      title: 'Request declined',
+      message: `You declined the connection request in ${walletName}.`,
+      pending: false,
+    }
+  }
+  if (isResourceUnavailableError(err)) {
+    // Usually nothing failed: the wallet still has the first request open
+    // and will not prompt again until it is answered there. But -32002 is
+    // only "resource unavailable", so suggest the outstanding request rather
+    // than assert it. Not the wallet's own message: MetaMask's names RPC
+    // methods and the origin ("Request of type 'wallet_requestPermissions'
+    // already pending for origin…") — Reown shows its own copy here too.
+    return {
+      title: `Check ${walletName}`,
+      message:
+        `Open ${walletName} and check for an outstanding request. ` +
+        'If one is waiting, approve or dismiss it, then try again.',
+      pending: true,
+    }
+  }
+  // Wallets throw raw JSON-RPC objects, viem throws Errors with
+  // `shortMessage`. Never render "[object Object]": fall back to a fixed
+  // sentence plus the code, the only actionable detail such an object has.
+  let message: string | undefined
+  let code: number | undefined
+  if (typeof err === 'string' && err.length > 0) {
+    message = err
+  } else if (typeof err === 'object' && err !== null) {
+    const e = err as {
+      shortMessage?: unknown
+      message?: unknown
+      code?: unknown
+    }
+    const text = e.shortMessage ?? e.message
+    if (typeof text === 'string' && text.length > 0) message = text
+    if (typeof e.code === 'number') code = e.code
+  }
+  return {
+    title: 'Couldn’t connect',
+    message:
+      message ??
+      `Something went wrong while connecting to ${walletName}. Please try again.` +
+        (code !== undefined ? ` (code ${code})` : ''),
+    pending: false,
+  }
+}
+
+/**
+ * The `wallet-connecting` step: shown from picking an external wallet until it
+ * answers, which a locked or dismissed wallet never does — so leaving must
+ * always be possible.
+ *
+ * This page owns the connect() call, since React Query drops per-call
+ * callbacks when the sign-up page unmounts on the step change. The wallet
+ * button only records intent (`startWalletConnection`).
+ */
+export function WalletConnecting() {
+  const {
+    pendingWallet,
+    connectError,
+    setConnectError,
+    clearPendingWallet,
+    goToStep,
+  } = useAuth()
+  const connectors = useConnectors()
+  const config = useConfig()
+  // Read outside React: the wallet can answer long after this unmounts.
+  const store = useKitStore()
+
+  const connector = pendingWallet
+    ? connectors.find((c) => c.uid === pendingWallet.connectorUid)
+    : undefined
+  const walletName = pendingWallet?.name ?? 'your wallet'
+
+  // Pop, don't push: pushing would leave `wallet-connecting` in the history,
+  // and sign-up's back arrow would remount this page and connect() again.
+  const leave = () => {
+    const auth = store.getState().auth
+    if (auth.stepHistory.length > 0) auth.goBack()
+    else auth.goToStep('sign-up')
+  }
+
+  const close = () => {
+    clearPendingWallet()
+    goToStep(null)
+  }
+
+  const attempt = () => {
+    // Starting an attempt means waiting again: drop the previous outcome so
+    // Try again shows the wallet rather than the failure it replaces.
+    setConnectError(null)
+
+    // Single-flight per wallet: a wallet rejects a second request rather than
+    // re-prompting, so re-adopt the open one — its promise still drives this
+    // screen.
+    if (connector && openFor(config).has(connector.uid)) return
+
+    // Connector gone from the config: nothing to connect to.
+    if (!connector) {
+      clearPendingWallet()
+      leave()
+      return
+    }
+    // Already the current connection: connect() would throw rather than
+    // prompt (its exact guard), so there is nothing to wait for. A connector
+    // that is connected but not current falls through on purpose — connect()
+    // then resolves silently and promotes it to current.
+    if (config.state.current === connector.uid) {
+      close()
+      return
+    }
+
+    // @wagmi/core's connect(), not useConnect's mutate: a promise keeps its
+    // handlers across remounts (Strict Mode) and after unmount, so a wallet
+    // answered once the user left still closes the widget.
+    const open = openFor(config)
+    open.add(connector.uid)
+    connect(config, { connector }).then(
+      () => {
+        open.delete(connector.uid)
+        close()
+      },
+      (err: unknown) => {
+        open.delete(connector.uid)
+        // The abandoned prompt is often dismissed much later, by which point
+        // the user has moved on. Act only while the flow is still waiting on
+        // THIS wallet. (Approval is not gated: the wallet is then connected,
+        // so ending the flow is right wherever they are.)
+        const auth = store.getState().auth
+        if (
+          auth.step !== 'wallet-connecting' ||
+          auth.pendingWallet?.connectorUid !== connector.uid
+        ) {
+          return
+        }
+        setConnectError(describeConnectError(err, walletName))
+      },
+    )
+  }
+
+  // wagmi can connect without our connect() promise resolving: after a reload
+  // the wallet's queued request belongs to a dead page, and approving it
+  // authorises the site through the connector's own events. Watch the store so
+  // the flow still closes.
+  useEffect(() => {
+    if (!connector) return
+    const uid = connector.uid
+    return config.subscribe(
+      (state) => (state.status === 'connected' ? state.current : null),
+      (currentUid) => {
+        if (!currentUid) return
+        const connected = config.state.connections.get(currentUid)?.connector
+        if (connected?.uid !== uid) return
+        const auth = store.getState().auth
+        auth.clearPendingWallet()
+        auth.goToStep(null)
+      },
+    )
+  }, [connector, config, store])
+
+  // Once on mount; the ref guards Strict Mode's double effect run.
+  const started = useRef(false)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only kick; `attempt` is intentionally the mount-time closure
+  useEffect(() => {
+    if (started.current) return
+    started.current = true
+    attempt()
+  }, [])
+
+  return (
+    <>
+      <div className="zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center">
+        {connectError === null ? (
+          <StatusScreen imageName="loading" title={`Waiting for ${walletName}`}>
+            Approve or reject the request in your wallet.
+            <br />
+            Nothing showing? Open the wallet, the request may be waiting behind
+            its unlock screen.
+          </StatusScreen>
+        ) : (
+          <StatusScreen
+            imageName={connectError.pending ? 'loading' : 'error'}
+            title={connectError.title}
+          >
+            {connectError.message}
+          </StatusScreen>
+        )}
+        {/* EIP-1193 has no cancel, so the label promises only what it does. */}
+        <div className="zd:flex zd:flex-col zd:gap-1">
+          {connectError !== null && (
+            <Button action="primary" text="Try again" onClick={attempt} />
+          )}
+          <Button
+            action="secondary"
+            text="Choose another sign-in method"
+            onClick={leave}
+          />
+        </div>
+      </div>
+
+      <PoweredBy className="zd:self-center zd:pt-4 zd:pb-6" />
+    </>
+  )
+}

package/src/auth/types.ts

@@ -6,6 +6,7 @@ export type AuthStep =
   | 'otp-input'
   | 'verifying-otp'
   | 'passkey-prompt'
+  | 'wallet-connecting'
   | 'oauth-in-progress'
   | 'authenticated'
   | 'error'

package/src/auth/utils/isCancellationError.ts

@@ -1,10 +1,29 @@
+/**
+ * The user cancelled, rather than something failed: passkey prompt dismissed,
+ * OAuth popup closed, or a wallet connection request rejected.
+ */
 export function isCancellationError(err: unknown): boolean {
+  // EIP-1193 `4001` "user rejected", on any object: viem's
+  // UserRejectedRequestError, a wallet's own ProviderRpcError (an Error with
+  // `code`), or wagmi's rethrown raw JSON-RPC object. Walk `.cause`.
+  let current: unknown = err
+  for (let depth = 0; depth < 5 && isObject(current); depth++) {
+    if (current.code === 4001) return true
+    current = current.cause
+  }
+
   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
+  // viem's rejection error when `code` was dropped
   if (err.name === 'UserRejectedRequestError') return true
   // OAuth (existing logic, message-based)
   const msg = err.message.toLowerCase()
   return msg.includes('oauth popup was closed')
 }
+
+function isObject(
+  value: unknown,
+): value is { code?: unknown; cause?: unknown } {
+  return typeof value === 'object' && value !== null
+}

package/src/auth/utils/isResourceUnavailableError.ts

@@ -0,0 +1,29 @@
+/**
+ * EIP-1474 `-32002` "Resource unavailable". Injected wallets send it when a
+ * request for this origin is already open (popup closed without answering,
+ * then clicked again) and they will not prompt again until it is answered —
+ * wagmi's injected connector reads the code the same way ("prompt is already
+ * open").
+ *
+ * viem wraps it as `ResourceUnavailableRpcError`; wagmi's injected connector
+ * rethrows the raw JSON-RPC object. Accept both and walk `.cause`.
+ */
+export function isResourceUnavailableError(err: unknown): boolean {
+  let current: unknown = err
+  for (let depth = 0; depth < 5 && isObject(current); depth++) {
+    if (
+      current.code === -32002 ||
+      current.name === 'ResourceUnavailableRpcError'
+    ) {
+      return true
+    }
+    current = current.cause
+  }
+  return false
+}
+
+function isObject(
+  value: unknown,
+): value is { code?: unknown; name?: unknown; cause?: unknown } {
+  return typeof value === 'object' && value !== null
+}

package/src/connector.ts

@@ -106,16 +106,25 @@ export function zeroDevWallet(
       },
 
       async setup() {
+        // Restore a persisted OTP session BEFORE base setup so an email flow
+        // survives a reload. The restore is a synchronous localStorage read;
+        // base setup does async work (wallet creation, session validation)
+        // that can be slow or fail. Magic-link verification races on this —
+        // `Verifying` reads the session once on mount, and gating the restore
+        // behind base setup made it see an empty session and strip the code
+        // from the URL. Restoring first runs synchronously inside wagmi's
+        // createConfig, before any React effect can observe the store.
+        if (typeof window !== 'undefined') {
+          store.getState().auth.initialize()
+        }
+
         await connector.setup?.()
 
         // 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.
+        // server.
         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

package/src/shared/components/StatusScreen/index.tsx

@@ -34,7 +34,7 @@ export function StatusScreen({
       <img
         src={STATE_IMAGES[imageName]}
         alt={imageName}
-        className="zd:w-[118px] zd:h-[118px] zd:bg-transparent"
+        className="zd:w-[118px] zd:h-[118px] zd:object-contain zd:bg-transparent"
       />
       <div className="zd:flex zd:flex-col zd:gap-4 zd:items-center">
         <Text className="zd:text-h2 zd:text-center zd:whitespace-pre-wrap">

package/dist/_types/shared/components/TokenSummary/index.d.ts

@@ -1,18 +0,0 @@
-export interface TokenSummaryProps {
-    /** Token logo URL, shown in the tile floating over the card's top edge.
-     * The tile renders empty (neutral background) when omitted. */
-    tokenLogoUrl?: string;
-    /** Pre-formatted fiat value, e.g. `"+$170.27"`. */
-    fiatValue: string;
-    /** Pre-formatted token amount, e.g. `"0.0652 ETH"`. */
-    cryptoAmount: string;
-    className?: string;
-}
-/**
- * Portfolio-value hero (Figma "Portfolio Value", `15873:58532`): a card
- * headed by a token logo tile that overhangs the top edge, with the fiat
- * value large and the crypto amount beneath. The overhang headroom is part
- * of the component, so consumers can stack it without clipping the tile.
- */
-export declare function TokenSummary({ tokenLogoUrl, fiatValue, cryptoAmount, className, }: TokenSummaryProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/_types/shared/components/TokenSummary/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/TokenSummary/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC;mEAC+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAA;IACjB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAS,GACV,EAAE,iBAAiB,+BAyBnB"}

package/src/shared/components/TokenSummary/index.tsx

@@ -1,50 +0,0 @@
-import { cn, Text, Wrapper } from '@zerodev/react-ui'
-
-export interface TokenSummaryProps {
-  /** Token logo URL, shown in the tile floating over the card's top edge.
-   * The tile renders empty (neutral background) when omitted. */
-  tokenLogoUrl?: string
-  /** Pre-formatted fiat value, e.g. `"+$170.27"`. */
-  fiatValue: string
-  /** Pre-formatted token amount, e.g. `"0.0652 ETH"`. */
-  cryptoAmount: string
-  className?: string
-}
-
-/**
- * Portfolio-value hero (Figma "Portfolio Value", `15873:58532`): a card
- * headed by a token logo tile that overhangs the top edge, with the fiat
- * value large and the crypto amount beneath. The overhang headroom is part
- * of the component, so consumers can stack it without clipping the tile.
- */
-export function TokenSummary({
-  tokenLogoUrl,
-  fiatValue,
-  cryptoAmount,
-  className,
-}: TokenSummaryProps) {
-  return (
-    <div className={cn('zd:relative zd:w-full zd:pt-7', className)}>
-      <Wrapper
-        variant="ghost"
-        className="zd:flex zd:w-full zd:flex-col zd:items-center zd:gap-2 zd:rounded-2xl zd:px-2 zd:pt-16 zd:pb-2"
-      >
-        <Text className="zd:whitespace-nowrap zd:text-h1">{fiatValue}</Text>
-        <Text className="zd:whitespace-nowrap zd:text-center zd:text-h3">
-          {cryptoAmount}
-        </Text>
-      </Wrapper>
-      {/* Token tile — straddles the card's top edge, centred. */}
-      <div className="zd:absolute zd:top-0 zd:left-1/2 zd:flex zd:size-18.5 zd:-translate-x-1/2 zd:items-center zd:justify-center zd:rounded-3xl zd:border zd:border-white/20 zd:bg-offWhite/80 zd:backdrop-blur-[15px]">
-        {tokenLogoUrl && (
-          <img
-            src={tokenLogoUrl}
-            alt=""
-            aria-hidden
-            className="zd:size-10.5 zd:object-contain"
-          />
-        )}
-      </div>
-    </div>
-  )
-}