@zerodev/wallet-react-ui 0.0.1

package/src/shared/utils/common.ts

@@ -0,0 +1,26 @@
+export function capitalizeFirst(str?: string | null): string {
+  if (!str) return ''
+  const first = str.at(0) ?? ''
+  return first.toUpperCase() + str.slice(1)
+}
+
+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/src/shared/utils/store.ts

@@ -0,0 +1,9 @@
+import type { useConfig } from 'wagmi'
+import type { Store } from '../../types.js'
+
+export function getStore(config: ReturnType<typeof useConfig>): Store | null {
+  const connector = config.connectors.find((c) => c.id === 'zerodev-wallet')
+  if (!connector || !('getKitStore' in connector)) return null
+  // @ts-expect-error - getKitStore is a custom method on the kit connector
+  return connector.getKitStore()
+}

package/src/store.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import { create } from 'zustand'
+import { subscribeWithSelector } from 'zustand/middleware'
+import {
+  type AuthStoreSlice,
+  createAuthStoreSlice,
+} from './auth/authStoreSlice'
+import type { PendingRequest } from './types.js'
+
+export type State = {
+  pendingRequests: PendingRequest[]
+  userConfirmationListenerActive: boolean
+  logo: ReactNode | null
+  addPendingRequest: (request: PendingRequest) => void
+  removePendingRequest: (id: string) => void
+  clearPendingRequests: () => void
+  setUserConfirmationListenerActive: (active: boolean) => void
+} & AuthStoreSlice
+
+export type CreateStoreOptions = {
+  logo?: ReactNode
+}
+
+export const createStore = (options: CreateStoreOptions = {}) =>
+  create<State>()(
+    subscribeWithSelector((set, get, store) => ({
+      pendingRequests: [],
+      userConfirmationListenerActive: false,
+      logo: options.logo ?? null,
+      addPendingRequest: (request) =>
+        set((state) => ({
+          pendingRequests: [...state.pendingRequests, request],
+        })),
+      removePendingRequest: (id) =>
+        set((state) => ({
+          pendingRequests: state.pendingRequests.filter((r) => r.id !== id),
+        })),
+      clearPendingRequests: () => set({ pendingRequests: [] }),
+      setUserConfirmationListenerActive: (active) =>
+        set({ userConfirmationListenerActive: active }),
+
+      ...createAuthStoreSlice(set, get, store),
+    })),
+  )

package/src/types.ts

@@ -0,0 +1,48 @@
+import type { Address, Hex, RpcTransactionRequest } from 'viem'
+import type { createStore } from './store.js'
+
+export type Store = ReturnType<typeof createStore>
+
+export type BatchCall = {
+  to?: Address
+  data?: Hex
+  value?: Hex
+}
+
+// todo: these should be moved to core package and exported from there
+export type Request =
+  | {
+      method: 'eth_sendTransaction'
+      params: [transaction: RpcTransactionRequest]
+    }
+  | {
+      method: 'wallet_sendTransaction'
+      params: [transaction: RpcTransactionRequest]
+    }
+  | {
+      method: 'wallet_sendCalls'
+      params: [
+        {
+          version: string
+          chainId: Hex
+          from: Address
+          calls: BatchCall[]
+        },
+      ]
+    }
+  | {
+      method: 'personal_sign'
+      params: [data: Hex, address: Hex]
+    }
+  | {
+      method: 'eth_signTypedData_v4'
+      params: [address: Hex, typedData: string]
+    }
+
+export type RequestMethod = Request['method']
+
+export type PendingRequest = {
+  id: string
+  resolve: () => void
+  reject: (reason?: unknown) => void
+} & Request