@zerodev/wallet-react-ui 0.0.11 → 0.0.13

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/isMobile.ts

@@ -0,0 +1,9 @@
+export function isMobile() {
+  if (typeof window === 'undefined') return false
+  return (
+    window.matchMedia?.('(pointer: coarse)')?.matches ||
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini/u.test(
+      navigator.userAgent,
+    )
+  )
+}

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/auth/utils/isZeroDevWalletConnect.ts

@@ -0,0 +1,8 @@
+import type { Connector } from 'wagmi'
+
+/** True for connectors created by `zeroDevWalletConnect` — the only ones the
+ * kit pairs through. A raw `walletConnect()` may have `showQrModal` enabled
+ * (its default), which can't be read back, so it's ignored. */
+export function isZeroDevWalletConnect(connector: Connector) {
+  return connector.type === 'walletConnect' && 'zdWalletConnect' in connector
+}

package/src/auth/utils/walletDeepLink.ts

@@ -0,0 +1,23 @@
+import { matchesWallet, type WalletGuideEntry } from '../walletGuide'
+
+/**
+ * Wrapped deep link for the one-tap mobile redirect into `wallet`'s app, or
+ * null when the tap should just open the sheet: desktop, a claiming installed
+ * connector (direct connect wins), or no pairing URI.
+ */
+export function walletDeepLink(params: {
+  wallet: WalletGuideEntry
+  connectors: readonly {
+    id: string
+    name?: string
+    type?: string
+    rdns?: string | readonly string[] | undefined
+  }[]
+  uri: string | null
+  mobile: boolean
+}): string | null {
+  const { wallet, connectors, uri, mobile } = params
+  if (!wallet.mobileLink || !mobile || !uri) return null
+  if (connectors.some((c) => matchesWallet(c, wallet))) return null
+  return `${wallet.mobileLink}${encodeURIComponent(uri)}`
+}

package/src/auth/walletGuide.ts

@@ -27,20 +27,53 @@ export type WalletGuideEntry = {
 }
 
 /**
- * A live connector "claims" a guide wallet by rdns: announced (6963)
- * connectors carry `id === rdns`, explicit ones (e.g. `metaMask()`) declare
- * `rdns` as a string or array.
+ * A live 6963 announcement claiming a guide wallet. Announced connectors
+ * carry `id === rdns`; wallets' in-app browsers announce a variant rdns
+ * (MetaMask mobile is `io.metamask.mobile`) but keep the wallet's exact
+ * name, so an announced connector matching the guide name also counts —
+ * the same fallback Reown AppKit and Dynamic use. The generic `injected()`
+ * connector (id "injected") and our embedded connector also claim type
+ * "injected" without being announcements.
+ */
+export function announcesWallet(
+  connector: {
+    id: string
+    name?: string
+    type?: string
+    rdns?: string | readonly string[] | undefined
+  },
+  wallet: WalletGuideEntry,
+): boolean {
+  if (!!wallet.rdns && connector.id === wallet.rdns) return true
+  return (
+    !!wallet.rdns &&
+    connector.type === 'injected' &&
+    connector.id !== 'injected' &&
+    connector.id !== 'zerodev-wallet' &&
+    connector.name === wallet.name
+  )
+}
+
+/**
+ * A live connector "claims" a guide wallet: it announces it (see
+ * `announcesWallet`), or is an explicit connector (e.g. `metaMask()`)
+ * declaring the wallet's rdns as a string or array.
  */
 export function matchesWallet(
-  connector: { id: string; rdns?: string | readonly string[] | undefined },
+  connector: {
+    id: string
+    name?: string
+    type?: string
+    rdns?: string | readonly string[] | undefined
+  },
   wallet: WalletGuideEntry,
 ): boolean {
+  if (announcesWallet(connector, wallet)) return true
   return (
     !!wallet.rdns &&
-    (connector.id === wallet.rdns ||
-      (Array.isArray(connector.rdns)
-        ? connector.rdns.includes(wallet.rdns)
-        : connector.rdns === wallet.rdns))
+    (Array.isArray(connector.rdns)
+      ? connector.rdns.includes(wallet.rdns)
+      : connector.rdns === wallet.rdns)
   )
 }
 
