@zerodev/wallet-react-ui 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React wallet UI kit for ZeroDev (auth + signing flows)",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "web3"
   ],
   "dependencies": {
-    "@zerodev/react-ui": "0.0.3"
+    "@zerodev/react-ui": "0.0.5"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -53,8 +53,8 @@
     "viem": "^2.47.18",
     "wagmi": "^2.19.0 || ^3.0.0",
     "zustand": "^5.0.3",
-    "@zerodev/wallet-core": "0.0.1",
-    "@zerodev/wallet-react": "0.0.3"
+    "@zerodev/wallet-core": "0.0.2",
+    "@zerodev/wallet-react": "0.0.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.3",
@@ -67,14 +67,15 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.7.0",
-    "postcss": "^8.5.8",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "postcss": "^8.5.16",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "storybook": "^10.3.3",
     "tailwindcss": "^4.2.2",
     "typescript": "5.9.3",
-    "vite": "^6.4.1",
-    "vite-plugin-node-polyfills": "^0.25.0"
+    "vite": "^6.4.3",
+    "vite-plugin-node-polyfills": "^0.25.0",
+    "vocs": "^1.4.1"
   },
   "scripts": {
     "build": "pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:types",

package/src/auth/index.tsx

@@ -1,8 +1,7 @@
+import { Screen, TopNav } from '@zerodev/react-ui'
 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'
@@ -95,8 +94,8 @@ export function AuthFlow({
       contentClassName={step === 'sign-up' ? 'zd:px-0' : undefined}
       topNav={
         <TopNav
-          {...(goBack !== null && { onBack: goBack })}
-          onClose={handleClose}
+          {...(goBack !== null && { onLeftButtonClick: goBack })}
+          onRightButtonClick={handleClose}
           {...(title && { title })}
           {...(step === 'sign-up' && {
             ...(logo && { logo }),

package/src/auth/pages/EmailVerification.tsx

@@ -1,7 +1,6 @@
-import { Text } from '@zerodev/react-ui'
+import { PoweredBy, 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'
 

package/src/auth/pages/ErrorScreen.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@zerodev/react-ui'
-import { PoweredBy } from '../../shared/components/PoweredBy'
+import { Button, PoweredBy } from '@zerodev/react-ui'
 import { StatusScreen } from '../../shared/components/StatusScreen'
 import { useAuth } from '../hooks/useAuth'
 import { stripMagicLinkCodeFromUrl } from '../utils/url'

package/src/auth/pages/OtpInput.tsx

@@ -1,7 +1,6 @@
-import { Button, Text } from '@zerodev/react-ui'
+import { Button, PoweredBy, 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'
 

package/src/auth/pages/SignUp.tsx

@@ -1,4 +1,12 @@
-import { Button, Icon, Input, ListItem, Text } from '@zerodev/react-ui'
+import {
+  Button,
+  Icon,
+  Input,
+  ListItem,
+  ListItemChevron,
+  ListItemIcon,
+  Text,
+} from '@zerodev/react-ui'
 import {
   useAuthenticateOAuth,
   useLoginPasskey,
@@ -235,9 +243,9 @@ export function SignUp() {
           <div className="zd:px-4 zd:flex zd:flex-col zd:gap-2">
             {enabledMethods.includes('google') && (
               <ListItem
-                iconName="google"
+                icon={<ListItemIcon name="google" />}
                 title="Google"
-                chevron
+                trailing={<ListItemChevron />}
                 className="zd:rounded-3xl"
                 disabled={anyPending}
                 onClick={handleGoogleAuth}

package/src/auth/pages/Verifying.tsx

@@ -1,7 +1,6 @@
-import { Button } from '@zerodev/react-ui'
+import { Button, PoweredBy } 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'

package/src/auth/pages/WalletSelection.tsx

@@ -1,6 +1,5 @@
-import { ListItem, Text } from '@zerodev/react-ui'
+import { ListItem, ListItemIcon, PoweredBy, Text } from '@zerodev/react-ui'
 import { useConnect } from 'wagmi'
-import { PoweredBy } from '../../shared/components/PoweredBy'
 import { useAuth } from '../hooks/useAuth'
 
 export function WalletSelection() {
@@ -36,8 +35,17 @@ export function WalletSelection() {
               <ListItem
                 key={connector.uid}
                 title={connector.name}
-                iconName="walletOutline"
-                {...(connector.icon ? { imageUri: connector.icon } : {})}
+                icon={
+                  connector.icon ? (
+                    <img
+                      src={connector.icon}
+                      alt=""
+                      className="zd:w-6 zd:h-6"
+                    />
+                  ) : (
+                    <ListItemIcon name="walletOutline" />
+                  )
+                }
                 disabled={isPending}
                 onClick={() => handleSelect(connector)}
                 className="zd:rounded-3xl"

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

@@ -1,5 +1,4 @@
-import { Text } from '@zerodev/react-ui'
-import { PoweredBy } from '../PoweredBy'
+import { PoweredBy, Text } from '@zerodev/react-ui'
 
 export function SignUpFooter({
   termsAndConditionsUrl,

package/src/shared/utils/common.ts

@@ -8,18 +8,6 @@ export function shortenHex(hex: string, length = 4) {
   return `${hex.slice(0, length + 2)}...${hex.slice(-length)}`
 }
 
-export function camelCaseToTitle(str: string): string {
-  if (str.length === 0 || str.at(0) === str.at(0)?.toUpperCase()) {
-    return str
-  }
-
-  const words = str.replace(/([a-z])([A-Z])/g, '$1 $2').trim()
-  return words
-    .split(' ')
-    .map((word) => capitalizeFirst(word))
-    .join(' ')
-}
-
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 export function isValidEmailAddress(email: string): boolean {
   return EMAIL_REGEX.test(email.trim())

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

@@ -1,6 +0,0 @@
-import type { CSSProperties } from 'react';
-export declare function PoweredBy({ className, style, }: {
-    className?: string;
-    style?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/PoweredBy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,2CAiBA"}

package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts

@@ -1,23 +0,0 @@
-interface RadialStop {
-    offset: number;
-    color: string;
-    opacity: number;
-}
-export interface RadialLayer {
-    id: string;
-    matrix: [number, number, number, number, number, number];
-    fillOpacity: number;
-    stops: RadialStop[];
-}
-interface RadialRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export declare function EllipticalRadial({ layer, rect, }: {
-    layer: RadialLayer;
-    rect: RadialRect;
-}): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=EllipticalRadial.d.ts.map

package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EllipticalRadial.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/EllipticalRadial.tsx"],"names":[],"mappings":"AAAA,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IAGV,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAExD,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,UAAU,EAAE,CAAA;CACpB;AAGD,UAAU,UAAU;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,GACL,EAAE;IACD,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;CACjB,2CAkCA"}

package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts

@@ -1,4 +0,0 @@
-export declare function MultiRadialBackground(): import("react/jsx-runtime").JSX.Element;
-export declare function CardGlow(): import("react/jsx-runtime").JSX.Element;
-export declare function WrapperBorder(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MultiRadialBackground.d.ts.map

package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiRadialBackground.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/MultiRadialBackground.tsx"],"names":[],"mappings":"AAYA,wBAAgB,qBAAqB,4CAkBpC;AAYD,wBAAgB,QAAQ,4CAiJvB;AAeD,wBAAgB,aAAa,4CAwH5B"}

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

@@ -1,10 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-export declare function Screen({ children, className, contentClassName, size, style, topNav, }: {
-    children: ReactNode;
-    className?: string | undefined;
-    contentClassName?: string | undefined;
-    size?: 'sm' | 'md' | 'lg' | undefined;
-    style?: CSSProperties | undefined;
-    topNav?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/Screen/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUrD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IACjC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,2CA2DA"}

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

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const TOP_NAV_HEIGHT = 52;
-export declare function TopNav({ onBack, onClose, title, logo, className, }: {
-    onBack?: () => void;
-    onClose: () => void;
-    title?: string;
-    logo?: ReactNode;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/components/TopNav/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,eAAO,MAAM,cAAc,KAAK,CAAA;AAEhC,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CA8BA"}

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

@@ -1,27 +0,0 @@
-import { cn, Text, ZeroDevLogo } from '@zerodev/react-ui'
-import type { CSSProperties } from 'react'
-
-export function PoweredBy({
-  className,
-  style,
-}: {
-  className?: string
-  style?: CSSProperties
-}) {
-  return (
-    <div
-      className={cn(
-        'zd:gap-1.5 zd:flex zd:flex-row zd:items-center',
-        className,
-      )}
-    >
-      <Text>Powered by</Text>
-      <ZeroDevLogo
-        variant="lockup"
-        tone="black"
-        className="zd:h-4.5 zd:w-auto"
-        style={style}
-      />
-    </div>
-  )
-}

package/src/shared/components/Screen/EllipticalRadial.tsx

@@ -1,65 +0,0 @@
-interface RadialStop {
-  offset: number
-  color: string
-  opacity: number
-}
-
-export interface RadialLayer {
-  id: string
-  // Figma-exported gradientTransform matrix: the unit circle
-  // (center 0,0 radius 1) mapped to a rotated/scaled/translated ellipse.
-  matrix: [number, number, number, number, number, number]
-  // Opacity of the rect the gradient fills (Figma exports this on the <rect>).
-  fillOpacity: number
-  stops: RadialStop[]
-}
-
-// The rect each gradient fills, in the parent SVG's viewBox coordinates.
-interface RadialRect {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export function EllipticalRadial({
-  layer,
-  rect,
-}: {
-  layer: RadialLayer
-  rect: RadialRect
-}) {
-  const { id, matrix, fillOpacity, stops } = layer
-
-  return (
-    <>
-      <defs>
-        <radialGradient
-          id={id}
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform={`matrix(${matrix.join(' ')})`}
-        >
-          {stops.map((s, i) => (
-            <stop
-              key={s.color + i.toString()}
-              offset={s.offset}
-              stopColor={s.color}
-              stopOpacity={s.opacity}
-            />
-          ))}
-        </radialGradient>
-      </defs>
-      <rect
-        x={rect.x}
-        y={rect.y}
-        width={rect.width}
-        height={rect.height}
-        fill={`url(#${id})`}
-        fillOpacity={fillOpacity}
-      />
-    </>
-  )
-}