@zerodev/wallet-react 0.0.1-alpha.12 → 0.0.1-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react",
-  "version": "0.0.1-alpha.12",
+  "version": "0.0.1-alpha.14",
   "description": "React hooks for ZeroDev Wallet SDK",
   "sideEffects": false,
   "main": "./dist/_cjs/index.js",
@@ -30,7 +30,7 @@
     "wagmi": "^3.0.0",
     "zustand": "^5.0.3",
     "ox": "^0.3.0",
-    "@zerodev/wallet-core": "0.0.1-alpha.11"
+    "@zerodev/wallet-core": "0.0.1-alpha.13"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/actions.test.ts

@@ -108,11 +108,10 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await registerPasskey(config, { email: 'user@example.com' })
+      await registerPasskey(config, {})
 
       expect(wallet.auth).toHaveBeenCalledWith({
         type: 'passkey',
-        email: 'user@example.com',
         mode: 'register',
       })
     })
@@ -125,7 +124,7 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await registerPasskey(config, { email: 'user@example.com' })
+      await registerPasskey(config, {})
 
       expect(store.getState().setEoaAccount).toHaveBeenCalledWith({
         address: '0xdeadbeef',
@@ -143,7 +142,7 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await registerPasskey(config, { email: 'user@example.com' })
+      await registerPasskey(config, {})
 
       expect(store.getState().setSession).toHaveBeenCalledWith(null)
     })
@@ -154,7 +153,7 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await registerPasskey(config, { email: 'user@example.com' })
+      await registerPasskey(config, {})
 
       expect(wagmiConnect).toHaveBeenCalledWith(config, { connector })
     })
@@ -164,9 +163,9 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await expect(
-        registerPasskey(config, { email: 'user@example.com' }),
-      ).rejects.toThrow('Wallet not initialized')
+      await expect(registerPasskey(config, {})).rejects.toThrow(
+        'Wallet not initialized',
+      )
     })
 
     it('uses provided connector instead of finding one', async () => {
@@ -176,7 +175,6 @@ describe('React Actions', () => {
       const config = createMockConfig()
 
       await registerPasskey(config, {
-        email: 'user@example.com',
         connector: customConnector,
       })
 
@@ -191,11 +189,10 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await loginPasskey(config, { email: 'user@example.com' })
+      await loginPasskey(config, {})
 
       expect(wallet.auth).toHaveBeenCalledWith({
         type: 'passkey',
-        email: 'user@example.com',
         mode: 'login',
       })
     })
@@ -208,7 +205,7 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await loginPasskey(config, { email: 'user@example.com' })
+      await loginPasskey(config, {})
 
       expect(store.getState().setEoaAccount).toHaveBeenCalledWith({
         address: '0xabc',
@@ -224,7 +221,7 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await loginPasskey(config, { email: 'user@example.com' })
+      await loginPasskey(config, {})
 
       expect(wagmiConnect).toHaveBeenCalledWith(config, { connector })
     })
@@ -234,9 +231,9 @@ describe('React Actions', () => {
       const connector = createMockConnector(store)
       const config = createMockConfig(connector)
 
-      await expect(
-        loginPasskey(config, { email: 'user@example.com' }),
-      ).rejects.toThrow('Wallet not initialized')
+      await expect(loginPasskey(config, {})).rejects.toThrow(
+        'Wallet not initialized',
+      )
     })
   })
 
@@ -887,9 +884,9 @@ describe('React Actions', () => {
         storage: null,
       } as unknown as Config
 
-      await expect(
-        registerPasskey(config, { email: 'user@example.com' }),
-      ).rejects.toThrow('ZeroDev connector not found in Wagmi config')
+      await expect(registerPasskey(config, {})).rejects.toThrow(
+        'ZeroDev connector not found in Wagmi config',
+      )
     })
   })
 })

package/src/actions.ts