@@ -81,6 +114,7 @@ const guide = [
     name: 'Rabby Wallet',
     rdns: 'io.rabby',
     icon: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%238697FF%22%20d%3D%22M28%200H0v28h28V0Z%22%2F%3E%3Cpath%20fill%3D%22url(%23b)%22%20d%3D%22M22.54%2015.078c.677-1.514-2.673-5.744-5.874-7.506-2.017-1.365-4.12-1.178-4.545-.579-.935%201.316%203.094%202.43%205.788%203.731-.58.252-1.125.703-1.446%201.28-1.004-1.096-3.209-2.04-5.796-1.28-1.743.513-3.191%201.721-3.751%203.546a1.097%201.097%200%201%200-.445%202.1c.112%200%20.463-.075.463-.075l5.612.041c-2.244%203.56-4.018%204.081-4.018%204.698s1.697.45%202.335.22c3.05-1.1%206.327-4.531%206.89-5.519%202.36.295%204.345.33%204.786-.657Z%22%2F%3E%3Cpath%20fill%3D%22url(%23c)%22%20fill-rule%3D%22evenodd%22%20d%3D%22m17.885%2010.713.025.01c.125-.049.105-.233.07-.378-.078-.333-1.438-1.676-2.715-2.277-1.743-.82-3.025-.777-3.212-.398.356.726%201.998%201.408%203.714%202.12.723.3%201.46.606%202.118.923Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23d)%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15.701%2018.036a10.296%2010.296%200%200%200-1.2-.37c.482-.862.583-2.138.128-2.945-.639-1.133-1.44-1.736-3.304-1.736-1.024%200-3.783.346-3.832%202.648-.005.242%200%20.464.017.667l5.036.037a17.264%2017.264%200%200%201-1.871%202.483c.669.172%201.221.316%201.728.448.48.125.92.24%201.38.357a21.003%2021.003%200%200%200%201.918-1.59Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22url(%23e)%22%20d%3D%22M6.848%2016.063c.206%201.75%201.2%202.435%203.232%202.638%202.032.203%203.197.067%204.749.208%201.296.118%202.453.778%202.882.55.386-.205.17-.947-.347-1.423-.67-.617-1.597-1.046-3.229-1.199.325-.89.234-2.138-.27-2.817-.731-.982-2.079-1.426-3.785-1.232-1.782.202-3.49%201.08-3.232%203.275Z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2210.464%22%20x2%3D%2222.394%22%20y1%3D%2213.737%22%20y2%3D%2217.12%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%2220.386%22%20x2%3D%2211.779%22%20y1%3D%2213.509%22%20y2%3D%224.879%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237258DC%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23797DEA%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22d%22%20x1%3D%2215.94%22%20x2%3D%227.673%22%20y1%3D%2218.337%22%20y2%3D%2213.584%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%237461EA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23BFC2FF%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22e%22%20x1%3D%2211.177%22%20x2%3D%2216.765%22%20y1%3D%2213.648%22%20y2%3D%2220.749%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.984%22%20stop-color%3D%22%23D5CEFF%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h28v28H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E',
+    mobileLink: 'rabby://wc?uri=',
     downloadUrl: 'https://rabby.io',
   },
   {

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/index.ts

@@ -6,17 +6,21 @@
 // Auth
 export { ConnectWallet } from './auth'
 export { useAuth } from './auth/hooks/useAuth'
+// Connected wallet identity (call-compatible with AppKit's useWalletInfo)
+export type {
+  WalletInfo,
+  WalletSource,
+} from './auth/hooks/useWalletInfo.js'
+export { useWalletInfo } from './auth/hooks/useWalletInfo.js'
 export { SignUp } from './auth/pages/SignUp'
 export type { AuthMethod, AuthStep, EmailAuthMethod } from './auth/types'
 export type { WalletId } from './auth/walletGuide'
-
 // Connector
 export type {
   // SigningConfig,
   ZeroDevKitConnectorParams,
 } from './connector.js'
 export { zeroDevWallet } from './connector.js'
-
 // History
 export {
   TxHistory,
@@ -24,6 +28,7 @@ export {
   type TxHistoryStep,
 } from './history/pages'
 export type { TxHistoryEntry } from './history/types'
+export { zeroDevWalletConnect } from './zeroDevWalletConnect.js'
 
 // Signing
 // export type { SignatureRequestProps } from './signing'

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/src/zeroDevWalletConnect.ts

@@ -0,0 +1,95 @@
+import type { CreateConnectorFn } from 'wagmi'
+import { type WalletConnectParameters, walletConnect } from 'wagmi/connectors'
+import { isMobile } from './auth/utils/isMobile'
+
+/**
+ * localStorage key `@walletconnect/sign-client` reads before publishing each
+ * session request — when set, the SDK deep-links back into the chosen wallet
+ * app (`{href}/wc?requestId=…&sessionTopic=…`) so the approval prompt is in
+ * front of the user. Same key AppKit writes; the SDK no-ops when it's absent.
+ */
+const DEEPLINK_CHOICE_KEY = 'WALLETCONNECT_DEEPLINK_CHOICE'
+
+/** The slice of `@walletconnect/ethereum-provider` this module touches. */
+type WcSessionProvider = {
+  on: (event: 'connect' | 'disconnect', listener: () => void) => unknown
+  session?: {
+    peer?: {
+      metadata?: { name?: string; redirect?: { native?: string } }
+    }
+  }
+}
+
+const watched = new WeakSet<object>()
+
+/**
+ * Arm the SDK's redirect-on-request with the connected wallet's own
+ * registered scheme (`session.peer.metadata.redirect.native`) — authoritative
+ * for whichever wallet actually claimed the pairing. Desktop sessions and
+ * wallets that register no native redirect stay unarmed.
+ */
+function storeDeepLinkChoice(provider: WcSessionProvider) {
+  const metadata = provider.session?.peer?.metadata
+  const href = metadata?.redirect?.native
+  if (!href || !isMobile()) {
+    clearDeepLinkChoice()
+    return
+  }
+  try {
+    localStorage.setItem(
+      DEEPLINK_CHOICE_KEY,
+      JSON.stringify({ href, name: metadata?.name ?? '' }),
+    )
+  } catch {
+    // Storage unavailable — requests still work, minus the app hop.
+  }
+}
+
+function clearDeepLinkChoice() {
+  try {
+    localStorage.removeItem(DEEPLINK_CHOICE_KEY)
+  } catch {
+    // Nothing to clear if storage is unavailable.
+  }
+}
+
+function watchSession(provider: WcSessionProvider) {
+  if (watched.has(provider)) return
+  watched.add(provider)
+  provider.on('connect', () => storeDeepLinkChoice(provider))
+  // A stale choice would deep-link a future session to the wrong app.
+  provider.on('disconnect', clearDeepLinkChoice)
+  // Session restored from storage (page reload) — re-arm without an event.
+  if (provider.session) storeDeepLinkChoice(provider)
+}
+
+/**
+ * WalletConnect connector preconfigured for the kit. `showQrModal: false` is
+ * required — the kit renders its own pairing UI, and WalletConnect's bundled
+ * Reown modal would pop over it otherwise. All other WalletConnect
+ * parameters (e.g. `metadata`) are forwarded as-is.
+ *
+ * The kit only pairs through connectors created here — a raw `walletConnect()`
+ * in the config is ignored, since its `showQrModal` can't be read back.
+ */
+export function zeroDevWalletConnect(
+  params: Omit<WalletConnectParameters, 'showQrModal'>,
+): CreateConnectorFn {
+  if (!params.projectId) {
+    throw new Error('zeroDevWalletConnect requires a WalletConnect projectId')
+  }
+  const create = walletConnect({ ...params, showQrModal: false })
+  return (config) => {
+    // Stamp the connector instance so the kit's discovery can tell a
+    // correctly-configured connector from a raw walletConnect(), where
+    // showQrModal defaults to true.
+    const connector = Object.assign(create(config), { zdWalletConnect: true })
+    const getProvider = connector.getProvider.bind(connector)
+    connector.getProvider = async (...args: Parameters<typeof getProvider>) => {
+      const provider = await getProvider(...args)
+      watchSession(provider as WcSessionProvider)
+      return provider
+    }
+    return connector
+  }
+}

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>
-  )
-}