@@ -28,12 +28,11 @@ function getZeroDevConnector(config: Config): Connector {
  */
 export async function registerPasskey(
   config: Config,
-  parameters: {
-    email: string
+  parameters?: {
     connector?: Connector
   },
 ): Promise<void> {
-  const connector = parameters.connector ?? getZeroDevConnector(config)
+  const connector = parameters?.connector ?? getZeroDevConnector(config)
 
   // @ts-expect-error - getStore is a custom method
   const store = await connector.getStore()
@@ -43,7 +42,6 @@ export async function registerPasskey(
 
   await wallet.auth({
     type: 'passkey',
-    email: parameters.email,
     mode: 'register',
   })
 
@@ -60,8 +58,7 @@ export async function registerPasskey(
 }
 
 export declare namespace registerPasskey {
-  type Parameters = {
-    email: string
+  type Parameters = void | {
     connector?: Connector
   }
   type ReturnType = void
@@ -73,12 +70,11 @@ export declare namespace registerPasskey {
  */
 export async function loginPasskey(
   config: Config,
-  parameters: {
-    email: string
+  parameters?: {
     connector?: Connector
   },
 ): Promise<void> {
-  const connector = parameters.connector ?? getZeroDevConnector(config)
+  const connector = parameters?.connector ?? getZeroDevConnector(config)
 
   // @ts-expect-error - getStore is a custom method
   const store = await connector.getStore()
@@ -88,7 +84,6 @@ export async function loginPasskey(
 
   await wallet.auth({
     type: 'passkey',
-    email: parameters.email,
     mode: 'login',
   })
 
@@ -105,8 +100,7 @@ export async function loginPasskey(
 }
 
 export declare namespace loginPasskey {
-  type Parameters = {
-    email: string
+  type Parameters = void | {
     connector?: Connector
   }
   type ReturnType = void
@@ -214,6 +208,7 @@ export async function sendOTP(
   parameters: {
     email: string
     emailCustomization?: { magicLinkTemplate?: string }
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   },
 ): Promise<{ otpId: string }> {
@@ -233,6 +228,9 @@ export async function sendOTP(
     ...(parameters.emailCustomization && {
       emailCustomization: parameters.emailCustomization,
     }),
+    ...(parameters.otpCodeCustomization && {
+      otpCodeCustomization: parameters.otpCodeCustomization,
+    }),
   })
 
   return {
@@ -244,6 +242,7 @@ export declare namespace sendOTP {
   type Parameters = {
     email: string
     emailCustomization?: { magicLinkTemplate?: string }
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
     connector?: Connector
   }
   type ReturnType = { otpId: string }
@@ -376,6 +375,7 @@ export async function exportWallet(
   config: Config,
   parameters: {
     iframeContainerId: string
+    iframeStyles?: Record<string, string>
     connector?: Connector
   },
 ): Promise<void> {
@@ -399,6 +399,11 @@ export async function exportWallet(
   })
 
   const publicKey = await iframeStamper.init()
+
+  if (parameters.iframeStyles) {
+    await iframeStamper.applySettings({ styles: parameters.iframeStyles })
+  }
+
   const { exportBundle, organizationId } = await exportWalletSdk({
     wallet,
     targetPublicKey: publicKey,
@@ -416,6 +421,7 @@ export async function exportWallet(
 export declare namespace exportWallet {
   type Parameters = {
     iframeContainerId: string
+    iframeStyles?: Record<string, string>
     connector?: Connector
   }
   type ReturnType = void
@@ -429,6 +435,7 @@ export async function exportPrivateKey(
   config: Config,
   parameters: {
     iframeContainerId: string
+    iframeStyles?: Record<string, string>
     address?: string
     keyFormat?: 'Hexadecimal' | 'Solana'
     connector?: Connector
@@ -454,6 +461,11 @@ export async function exportPrivateKey(
   })
 
   const publicKey = await iframeStamper.init()
+
+  if (parameters.iframeStyles) {
+    await iframeStamper.applySettings({ styles: parameters.iframeStyles })
+  }
+
   const { exportBundle, organizationId } = await exportPrivateKeySdk({
     wallet,
     targetPublicKey: publicKey,
@@ -473,6 +485,7 @@ export async function exportPrivateKey(
 export declare namespace exportPrivateKey {
   type Parameters = {
     iframeContainerId: string
+    iframeStyles?: Record<string, string>
     address?: string
     keyFormat?: 'Hexadecimal' | 'Solana'
     connector?: Connector
@@ -480,3 +493,97 @@ export declare namespace exportPrivateKey {
   type ReturnType = void
   type ErrorType = Error
 }
+
+/**
+ * Send magic link via email
+ */
+export async function sendMagicLink(
+  config: Config,
+  parameters: {
+    email: string
+    redirectURL: string
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
+    connector?: Connector
+  },
+): Promise<{ otpId: string }> {
+  const connector = parameters.connector ?? getZeroDevConnector(config)
+
+  // @ts-expect-error - getStore is a custom method
+  const store = await connector.getStore()
+  const wallet = store.getState().wallet
+
+  if (!wallet) throw new Error('Wallet not initialized')
+
+  const result = await wallet.auth({
+    type: 'magicLink',
+    mode: 'send',
+    email: parameters.email,
+    redirectURL: parameters.redirectURL,
+    ...(parameters.otpCodeCustomization && {
+      otpCodeCustomization: parameters.otpCodeCustomization,
+    }),
+  })
+
+  return {
+    otpId: result.otpId,
+  }
+}
+
+export declare namespace sendMagicLink {
+  type Parameters = {
+    email: string
+    redirectURL: string
+    otpCodeCustomization?: { length: 6 | 7 | 8 | 9; alphanumeric: boolean }
+    connector?: Connector
+  }
+  type ReturnType = { otpId: string }
+  type ErrorType = Error
+}
+
+/**
+ * Verify magic link code
+ */
+export async function verifyMagicLink(
+  config: Config,
+  parameters: {
+    otpId: string
+    code: string
+    connector?: Connector
+  },
+): Promise<void> {
+  const connector = parameters.connector ?? getZeroDevConnector(config)
+
+  // @ts-expect-error - getStore is a custom method
+  const store = await connector.getStore()
+  const wallet = store.getState().wallet
+
+  if (!wallet) throw new Error('Wallet not initialized')
+
+  await wallet.auth({
+    type: 'magicLink',
+    mode: 'verify',
+    otpId: parameters.otpId,
+    code: parameters.code,
+  })
+
+  const [session, eoaAccount] = await Promise.all([
+    wallet.getSession(),
+    wallet.toAccount(),
+  ])
+
+  store.getState().setEoaAccount(eoaAccount)
+  store.getState().setSession(session || null)
+
+  // Auto-connect to Wagmi
+  await wagmiConnect(config, { connector })
+}
+
+export declare namespace verifyMagicLink {
+  type Parameters = {
+    otpId: string
+    code: string
+    connector?: Connector
+  }
+  type ReturnType = void
+  type ErrorType = Error
+}

package/src/hooks/useLoginPasskey.ts

@@ -26,8 +26,8 @@ export function useLoginPasskey<
 
   return useMutation({
     ...mutation,
-    async mutationFn(variables: loginPasskey.Parameters) {
-      return loginPasskey(config, variables)
+    async mutationFn(variables?: loginPasskey.Parameters) {
+      return loginPasskey(config, variables ?? undefined)
     },
     mutationKey: ['loginPasskey'],
   })

package/src/hooks/useRegisterPasskey.ts

@@ -26,8 +26,8 @@ export function useRegisterPasskey<
 
   return useMutation({
     ...mutation,
-    async mutationFn(variables: registerPasskey.Parameters) {
-      return registerPasskey(config, variables)
+    async mutationFn(variables?: registerPasskey.Parameters) {
+      return registerPasskey(config, variables ?? undefined)
     },
     mutationKey: ['registerPasskey'],
   })

package/src/hooks/useSendMagicLink.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { sendMagicLink } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to send a magic link via email
+ */
+export function useSendMagicLink<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useSendMagicLink.Parameters<config, context> = {},
+): useSendMagicLink.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: sendMagicLink.Parameters) {
+      return sendMagicLink(config, variables)
+    },
+    mutationKey: ['sendMagicLink'],
+  })
+}
+
+export declare namespace useSendMagicLink {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          sendMagicLink.ReturnType,
+          sendMagicLink.ErrorType,
+          sendMagicLink.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    sendMagicLink.ReturnType,
+    sendMagicLink.ErrorType,
+    sendMagicLink.Parameters,
+    context
+  >
+}

package/src/hooks/useVerifyMagicLink.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { verifyMagicLink } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to verify a magic link code
+ */
+export function useVerifyMagicLink<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useVerifyMagicLink.Parameters<config, context> = {},
+): useVerifyMagicLink.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: verifyMagicLink.Parameters) {
+      return verifyMagicLink(config, variables)
+    },
+    mutationKey: ['verifyMagicLink'],
+  })
+}
+
+export declare namespace useVerifyMagicLink {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          verifyMagicLink.ReturnType,
+          verifyMagicLink.ErrorType,
+          verifyMagicLink.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    verifyMagicLink.ReturnType,
+    verifyMagicLink.ErrorType,
+    verifyMagicLink.Parameters,
+    context
+  >
+}

package/src/index.ts

@@ -7,7 +7,9 @@ export { useGetUserEmail } from './hooks/useGetUserEmail.js'
 export { useLoginPasskey } from './hooks/useLoginPasskey.js'
 export { useRefreshSession } from './hooks/useRefreshSession.js'
 export { useRegisterPasskey } from './hooks/useRegisterPasskey.js'
+export { useSendMagicLink } from './hooks/useSendMagicLink.js'
 export { useSendOTP } from './hooks/useSendOTP.js'
+export { useVerifyMagicLink } from './hooks/useVerifyMagicLink.js'
 export { useVerifyOTP } from './hooks/useVerifyOTP.js'
 export type { OAuthMessageData, OAuthProvider } from './oauth.js'
 export {

package/src/provider.ts

@@ -151,7 +151,8 @@ export function createProvider({
             throw new Error(`No kernel client for chain ${chainId}`)
           }
 
-          // Send gasless transaction (always UserOp for EIP-7702)
+          // Transactions are sent as UserOperations under the hood (EIP-7702).
+          // Gasless if a paymaster is configured on the ZeroDev dashboard.
           const hash = await kernelClient.sendTransaction({
             calls: [
               {